[Admin][Frontend] Admin Registration Page

FrontEnd/src/pages/AdminPage/AdminGlobal.css

@@ -10,4 +10,7 @@
     --border-input__admin-panel: #d9d9d9;
     --background-butons__admin-panel: #1F9A7C;
     --button-color__admin-panel: #1F9A7C;
+    --button-text-color__admin-panel: #FFF;
+    --error-notification-text-color__admin-panel: #f4282b;
+    --box-shadow-color__admin-panel: rgba(0, 0, 0, 0.04);
 }

FrontEnd/src/pages/AdminPage/AdminRegistration/AdminRegistration.jsx

@@ -0,0 +1,67 @@
+import axios from 'axios';
+import { toast } from 'react-toastify';
+import { Tooltip } from 'antd';
+import { useState } from 'react';
+import { EMAIL_PATTERN } from '../../../constants/constants';
+import css from './AdminRegistration.module.css';
+
+const AdminRegistration = () => {
+    const [email, setEmail] = useState('');
+    const [error, setError] = useState(null);
+
+    const handleInputChange = (e) => {
+        setEmail(e.target.value);
+    };
+
+    const url = `${process.env.REACT_APP_BASE_API_URL}/api/admin/admin_create/`;
+
+    const handleSubmit = () => {
+        EMAIL_PATTERN.test(email) ?
+            axios.post(url, { email: email })
+                .then(() => {
+                    toast.success('Пароль надіслано на електронну адресу');
+                })
+                .catch((err) => {
+                    if (err.response.data.email) {
+                        toast.error('Ця електронна пошта вже використовується');
+                    } else {
+                        toast.error('Виникла помилка');
+                    }
+                })
+                .finally(() => {
+                    setError(null);
+                })
+            :
+            setError('Будь ласка, введіть дійсну електронну адресу');
+    };
+
+    return (
+        <div className={css['admin_registration-section']}>
+            <h3>Реєстрація Адміністратора</h3>
+            <div className={css['admin_registration-outer-wrapper']}>
+                <label className={css['admin_registration-label']} htmlFor="newAdminEmail">
+                    <span className={css['admin_registration-asterisk']} >*</span>
+                    Електронна адреса
+                </label>
+                <div className={css['admin_registration-input-wrapper']}>
+                    <Tooltip
+                        title={'Введіть тут електронну пошту особи, яку потрібно зареєструвати в якості адміністратора'}
+                        placement="top">
+                        <input className={css['admin_registration-input']}
+                            id="newAdminEmail"
+                            onChange={handleInputChange}
+                            type="text"
+                            placeholder="Введіть електронну пошту"
+                            autoComplete="off" />
+                    </Tooltip>
+                    <button className={css['admin_registration-button']} onClick={handleSubmit}>
+                        Згенерувати та надіслати пароль
+                    </button>
+                </div>
+                {error && <p className={css['admin_registration-error']} >{error}</p>}
+            </div>
+        </div>
+    );
+};
+
+export default AdminRegistration;

FrontEnd/src/pages/AdminPage/AdminRegistration/AdminRegistration.module.css

@@ -0,0 +1,71 @@
+.admin_registration-section {
+    display: flex;
+    flex-direction: column;
+    padding-left: 25px;
+    padding-top: 30px;
+}
+
+.admin_registration-outer-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-top: 40px;
+}
+.admin_registration-asterisk {
+    font-family: var(--font-main);
+    font-size: 14px;
+    padding-right: 3px;
+    color: var(--notification-text-color__admin-panel);
+}
+
+.admin_registration-label {
+    color: var(--main-black-90, #292E32);
+    font-family: var(--font-main);
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.01em;
+}
+
+.admin_registration-input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.admin_registration-input {
+    width: 320px;
+    height: 25px;
+    margin: auto;
+    padding: 3px 12px;
+    border: 1px solid var(--border-input__admin-panel);
+    border-radius: 2px;
+    font-family: var(--font-messages);
+    font-size: 14px;
+}
+
+.admin_registration-input:focus {
+    outline: none;
+}
+
+.admin_registration-button {
+    padding: 5px 15px;
+    width: auto;
+    border-radius: 4px;
+    border: 1px solid var(--button-color__admin-panel);
+    background: var(--button-color__admin-panel);
+    box-shadow: 0px 2px 0px 0px var(--box-shadow-color__admin-panel);
+    color: var(--button-text-color__admin-panel);
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: -0.16px;
+    cursor: pointer;
+}
+
+.admin_registration-error {
+    color: var(--error-notification-text-color__admin-panel);
+    font-family: var(--font-main);
+    font-size: 14px;
+    margin-top: 7px;
+}

FrontEnd/src/pages/AdminPage/AutoApproveDelay/AutoApproveDelay.jsx

@@ -13,7 +13,7 @@ const AutoApproveDelay = () => {
     });
     const url = `${process.env.REACT_APP_BASE_API_URL}/api/admin/automoderation/`;
     const { data, mutate } = useSWR(url, fetcher);
-    const [delay, setDelay] = useState(null);
+    const [delay, setDelay] = useState('');
     const [error, setError] = useState(null);
 
     useEffect(() => {

FrontEnd/src/pages/AdminPage/DetailView/ModerationEmail.jsx

@@ -11,7 +11,7 @@ const ModerationEmail = () => {
     const { data, mutate } = useSWR(url, fetcher);
 
     // Define email and setEmail using useState
-    const [email, setEmail] = useState(null);
+    const [email, setEmail] = useState('');
 
     // Update email state when data is fetched
     useEffect(() => {
@@ -39,7 +39,7 @@ const ModerationEmail = () => {
                 title={'Введіть Email'}
                 placement="top"
                 pointAtCenter={true}>
-                <input className={css['moderation_email-input']} type="email" onChange={handleInputChange} value={email || ''} />
+                <input className={css['moderation_email-input']} type="email" onChange={handleInputChange} value={email} />
             </Tooltip>
             <button className={css['save-button']} onClick={handleSubmit}>Змінити</button>
         </div>

FrontEnd/src/pages/AdminPage/Menu/Menu.jsx

@@ -31,6 +31,12 @@ const SUPERUSER_MENU = [
         title: 'Пошта адміністратора',
         link: '/customadmin/email/'
     },
+    {
+        id: 'am6',
+        title: 'Реєстрація адміністратора',
+        link: '/customadmin/admin-create/'
+    }
+
 ];
 
 function Menu() {

FrontEnd/src/routes/AdminRouter.jsx

@@ -15,6 +15,7 @@ import AutoApproveDelay from '../pages/AdminPage/AutoApproveDelay/AutoApproveDel
 import ModerationEmail from '../pages/AdminPage/DetailView/ModerationEmail';
 import Contacts from '../pages/AdminPage/DetailView/Contacts';
 import AdminProfilePage from '../pages/AdminPage/AdminProfile/AdminProfilePage';
+import AdminRegistration from '../pages/AdminPage/AdminRegistration/AdminRegistration';
 
 import '../pages/AdminPage/AdminGlobal.css';
 import css from '../pages/AdminPage/AdminPage.module.css';
@@ -34,7 +35,10 @@ function AdminRouter() {
             <Route path="/profile/:id" element={<ProfileDetail />} />
             <Route path="/automoderation" element={<AutoApproveDelay />} />
             {isSuperUser && (
-                <Route path="/email" element={<ModerationEmail />} />
+                <>
+                    <Route path="/email" element={<ModerationEmail />} />
+                    <Route path="/admin-create" element={<AdminRegistration />} />
+                </>
             )}
             <Route path="/contacts" element={<Contacts />} />
             <Route path="/admin-profile/*" element={<AdminProfilePage />} />