156 lines
4.8 KiB
JavaScript
156 lines
4.8 KiB
JavaScript
import { LOCAL_STORAGE_KEYS } from '../../../../config/constants';
|
|
import { isCaptcha, isEmail } from "oak-domain/lib/utils/validator";
|
|
const SEND_KEY = LOCAL_STORAGE_KEYS.captchaSendAt;
|
|
const SEND_CAPTCHA_LATENCY = process.env.NODE_ENV === 'development' ? 10 : 60;
|
|
export default OakComponent({
|
|
isList: false,
|
|
projection: {
|
|
id: 1,
|
|
email: 1,
|
|
userId: 1,
|
|
},
|
|
data: {
|
|
counter: 0,
|
|
loading: false,
|
|
lastSendAt: undefined,
|
|
email: '',
|
|
captcha: '',
|
|
validEmail: false,
|
|
validCaptcha: false,
|
|
allowSubmit: false,
|
|
},
|
|
properties: {
|
|
disabled: '',
|
|
url: '', // 登录系统之后要返回的页面
|
|
callback: undefined, // 登录成功回调，排除微信登录方式
|
|
setLoginMode: (value) => undefined,
|
|
digit: 4, //验证码位数
|
|
},
|
|
formData({ features, props }) {
|
|
const { lastSendAt } = this.state;
|
|
let counter = 0;
|
|
if (typeof lastSendAt === 'number') {
|
|
const now = Date.now();
|
|
counter = Math.max(SEND_CAPTCHA_LATENCY - Math.ceil((now - lastSendAt) / 1000), 0);
|
|
if (counter > 0) {
|
|
this.counterHandler = setTimeout(() => this.reRender(), 1000);
|
|
}
|
|
else if (this.counterHandler) {
|
|
clearTimeout(this.counterHandler);
|
|
this.counterHandler = undefined;
|
|
}
|
|
}
|
|
return {
|
|
counter,
|
|
};
|
|
},
|
|
lifetimes: {},
|
|
listeners: {
|
|
'validEmail,validCaptcha'(prev, next) {
|
|
const { allowSubmit } = this.state;
|
|
if (allowSubmit) {
|
|
if (!(next.validEmail && next.validCaptcha)) {
|
|
this.setState({
|
|
allowSubmit: false,
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
if (next.validEmail && next.validCaptcha) {
|
|
this.setState({
|
|
allowSubmit: true,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async sendCaptcha() {
|
|
const { email } = this.state;
|
|
try {
|
|
const result = await this.features.token.sendCaptcha('email', email, 'login');
|
|
// 显示返回消息
|
|
this.setMessage({
|
|
type: 'success',
|
|
content: result,
|
|
});
|
|
const lastSendAt = Date.now();
|
|
await this.save(SEND_KEY, lastSendAt);
|
|
this.setState({
|
|
lastSendAt,
|
|
}, () => this.reRender());
|
|
}
|
|
catch (err) {
|
|
this.setMessage({
|
|
type: 'error',
|
|
content: err.message,
|
|
});
|
|
}
|
|
},
|
|
async loginByEmail() {
|
|
const { url, callback } = this.props;
|
|
const { email, captcha } = this.state;
|
|
try {
|
|
this.setState({
|
|
loading: true,
|
|
});
|
|
await this.features.token.loginByEmail(email, captcha);
|
|
this.setState({
|
|
loading: false,
|
|
});
|
|
if (callback) {
|
|
callback();
|
|
return;
|
|
}
|
|
if (url) {
|
|
this.redirectTo({
|
|
url,
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
catch (err) {
|
|
this.setState({
|
|
loading: false,
|
|
});
|
|
this.setMessage({
|
|
type: 'error',
|
|
content: err.message,
|
|
});
|
|
}
|
|
},
|
|
inputChange(type, value) {
|
|
const { digit } = this.props;
|
|
switch (type) {
|
|
case 'email':
|
|
const validEmail = !!isEmail(value);
|
|
this.setState({
|
|
email: value,
|
|
validEmail,
|
|
});
|
|
break;
|
|
case 'captcha':
|
|
const validCaptcha = !!isCaptcha(value, digit);
|
|
this.setState({
|
|
captcha: value,
|
|
validCaptcha
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
inputChangeMp(event) {
|
|
const { detail, target: { dataset }, } = event;
|
|
const { attr } = dataset;
|
|
const { value } = detail;
|
|
this.inputChange(attr, value);
|
|
},
|
|
changeLoginMp(e) {
|
|
const { setLoginMode } = this.props;
|
|
const { value } = e.currentTarget.dataset;
|
|
setLoginMode && setLoginMode(value);
|
|
}
|
|
},
|
|
});
|