oak-general-business/es/components/user/register/web.js

import React, { useState } from 'react';
import { Form, Input, Button, } from 'antd';
import { EyeTwoTone, EyeInvisibleOutlined, LeftOutlined, } from '@ant-design/icons';
import classNames from 'classnames';
import Style from './web.module.less';
export default function Render(props) {
    const { data, methods } = props;
    const { width, allowRegister, loginNameMin, loginNameMax, loginNameNeedVerify, loginNameRegexs, loginNameTip, pwdMin, pwdMax, pwdNeedVerify, pwdRegexs, pwdTip, goLogin, goBack, oakExecuting, oakLoading, } = data;
    const { t, onConfirm } = methods;
    const [loginName, setLoginName] = useState('');
    const [loginNameHelp, setLoginNameHelp] = useState('');
    const [loginNameStatus, setLoginNameStatus] = useState('');
    const [password, setPassword] = useState('');
    const [password2, setPassword2] = useState('');
    const [validateHelp, setValidateHelp] = useState('');
    const [validateHelp2, setValidateHelp2] = useState('');
    const [validateStatus, setValidateStatus] = useState('');
    if (!allowRegister) {
        return (<div className={classNames(Style['registerbox-wrap'], {
                [Style['registerbox-wrap__mobile']]: width === 'xs',
            })}>
                <div style={{ minHeight: 200, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    {t('not allow register')}
                </div>
            </div>);
    }
    return (<div className={classNames(Style['registerbox-wrap'], {
            [Style['registerbox-wrap__mobile']]: width === 'xs',
        })}>
            {!!goBack && <LeftOutlined style={{ position: 'absolute', top: 40, left: 32, color: '#555555' }} onClick={() => goBack()}/>}
            <div className={Style['registerbox-hd']}>
                <div>{t('registerTitle')}</div>
            </div>
            <div className={Style['registerbox-bd']}>
                <Form style={{ maxWidth: 400 }} layout="vertical">
                    <Form.Item label={t('label.loginName')} name="loginName" tooltip={loginNameTip} help={loginNameHelp} hasFeedback validateStatus={loginNameStatus} rules={[
            {
                required: true,
                message: t('placeholder.loginName'),
                validator: (_, value) => {
                    if (value.length < loginNameMin) {
                        setLoginNameHelp(t('validator.loginNameMin', { loginNameMin }));
                        setLoginNameStatus('error');
                        return;
                    }
                    else if (value.length > loginNameMax) {
                        setLoginNameHelp(t('validator.loginNameMax', { loginNameMax }));
                        setLoginNameStatus('error');
                        return;
                    }
                    else if (!!loginNameNeedVerify && loginNameRegexs && loginNameRegexs.length > 0) {
                        for (const regex of loginNameRegexs) {
                            const pattern = new RegExp(regex);
                            if (!pattern.test(value)) {
                                setLoginNameHelp(t('validator.loginNameVerify'));
                                setLoginNameStatus('error');
                                return;
                            }
                        }
                    }
                    setLoginNameHelp('');
                    setLoginNameStatus('success');
                }
            },
        ]}>
                        <Input autoFocus onChange={({ currentTarget }) => setLoginName(currentTarget.value)} placeholder={t('placeholder.loginName')} value={loginName}/>
                    </Form.Item>
                    <Form.Item label={t('label.password')} name="password" help={validateHelp} tooltip={pwdTip} rules={[
            {
                required: true,
                message: t('placeholder.password'),
                validator: (_, value) => {
                    if (value.length < pwdMin) {
                        setValidateHelp(t('validator.pwdMin', { pwdMin }));
                        setValidateStatus('error');
                        return;
                    }
                    else if (value.length > pwdMax) {
                        setValidateHelp(t('validator.pwdMax', { pwdMax }));
                        setValidateStatus('error');
                        return;
                    }
                    else if (!!pwdNeedVerify && pwdRegexs && pwdRegexs.length > 0) {
                        for (const regex of pwdRegexs) {
                            const pattern = new RegExp(regex);
                            if (!pattern.test(value)) {
                                setValidateHelp(t('validator.pwdVerify'));
                                setValidateHelp2('');
                                setValidateStatus('error');
                                return;
                            }
                        }
                        if (password2) {
                            setValidateHelp('');
                            setValidateHelp2(value === password2
                                ? ''
                                : t('validator.pwdDiff'));
                            setValidateStatus(value === password2
                                ? 'success'
                                : 'error');
                        }
                        else {
                            setValidateHelp2(t('noRepwd'));
                            setValidateHelp('');
                            setValidateStatus('error');
                        }
                    }
                    else {
                        if (password2) {
                            setValidateHelp('');
                            setValidateHelp2(value === password2
                                ? ''
                                : t('validator.pwdDiff'));
                            setValidateStatus(value === password2
                                ? 'success'
                                : 'error');
                        }
                        else {
                            setValidateHelp2(t('validator.noRepwd'));
                            setValidateHelp('');
                            setValidateStatus('error');
                        }
                    }
                }
            },
        ]} hasFeedback validateStatus={validateStatus}>
                        <Input.Password value={password} onChange={(e) => {
            const strValue = e.target.value;
            setPassword(strValue);
        }} iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} placeholder={t('placeholder.password')}/>
                    </Form.Item>
                    <Form.Item label={t('label.rePwd')} name="passwordConfirm" rules={[
            {
                required: true,
                validator: (_, value) => {
                    if (password.length < pwdMin || password.length > pwdMax) {
                        return;
                    }
                    else if (!!pwdNeedVerify && pwdRegexs && pwdRegexs.length > 0) {
                        for (const regex of pwdRegexs) {
                            const pattern = new RegExp(regex);
                            if (!pattern.test(password)) {
                                return;
                            }
                        }
                    }
                    setValidateHelp2(value === password ? '' : t('validator.pwdDiff'));
                    setValidateStatus(value === password ? 'success' : 'error');
                }
            },
        ]} validateTrigger="onChange" help={validateHelp2} validateStatus={validateStatus} hasFeedback>
                        <Input.Password value={password2} onChange={(e) => {
            const strValue = e.target.value;
            setPassword2(strValue);
        }} iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} placeholder={t('placeholder.rePwd')}/>
                    </Form.Item>
                    <Button block size="large" type="primary" onClick={async () => {
            await onConfirm(loginName, password);
        }} disabled={!(loginName && loginNameStatus !== 'error' && password && validateStatus !== 'error') || oakExecuting || oakLoading}>
                        {t('register')}
                    </Button>
                </Form>

                {!!goLogin && (<div className={Style['registerbox-login']}>
                        <Button type="link" onClick={() => {
                goLogin && goLogin();
            }}>
                            {t('goLogin')}
                        </Button>
                    </div>)}
            </div>
        </div>);
}