import React , { useState , Fragment } from 'react' ; import Notification from '@/component/Notification' ; import { qqSign } from '@/utils/functions' ; import Input from './input' ; import Email from './email' ; import { Base64 } from 'js-base64' ; import { hex } from 'js-md5' ; import ForgetPwd from '../forgetPwd' ; import styles from './styles.less' ; interface ValState { name ? : string ; email ? : string ; registerEmailCode ? : string ; submitPassword ? : string ; password ? : string ; } const Login = ( { dispatch } ) => { const [ values , setVal ] = useState < ValState > ( { } ) ; const [ isLogin , setLogin ] = useState ( true ) ; const { name , email , registerEmailCode , submitPassword , password } = values ; const setNewVal = ( code , val ) => { setVal ( { ... values , [ code ] : val , } ) ; } ; const onSubmit = async ( ) => { try { const body = { ... values , password : Base64 . encode ( hex ( values . password || '' ) ) , } ; const api = isLogin ? 'user/login' : 'user/register' ; if ( ! name ) { throw '请输入用户名' ; } if ( name . length < 3 || name . length > 30 ) { throw '用户名长度3-30位' ; } if ( ! isLogin && ! email ) { throw '请输入邮箱' ; } if ( ! isLogin && ! registerEmailCode ) { throw '请输入验证码' ; } if ( ! password ) { throw '请输入密码' ; } if ( password . length < 6 || password . length > 20 ) { throw '密码长度6-20位' ; } if ( ! isLogin && password !== submitPassword ) { throw '两次密码不一致' ; } await dispatch ( { type : api , payload : body , } ) ; } catch ( error ) { Notification . fail ( { msg : error } ) ; } } ; const [ modalVisible , setModal ] = useState ( false ) ; return ( < Fragment > { modalVisible && < ForgetPwd setVisible = { setModal } / > } < div className = { styles . wrap } > < div className = { styles . container } style = { { height : isLogin ? '180px' : '380px' } } > { } < div className = { styles . operation } > < a data - current = { isLogin } onClick = { ( ) => setLogin ( true ) } > 登录 < /a> < a data - current = { ! isLogin } onClick = { ( ) => setLogin ( false ) } > 注册 < /a> < a data - current = "false" onClick = { ( ) => setModal ( true ) } > 忘记密码 < /a> < a data - current = "false" onClick = { qqSign } > QQ登录 < /a> < /div> < Input name = { isLogin ? '用户名或邮箱' : '用户名' } value = { name } onChange = { ( val ) => setNewVal ( 'name' , val ) } onEnter = { onSubmit } type = "text" / > { ! isLogin && ( < Email name = "邮箱" email = { email } registerEmailCode = { registerEmailCode } onChange = { ( val ) => setNewVal ( 'email' , val ) } onSetEmailCode = { ( val ) => setNewVal ( 'registerEmailCode' , val ) } onEnter = { onSubmit } / > ) } < Input name = "密码" value = { password } type = "password" onChange = { ( val ) => setNewVal ( 'password' , val ) } onEnter = { onSubmit } / > { ! isLogin && ( < Input name = "密码确认" type = "password" value = { submitPassword } onChange = { ( val ) => setNewVal ( 'submitPassword' , val ) } onEnter = { onSubmit } / > ) } < div className = { styles . footer } onClick = { onSubmit } > < i className = "iconfont iconqianjin" / > < /div> < /div> < /div> < /Fragment>); } ; export default Login ;