aio-login 8.0.1 → 8.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +0 -1
- package/index.js +358 -1
- package/package.json +1 -1
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1 +1,358 @@
|
|
|
1
|
-
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { useEffect, useRef, useState } from "react";
|
|
11
|
+
import AIOInput from "aio-input";
|
|
12
|
+
import { AddToAttrs, Storage } from "aio-utils";
|
|
13
|
+
import { Loading, Alert } from "aio-popup";
|
|
14
|
+
import axios from "axios";
|
|
15
|
+
import './index.css';
|
|
16
|
+
export function AIOLogin_updateCatchedUser(loginId, newUser) {
|
|
17
|
+
const storage = new Storage('ai-login' + loginId);
|
|
18
|
+
const storedData = storage.load('data');
|
|
19
|
+
if (!storedData) {
|
|
20
|
+
return newUser;
|
|
21
|
+
}
|
|
22
|
+
const newStoredData = Object.assign(Object.assign({}, storedData), { user: newUser });
|
|
23
|
+
return storage.save('data', newStoredData);
|
|
24
|
+
}
|
|
25
|
+
const AILogin = (props) => {
|
|
26
|
+
const { translate = () => { }, otpLength = 4 } = props;
|
|
27
|
+
const { validation = () => { return undefined; } } = props;
|
|
28
|
+
const [data, setData] = useState();
|
|
29
|
+
const [storage] = useState(new Storage('ai-login' + props.id));
|
|
30
|
+
const [model, setModel] = useState(getModel);
|
|
31
|
+
const [loading] = useState(new Loading());
|
|
32
|
+
const [submitDisabled, setSubmitDisabled] = useState(false);
|
|
33
|
+
const modelRef = useRef(model);
|
|
34
|
+
modelRef.current = model;
|
|
35
|
+
console.log(modelRef.current);
|
|
36
|
+
const [mode, setMode] = useState(getMode());
|
|
37
|
+
function getModeKey() {
|
|
38
|
+
if (props.mode) {
|
|
39
|
+
return props.mode;
|
|
40
|
+
}
|
|
41
|
+
if (props.userpass) {
|
|
42
|
+
return 'userpass';
|
|
43
|
+
}
|
|
44
|
+
if (props.otp) {
|
|
45
|
+
return 'otpnumber';
|
|
46
|
+
}
|
|
47
|
+
return 'userpass';
|
|
48
|
+
}
|
|
49
|
+
function getMode(mode) {
|
|
50
|
+
let res = { inputs: () => null, key: mode || getModeKey(), title: null, submitText: '', shouldReturnsUserAndToken: false };
|
|
51
|
+
if (res.key === 'userpass') {
|
|
52
|
+
res.inputs = () => {
|
|
53
|
+
return (<>
|
|
54
|
+
{getInput({ mode: res.key, field: 'username', type: 'text' })}
|
|
55
|
+
{getInput({ mode: res.key, field: 'password', type: 'text' })}
|
|
56
|
+
</>);
|
|
57
|
+
};
|
|
58
|
+
res.shouldReturnsUserAndToken = true;
|
|
59
|
+
}
|
|
60
|
+
else if (res.key === 'register') {
|
|
61
|
+
if (props.register) {
|
|
62
|
+
const inputs = (props.register.inputs || (() => []))(modelRef.current) || [];
|
|
63
|
+
res.inputs = () => {
|
|
64
|
+
return (<>
|
|
65
|
+
{getInput({ mode: res.key, field: 'username', type: 'text' })}
|
|
66
|
+
{getInput({ mode: res.key, field: 'password', type: 'password' })}
|
|
67
|
+
{getInput({ mode: res.key, field: 'repassword', type: 'password' })}
|
|
68
|
+
{inputs.map((input) => getInput({ mode: res.key, field: input.field, type: input.type, inputProps: input }))}
|
|
69
|
+
</>);
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
else if (res.key === 'otpnumber') {
|
|
74
|
+
res.inputs = () => getInput({ mode: res.key, field: 'otpnumber', type: 'text' });
|
|
75
|
+
}
|
|
76
|
+
else if (res.key === 'otpcode') {
|
|
77
|
+
res.inputs = () => getInput({ mode: res.key, field: 'otpcode', type: 'text' });
|
|
78
|
+
res.shouldReturnsUserAndToken = true;
|
|
79
|
+
}
|
|
80
|
+
res.submitText = trans(res.key + 'Button');
|
|
81
|
+
res.title = <div className="ai-login-title">{trans(res.key + 'Title')}</div>;
|
|
82
|
+
return res;
|
|
83
|
+
}
|
|
84
|
+
function getInput(p) {
|
|
85
|
+
const inputProps = p.inputProps || {};
|
|
86
|
+
let model = modelRef.current;
|
|
87
|
+
if (p.mode === 'register') {
|
|
88
|
+
model = model.register;
|
|
89
|
+
}
|
|
90
|
+
const { maxLength = { otpnumber: 11, otpcode: otpLength }[p.mode], filter = p.mode === 'otpnumber' || p.mode === 'otpcode' ? ['number'] : undefined, preview = p.field === 'password', rtl = !!props.fa, label = props.label(p.field) } = inputProps;
|
|
91
|
+
const inputAttrs = Object.assign(Object.assign({}, inputProps), { 'aria-label': `aio-login-${p.field}` });
|
|
92
|
+
const onChange = (v) => {
|
|
93
|
+
let model = modelRef.current;
|
|
94
|
+
if (p.mode === 'register') {
|
|
95
|
+
setModel(Object.assign(Object.assign({}, model), { register: Object.assign(Object.assign({}, model.register), { [p.field]: v }) }));
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
setModel(Object.assign(Object.assign({}, model), { [p.field]: v }));
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
return (<AIOInput {...Object.assign(Object.assign({}, inputProps), { maxLength, filter, preview, rtl, label, onChange, inputAttrs })} key={`${p.mode}-${p.field}`} value={model[p.field]} type={p.type}/>);
|
|
102
|
+
}
|
|
103
|
+
function getModel() {
|
|
104
|
+
var _a;
|
|
105
|
+
let model = { username: '', password: '', otpnumber: '', otpcode: '', register: { username: '', password: '', repassword: '' } };
|
|
106
|
+
if (!props.register) {
|
|
107
|
+
return model;
|
|
108
|
+
}
|
|
109
|
+
if ((_a = props.register) === null || _a === void 0 ? void 0 : _a.defaultValue) {
|
|
110
|
+
let register = {};
|
|
111
|
+
for (let prop in props.register.defaultValue) {
|
|
112
|
+
register[prop] = props.register.defaultValue[prop];
|
|
113
|
+
}
|
|
114
|
+
model.register = register;
|
|
115
|
+
}
|
|
116
|
+
return model;
|
|
117
|
+
}
|
|
118
|
+
const [waitingCheckToken, setWeightingCheckToken] = useState(true);
|
|
119
|
+
const [splashing, setSplashing] = useState(!!props.splash);
|
|
120
|
+
function trans(key) {
|
|
121
|
+
const dic = {
|
|
122
|
+
registerButton: { en: 'Register', fa: 'ثبت نام' },
|
|
123
|
+
userpassButton: { en: 'Login', fa: 'ورود' },
|
|
124
|
+
otpnumberButton: { en: 'Send Number', fa: 'ارسال شماره همراه' },
|
|
125
|
+
otpcodeButton: { en: 'Login', fa: 'ورود' },
|
|
126
|
+
registerTitle: { en: 'Register', fa: 'ثبت نام' },
|
|
127
|
+
userpassTitle: { en: 'Login', fa: 'ورود' },
|
|
128
|
+
otpcodeTitle: { en: 'OTP Code', fa: 'کد یکبار مصرف' },
|
|
129
|
+
otpnumberTitle: { en: 'Phone Number', fa: 'شماره همراه' },
|
|
130
|
+
switchuserpass: { en: 'login by user name', fa: 'ورود با نام کاربری' },
|
|
131
|
+
switchregister: { en: 'Go To Register', fa: 'ثبت نام' },
|
|
132
|
+
switchotp: { en: 'login by otp', fa: 'ورود با رمز یکبار مصرف' },
|
|
133
|
+
repasswordMatch: { en: 'Password is not match with Re password', fa: 'رمز عبور با تکرار آن مطابقت ندارد' },
|
|
134
|
+
usernameRequired: { en: 'User Name is required', fa: 'نام کاربری ضروری است' },
|
|
135
|
+
passwordRequired: { en: 'password is required', fa: 'رمز عبور ضروری است' },
|
|
136
|
+
repasswordRequired: { en: 'Re Password is required', fa: 'تکرار رمز عبور ضروری است' },
|
|
137
|
+
otpnumberRequired: { en: 'Phone Number is required', fa: 'شماره همراه ضروری است' },
|
|
138
|
+
otpcodeLength: { en: `otp code should be ${otpLength} digit`, fa: `کد یکبار مصرف باید ${otpLength} رقم باشد` },
|
|
139
|
+
registerError: { en: 'Registeration failed', fa: 'ثبت نام با خطا روبرو شد' },
|
|
140
|
+
userpassError: { en: 'login by username failed', fa: 'ورود با نام کاربری با خطا روبرو شد' },
|
|
141
|
+
otpcodeError: { en: 'login by otp failed', fa: 'ورود با کد یکبار مصرف با خطا روبرو شد' },
|
|
142
|
+
otpnumberError: { en: 'send otp number for receive otp code failed', fa: 'ارسال شماره همراه برای دریافت کد یکبار مصرف با خطا روبرو شد' },
|
|
143
|
+
};
|
|
144
|
+
return props.fa ? dic[key].fa : translate(key) || dic[key].en;
|
|
145
|
+
}
|
|
146
|
+
function success_1(response, mode) {
|
|
147
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
148
|
+
if (!props.userpass) {
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
const { onSuccess } = yield props.userpass.api(modelRef.current, 'userpass');
|
|
152
|
+
loading.show('login0');
|
|
153
|
+
const res = yield onSuccess(response);
|
|
154
|
+
loading.hide('login0');
|
|
155
|
+
if (typeof res !== 'object' || !res.user || typeof res.token !== 'string') {
|
|
156
|
+
const message = `onSuccess of props.${mode}.${mode === 'userpass' ? 'api' : 'codeApi'} should returns {user:any,token:string}`;
|
|
157
|
+
setAlert({ type: 'error', text: trans(`${mode}Error`), subtext: message });
|
|
158
|
+
}
|
|
159
|
+
else {
|
|
160
|
+
if (res.message) {
|
|
161
|
+
setAlert({ type: 'success', text: res.message });
|
|
162
|
+
}
|
|
163
|
+
const { user, token } = res;
|
|
164
|
+
storage.save('data', { user, token });
|
|
165
|
+
setData({ user, token });
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
function success_2(response, mode) {
|
|
170
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
171
|
+
if (!props.userpass) {
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
const { onSuccess } = yield props.userpass.api(modelRef.current, 'userpass');
|
|
175
|
+
loading.show('login0');
|
|
176
|
+
const res = yield onSuccess(response);
|
|
177
|
+
loading.hide('login0');
|
|
178
|
+
if (res.message) {
|
|
179
|
+
setAlert({ type: 'success', text: res.message });
|
|
180
|
+
}
|
|
181
|
+
if (mode === 'otpnumber') {
|
|
182
|
+
setMode(getMode('otpcode'));
|
|
183
|
+
}
|
|
184
|
+
else {
|
|
185
|
+
setTimeout(() => window.location.reload(), 1000);
|
|
186
|
+
}
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
function success(response) {
|
|
190
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
191
|
+
if (mode.key === 'userpass' || mode.key === 'otpcode') {
|
|
192
|
+
success_1(response, mode.key);
|
|
193
|
+
}
|
|
194
|
+
else {
|
|
195
|
+
success_2(response, mode.key);
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
function submit() {
|
|
200
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
201
|
+
loading.show('login0');
|
|
202
|
+
const { url, method, body, onCatch } = yield props[mode.key].api(modelRef.current, mode.key);
|
|
203
|
+
loading.hide('login0');
|
|
204
|
+
axios[method](url, body).then(success).catch(response => {
|
|
205
|
+
if (onCatch) {
|
|
206
|
+
setAlert({ type: 'error', text: 'Error', subtext: onCatch(response) });
|
|
207
|
+
}
|
|
208
|
+
else if (response.message) {
|
|
209
|
+
setAlert({ type: 'error', text: 'Error', subtext: response.message });
|
|
210
|
+
}
|
|
211
|
+
});
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
function changeMode(mode) { setModel(getModel()); setMode(getMode(mode)); }
|
|
215
|
+
function mode_props(key) { return { className: 'ai-login-mode', onClick: () => changeMode(key) }; }
|
|
216
|
+
function mode_layout() {
|
|
217
|
+
return (<div className="ai-login-modes">
|
|
218
|
+
{props.userpass && mode.key !== 'userpass' && <button {...mode_props('userpass')}>{trans('switchuserpass')}</button>}
|
|
219
|
+
{props.register && mode.key !== 'register' && <button {...mode_props('register')}>{trans('switchregister')}</button>}
|
|
220
|
+
{props.otp && mode.key !== 'otpnumber' && <button {...mode_props('otpnumber')}>{trans('switchotp')}</button>}
|
|
221
|
+
</div>);
|
|
222
|
+
}
|
|
223
|
+
function validate() {
|
|
224
|
+
const model = modelRef.current;
|
|
225
|
+
if (mode.key === 'otpcode') {
|
|
226
|
+
if ((model.otpcode || '').length !== otpLength) {
|
|
227
|
+
return trans('otpcodeLength');
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
if (mode.key === 'otpnumber') {
|
|
231
|
+
if (!model.otpnumber) {
|
|
232
|
+
return trans('otpnumberRequired');
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
if (mode.key === 'userpass') {
|
|
236
|
+
if (!model.username) {
|
|
237
|
+
return trans('usernameRequired');
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
if (mode.key === 'register') {
|
|
241
|
+
if (!model.register.username) {
|
|
242
|
+
return trans('usernameRequired');
|
|
243
|
+
}
|
|
244
|
+
if (!model.register.password) {
|
|
245
|
+
return trans('passwordRequired');
|
|
246
|
+
}
|
|
247
|
+
if (!model.register.repassword) {
|
|
248
|
+
return trans('repasswordRequired');
|
|
249
|
+
}
|
|
250
|
+
if (model.register.password !== model.register.repassword) {
|
|
251
|
+
return trans('repasswordMatch');
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
return validation(model, mode.key);
|
|
255
|
+
}
|
|
256
|
+
function submit_layout() {
|
|
257
|
+
const message = validate();
|
|
258
|
+
return (<>
|
|
259
|
+
<div className="ai-login-errors">
|
|
260
|
+
{!!message && <div className="ai-login-error">{message}</div>}
|
|
261
|
+
</div>
|
|
262
|
+
<button className='ai-login-submit' disabled={!!message || !!submitDisabled} onClick={() => {
|
|
263
|
+
setSubmitDisabled(true);
|
|
264
|
+
setTimeout(() => setSubmitDisabled(false), 3000);
|
|
265
|
+
submit();
|
|
266
|
+
}}>{mode.submitText}</button>
|
|
267
|
+
</>);
|
|
268
|
+
}
|
|
269
|
+
function form_layout() {
|
|
270
|
+
const { title, inputs } = mode;
|
|
271
|
+
return (<div className="ai-login-form">{title}{inputs()}{submit_layout()}{mode_layout()}</div>);
|
|
272
|
+
}
|
|
273
|
+
const bf_layout = (type) => {
|
|
274
|
+
const fn = props[type];
|
|
275
|
+
let content = null;
|
|
276
|
+
if (fn) {
|
|
277
|
+
content = fn(mode.key);
|
|
278
|
+
}
|
|
279
|
+
return (<div className={`ai-login-${type}`}>{content}</div>);
|
|
280
|
+
};
|
|
281
|
+
function logout() { storage.remove('data'); window.location.reload(); }
|
|
282
|
+
function CheckToken() {
|
|
283
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
284
|
+
if (props.splash) {
|
|
285
|
+
setTimeout(() => { setSplashing(false); }, props.splash.time);
|
|
286
|
+
}
|
|
287
|
+
if (props.mock) {
|
|
288
|
+
setData({ user: props.mock.user, token: props.mock.token });
|
|
289
|
+
return;
|
|
290
|
+
}
|
|
291
|
+
const storedData = storage.load('data', {}), { user, token } = storedData;
|
|
292
|
+
loading.show('login0');
|
|
293
|
+
const { url, method, onSuccess, onCatch } = yield props.checkToken(token || '');
|
|
294
|
+
loading.hide('login0');
|
|
295
|
+
if (user && token) {
|
|
296
|
+
axios[method](url, { headers: { authorization: `Bearer ${token}` } })
|
|
297
|
+
.then(response => {
|
|
298
|
+
let res;
|
|
299
|
+
try {
|
|
300
|
+
res = onSuccess(response);
|
|
301
|
+
}
|
|
302
|
+
catch (err) {
|
|
303
|
+
setAlert({ type: 'error', text: 'checkToken failed', subtext: err.message });
|
|
304
|
+
return;
|
|
305
|
+
}
|
|
306
|
+
if (res === true) {
|
|
307
|
+
setData({ user, token });
|
|
308
|
+
}
|
|
309
|
+
else if (res === false) {
|
|
310
|
+
logout();
|
|
311
|
+
}
|
|
312
|
+
else {
|
|
313
|
+
setAlert({ type: 'error', text: 'checkToken failed', subtext: 'checkToken props should return string as error or true as token is valid and false as token is invalid' });
|
|
314
|
+
}
|
|
315
|
+
})
|
|
316
|
+
.catch(response => {
|
|
317
|
+
let res, message = '';
|
|
318
|
+
try {
|
|
319
|
+
res = onCatch(response);
|
|
320
|
+
}
|
|
321
|
+
catch (err) {
|
|
322
|
+
message = err.message;
|
|
323
|
+
}
|
|
324
|
+
if (typeof res === 'string') {
|
|
325
|
+
message = res;
|
|
326
|
+
}
|
|
327
|
+
else if (res === false) {
|
|
328
|
+
logout();
|
|
329
|
+
}
|
|
330
|
+
else {
|
|
331
|
+
message = 'AILogin checkToken onCatch props should returns string as error or false as invalid token';
|
|
332
|
+
}
|
|
333
|
+
if (message) {
|
|
334
|
+
setAlert({ type: 'error', text: 'checkToken failed', subtext: message });
|
|
335
|
+
}
|
|
336
|
+
else if (response.message) {
|
|
337
|
+
setAlert({ type: 'error', text: 'Error', subtext: response.message });
|
|
338
|
+
}
|
|
339
|
+
});
|
|
340
|
+
}
|
|
341
|
+
setWeightingCheckToken(false);
|
|
342
|
+
});
|
|
343
|
+
}
|
|
344
|
+
useEffect(() => { CheckToken(); }, []);
|
|
345
|
+
function setAlert(p) { Alert(p); }
|
|
346
|
+
function getContent() {
|
|
347
|
+
if (waitingCheckToken || splashing) {
|
|
348
|
+
return props.splash ? props.splash.html : null;
|
|
349
|
+
}
|
|
350
|
+
if (!data) {
|
|
351
|
+
const attrs = AddToAttrs(props.attrs, { className: 'ai-login', style: { direction: !!props.fa ? 'rtl' : undefined } });
|
|
352
|
+
return (<div {...attrs}>{bf_layout('before')} {form_layout()} {bf_layout('after')}</div>);
|
|
353
|
+
}
|
|
354
|
+
return props.renderApp({ token: data.token, user: data.user, logout });
|
|
355
|
+
}
|
|
356
|
+
return (<>{getContent()}</>);
|
|
357
|
+
};
|
|
358
|
+
export default AILogin;
|