ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Исправлена страница входа и регистрации

Browse Source
This commit is contained in:
goodmice 2022-12-28 12:18:32 +05:00
parent 1ba9ce59db
commit e9cc5f14e7
No known key found for this signature in database
GPG Key ID: EA4AA16454AC96C8
5 changed files with 55 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/public/Login.jsx
View File

@ -11,7 +11,7 @@ import { AuthService } from '@api'
import Logo from '@images/Logo'
import '@styles/index.css'
import '@styles/pages/login.less'
const Login = memo(() => {
const [showLoader, setShowLoader] = useState(false)
@ -36,10 +36,10 @@ const Login = memo(() => {
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Logo style={{ marginBottom: '10px' }} />
<LoaderPortal show={showLoader}>
<Card bordered title={'Система мониторинга'} className={'shadow'} style={{ width: 350 }}>
<Card bordered title={'Вход в ЕЦП'} className={'shadow'} style={{ width: 350 }}>
<Form onFinish={handleLogin}>
<Form.Item name={'login'} rules={loginRules}>
<Input placeholder={'Пользователь'} prefix={<UserOutlined />} />
<Input placeholder={'Логин'} prefix={<UserOutlined />} />
</Form.Item>
<Form.Item name={'password'} rules={passwordRules}>
<Input.Password placeholder={'Пароль'} prefix={<LockOutlined />} />

56
src/pages/public/Register.jsx
View File

@ -8,7 +8,6 @@ import {
EyeTwoTone
} from '@ant-design/icons'
import { AuthService } from '@api'
import LoaderPortal from '@components/LoaderPortal'
import { invokeWebApiWrapperAsync } from '@components/factory'
import {
@ -21,9 +20,12 @@ import {
phoneRules
} from '@utils/validationRules'
import { withPermissions } from '@utils'
import { AuthService } from '@api'
import Logo from '@images/Logo'
import '@styles/pages/login.less'
const surnameRules = [...nameRules, { required: true, message: 'Пожалуйста, введите фамилию!' }]
const regEmailRules = [{ required: true, message: 'Пожалуйста, введите email!' }, ...emailRules]
const confirmPasswordRules = [
@ -38,7 +40,6 @@ const confirmPasswordRules = [
})
]
const logoIcon = <Logo width={130} />
const showPasswordIcon = visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)
const createInput = (name, placeholder, rules, isPassword, dependencies) => (
@ -66,29 +67,34 @@ export const Register = memo(() => {
), [navigate])
return (
<LoaderPortal show={showLoader} className={'loader-container login_page shadow'}>
<Card title={'Система мониторинга'} className={'shadow'} bordered={true} style={{ width: 350 }} extra={logoIcon}>
<Form onFinish={handleRegister}>
{createInput('login', 'Пользователь', [...loginRules, ...createLoginRules])}
{createInput('password', 'Пароль', [...passwordRules, ...createPasswordRules], true, null)}
{createInput('confirmPassword', 'Подтверждение пароля', confirmPasswordRules, true, ['password'])}
{createInput('name', 'Имя', nameRules)}
{createInput('surName', 'Фамилия', surnameRules)}
{createInput('patronymic', 'Отчество', nameRules)}
{createInput('email', 'Email', regEmailRules)}
{createInput('phone', 'Номер телефона', phoneRules)}
{createInput('position', 'Должность')}
<Form.Item>
<div className={'register-button'}>
<Button type={'primary'} htmlType={'submit'}>Зарегистрироваться</Button>
</div>
</Form.Item>
<div className={'text-align-center'}>
<Link to={`/login`}>Назад</Link>
</div>
</Form>
</Card>
</LoaderPortal>
<div className={'login_page shadow'}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Logo style={{ marginBottom: '10px' }} />
<LoaderPortal show={showLoader}>
<Card title={'Оставить заявку на регистрацию'} className={'shadow'} style={{ width: 350 }}>
<Form onFinish={handleRegister}>
{createInput('login', 'Логин', [...loginRules, ...createLoginRules])}
{createInput('password', 'Пароль', [...passwordRules, ...createPasswordRules], true, null)}
{createInput('confirmPassword', 'Подтверждение пароля', confirmPasswordRules, true, ['password'])}
{createInput('name', 'Имя', nameRules)}
{createInput('surName', 'Фамилия', surnameRules)}
{createInput('patronymic', 'Отчество', nameRules)}
{createInput('email', 'Email', regEmailRules)}
{createInput('phone', 'Номер телефона', phoneRules)}
{createInput('position', 'Должность')}
<Form.Item>
<div className={'register-button'}>
<Button type={'primary'} htmlType={'submit'}>Зарегистрироваться</Button>
</div>
</Form.Item>
<div className={'text-align-center'}>
<Link to={`/login`}>Назад</Link>
</div>
</Form>
</Card>
</LoaderPortal>
</div>
</div>
)
})

11
src/styles/pages/App.less
View File

@ -25,17 +25,6 @@ html {
margin-left: 30px;
}
.login_page {
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
background-color: #9d9d9d;
}
.shadow{
box-shadow: 1px 1px 4px #00000033;
}

20
src/styles/pages/login.less Normal file
View File

@ -0,0 +1,20 @@
.login-button {
width: 20%;
margin: auto;
}
.register-button {
width: 50%;
margin: auto;
}
.login_page {
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
background-color: #232323;
}

2
src/utils/validationRules.ts
View File

@ -15,7 +15,7 @@ export const createLoginRules: Readonly<Rule[]> = [_min1, {
export const loginRules: Readonly<Rule[]> = [...createLoginRules, {
required: true,
message: 'Пожалуйста, введите логин',
message: 'Пожалуйста, введите логин!',
}]
export const nameRules: Readonly<Rule[]> = [_min1, {