diff --git a/src/hooks/useRegister.js b/src/hooks/useRegister.js
new file mode 100644
index 0000000..2a361af
--- /dev/null
+++ b/src/hooks/useRegister.js
@@ -0,0 +1,69 @@
+import { useState, useEffect } from "react";
+import {API_URL} from "../config/constants";
+
+
+export function useCheckLogin(login) {
+ const [checking, setChecking] = useState(false);
+ const [exists, setExists] = useState(false);
+
+ useEffect(() => {
+ if (!login || login.length < 3) {
+ setExists(false);
+ return;
+ }
+
+ const timer = setTimeout(async () => {
+ try {
+ setChecking(true);
+ const res = await fetch(`${API_URL}/api/v1/auth/check-login?login=${login}`);
+ const json = await res.json();
+ setExists(json.exists);
+ } catch (e) {
+ console.error(e);
+ } finally {
+ setChecking(false);
+ }
+ }, 400);
+
+ return () => clearTimeout(timer);
+ }, [login]);
+
+ return { checking, exists };
+}
+
+
+export function useRegister() {
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [success, setSuccess] = useState(false);
+
+ const register = async ({ name, login, password }) => {
+ setLoading(true);
+ setError(null);
+
+ try {
+ const res = await fetch(`${API_URL}/api/v1/auth/register`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ name, login, password }),
+ });
+
+ const data = await res.json();
+
+ if (!res.ok) {
+ throw new Error(data.message || "Ошибка регистрации");
+ }
+
+ setSuccess(true);
+ setTimeout(() => {
+ window.location.href = "/register";
+ }, 2500);
+ } catch (e) {
+ setError(e.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return { register, loading, error, success };
+}
\ No newline at end of file
diff --git a/src/pages/AuthPage.jsx b/src/pages/AuthPage.jsx
new file mode 100644
index 0000000..6374036
--- /dev/null
+++ b/src/pages/AuthPage.jsx
@@ -0,0 +1,380 @@
+import { useState, useCallback } from "react";
+import MagnifierLogo from "../components/MagnifierLogo";
+import { useAuth } from "../hooks/useAuth";
+import { useRegister } from "../hooks/useRegister";
+import {API_URL, FLOAT_ICONS} from "../config/constants";
+import "../styles/global.css";
+import "../styles/auth.css";
+import likeSmile from '../assets/success.png';
+import { useEffect } from "react";
+import { useCheckLogin } from "../hooks/useRegister";
+
+// ─── helpers ──────────────────────────────────────────────────────────────────
+function getStrength(val) {
+ if (!val) return { level: 0, label: "", color: "transparent", cls: "" };
+ let s = 0;
+ if (val.length >= 6) s++;
+ if (val.length >= 10) s++;
+ if (/[A-Z]/.test(val) || /[0-9]/.test(val)) s++;
+ if (/[^A-Za-z0-9]/.test(val)) s++;
+ const labels = ["", "Слабый", "Средний", "Хороший", "Отличный"];
+ const colors = ["", "#ff6b6b", "#ffd166", "#2de0c8", "#2de0c8"];
+ const cls = ["", "sw", "sm", "ss", "ss"];
+ return { level: s, label: labels[s], color: colors[s], cls: cls[s] };
+}
+
+// ─── Shared eye button ────────────────────────────────────────────────────────
+function EyeBtn({ show, onToggle}) {
+ return (
+
+ );
+}
+
+// ─── Step dots ────────────────────────────────────────────────────────────────
+function StepDots({ current, total }) {
+ return (
+
+ {Array.from({ length: total }).map((_, i) => (
+
+ ))}
+
+
С возвращением
+
+
+
+
+
+
+ Нет аккаунта?{" "}
+
+
+
+
+
{
+ onChange("name", e.target.value);
+ setErrors(p => ({...p, name: ""}));
+ }}
+ autoComplete="off"
+ />
+ {errors.name &&
{errors.name}
}
+
+
+
{
+ onChange("login", e.target.value);
+ setErrors(p => ({...p, login: ""}));
+ }}
+ autoComplete="off"
+ />
+
+ {checkingLogin &&
Проверяем...
}
+
+ {!checkingLogin && data.login.length >= 3 && (
+
+ {loginExists ? "✗ Логин занят" : "✓ Логин свободен"}
+
+ )}
+
+ {errors.login &&
{errors.login}
}
+
+
+
+
+ {
+ onChange("password", e.target.value);
+ setErrors(p => ({...p, password: ""}));
+ }}
+ autoComplete="new-password"
+ />
+ setShow1(v => !v)}/>
+
+
+ {data.password && (
+ <>
+
+ {[0, 1, 2, 3].map(i => (
+
+ ))}
+
+
+ {strength.label}
+
+
+ )}
+
+ {errors.password &&
{errors.password}
}
+
+
+
+
+ {
+ onChange("password2", e.target.value);
+ setErrors(p => ({...p, password2: ""}));
+ }}
+ autoComplete="new-password"
+ />
+ setShow2(v => !v)}/>
+
+
+ {data.password2 && (
+
+ {matched ? "✓ Совпадают" : "✗ Не совпадают"}
+
+ )}
+
+ {errors.password2 &&
{errors.password2}
}
+
+
+ Имя
+ {data.name}
+
+
+
+ Логин
+ @{data.login}
+
+
{error}
}
+
+
+
+ );
+}
+
+// ─── success ──────────────────────────────────────────────────────────────────
+function RegSuccess({name, onLogin}) {
+ return (
+
+
+
Добро пожаловать, {name}!
+
Аккаунт создан успешно.
+
+
+
+
+ );
+ }
+
+ return (
+
+
Создайте аккаунт
+
+
+ {step === 0 && (
+
setStep(1)} />
+ )}
+ {step === 1 && (
+ register({ name: form.name, login: form.login, password: form.password })}
+ onBack={() => setStep(0)}
+ loading={loading}
+ error={error}
+ />
+ )}
+
+ {step === 0 && (
+
+ Уже есть аккаунт?{" "}
+
+
+ )}
+
+
+
+ {FLOAT_ICONS.map(({ icon, delay, size, ...pos }, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
Находка
+
+ {mode === "login"
+ ?
switchTo("register")} />
+ : switchTo("login")} />
+ }
+
+
-
-
- {FLOAT_ICONS.map(({ icon, delay, size, ...pos }, i) => (
-
- ))}
-
-
-
-
-
-
-
-
-
Находка
-
-
-
-
-
-
- Нет аккаунта? Зарегистрироваться
-
-
-
-