Init front

2025-12-12 20:22:50 +05:00
parent a79c26085b
commit 55c42a115d
26 changed files with 8222 additions and 0 deletions
--- a/app/regCode/page.jsx
+++ b/app/regCode/page.jsx
@@ -0,0 +1,148 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+const RecPasswordCodePage = () => {
+    const router = useRouter();
+    const [code, setCode] = useState("");
+    const [error, setError] = useState("");
+
+    const [secondsLeft, setSecondsLeft] = useState(60);
+    const [isResending, setIsResending] = useState(false);
+
+    const isCodeValid = code.length === 6;
+    const canResend = secondsLeft === 0 && !isResending;
+
+    // таймер на минуту
+    useEffect(() => {
+        if (secondsLeft <= 0) return;
+
+        const timer = setInterval(() => {
+            setSecondsLeft((prev) => prev - 1);
+        }, 1000);
+
+        return () => clearInterval(timer);
+    }, [secondsLeft]);
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        if (!isCodeValid) {
+            setError("Код должен содержать 6 символов");
+            return;
+        }
+
+        setError("");
+        console.log("Подтверждение кода:", code);
+        router.push("/home");
+        // TODO: запрос на бэк и переход на страницу смены пароля
+    };
+
+    const handleChange = (e) => {
+        const value = e.target.value.replace(/\D/g, "").slice(0, 6);
+        setCode(value);
+        if (error && value.length === 6) setError("");
+    };
+
+    const handleResend = async () => {
+        if (!canResend) return;
+
+        try {
+            setIsResending(true);
+            // фейковый запрос на повторную отправку кода
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            console.log("Повторная отправка кода на почту");
+            setSecondsLeft(60);
+        } finally {
+            setIsResending(false);
+        }
+    };
+
+    const formatTime = (sec) => {
+        const m = Math.floor(sec / 60)
+            .toString()
+            .padStart(2, "0");
+        const s = (sec % 60).toString().padStart(2, "0");
+        return `${m}:${s}`;
+    };
+
+    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">
+                <div className="flex items-center justify-between mb-4">
+                    <button
+                        type="button"
+                        onClick={() => router.back()}
+                        className="text-white text-sm font-montserrat hover:underline"
+                    >
+                        Назад
+                    </button>
+                    <span className="flex-1 ml-9 text-center font-montserrat text-white font-extrabold text-xl sm:text-2xl">
+                        Код подтверждения
+                    </span>
+                    <span className="w-[80px]" />
+                </div>
+
+                <form onSubmit={handleSubmit} className="mt-4 space-y-4">
+                    <p className="font-montserrat text-white text-sm text-center">
+                        Введите код из письма, отправленного на вашу почту
+                    </p>
+
+                    <div className="space-y-1">
+                        <label className="block font-montserrat font-extrabold text-xs text-[#ffffff] text-center">
+                            Код
+                        </label>
+                        <input
+                            type="text"
+                            inputMode="numeric"
+                            value={code}
+                            onChange={handleChange}
+                            className="w-full rounded-full bg-white px-4 py-2 text-center tracking-[0.4em] text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
+                            placeholder="••••••"
+                        />
+                        {error && (
+                            <p className="text-[11px] text-red-200 font-montserrat text-center">
+                                {error}
+                            </p>
+                        )}
+                    </div>
+
+                    <button
+                        type="submit"
+                        disabled={!isCodeValid}
+                        className={`mt-4 w-full rounded-full py-2 text-center font-montserrat font-extrabold text-sm transition-colors
+              ${isCodeValid
+                                ? "bg-green-500 text-white hover:bg-green-600"
+                                : "bg-white text-[#C4C4C4] cursor-not-allowed"
+                            }`}
+                    >
+                        Подтвердить
+                    </button>
+
+                    {/* Кнопка повторной отправки кода с таймером */}
+                    <div className="mt-2 flex flex-col items-center space-y-1">
+                        <button
+                            type="button"
+                            onClick={handleResend}
+                            disabled={!canResend}
+                            className={`text-[12px] font-montserrat font-bold underline-offset-2 ${canResend
+                                    ? "text-white hover:underline"
+                                    : "text-white/50 cursor-not-allowed"
+                                }`}
+                        >
+                            Отправить код ещё раз
+                        </button>
+                        <span className="text-[12px] font-montserrat text-white/80">
+                            {secondsLeft > 0
+                                ? `Повторная отправка через ${formatTime(secondsLeft)}`
+                                : "Можно отправить код ещё раз"}
+                        </span>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default RecPasswordCodePage;