llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-05-24 08:20:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve login page.

Browse Source
This commit is contained in:
Yang Luo 2021-03-26 21:58:30 +08:00
parent d11bb49eac
commit 437289438f
2 changed files with 98 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/UrlTable.js
View File

@ -95,7 +95,7 @@ class UrlTable extends React.Component {
]; ];
return ( return (
<Table columns={columns} dataSource={table.map(row => ({id: row}))} size="middle" bordered pagination={{pageSize: 100}} <Table rowKey="id" columns={columns} dataSource={table.map(row => ({id: row}))} size="middle" bordered pagination={{pageSize: 100}}
title={() => ( title={() => (
<div> <div>
{this.props.title}&nbsp;&nbsp;&nbsp;&nbsp; {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;

167
web/src/auth/LoginPage.js
View File

@ -108,88 +108,115 @@ class LoginPage extends React.Component {
return Util.renderMessage(this.state.msg) return Util.renderMessage(this.state.msg)
} }
return ( if (application.enablePassword) {
<Form return (
name="normal_login" <Form
initialValues={{ name="normal_login"
organization: application.organization, initialValues={{
remember: true organization: application.organization,
}} remember: true
onFinish={this.onFinish.bind(this)} }}
style={{width: "250px"}} onFinish={this.onFinish.bind(this)}
size="large" style={{width: "250px"}}
> size="large"
<Form.Item style={{height: 0, visibility: "hidden"}}
name="organization"
rules={[{ required: true, message: 'Please input your organization!' }]}
> >
<Input <Form.Item style={{height: 0, visibility: "hidden"}}
prefix={<UserOutlined className="site-form-item-icon" />} name="organization"
placeholder="organization" rules={[{ required: true, message: 'Please input your organization!' }]}
disabled={!application.enablePassword}
/>
</Form.Item>
<Form.Item
name="username"
rules={[{ required: true, message: 'Please input your Username!' }]}
>
<Input
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder="username"
disabled={!application.enablePassword}
/>
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your Password!' }]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="password"
disabled={!application.enablePassword}
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox style={{float: "left"}} disabled={!application.enablePassword}>
Auto login
</Checkbox>
</Form.Item>
<a style={{float: "right"}} href="">
Forgot password?
</a>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
style={{width: "100%"}}
disabled={!application.enablePassword}
> >
Login <Input
</Button> prefix={<UserOutlined className="site-form-item-icon" />}
<div style={{float: "right"}}> placeholder="organization"
No account yet,&nbsp; disabled={!application.enablePassword}
<Link to={"/register"}> />
sign up now </Form.Item>
<Form.Item
name="username"
rules={[{ required: true, message: 'Please input your Username!' }]}
>
<Input
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder="username"
disabled={!application.enablePassword}
/>
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input your Password!' }]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="password"
disabled={!application.enablePassword}
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox style={{float: "left"}} disabled={!application.enablePassword}>
Auto login
</Checkbox>
</Form.Item>
<Link style={{float: "right"}} to="/forgot">
Forgot password?
</Link> </Link>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
style={{width: "100%"}}
disabled={!application.enablePassword}
>
Login
</Button>
{
!application.enableSignUp ? null : (
<div style={{float: "right"}}>
No account yet,&nbsp;
<Link to={"/register"}>
sign up now
</Link>
</div>
)
}
</Form.Item>
<Form.Item>
{
application.providerObjs.map(provider => {
return (
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
<img width={30} height={30} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: "3px"}} />
</a>
);
})
}
</Form.Item>
</Form>
);
} else {
return (
<div style={{marginTop: "20px"}}>
<div style={{fontSize: 20, textAlign: "left"}}>
Please click to login&nbsp;
<a target="_blank" href={application.homepageUrl}>
{application.displayName}
</a>
:
</div> </div>
</Form.Item> <br/>
<Form.Item>
{ {
application.providerObjs.map(provider => { application.providerObjs.map(provider => {
return ( return (
<a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}> <a key={provider.displayName} href={Provider.getAuthUrl(application, provider, "signup")}>
<img width={30} height={30} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: "3px"}} /> <img width={60} height={60} src={Provider.getAuthLogo(provider)} alt={provider.displayName} style={{margin: "10px"}} />
</a> </a>
); );
}) })
} }
</Form.Item> </div>
</Form> )
); }
} }
renderLogo(application) { renderLogo(application) {