DoneAuthContext

app/AuthPage.jsx

@@ -2,16 +2,19 @@
 
 import React, { useState } from "react";
 import { useRouter } from "next/navigation";
-
+import { useAuth } from "../app/context/AuthContext";
 
 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 const AuthPage = () => {
   const router = useRouter();
+  const { login } = useAuth();
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [rememberMe, setRememberMe] = useState(false);
   const [checkboxError, setCheckboxError] = useState(false);
+  const [authError, setAuthError] = useState("");
 
   const isEmailValid = emailRegex.test(email);
   const isFormValid = isEmailValid && password.length > 0;
@@ -19,24 +22,24 @@ const AuthPage = () => {
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    // проверка чекбокса
     if (!rememberMe) {
       setCheckboxError(true);
       return;
     }
-
     setCheckboxError(false);
 
     if (!isFormValid) return;
 
-    console.log("Email:", email, "Password:", password, "Remember:", rememberMe);
-    router.push('./home');
+    try {
+      login(email, password); // редирект сделает сам контекст
+    } catch (err) {
+      setAuthError(err.message);
+    }
   };
 
   return (
     <div className="min-h-screen w-full bg-[#90D2F9] flex items-center justify-center px-4">
       <div className="w-full max-w-md bg-white/10 rounded-2xl p-6 sm:p-8 shadow-lg relative">
-        {/* Красный баннер ошибки по чекбоксу */}
         {checkboxError && (
           <div
             className="absolute -top-10 left-0 w-full bg-red-500 text-white text-xs sm:text-sm font-montserrat px-3 py-2 rounded-t-2xl flex items-center justify-center shadow-md"
@@ -49,9 +52,6 @@ const AuthPage = () => {
         <h1 className="font-montserrat text-white font-extrabold text-2xl text-center">
           Авторизация
         </h1>
-        {/* <p className="font-montserrat text-white text-sm text-center mt-1">
-          как пользователь
-        </p> */}
 
         <form onSubmit={handleSubmit} className="mt-6 space-y-4">
           {/* Почта */}
@@ -93,22 +93,34 @@ const AuthPage = () => {
                 setRememberMe((prev) => !prev);
                 if (!rememberMe) setCheckboxError(false);
               }}
-              className={`w-5 h-5 rounded-full border border-white flex items-center justify-center ${rememberMe ? "bg-white" : "bg-transparent"
-                }`}
+              className={`w-5 h-5 rounded-full border border-white flex items-center justify-center ${
+                rememberMe ? "bg-white" : "bg-transparent"
+              }`}
             >
               {rememberMe && (
                 <span className="h-2 w-2 rounded-full bg-[#90D2F9]" />
               )}
             </button>
             <p className="font-montserrat text-[10px] leading-[12px] text-white">
-              Подтверждаю, что я прочитал условия использования данного приложения
+              Подтверждаю, что я прочитал условия использования данного
+              приложения
             </p>
           </div>
 
+          {/* Ошибка авторизации */}
+          {authError && (
+            <p className="text-[11px] text-red-600 font-montserrat">
+              {authError}
+            </p>
+          )}
 
           {/* Ссылки */}
           <div className="flex justify-between text-[11px] font-montserrat font-bold text-[#FF6363] mt-1">
-            <button type="button" className="hover:underline" onClick={() => router.push("/recPassword")}>
+            <button
+              type="button"
+              className="hover:underline"
+              onClick={() => router.push("/recPassword")}
+            >
               Забыли пароль?
             </button>
             <button
@@ -125,14 +137,23 @@ const AuthPage = () => {
             type="submit"
             disabled={!isFormValid}
             className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
-              ${isFormValid
-                ? "bg-green-500 text-white hover:bg-green-600"
-                : "bg-white text-[#C4C4C4] cursor-not-allowed"
+              ${
+                isFormValid
+                  ? "bg-green-500 text-white hover:bg-green-600"
+                  : "bg-white text-[#C4C4C4] cursor-not-allowed"
               }`}
           >
             Войти
           </button>
         </form>
+
+        {/* Подсказка по тестовым логинам */}
+        <div className="mt-4 text-[10px] text-white font-montserrat space-y-1">
+          <p>Тестовые аккаунты:</p>
+          <p>Пользователь: user@mail.com / user123</p>
+          <p>Волонтёр: vol@mail.com / vol123</p>
+          <p>Модератор: mod@mail.com / mod123</p>
+        </div>
       </div>
     </div>
   );