login page

frontend/app/(urls)/account/layout.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import AccountSidebar from '@/components/AccountSidebar'
+import Loader from '@/components/ui/Loader'
+import { RiUser3Line } from 'react-icons/ri'
+import { CgNotes } from 'react-icons/cg'
+import { FaStar } from 'react-icons/fa6'
+import useUserStore from '@/app/store/userStore'
+
+export default function AccountLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [isLoading, setIsLoading] = useState(true)
+  const router = useRouter()
+  const { isAuthenticated, user } = useUserStore()
+
+  useEffect(() => {
+    if (!isAuthenticated || !user) {
+      router.replace('/login')
+      return
+    }
+
+    const timer = setTimeout(() => {
+      setIsLoading(false)
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [isAuthenticated, user, router])
+
+  if (!isAuthenticated || !user || isLoading) {
+    return <Loader />
+  }
+
+  const userNavigation = [
+    { name: 'Профиль', href: '/account', icon: RiUser3Line },
+    { name: 'Мои маршруты', href: '/account/routes', icon: CgNotes },
+  ]
+
+  return (
+    <div className="min-h-full">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="flex flex-col md:flex-row gap-6">
+          <div className="w-full md:w-64 flex-shrink-0">
+            <div className="sticky top-8">
+              <AccountSidebar user={user} navigation={userNavigation} />
+            </div>
+          </div>
+          <main className="flex-1 min-w-0">{children}</main>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/app/(urls)/login/ClientView.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import { useForm } from '@/app/hooks/useForm'
+import Button from '@/components/ui/Button'
+// import LoginButton from '@/app/components/ui/LoginButton'
+import { HiOutlineEye, HiOutlineEyeOff } from 'react-icons/hi'
+import showToast from '@/components/ui/Toast'
+import { useRouter } from 'next/navigation'
+import { signIn } from 'next-auth/react'
+// import PasswordRecovery from '@/app/components/ui/PasswordRecovery'
+
+const validationRules = {
+  email: { required: true },
+  password: { required: true, minLength: 8 },
+}
+
+const ClientView = () => {
+  const router = useRouter()
+
+  const {
+    values,
+    isVisible,
+    handleChange,
+    handleSubmit,
+    togglePasswordVisibility,
+  } = useForm(
+    {
+      email: '',
+      password: '',
+    },
+    validationRules,
+    async (values) => {
+      try {
+        const result = await signIn('credentials', {
+          email: values.email,
+          password: values.password,
+          redirect: false,
+        })
+
+        if (result?.error) {
+          showToast({ type: 'error', message: result.error })
+          return
+        }
+
+        showToast({ type: 'success', message: 'Авторизация успешна!' })
+        router.push('/account')
+      } catch {
+        showToast({ type: 'error', message: 'Ошибка при входе в аккаунт' })
+      }
+    }
+  )
+
+  return (
+    <>
+      <form className="flex flex-col gap-1" onSubmit={handleSubmit}>
+        <div className="mb-2">
+          <label className="block mb-2 text-gray-700" htmlFor="email">
+            Ваш email:
+          </label>
+          <input
+            type="email"
+            id="email"
+            placeholder="my_email@gmail.com"
+            value={values.email}
+            onChange={handleChange}
+            className="w-full px-3 py-2 border text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks"
+            autoComplete="true"
+          />
+        </div>
+
+        <div className="mb-4">
+          <label className="block mb-2 text-gray-700" htmlFor="email">
+            Ваш пароль:
+          </label>
+          <div className="relative">
+            <input
+              type={isVisible ? 'text' : 'password'}
+              id="password"
+              placeholder="Пароль"
+              value={values.password}
+              onChange={handleChange}
+              className="w-full px-3 py-2 border text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks"
+              autoComplete="true"
+            />
+            <button
+              type="button"
+              onClick={() => togglePasswordVisibility()}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+            >
+              {isVisible ? <HiOutlineEye /> : <HiOutlineEyeOff />}
+            </button>
+          </div>
+        </div>
+        {/* <div className="flex flex-row-reverse text-sm justify-between pb-2">
+          <PasswordRecovery />
+        </div> */}
+        <Button
+          text="Войти"
+          className="flex items-center justify-center bg-black rounded-2xl text-white text-base font-semibold py-3"
+          type="submit"
+        />
+      </form>
+
+      <div className="flex items-center gap-4">
+        <div className="flex-1 border-t border-gray-300" />
+        <p className="shrink-0 px-2 text-gray-700">Или</p>
+        <div className="flex-1 border-t border-gray-300" />
+      </div>
+
+      {/* <LoginButton /> */}
+    </>
+  )
+}
+
+export default ClientView

frontend/app/(urls)/login/page.tsx

@@ -1,7 +1,60 @@
-import React from 'react'
+'use client'
 
-const page = () => {
-  return <div>page</div>
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import Loader from '@/components/ui/Loader'
+import useUserStore from '@/app/store/userStore'
+import ClientView from './ClientView'
+
+const LoginPage = () => {
+  const router = useRouter()
+  const { isAuthenticated } = useUserStore()
+  const [isClient, setIsClient] = useState(true)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // проверяем логин
+    if (isAuthenticated) {
+      // распределяем
+      if (isClient) {
+        router.replace('/account')
+      }
+      return
+    }
+
+    const timer = setTimeout(() => {
+      setIsLoading(false)
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [isAuthenticated, router, isClient])
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  return (
+    <div className="flex items-center justify-center py-8 ">
+      <div className="flex w-full max-w-xl flex-col gap-4 bg-white rounded-2xl shadow-lg p-6">
+        <div className="flex flex-col items-center py-4">
+          <h1 className="text-2xl font-medium pb-1">Рады видеть Вас снова!</h1>
+          <p className="text-base font-medium text-center">
+            Пожалуйста, авторизуйтесь, чтобы продолжить
+          </p>
+        </div>
+
+        <ClientView />
+
+        <p className="text-center text-base font-medium">
+          Впервые у нас?{' '}
+          <span className="text-orange/70 hover:underline">
+            <Link href="/register">Зарегистрироваться</Link>
+          </span>
+        </p>
+      </div>
+    </div>
+  )
 }
 
-export default page
+export default LoginPage

frontend/app/(urls)/register/admin/page.tsx

@@ -1,7 +0,0 @@
-import React from 'react'
-
-const page = () => {
-  return <div>page</div>
-}
-
-export default page

frontend/app/(urls)/register/page.tsx

@@ -15,9 +15,7 @@ const RegisterPage = () => {
     // проверяем логин
     if (isAuthenticated) {
       // распределяем
-      if (!isClient) {
-        router.replace('/admin')
-      } else {
+      if (isClient) {
         router.replace('/account')
       }
       return