Skip to content

Commit c5f34ab

Browse files
sametkabaysametkabay
committed
login form add less
1 parent 30be383 commit c5f34ab

File tree

2 files changed

+122
-86
lines changed

2 files changed

+122
-86
lines changed

‎reactjs/src/scenes/Login/index.less

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@import '~antd/lib/style/themes/default.less';
2+
3+
.main {
4+
width: 368px;
5+
margin: 0 auto;
6+
@media screen and (max-width: @screen-sm) {
7+
width: 95%;
8+
}
9+
10+
.icon {
11+
font-size: 24px;
12+
color: rgba(0, 0, 0, 0.2);
13+
margin-left: 16px;
14+
vertical-align: middle;
15+
cursor: pointer;
16+
transition: color 0.3s;
17+
18+
&:hover {
19+
color: @primary-color;
20+
}
21+
}
22+
23+
.other {
24+
text-align: left;
25+
margin-top: 24px;
26+
line-height: 22px;
27+
28+
.register {
29+
float: right;
30+
}
31+
}
32+
}

‎reactjs/src/scenes/Login/index.tsx

Lines changed: 90 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { L } from 'src/lib/abpUtility';
99
import SessionStore from 'src/stores/sessionStore';
1010
import AccountStore from 'src/stores/accountStore';
1111
import TenantAvailabilityState from 'src/services/account/dto/tenantAvailabilityState';
12+
import './index.less'
1213

1314
const FormItem = Form.Item;
1415

@@ -71,100 +72,103 @@ class Login extends React.Component<ILoginProps> {
7172
const { loginModel } = this.props.authenticationStore!;
7273
const { getFieldDecorator, getFieldValue } = this.props.form;
7374
return (
74-
<Form className="login-form" onSubmit={this.handleSubmit}>
75-
<Row>
76-
<Row style={{ marginTop: 100 }}>
77-
<Col span={8} offset={8}>
78-
<Card>
75+
<Col className="name">
76+
<Form className="" onSubmit={this.handleSubmit}>
77+
<Row>
78+
<Row style={{ marginTop: 100 }}>
79+
<Col span={8} offset={8}>
80+
<Card>
81+
<Row>
82+
{!!this.props.sessionStore!.currentLogin.tenant ? (
83+
<Col span={24} offset={0} style={{ textAlign: 'center' }}>
84+
<a onClick={loginModel.toggleShowModal}>
85+
{L('CurrentTenant')} : {this.props.sessionStore!.currentLogin.tenant.tenancyName}
86+
</a>
87+
</Col>
88+
) : (
89+
<Col span={24} offset={0} style={{ textAlign: 'center' }}>
90+
<a onClick={loginModel.toggleShowModal}> {L('NotSelected')}</a>
91+
</Col>
92+
)}
93+
</Row>
94+
</Card>
95+
</Col>
96+
</Row>
97+
98+
<Row>
99+
<Modal
100+
visible={loginModel.showModal}
101+
onCancel={loginModel.toggleShowModal}
102+
onOk={this.changeTenant}
103+
title={L('ChangeTenant')}
104+
okText={L('OK')}
105+
cancelText={L('Cancel')}
106+
>
79107
<Row>
80-
{!!this.props.sessionStore!.currentLogin.tenant ? (
81-
<Col span={24} offset={0} style={{ textAlign: 'center' }}>
82-
<a onClick={loginModel.toggleShowModal}>
83-
{L('CurrentTenant')} : {this.props.sessionStore!.currentLogin.tenant.tenancyName}
84-
</a>
85-
</Col>
86-
) : (
87-
<Col span={24} offset={0} style={{ textAlign: 'center' }}>
88-
<a onClick={loginModel.toggleShowModal}> {L('NotSelected')}</a>
89-
</Col>
90-
)}
108+
<Col span={8} offset={8}>
109+
<h3>{L('TenancyName')}</h3>
110+
</Col>
111+
<Col>
112+
<FormItem>
113+
{getFieldDecorator('tenancyName', {})(
114+
<Input placeholder={L('TenancyName')} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large" />
115+
)}
116+
</FormItem>
117+
{!getFieldValue('tenancyName') ? <div>{L('LeaveEmptyToSwitchToHost')}</div> : ''}
118+
</Col>
91119
</Row>
92-
</Card>
93-
</Col>
94-
</Row>
120+
</Modal>
121+
</Row>
122+
<Row style={{ marginTop: 10 }}>
123+
<Col span={8} offset={8}>
124+
<Card>
125+
<div style={{ textAlign: 'center' }}>
126+
<h3>{L('WellcomeMessage')}</h3>
127+
</div>
128+
<FormItem>
129+
{getFieldDecorator('userNameOrEmailAddress', {
130+
rules: [
131+
{
132+
required: true,
133+
message: L('ThisFieldIsRequired'),
134+
},
135+
],
136+
})(<Input placeholder={L('UserNameOrEmail')} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large" />)}
137+
</FormItem>
95138

96-
<Row>
97-
<Modal
98-
visible={loginModel.showModal}
99-
onCancel={loginModel.toggleShowModal}
100-
onOk={this.changeTenant}
101-
title={L('ChangeTenant')}
102-
okText={L('OK')}
103-
cancelText={L('Cancel')}
104-
>
105-
<Row>
106-
<Col span={8} offset={8}>
107-
<h3>{L('TenancyName')}</h3>
108-
</Col>
109-
<Col>
110139
<FormItem>
111-
{getFieldDecorator('tenancyName', {})(
112-
<Input placeholder={L('TenancyName')} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large" />
140+
{getFieldDecorator('password', {
141+
rules: [{ required: true, message: L('ThisFieldIsRequired') }],
142+
})(
143+
<Input
144+
placeholder={L('Password')}
145+
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
146+
type="password"
147+
size="large"
148+
/>
113149
)}
114150
</FormItem>
115-
{!getFieldValue('tenancyName') ? <div>{L('LeaveEmptyToSwitchToHost')}</div> : ''}
116-
</Col>
117-
</Row>
118-
</Modal>
119-
</Row>
120-
<Row style={{ marginTop: 10 }}>
121-
<Col span={8} offset={8}>
122-
<Card>
123-
<div style={{ textAlign: 'center' }}>
124-
<h3>{L('WellcomeMessage')}</h3>
125-
</div>
126-
<FormItem>
127-
{getFieldDecorator('userNameOrEmailAddress', {
128-
rules: [
129-
{
130-
required: true,
131-
message: L('ThisFieldIsRequired'),
132-
},
133-
],
134-
})(<Input placeholder={L('UserNameOrEmail')} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large" />)}
135-
</FormItem>
136-
137-
<FormItem>
138-
{getFieldDecorator('password', {
139-
rules: [{ required: true, message: L('ThisFieldIsRequired') }],
140-
})(
141-
<Input
142-
placeholder={L('Password')}
143-
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
144-
type="password"
145-
size="large"
146-
/>
147-
)}
148-
</FormItem>
149-
<Row style={{ margin: '0px 0px 10px 15px ' }}>
150-
<Col span={12} offset={0}>
151-
<Checkbox checked={loginModel.rememberMe} onChange={loginModel.toggleRememberMe} />
152-
{L('RememberMe')}
153-
<br />
154-
<a>{L('ForgotPassword')}</a>
155-
</Col>
151+
<Row style={{ margin: '0px 0px 10px 15px ' }}>
152+
<Col span={12} offset={0}>
153+
<Checkbox checked={loginModel.rememberMe} onChange={loginModel.toggleRememberMe} />
154+
{L('RememberMe')}
155+
<br />
156+
<a>{L('ForgotPassword')}</a>
157+
</Col>
156158

157-
<Col span={8} offset={4}>
158-
<Button style={{ backgroundColor: '#f5222d', color: 'white' }} htmlType={'submit'} type="danger">
159-
{L('LogIn')}
160-
</Button>
161-
</Col>
162-
</Row>
163-
</Card>
164-
</Col>
159+
<Col span={8} offset={4}>
160+
<Button style={{ backgroundColor: '#f5222d', color: 'white' }} htmlType={'submit'} type="danger">
161+
{L('LogIn')}
162+
</Button>
163+
</Col>
164+
</Row>
165+
</Card>
166+
</Col>
167+
</Row>
165168
</Row>
166-
</Row>
167-
</Form>
169+
</Form>
170+
171+
</Col>
168172
);
169173
}
170174
}

0 commit comments

Comments
 (0)