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

src/pages/public/Login.jsx

@@ -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 />} />

src/pages/public/Register.jsx

@@ -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'}>
+        <div className={'login_page shadow'}>
-            <Card title={'Система мониторинга'} className={'shadow'} bordered={true} style={{ width: 350 }} extra={logoIcon}>
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <Form onFinish={handleRegister}>
+                <Logo style={{ marginBottom: '10px' }} />
-                    {createInput('login', 'Пользователь', [...loginRules, ...createLoginRules])}
+                <LoaderPortal show={showLoader}>
-                    {createInput('password', 'Пароль', [...passwordRules, ...createPasswordRules], true, null)}
+                    <Card title={'Оставить заявку на регистрацию'} className={'shadow'} style={{ width: 350 }}>
-                    {createInput('confirmPassword', 'Подтверждение пароля', confirmPasswordRules, true, ['password'])}
+                        <Form onFinish={handleRegister}>
-                    {createInput('name', 'Имя', nameRules)}
+                            {createInput('login', 'Логин', [...loginRules, ...createLoginRules])}
-                    {createInput('surName', 'Фамилия', surnameRules)}
+                            {createInput('password', 'Пароль', [...passwordRules, ...createPasswordRules], true, null)}
-                    {createInput('patronymic', 'Отчество', nameRules)}
+                            {createInput('confirmPassword', 'Подтверждение пароля', confirmPasswordRules, true, ['password'])}
-                    {createInput('email', 'Email', regEmailRules)}
+                            {createInput('name', 'Имя', nameRules)}
-                    {createInput('phone', 'Номер телефона', phoneRules)}
+                            {createInput('surName', 'Фамилия', surnameRules)}
-                    {createInput('position', 'Должность')}
+                            {createInput('patronymic', 'Отчество', nameRules)}
-                    <Form.Item>
+                            {createInput('email', 'Email', regEmailRules)}
-                        <div className={'register-button'}>
+                            {createInput('phone', 'Номер телефона', phoneRules)}
-                            <Button type={'primary'} htmlType={'submit'}>Зарегистрироваться</Button>
+                            {createInput('position', 'Должность')}
-                        </div>
+                            <Form.Item>
-                    </Form.Item>
+                                <div className={'register-button'}>
-                    <div className={'text-align-center'}>
+                                    <Button type={'primary'} htmlType={'submit'}>Зарегистрироваться</Button>
-                        <Link to={`/login`}>Назад</Link>
+                                </div>
-                    </div>
+                            </Form.Item>
-                </Form>
+                            <div className={'text-align-center'}>
-            </Card>
+                                <Link to={`/login`}>Назад</Link>
-        </LoaderPortal>
+                            </div>
+                        </Form>
+                    </Card>
+                </LoaderPortal>
+            </div>
+        </div>
     )
 })
 

src/styles/pages/App.less

@@ -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;
 }

src/styles/pages/login.less

@@ -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;
+}

src/utils/validationRules.ts

@@ -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, {