diff --git a/frontend/src/components/AuthForm.jsx b/frontend/src/components/AuthForm.jsx index 8734095..72cc358 100644 --- a/frontend/src/components/AuthForm.jsx +++ b/frontend/src/components/AuthForm.jsx @@ -3,39 +3,65 @@ import axios from "axios"; import { useNavigate } from "react-router-dom"; const AuthForm = () => { - const [formData, setFormData] = useState({ username: "", password: "" }); + const [formData, setFormData] = useState({ + username: "", + password: "", + first_name: "", + last_name: "", + phone: "", + }); + const [isLogin, setIsLogin] = useState(true); + const [error, setError] = useState(null); const navigate = useNavigate(); const API_BASE = "/api"; + const handleChange = (field) => (e) => + setFormData({ ...formData, [field]: e.target.value }); + + const doLogin = async (username, password) => { + const res = await axios.post(`${API_BASE}/login`, { username, password }); + const data = res.data; + if (data.token) { + localStorage.setItem("token", data.token); + localStorage.setItem("user", JSON.stringify(data.user)); + localStorage.removeItem("error"); + navigate("/"); + } + }; + const handleSubmit = async (e) => { e.preventDefault(); + setError(""); try { - const response = await axios.post(`${API_BASE}/login`, formData); - const data = response.data; - - if (data.token) { - localStorage.setItem("token", data.token); - localStorage.setItem("user", JSON.stringify(data.user)); - localStorage.removeItem("error"); - navigate("/"); + if (isLogin) { + await doLogin(formData.username, formData.password); + } else { + await axios.post(`${API_BASE}/register`, formData); + await doLogin(formData.username, formData.password); } } catch (err) { - let errorMessage = - err.response?.data?.error || err.message || "Неверный логин или пароль"; - const errorLog = { - message: errorMessage, - }; - localStorage.setItem("error", JSON.stringify(errorLog)); + setError( + err.response?.data?.error || + err.message || + (isLogin + ? "Неверный логин или пароль" + : "Не удалось зарегистрироваться"), + ); } }; + const toggleMode = () => { + setIsLogin(!isLogin); + setError(""); + }; + return (

- Вход в FISHFISH + {isLogin ? "Вход в FISH FISH" : "Регистрация в FISH FISH"}

@@ -46,9 +72,7 @@ const AuthForm = () => { 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={(e) => - setFormData({ ...formData, username: e.target.value }) - } + onChange={handleChange("username")} /> { 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={(e) => - setFormData({ ...formData, password: e.target.value }) - } + onChange={handleChange("password")} /> + + {!isLogin && ( + <> + + + + + )}
- {localStorage.getItem("error") && ( -

- {JSON.parse(localStorage.getItem("error"))["message"] || ""} -

- )} + {error &&

{error}

} + +

+ {isLogin ? "Нет аккаунта?" : "Уже есть аккаунт?"}{" "} + + {isLogin ? "Зарегистрироваться" : "Войти"} + +