login page

2025-05-19 11:54:30 +03:00
parent 695c29ab62
commit b91bd87555
12 changed files with 457 additions and 14 deletions
--- a/frontend/app/(urls)/login/ClientView.tsx
+++ b/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