vic/vic-user-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Login & Register

Browse Source
This commit is contained in:
Limo Saplf
2019-09-01 21:56:21 +08:00
parent d9a8408535
commit 4480fc8e19
12 changed files with 231 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AccountItem/index.tsx
View File

@@ -26,7 +26,7 @@ const AccountItem: React.FC<AccountItemProps> = ({
<div className={`${styles.item} ${className}`} onClick={onClick}>
<span className={styles.title}>{titleText}</span>
<span className={styles.message}>{message}</span>
<span className={styles.preview}>{preview}</span>
{preview && <span className={styles.preview}>{preview}</span>}
{showGo && <Icon className={styles.go} type="right" />}
</div>
);

3
src/components/AccountItem/style.less
View File

@@ -26,6 +26,9 @@
flex-basis: 0;
margin: 0 10px;
color: @primary-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview {

12
src/locales/en-US.ts
View File

@@ -8,6 +8,7 @@ export default {
'common.phoneHolder': 'Please input phone number',
'common.pwdHolder': 'Please input password',
'common.codeHolder': '请输入验证码',
'common.next': 'Next',
'common.pullToRefresh': 'Pull to refresh',
'common.releaseToRefresh': 'Release to refresh',
@@ -24,6 +25,17 @@ export default {
'check.msgArea': 'Please select area',
'check.msgPhone': 'Please input correct phone number',
'check.msgPwd': '请输入正确的密码',
'check.msgCode': '请输入验证码',
'check.msgConfirm': '两次输入密码不一致',
'check.msgInviter': '请输入邀请码',
'check.titleRegister': '新用户注册',
'check.titleReset': '重置密码',
'check.getCode1': '获取验证码',
'check.getCode2': '{time}秒',
'check.getCode3': '重新获取',
'check.setPwd': '设置登录密码',
'check.confirmPwd': '确认登录密码',
'check.invite': '邀请码',
'home.tabHome': 'Home',
'home.tabEstate': '矿场',

12
src/locales/zh-CN.ts
View File

@@ -8,6 +8,7 @@ export default {
'common.phoneHolder': '请输入手机号',
'common.pwdHolder': '请输入密码',
'common.codeHolder': '请输入验证码',
'common.next': '下一步',
'common.pullToRefresh': '下拉刷新',
'common.releaseToRefresh': '释放以刷新',
@@ -24,6 +25,17 @@ export default {
'check.msgArea': '请选择区号',
'check.msgPhone': '请输入正确的手机号',
'check.msgPwd': '请输入正确的密码',
'check.msgCode': '请输入验证码',
'check.msgConfirm': '两次输入密码不一致',
'check.msgInviter': '请输入邀请码',
'check.titleRegister': '新用户注册',
'check.titleReset': '重置密码',
'check.getCode1': '获取验证码',
'check.getCode2': '{time} 秒后重新发送',
'check.getCode3': '重新获取',
'check.setPwd': '设置登录密码',
'check.confirmPwd': '确认登录密码',
'check.invite': '邀请码',
'home.tabHome': '首页',
'home.tabEstate': '矿场',

23
src/pages/check/index.tsx
View File

@@ -40,22 +40,35 @@ const Page: React.FC<DispatchProp & CheckModelState> = ({
);
}
let title;
if (pageStep === PageStep.Register) {
title = formatMessage({ id: 'check.titleRegister' });
} else if (pageStep === PageStep.Reset || pageStep === PageStep.ResetSuccess) {
title = formatMessage({ id: 'check.titleReset' });
}
return (
<div className={styles.check}>
{
pageStep !== PageStep.Check &&
<Header
title={title}
className={styles.header}
onReturn={() => dispatch({ type: 'check/back' })}
/>
}
<div className="cover">
<div className="image">
<FittedImage fit="contain" src={bgPic} />
{(
pageStep === PageStep.Check ||
pageStep === PageStep.Login
) && (
<div className="cover">
<div className="image">
<FittedImage fit="contain" src={bgPic} />
</div>
<span>{formatMessage({ id: 'app.name' })}</span>
</div>
<span>{formatMessage({ id: 'app.name' })}</span>
</div>
)}
{{
[PageStep.Check]: <CheckPage />,

2
src/pages/check/login.tsx
View File

@@ -21,7 +21,7 @@ const LoginPage: React.FC<DispatchProp & CheckModelState> = ({
/>
<Button
className="item gradient"
className="item gradient submit"
type="primary"
loading={submitting}
onClick={() => dispatch({ type: 'check/submitLogin' })}

66
src/pages/check/model.ts
View File

@@ -5,7 +5,7 @@ import { delay } from 'dva/saga';
import { PageState, AreaCode, AreaCodes } from '@/types/common';
import { getAreaCodes, getUserInfo } from '@/services/common';
import { validPhoneInput, validPwdInput, validPhone, validPwd } from '@/utils/validate';
import { checkExistence, CheckResult, signIn } from './service';
import { checkExistence, CheckResult, signIn, signUp, sendCode } from './service';
import { formatMessage } from 'umi-plugin-locale';
export enum PageStep {
@@ -23,7 +23,12 @@ export interface CheckModelState {
areacode: AreaCode | undefined, // 选中的地区
phone: string;
password: string;
pwdConfirm: string;
inviter: string;
verifyCode: string;
submitting: boolean;
sendingCode: boolean;
codeTimer: number;
}
const model: Model = {
@@ -36,7 +41,12 @@ const model: Model = {
areacode: undefined,
phone: '',
password: '',
pwdConfirm: '',
inviter: '',
verifyCode: '',
submitting: false,
sendingCode: false,
codeTimer: -1,
} as CheckModelState,
effects: {
@@ -71,6 +81,15 @@ const model: Model = {
}
},
*timer({ payload }: any, { put }) {
yield put({ type: 'onUpdateState', codeTimer: payload });
yield delay(1000);
const next = payload - 1;
if (next >= 0) {
yield put({ type: 'timer', payload: next });
}
},
*submitCheck(_, { put, call, select }) {
const { areacode, phone } = yield select((state: any) => state.check);
if (!areacode) return message.warn(formatMessage({ id: 'check.msgArea' }));
@@ -97,26 +116,61 @@ const model: Model = {
const { areacode, phone, password } = yield select((state: any) => state.check);
if (!areacode) return message.warn(formatMessage({ id: 'check.msgArea' }));
if (!validPhone(phone)) return message.warn(formatMessage({ id: 'check.msgPhone' }));
if (!validPwd(password)) return message.warn(formatMessage({ id: 'check.msgPwd' }))
if (!validPwd(password)) return message.warn(formatMessage({ id: 'check.msgPwd' }));
yield put({ type: 'onUpdateState', submitting: true });
try {
const token = yield call(signIn, areacode, phone, password);
yield put({ type: 'user/updateToken', payload: token });
yield delay(0);
const user = yield call(getUserInfo, true);
yield put({ type: 'user/updateUser', payload: user });
} catch(e) {
message.error(e.message);
yield put({ type: 'user/logout' });
} finally {
yield put({ type: 'onUpdateState', submitting: false });
}
},
*submitRegister(_, { put }) {
*submitRegister(_, { put, select, call }) {
const { areacode, phone, password, verifyCode, inviter, pwdConfirm } = yield select((state: any) => state.check);
if (!areacode) return message.warn(formatMessage({ id: 'check.msgArea' }));
if (!validPhone(phone)) return message.warn(formatMessage({ id: 'check.msgPhone' }));
if (!verifyCode) return message.warn(formatMessage({ id: 'check.msgCode' }));
if (!validPwd(password)) return message.warn(formatMessage({ id: 'check.msgPwd' }));
if (password !== pwdConfirm) return message.warn(formatMessage({ id: 'check.msgConfirm' }));
// if (!inviter) return message.warn(formatMessage({ id: 'check.msgInviter' }));
yield put({ type: 'onUpdateState', submitting: true });
yield delay(800);
yield put({ type: 'onUpdateState', submitting: false });
yield put({ type: 'onUpdateState', pageStep: PageStep.Check });
try {
const token = yield call(signUp, areacode, phone, password, verifyCode, inviter);
yield put({ type: 'user/updateToken', payload: token });
yield delay(0);
const user = yield call(getUserInfo, true);
yield put({ type: 'user/updateUser', payload: user });
} catch(e) {
message.error(e.message);
yield put({ type: 'user/logout' });
} finally {
yield put({ type: 'onUpdateState', submitting: false });
}
},
*sendCode(_, { select, put, call }) {
const { areacode, phone } = yield select((state: any) => state.check);
if (!areacode) return message.warn(formatMessage({ id: 'check.msgArea' }));
if (!validPhone(phone)) return message.warn(formatMessage({ id: 'check.msgPhone' }));
yield put({ type: 'onUpdateState', sendingCode: true });
try {
yield call(sendCode, areacode, phone);
yield put({ type: 'timer', payload: 60 });
} catch(e) {
message.error(e.message);
} finally {
yield put({ type: 'onUpdateState', sendingCode: false });
}
},
},

61
src/pages/check/register.tsx
View File

@@ -4,30 +4,83 @@ import { connect, DispatchProp } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
import { CheckModelState } from './model';
import styles from './style.less';
const RegisterPage: React.FC<DispatchProp & CheckModelState> = ({
password,
inviter,
pwdConfirm,
verifyCode,
submitting,
dispatch,
codeTimer,
sendingCode,
}) => {
let btnText;
if (codeTimer < 0) {
btnText = formatMessage({ id: 'check.getCode1' });
} else if (codeTimer === 0) {
btnText = formatMessage({ id: 'check.getCode3' });
} else {
btnText = formatMessage({ id: 'check.getCode2' }, { time: codeTimer })
}
return (
<>
<div className={styles.register}>
<Input.Group
className="item"
compact={true}
size="large"
>
<Input
style={{ width: '40%' }}
placeholder={formatMessage({ id: 'common.codeHolder' })}
value={verifyCode}
onChange={e => dispatch({ type: 'check/onUpdateState', verifyCode: e.target.value })}
/>
<Button
style={{ width: '60%' }}
size="large"
loading={sendingCode}
disabled={codeTimer > 0}
onClick={() => dispatch({ type: 'check/sendCode' })}
>{btnText}</Button>
</Input.Group>
<Input
className="item"
placeholder={formatMessage({ id: 'common.pwdHolder' })}
placeholder={formatMessage({ id: 'check.setPwd' })}
value={password}
onChange={e => dispatch({ type: 'check/onUpdatePassword', payload: e.target.value })}
size="large"
type="password"
/>
<Input
className="item"
placeholder={formatMessage({ id: 'check.confirmPwd' })}
value={pwdConfirm}
onChange={e => dispatch({ type: 'check/onUpdateState', pwdConfirm: e.target.value })}
size="large"
type="password"
/>
<Input
className="item"
placeholder={formatMessage({ id: 'check.invite' })}
value={inviter}
onChange={e => dispatch({ type: 'check/onUpdateState', inviter: e.target.value })}
size="large"
/>
<Button
className="item gradient"
className="item gradient submit"
type="primary"
loading={submitting}
onClick={() => dispatch({ type: 'check/submitRegister' })}
size="large"
>{formatMessage({ id: 'check.register' })}</Button>
</>
</div>
);
}

30
src/pages/check/service.ts
View File

@@ -28,3 +28,33 @@ export async function signIn(areacode: AreaCode, phone: string, password: string
}
return data.token;
}
export async function signUp(areacode: AreaCode, phone: string, password: string, code: string, inviter: string): Promise<string> {
const { ok, msg, data } = await http.post(
'/sign/up',
{
phone: encodePhone(areacode, phone),
password,
inviter,
code,
},
);
if (!ok || !data || !data.token) {
throw Error(msg);
}
return data.token;
}
export async function sendCode(areacode: AreaCode, phone: string) {
const { ok, msg } = await http.post(
'/sign/send',
{
phone: encodePhone(areacode, phone),
type: 'signUp',
},
);
if (ok) {
return true;
}
throw Error(msg);
}

9
src/pages/check/style.less
View File

@@ -11,7 +11,7 @@
width: auto;
}
.ant-btn {
.submit {
margin-top: 30px;
}
@@ -54,3 +54,10 @@
line-height: 30;
line-height: 80vh;
}
.register {
height: 100%;
padding-top: 160px;
display: flex;
flex-direction: column;
}

7
src/services/common.ts
View File

@@ -14,6 +14,11 @@ export async function getAreaCodes(): Promise<AreaCodes> {
const res = await http.get<AreaCodes>('/sign/code');
if (res.ok && res.data) {
res.data = res.data.map((it: any) => ({
id: it.id || it.pode,
areacode: it.areacode || it.itc.match(/\d+/)[0],
areaname: it.areaname || it.name_native || it.name_en,
}));
storeAreaCode(res.data);
return res.data;
}
@@ -24,7 +29,7 @@ export async function getAreaCodes(): Promise<AreaCodes> {
export async function getUserInfo(refresh = false): Promise<User> {
if (!refresh) {
const userCache = loadUser() as User;
if (userCache) {
if (userCache && userCache.id) {
return userCache;
}
}

27
src/utils/http.ts
View File

@@ -15,11 +15,29 @@ const successLabel = 'color:white;background-color:green;padding: 1px 2px';
const failureLabel = 'color:white;background-color:red;padding: 1px 2px';
const originLabel = 'color:unset;background-color:unset;padding:unset';
const baseURL = 'http://yapi.faronear.org/mock/35';
const baseURL = 'https://server.fiv.tacever.org/v1';
// const baseURL = '//yapi.faronear.org/mock/20/v1';
const instance = axios.create({
baseURL,
});
function replaceId(obj: any) {
if (obj instanceof Array) {
obj.forEach(replaceId);
} else if (typeof obj === 'object') {
const id = obj['_id'];
if (id) {
delete obj['_id'];
obj.id = id;
}
_.entries(obj).forEach(([_, value]) => {
if (typeof value === 'object') {
replaceId(value);
}
});
}
}
async function filter<T>(
method: keyof AxiosInstance,
...args: any[]
@@ -29,13 +47,14 @@ async function filter<T>(
const { user } = globalState().user;
if (user && user.token) {
instance.defaults.headers = {
...instance(instance.defaults.headers),
Authorization: user.token,
...(instance.defaults.headers || {}),
token: user.token,
};
} else {
instance.defaults.headers = _.omit(instance.defaults.headers, 'Authorization');
instance.defaults.headers = _.omit(instance.defaults.headers, 'token');
}
const { status, data } = await (instance[method] as (...args: any[]) => Promise<AxiosResponse<AppResp>>)(...args);
replaceId(data);
ret = {
ok: status >= 200 && status < 300 && data && data.code === 0,
code: data && data.code,