WIP API
This commit is contained in:
fullofempt
124
app/reg/page.jsx
124
app/reg/page.jsx
@@ -4,48 +4,94 @@ import React, { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL;
|
||||
|
||||
const RegPage = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const [firstName, setFirstName] = useState(""); // имя
|
||||
const [lastName, setLastName] = useState(""); // фамилия
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [rememberMe, setRememberMe] = useState(false);
|
||||
const [checkboxError, setCheckboxError] = useState(false);
|
||||
const [authError, setAuthError] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const isEmailValid = emailRegex.test(email);
|
||||
const isFormValid = isEmailValid && password.length > 0;
|
||||
const isFormValid =
|
||||
isEmailValid &&
|
||||
password.length > 0 &&
|
||||
firstName.trim().length > 0 &&
|
||||
lastName.trim().length > 0;
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!rememberMe) {
|
||||
setCheckboxError(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setCheckboxError(false);
|
||||
|
||||
if (!isFormValid) return;
|
||||
if (!isFormValid || !API_BASE) return;
|
||||
|
||||
console.log("Email:", email, "Password:", password, "Remember:", rememberMe);
|
||||
router.push("/regCode");
|
||||
try {
|
||||
setAuthError("");
|
||||
setIsSubmitting(true);
|
||||
|
||||
const res = await fetch(`${API_BASE}/auth/register`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password,
|
||||
first_name: firstName,
|
||||
last_name: lastName,
|
||||
// остальные поля можно не отправлять, если не обязательные
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
let msg = "Ошибка регистрации";
|
||||
try {
|
||||
const data = await res.json();
|
||||
if (data.error) msg = data.error;
|
||||
} catch {
|
||||
const text = await res.text();
|
||||
if (text) msg = text;
|
||||
}
|
||||
setAuthError(msg);
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
console.log("Регистрация успешна, ответ API:", data);
|
||||
router.push("/regCode");
|
||||
} catch (err) {
|
||||
setAuthError(err.message || "Ошибка сети");
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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 && (
|
||||
{(checkboxError || authError) && (
|
||||
<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"
|
||||
role="alert"
|
||||
>
|
||||
Вы не согласны с условиями использования
|
||||
{checkboxError
|
||||
? "Вы не согласны с условиями использования"
|
||||
: authError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Кнопка Назад */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button
|
||||
type="button"
|
||||
@@ -57,11 +103,46 @@ const RegPage = () => {
|
||||
<span className="flex-1 text-center font-montserrat text-white font-extrabold text-2xl">
|
||||
Регистрация
|
||||
</span>
|
||||
{/* Пустой блок для выравнивания по центру заголовка */}
|
||||
<span className="w-[48px]" />
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="mt-2 space-y-4">
|
||||
{/* Имя */}
|
||||
<div className="space-y-1">
|
||||
<label className="block font-montserrat font-extrabold text-xs text-white">
|
||||
Имя
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
className="w-full rounded-full bg-white px-4 py-2 text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
|
||||
/>
|
||||
{firstName.trim().length === 0 && (
|
||||
<p className="text-[11px] text-red-600 font-montserrat">
|
||||
Введите имя
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Фамилия */}
|
||||
<div className="space-y-1">
|
||||
<label className="block font-montserrat font-extrabold text-xs text-white">
|
||||
Фамилия
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
className="w-full rounded-full bg-white px-4 py-2 text-sm font-montserrat text-black outline-none focus:ring-2 focus:ring-blue-200"
|
||||
/>
|
||||
{lastName.trim().length === 0 && (
|
||||
<p className="text-[11px] text-red-600 font-montserrat">
|
||||
Введите фамилию
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Почта */}
|
||||
<div className="space-y-1">
|
||||
<label className="block font-montserrat font-extrabold text-xs text-white">
|
||||
@@ -101,29 +182,32 @@ const RegPage = () => {
|
||||
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>
|
||||
|
||||
{/* Кнопка Войти */}
|
||||
{/* Кнопка Регистрация */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isFormValid}
|
||||
disabled={!isFormValid || isSubmitting}
|
||||
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 && !isSubmitting
|
||||
? "bg-green-500 text-white hover:bg-green-600"
|
||||
: "bg-white text-[#C4C4C4] cursor-not-allowed"
|
||||
}`}
|
||||
>
|
||||
Регистрация
|
||||
{isSubmitting ? "Отправка..." : "Регистрация"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user