Skip to content

Commit 2484f43

Browse files
ryoldashryoldash
committed
Code refactoring
1 parent 34190a8 commit 2484f43

File tree

11 files changed

+132
-104
lines changed

11 files changed

+132
-104
lines changed

‎reactjs/src/models/Login/loginModel.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1+
import { observable } from 'mobx';
2+
13
class LoginModel {
4+
tenancyName: string;
25
userNameOrEmailAddress: string;
36
password: string;
4-
rememberMe: boolean;
7+
@observable rememberMe: boolean;
8+
@observable showModal: boolean;
9+
10+
toggleRememberMe = () => {
11+
this.rememberMe = !this.rememberMe;
12+
};
13+
14+
toggleShowModal = () => {
15+
this.showModal = !this.showModal;
16+
};
517
}
618

719
export default LoginModel;

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

Lines changed: 82 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,164 @@
1-
import { Form, Col, Input, Icon, Row, Checkbox, Button, Card, Modal, message } from 'antd';
1+
import { Form, Col, Input, Icon, Row, Checkbox, Button, Card, Modal } from 'antd';
22
import * as React from 'react';
33
import { inject, observer } from 'mobx-react';
4-
import accountService from 'src/services/account/accountService';
54
import Stores from 'src/stores/storeIdentifier';
65
import AuthenticationStore from 'src/stores/authenticationStore';
76
import { FormComponentProps } from 'antd/lib/form';
87
import { Redirect } from 'react-router-dom';
8+
import { L } from 'src/lib/abpUtility';
9+
import SessionStore from 'src/stores/sessionStore';
10+
import AccountStore from 'src/stores/accountStore';
11+
import TenantAvailabilityState from 'src/services/account/dto/tenantAvailabilityState';
912

1013
const FormItem = Form.Item;
1114

1215
export interface ILoginProps extends FormComponentProps {
1316
authenticationStore?: AuthenticationStore;
17+
sessionStore?: SessionStore;
18+
accountStore?: AccountStore;
1419
history: any;
1520
location: any;
1621
}
1722

18-
@inject(Stores.AuthenticationStore)
23+
@inject(Stores.AuthenticationStore, Stores.SessionStore, Stores.AccountStore)
1924
@observer
20-
class Login extends React.Component<ILoginProps, any> {
21-
constructor(props: ILoginProps) {
22-
super(props);
23-
this.state = {
24-
modalVisible: false,
25-
rememberMe: true,
26-
tenancyName: '',
27-
};
28-
}
29-
30-
rememberMeCheck = () => {
31-
this.setState({ rememberMe: !this.state.rememberMe });
32-
};
25+
class Login extends React.Component<ILoginProps> {
26+
changeTenant = async () => {
27+
debugger;
28+
let tenancyName = this.props.form.getFieldValue('tenancyName');
29+
const { loginModel } = this.props.authenticationStore!;
3330

34-
isTenantAvaible = async () => {
35-
var tenancyName = this.props.form.getFieldValue('tenancyName');
36-
var result = await accountService.isTenantAvailable({ tenancyName: tenancyName });
37-
38-
console.log(result);
39-
if (result.tenantId != null) {
40-
this.setState({ tenancyName: tenancyName });
41-
this.onModal();
31+
if (!tenancyName) {
32+
abp.multiTenancy.setTenantIdCookie(undefined);
33+
window.location.href = '/';
34+
return;
4235
} else {
43-
message.error('Tenant Bulunamadı');
36+
await this.props.accountStore!.isTenantAvailable(tenancyName);
37+
const { tenant } = this.props.accountStore!;
38+
switch (tenant.state) {
39+
case TenantAvailabilityState.Available:
40+
abp.multiTenancy.setTenantIdCookie(tenant.tenantId);
41+
loginModel.tenancyName = tenancyName;
42+
loginModel.toggleShowModal();
43+
window.location.href = '/';
44+
return;
45+
case TenantAvailabilityState.InActive:
46+
Modal.error({ title: L('Error'), content: L('TenantIsNotActive') });
47+
break;
48+
case TenantAvailabilityState.NotFound:
49+
Modal.error({ title: L('Error'), content: L('ThereIsNoTenantDefinedWithName{0}', tenancyName) });
50+
break;
51+
}
4452
}
4553
};
4654

4755
handleSubmit = async (e: any) => {
4856
e.preventDefault();
57+
const { loginModel } = this.props.authenticationStore!;
4958
await this.props.form.validateFields(async (err: any, values: any) => {
5059
if (!err) {
5160
await this.props.authenticationStore!.login(values);
52-
sessionStorage.setItem('rememberMe', this.state.rememberMe ? '1' : '0');
61+
sessionStorage.setItem('rememberMe', loginModel.rememberMe ? '1' : '0');
5362
const { state } = this.props.location;
5463
window.location = state ? state.from.pathname : '/';
5564
}
5665
});
5766
};
58-
onModal = () => {
59-
this.setState({ modalVisible: !this.state.modalVisible });
60-
};
6167

6268
public render() {
6369
let { from } = this.props.location.state || { from: { pathname: '/' } };
6470
if (this.props.authenticationStore!.isAuthenticated) return <Redirect to={from} />;
6571

66-
const { getFieldDecorator } = this.props.form;
72+
const { loginModel } = this.props.authenticationStore!;
73+
const { getFieldDecorator, getFieldValue } = this.props.form;
74+
debugger;
6775
return (
6876
<Form className="login-form" onSubmit={this.handleSubmit}>
6977
<Row style={{ height: '100vh', backgroundColor: '#00bcd4' }}>
7078
<Row style={{ marginTop: 100 }}>
71-
<Col
72-
xs={{ span: 8, offset: 8 }}
73-
sm={{ span: 8, offset: 8 }}
74-
md={{ span: 8, offset: 8 }}
75-
lg={{ span: 8, offset: 8 }}
76-
xl={{ span: 8, offset: 8 }}
77-
xxl={{ span: 8, offset: 8 }}
78-
>
79+
<Col span={8} offset={8}>
7980
<Card>
8081
<Row>
81-
<Col
82-
xs={{ span: 24, offset: 0 }}
83-
sm={{ span: 24, offset: 0 }}
84-
md={{ span: 24, offset: 0 }}
85-
lg={{ span: 24, offset: 0 }}
86-
xl={{ span: 24, offset: 0 }}
87-
xxl={{ span: 24, offset: 0 }}
88-
style={{ textAlign: 'center' }}
89-
>
90-
Current Tenant : {this.state.tenancyName} <a onClick={this.onModal}>(Change)</a>
91-
</Col>
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+
)}
9293
</Row>
9394
</Card>
9495
</Col>
9596
</Row>
9697

9798
<Row>
98-
<Modal visible={this.state.modalVisible} onCancel={this.onModal} onOk={this.isTenantAvaible}>
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+
>
99107
<Row>
100-
<Col
101-
xs={{ span: 8, offset: 8 }}
102-
sm={{ span: 8, offset: 8 }}
103-
md={{ span: 8, offset: 8 }}
104-
lg={{ span: 8, offset: 8 }}
105-
xl={{ span: 8, offset: 8 }}
106-
xxl={{ span: 8, offset: 8 }}
107-
style={{ textAlign: 'center' }}
108-
>
109-
<h3>{'Tenant Name'}</h3>
108+
<Col span={8} offset={8}>
109+
<h3>{L('TenancyName')}</h3>
110110
</Col>
111111
<Col>
112112
<FormItem>
113113
{getFieldDecorator('tenancyName', {})(
114-
<Input placeholder={'Tenant Name'} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large" />
114+
<Input placeholder={L('TenancyName')} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large" />
115115
)}
116116
</FormItem>
117+
{!getFieldValue('tenancyName') ? <div>{L('LeaveEmptyToSwitchToHost')}</div> : ''}
117118
</Col>
118119
</Row>
119120
</Modal>
120121
</Row>
121122
<Row style={{ marginTop: 10 }}>
122-
<Col
123-
xs={{ span: 8, offset: 8 }}
124-
sm={{ span: 8, offset: 8 }}
125-
md={{ span: 8, offset: 8 }}
126-
lg={{ span: 8, offset: 8 }}
127-
xl={{ span: 8, offset: 8 }}
128-
xxl={{ span: 8, offset: 8 }}
129-
>
123+
<Col span={8} offset={8}>
130124
<Card>
131125
<div style={{ textAlign: 'center' }}>
132-
<h3>{'Login'}</h3>
126+
<h3>{L('WellcomeMessage')}</h3>
133127
</div>
134128
<FormItem>
135129
{getFieldDecorator('userNameOrEmailAddress', {
136130
rules: [
137131
{
138132
required: true,
139-
message: 'User Name is required.',
133+
message: L('ThisFieldIsRequired'),
140134
},
141135
],
136+
})(<Input placeholder={L('UserNameOrEmail')} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large" />)}
137+
</FormItem>
138+
139+
<FormItem>
140+
{getFieldDecorator('password', {
141+
rules: [{ required: true, message: L('ThisFieldIsRequired') }],
142142
})(
143143
<Input
144-
placeholder={'Kullanıcı adı veya mail adresi'}
145-
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
144+
placeholder={L('Password')}
145+
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
146+
type="password"
146147
size="large"
147148
/>
148149
)}
149150
</FormItem>
150-
151-
<FormItem>
152-
{getFieldDecorator('password', {
153-
rules: [{ required: true, message: 'Password is is required.' }],
154-
})(<Input placeholder={'Şifre'} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" size="large" />)}
155-
</FormItem>
156151
<Row style={{ margin: '0px 0px 10px 15px ' }}>
157-
<Col
158-
xs={{ span: 12, offset: 0 }}
159-
sm={{ span: 12, offset: 0 }}
160-
md={{ span: 12, offset: 0 }}
161-
lg={{ span: 12, offset: 0 }}
162-
xl={{ span: 12, offset: 0 }}
163-
xxl={{ span: 12, offset: 0 }}
164-
>
165-
<Checkbox checked={this.state.rememberMe} onChange={this.rememberMeCheck} />
166-
{'RememberMe'}
152+
<Col span={12} offset={0}>
153+
<Checkbox checked={loginModel.rememberMe} onChange={loginModel.toggleRememberMe} />
154+
{L('RememberMe')}
155+
<br />
156+
<a>{L('ForgotPassword')}</a>
167157
</Col>
168-
<Col
169-
xs={{ span: 8, offset: 4 }}
170-
sm={{ span: 8, offset: 4 }}
171-
md={{ span: 8, offset: 4 }}
172-
lg={{ span: 8, offset: 4 }}
173-
xl={{ span: 8, offset: 4 }}
174-
xxl={{ span: 8, offset: 4 }}
175-
>
158+
159+
<Col span={8} offset={4}>
176160
<Button style={{ backgroundColor: '#f5222d', color: 'white' }} htmlType={'submit'} type="danger">
177-
Login
161+
{L('LogIn')}
178162
</Button>
179163
</Col>
180164
</Row>

‎reactjs/src/scenes/Login/index.validation.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// const rules = [];
2+
3+
// export default rules;

‎reactjs/src/services/account/accountService.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { IsTenantAvaibleInput } from './dto/isTenantAvailableInput';
22
import { RegisterInput } from './dto/registerInput';
3-
import { IsTenantAvaibleOutput } from './dto/isTenantAvailableOutput';
3+
import IsTenantAvaibleOutput from './dto/isTenantAvailableOutput';
44
import { RegisterOutput } from './dto/registerOutput';
55
import http from '../httpService';
66

‎reactjs/src/services/account/dto/isTenantAvailableOutput.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export interface IsTenantAvaibleOutput {
2-
state: number;
1+
import TenantAvailabilityState from './tenantAvailabilityState';
2+
3+
export default class IsTenantAvaibleOutput {
4+
state: TenantAvailabilityState;
35
tenantId: number;
46
}

‎reactjs/src/services/account/dto/tenantAvailabilityState.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
enum TenantAvailabilityState {
2+
Available = 1,
3+
InActive,
4+
NotFound,
5+
}
6+
7+
export default TenantAvailabilityState;

‎reactjs/src/stores/accountStore.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { observable, action } from 'mobx';
2+
import IsTenantAvaibleOutput from 'src/services/account/dto/isTenantAvailableOutput';
3+
import accountService from 'src/services/account/accountService';
4+
5+
class AccountStore {
6+
@observable tenant: IsTenantAvaibleOutput = new IsTenantAvaibleOutput();
7+
8+
@action
9+
public isTenantAvailable = async (tenancyName: string) => {
10+
this.tenant = await accountService.isTenantAvailable({ tenancyName: tenancyName });
11+
};
12+
}
13+
14+
export default AccountStore;

‎reactjs/src/stores/authenticationStore.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { action } from 'mobx';
1+
import { action, observable } from 'mobx';
22
import tokenAuthService from 'src/services/tokenAuth/tokenAuthService';
33
import AppConsts from './../lib/appconst';
44
import LoginModel from 'src/models/Login/loginModel';
55

66
class AuthenticationStore {
7+
@observable loginModel: LoginModel = new LoginModel();
8+
79
get isAuthenticated(): boolean {
810
if (!abp.session.userId) return false;
911

‎reactjs/src/stores/sessionStore.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ class SessionStore {
77

88
@action
99
async getCurrentLoginInformations() {
10-
var result = await sessionService.getCurrentLoginInformations();
10+
let result = await sessionService.getCurrentLoginInformations();
1111
this.currentLogin = result;
1212
}
1313
}

‎reactjs/src/stores/storeIdentifier.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import TenantStore from './tenantStore';
33
import UserStore from './userStore';
44
import SessionStore from './sessionStore';
55
import AuthenticationStore from './authenticationStore';
6+
import AccountStore from './accountStore';
67

78
export default class Stores {
89
static AuthenticationStore: string = getName(AuthenticationStore);
910
static RoleStore: string = getName(RoleStore);
1011
static TenantStore: string = getName(TenantStore);
1112
static UserStore: string = getName(UserStore);
1213
static SessionStore: string = getName(SessionStore);
14+
static AccountStore: string = getName(AccountStore);
1315
}
1416

1517
function getName(store: any): string {

0 commit comments

Comments
 (0)