Theme fix

app/(full-page)/auth/login/page.tsx

@@ -1,63 +1,130 @@
 /* eslint-disable @next/next/no-img-element */
 'use client';
 import { useRouter } from 'next/navigation';
-import React, { useContext, useState } from 'react';
-import { Checkbox } from 'primereact/checkbox';
-import { Button } from 'primereact/button';
+import React, { useContext, useEffect, useState } from 'react';
 import { Password } from 'primereact/password';
 import { LayoutContext } from '../../../../layout/context/layoutcontext';
 import { InputText } from 'primereact/inputtext';
-import { classNames } from 'primereact/utils';
+
+import { useForm } from 'react-hook-form';
+import { schema } from '@/schemas/authSchema';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Controller } from 'react-hook-form';
+import { getUser, login } from '@/services/auth';
+import FancyLinkBtn from '@/app/components/buttons/FancyLinkBtn';
+import { logout } from '@/utils/logout';
+import { LoginType } from '@/types/login';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 
 const LoginPage = () => {
-    const [password, setPassword] = useState('');
-    const [checked, setChecked] = useState(false);
-    const { layoutConfig } = useContext(LayoutContext);
+    const { layoutConfig, setUser, setMessage, setGlobalLoading, setDepartament, departament } = useContext(LayoutContext);
 
     const router = useRouter();
-    const containerClassName = classNames('surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden', { 'p-input-filled': layoutConfig.inputStyle === 'filled' });
+    const media = useMediaQuery('(max-width: 1030px)');
+    // const containerClassName = classNames('surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden', { 'p-input-filled': layoutConfig.inputStyle === 'filled' });
 
-    return (
-        <div className={containerClassName}>
-            <div className="flex flex-column align-items-center justify-content-center">
-                <img src={`/layout/images/logo-${layoutConfig.colorScheme === 'light' ? 'dark' : 'white'}.svg`} alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0" />
-                <div
-                    style={{
-                        borderRadius: '56px',
-                        padding: '0.3rem',
-                        background: 'linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)'
-                    }}
-                >
-                    <div className="w-full surface-card py-8 px-5 sm:px-8" style={{ borderRadius: '53px' }}>
-                        <div className="text-center mb-5">
-                            <img src="/demo/images/login/avatar.png" alt="Image" height="50" className="mb-3" />
-                            <div className="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
-                            <span className="text-600 font-medium">Sign in to continue</span>
-                        </div>
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        control
+    } = useForm({
+        resolver: yupResolver(schema),
+        mode: 'onChange'
+    });
+
+    const onSubmit = async (value: LoginType) => {
+        const user = await login(value);
+        if (user && user.success) {
+            document.cookie = `access_token=${user.token.access_token}; path=/; Secure; SameSite=Strict; expires=${user.token.expires_at}`;            
+            const token = user.token.access_token;
+            if (token) {
+                const res = await getUser();
+                console.log(res);
+
+                try {
+                    if (res?.success) {
+                        if (res?.user.is_working) {
+                            if(res.roles && res.roles.length > 0){
+                                const roleCheck = res.roles.find((i:{id_role: number})=> i.id_role)
+                                if(roleCheck){                                    
+                                    setDepartament({info: roleCheck.roles_name.info_ru, last_name:res.user?.last_name, name:res?.user.name, father_name:res.user?.father_name});
+                                    window.location.href = '/faculty';
+                                } else {
+                                    window.location.href = '/course';
+                                }                                
+                            } else {
+                                window.location.href = '/course';
+                            }
+                        } 
+                        if(res?.user.is_student){
+                            window.location.href = '/';
+                        }
+                    } else {
+                        setMessage({
+                            state: true,
+                            value: { severity: 'error', summary: 'Ошибка при авторизации', detail: 'Повторите позже' }
+                        }); // messege - Ошибка при авторизации, повторите позже
+                        logout({ setUser, setGlobalLoading });
+                        console.log('Ошибка при получении пользователя');
+                    }
+                } catch (error) {
+                    setMessage({
+                        state: true,
+                        value: { severity: 'error', summary: 'Ошибка при авторизации', detail: 'Повторите позже' }
+                    }); // messege - Ошибка при авторизации, повторите позже
+                    logout({ setUser, setGlobalLoading });
+                    console.log('Ошибка при получении пользователя');
+                }
+            }
+        } else {
+            setMessage({
+                state: true,
+                value: { severity: 'error', summary: 'Ошибка при авторизации', detail: 'Повторите позже' }
+            }); // messege - Ошибка при авторизации при авторизации
+        }
+    };
 
-                        <div>
-                            <label htmlFor="email1" className="block text-900 text-xl font-medium mb-2">
-                                Email
-                            </label>
-                            <InputText id="email1" type="text" placeholder="Email address" className="w-full md:w-30rem mb-5" style={{ padding: '1rem' }} />
+    const onError = (errors: any) => {
+        console.log('Ошибки формы:', errors);
+        setMessage({
+            state: true,
+            value: { severity: 'error', summary: 'Ошибка при авторизации', detail: 'Введите корректные данные' }
+        }); // messege - Ошибка при авторизации
+    };
 
-                            <label htmlFor="password1" className="block text-900 font-medium text-xl mb-2">
-                                Password
-                            </label>
-                            <Password inputId="password1" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" toggleMask className="w-full mb-5" inputClassName="w-full p-3 md:w-30rem"></Password>
+    return (
+        <div className={`flex flex-col gap-4 pt-4 h-[100vh] login-bg`}>
+        {/* <div className={`flex flex-col gap-4 pt-4 h-[100vh] ${!media && 'login-bg'}`}> */}
+            {/* <InfoBanner title="Кирүү" titleSize={{ default: '30px', sm: '40px' }} /> */}
+            <div className="flex gap-4 flex-column lg:flex-row items-center justify-evenly px-4 mb-8">
+                <div className="user-img">
+                    {/* <img src="/layout/images/enrolled-img2.png" className="w-[450px] object-cover" alt="" /> */}
+                    <img src="/layout/images/no-image.png" className="w-[450px] object-cover" alt="" />
+                </div>
 
-                            <div className="flex align-items-center justify-content-between mb-5 gap-5">
-                                <div className="flex align-items-center">
-                                    <Checkbox inputId="rememberme1" checked={checked} onChange={(e) => setChecked(e.checked ?? false)} className="mr-2"></Checkbox>
-                                    <label htmlFor="rememberme1">Remember me</label>
-                                </div>
-                                <a className="font-medium no-underline ml-2 text-right cursor-pointer" style={{ color: 'var(--primary-color)' }}>
-                                    Forgot password?
-                                </a>
-                            </div>
-                            <Button label="Sign In" className="w-full p-3 text-xl" onClick={() => router.push('/')}></Button>
+                <div className={`w-[90%] sm:w-[500px] shadow-2xl bg-white py-6 px-3 md:py-8 sm:px-4 md:px-8 rounded`}>
+                    <h1 className='text-3xl sm:text-4xl font-bold inline-block border-b-2 pb-1 border-[var(--mainColor)]'>Вход</h1>
+                    <form onSubmit={handleSubmit(onSubmit, onError)} className="flex flex-col gap-4 md:gap-6">
+                        <div className="flex flex-col">
+                            {/* <label htmlFor="email1" className="block text-900 text-[16px] md:text-xl font-medium mb-1 md:mb-2">
+                                MyEdu email
+                            </label> */}
+                            <InputText {...register('email')} id="email1" type="text" placeholder="[email protected]" className="w-[90%] p-2 sm:p-3" />
+                            {errors.email && <b className="text-[red] text-[12px] ml-2">{errors.email.message}</b>}
                         </div>
-                    </div>
+                        <div className="flex flex-col">
+                            <Controller
+                                name="password"
+                                control={control}
+                                defaultValue=''
+                                render={({ field }) => <Password {...field} toggleMask className={`w-[100%]`} inputClassName="w-[90%] p-2 sm:p-3" inputStyle={{ marginRight: '15px' }} feedback={false} />}
+                            />
+                            {errors.password && <b className="text-[red] text-[12px] ml-2">{errors.password.message}</b>}
+                        </div>
+
+                        <FancyLinkBtn btnWidth={'90%'} backround={'--mainColor'} effectBg={'--titleColor'} title={'Войти'} />
+                    </form>
                 </div>
             </div>
         </div>