|
|
|
@@ -1,5 +1,6 @@
|
|
|
|
|
import { useState } from "react";
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import bgFish from "../assets/Исходники/background.jpg";
|
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
|
|
|
|
|
|
const AuthForm = () => {
|
|
|
|
@@ -57,75 +58,82 @@ const AuthForm = () => {
|
|
|
|
|
setError("");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// общий класс для всех полей ввода — фирменный стиль
|
|
|
|
|
const inputClass =
|
|
|
|
|
"block w-full rounded-md bg-white/5 border border-white/10 px-4 py-3 text-white placeholder-white/40 focus:border-gold focus:outline-none transition-colors";
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="flex min-h-screen items-center justify-center bg-gray-100 px-4">
|
|
|
|
|
<div className="w-full max-w-md space-y-8 rounded-lg bg-white p-10 shadow-md">
|
|
|
|
|
<h2 className="text-center text-3xl font-bold text-gray-900">
|
|
|
|
|
{isLogin ? "Вход в FISH FISH" : "Регистрация в FISH FISH"}
|
|
|
|
|
<div className="relative flex min-h-screen items-center justify-center px-4 overflow-hidden">
|
|
|
|
|
<div
|
|
|
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
|
|
|
style={{ backgroundImage: `url(${bgFish})` }}
|
|
|
|
|
/>
|
|
|
|
|
<div className="absolute inset-0 bg-slate-900/75" />
|
|
|
|
|
<div className="relative w-full max-w-md space-y-6 rounded-lg bg-slate-800/60 border border-slate-700/50 p-8 md:p-10">
|
|
|
|
|
<h2 className="text-center text-2xl md:text-3xl font-medium uppercase text-white">
|
|
|
|
|
{isLogin ? "Вход" : "Регистрация"}
|
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
|
|
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
|
|
|
|
<div className="rounded-md shadow-sm space-y-px">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
className="relative block w-full rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 focus:border-blue-500 focus:outline-none sm:text-sm"
|
|
|
|
|
placeholder="Логин"
|
|
|
|
|
value={formData.username}
|
|
|
|
|
onChange={handleChange("username")}
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
required
|
|
|
|
|
className="relative block w-full rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 focus:border-blue-500 focus:outline-none sm:text-sm"
|
|
|
|
|
placeholder="Пароль"
|
|
|
|
|
value={formData.password}
|
|
|
|
|
onChange={handleChange("password")}
|
|
|
|
|
/>
|
|
|
|
|
<form className="space-y-4" onSubmit={handleSubmit}>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
className={inputClass}
|
|
|
|
|
placeholder="Логин"
|
|
|
|
|
value={formData.username}
|
|
|
|
|
onChange={handleChange("username")}
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
required
|
|
|
|
|
className={inputClass}
|
|
|
|
|
placeholder="Пароль"
|
|
|
|
|
value={formData.password}
|
|
|
|
|
onChange={handleChange("password")}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
{!isLogin && (
|
|
|
|
|
<>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
className="relative block w-full rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 focus:border-blue-500 focus:outline-none sm:text-sm"
|
|
|
|
|
placeholder="Имя"
|
|
|
|
|
value={formData.first_name}
|
|
|
|
|
onChange={handleChange("first_name")}
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
className="relative block w-full rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 focus:border-blue-500 focus:outline-none sm:text-sm"
|
|
|
|
|
placeholder="Фамилия"
|
|
|
|
|
value={formData.last_name}
|
|
|
|
|
onChange={handleChange("last_name")}
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
className="relative block w-full rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 focus:border-blue-500 focus:outline-none sm:text-sm"
|
|
|
|
|
placeholder="Номер телефона"
|
|
|
|
|
value={formData.phone}
|
|
|
|
|
onChange={handleChange("phone")}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{!isLogin && (
|
|
|
|
|
<>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
className={inputClass}
|
|
|
|
|
placeholder="Имя"
|
|
|
|
|
value={formData.first_name}
|
|
|
|
|
onChange={handleChange("first_name")}
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
className={inputClass}
|
|
|
|
|
placeholder="Фамилия"
|
|
|
|
|
value={formData.last_name}
|
|
|
|
|
onChange={handleChange("last_name")}
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
required
|
|
|
|
|
className={inputClass}
|
|
|
|
|
placeholder="Номер телефона"
|
|
|
|
|
value={formData.phone}
|
|
|
|
|
onChange={handleChange("phone")}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{error && <p className="text-center text-sm text-red-600">{error}</p>}
|
|
|
|
|
{error && <p className="text-center text-sm text-red-400">{error}</p>}
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="submit"
|
|
|
|
|
className="group relative flex w-full justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
|
|
|
|
|
className="w-full rounded-md bg-gold text-black px-4 py-3 text-sm font-medium uppercase tracking-wide hover:opacity-90 transition-opacity"
|
|
|
|
|
>
|
|
|
|
|
{isLogin ? "Войти" : "Зарегистрироваться"}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<p className="text-center text-sm text-gray-600">
|
|
|
|
|
<p className="text-center text-sm text-white/60">
|
|
|
|
|
{isLogin ? "Нет аккаунта?" : "Уже есть аккаунт?"}{" "}
|
|
|
|
|
<span
|
|
|
|
|
className="cursor-pointer text-blue-600 hover:underline"
|
|
|
|
|
className="cursor-pointer text-gold hover:underline"
|
|
|
|
|
onClick={toggleMode}
|
|
|
|
|
>
|
|
|
|
|
{isLogin ? "Зарегистрироваться" : "Войти"}
|
|
|
|
|