feat / AEB-26 login page

2025-09-01 11:34:30 +03:00
parent 38a31824bc
commit 65a63235e5
37 changed files with 1185 additions and 49 deletions
--- a/frontend/app/(auth)/login/page.tsx
+++ b/frontend/app/(auth)/login/page.tsx
@@ -1,7 +1,143 @@
-import React from 'react'
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import useUserStore from '@/app/store/userStore'
+import Loader from '@/components/ui/Loader'
+import { useForm } from '@/app/hooks/useForm'
+import Button from '@/components/ui/Button'
+import showToast from '@/components/ui/ShowToast'
+import { signIn } from 'next-auth/react'
+import TextInput from '@/components/ui/TextInput'
+import RoleSelector from '@/components/selectors/RoleSelector'
+
+const validationRules = {
+  login: { required: true },
+  password: { required: true },
+}

 const LoginPage = () => {
-  return <div> LoginPage</div>
+  const router = useRouter()
+  const { isAuthenticated } = useUserStore()
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // проверяем логин
+    if (isAuthenticated) {
+      // распределяем
+      router.replace('/objects')
+      return
+    }
+
+    const timer = setTimeout(() => {
+      setIsLoading(false)
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [isAuthenticated, router])
+
+  const { values, isVisible, handleChange, handleSubmit, togglePasswordVisibility } = useForm(
+    {
+      login: '',
+      password: '',
+      role: '',
+    },
+    validationRules,
+    async values => {
+      try {
+        const result = await signIn('credentials', {
+          login: values.login,
+          password: values.password,
+          redirect: false,
+        })
+
+        if (result?.error) {
+          showToast({ type: 'error', message: result.error })
+          return
+        }
+
+        showToast({ type: 'success', message: 'Авторизация успешна!' })
+        router.push('/objects')
+      } catch {
+        showToast({ type: 'error', message: 'Ошибка при входе в аккаунт' })
+      }
+    }
+  )
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  return (
+    <div className="relative flex h-screen flex-col items-center justify-center gap-8 py-8">
+      <div className="mb-4 flex items-center justify-center gap-4">
+        <Image
+          src="/icons/logo.svg"
+          alt="AerBIM Logo"
+          width={83}
+          height={57}
+          className="h-14 w-auto"
+        />
+        <div className="flex flex-col items-start justify-center">
+          <span className="text-xl font-semibold">AerBIM Monitor</span>
+          <span className="text-blue text-lg">AMS HT Viewer</span>
+        </div>
+      </div>
+      <div className="bg-cards z-10 mx-4 flex w-full max-w-xl flex-col gap-4 rounded-2xl p-6 shadow-lg md:mx-8">
+        <form
+          className="flex flex-col items-center justify-between gap-8 md:flex-row md:gap-4"
+          onSubmit={handleSubmit}
+        >
+          <div className="flex w-full flex-col gap-4">
+            <h1 className="text-2xl font-bold">Авторизация</h1>
+            <TextInput
+              value={values.login}
+              name="login"
+              handleChange={handleChange}
+              placeholder="ivan_ivanov"
+              style="register"
+              label="Ваш логин"
+            />
+
+            <TextInput
+              value={values.password}
+              name="password"
+              handleChange={handleChange}
+              placeholder="Не менее 8 символов"
+              style="register"
+              label="Ваш пароль"
+              isPassword={true}
+              isVisible={isVisible}
+              togglePasswordVisibility={togglePasswordVisibility}
+            />
+            <RoleSelector
+              value={values.role}
+              name="role"
+              handleChange={handleChange}
+              label="Ваша роль"
+              placeholder="Выберите вашу роль"
+            />
+
+            <div className="flex w-full items-center justify-center pt-6">
+              <Button
+                text="Войти"
+                className="bg-blue mt-3 flex w-full items-center justify-center py-4 text-base font-semibold text-white shadow-lg transition-all duration-200 hover:opacity-90"
+                type="submit"
+              />
+            </div>
+          </div>
+        </form>
+
+        <p className="text-center text-base font-medium">
+          <span className="hover:text-blue transition-colors duration-200 hover:underline">
+            <Link href="/password-recovery">Забыли логин/пароль?</Link>
+          </span>
+        </p>
+      </div>
+    </div>
+  )
 }

 export default LoginPage