- {alerts.slice(-3).map((alert, i) => {
- return
{alert.message}
- })}
+
+
+ {displayAlerts.map((alert, i) => (
+
+ {alert.message}
+
+ ))}
+
)
}
\ No newline at end of file
diff --git a/frontend/src/pages/auth/AuthPage.tsx b/frontend/src/pages/auth/AuthPage.tsx
new file mode 100644
index 0000000..ae5f888
--- /dev/null
+++ b/frontend/src/pages/auth/AuthPage.tsx
@@ -0,0 +1,164 @@
+import { AuthContainer } from "./Auth";
+import { useState, useEffect, useRef, useLayoutEffect, useCallback, type RefObject } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { motion, AnimatePresence } from "motion/react";
+import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
+import { LoginForm } from "./LoginForm";
+import { RegisterForm } from "./RegisterForm";
+import type { Variants, Transition } from "motion/react";
+import styles from "./auth.module.scss";
+
+const slideVariants: Variants = {
+ enter: (direction: number) => ({
+ x: direction > 0 ? 300 : -300,
+ opacity: 0
+ }),
+ center: {
+ x: 0,
+ opacity: 1
+ },
+ exit: (direction: number) => ({
+ x: direction > 0 ? -300 : 300,
+ opacity: 0
+ })
+};
+
+const slideTransition: Transition = {
+ x: {
+ type: "spring",
+ stiffness: 300,
+ damping: 30
+ },
+ opacity: { duration: 0.2 }
+};
+
+
+
+export default function AuthPage() {
+ const [searchParams] = useSearchParams();
+ const { navigate: navigateDownloadApp } = useDownloadAppScreen();
+ if (navigateDownloadApp) return navigateDownloadApp;
+ const navigate = useNavigate();
+
+ const [direction, setDirection] = useState(0);
+ const prevMode = useRef(searchParams.get("mode") || "login");
+ const containerRef = useRef
(null);
+ const loginFormRef = useRef(null);
+ const registerFormRef = useRef(null);
+ const [containerHeight, setContainerHeight] = useState("auto");
+ const currentMode = searchParams.get("mode") || "login";
+ const enteringElementRef = useRef<"login" | "register" | null>(null);
+
+ useEffect(() => {
+ if (prevMode.current !== currentMode) {
+ setDirection(currentMode === "register" ? 1 : -1);
+ prevMode.current = currentMode;
+ enteringElementRef.current = currentMode as "login" | "register";
+ }
+ }, [currentMode]);
+
+ const measureActiveHeight = useCallback(() => {
+ const activeComponent = currentMode === "login" ? loginFormRef.current : registerFormRef.current;
+ if (activeComponent) {
+ const height = activeComponent.scrollHeight;
+ if (height > 0) {
+ setContainerHeight(height);
+ }
+ }
+ }, [currentMode, loginFormRef, registerFormRef]);
+
+ useLayoutEffect(() => {
+ // Always measure, but prioritize the entering element during transitions
+ // Use double requestAnimationFrame to ensure DOM is fully updated and layout is complete
+ let rafId2: number | null = null;
+ const rafId1 = requestAnimationFrame(() => {
+ rafId2 = requestAnimationFrame(() => {
+ measureActiveHeight();
+ });
+ });
+
+ return () => {
+ cancelAnimationFrame(rafId1);
+ if (rafId2 !== null) {
+ cancelAnimationFrame(rafId2);
+ }
+ };
+ }, [currentMode]);
+
+ function switchMode(newMode: "login" | "register") {
+ navigate(`/auth?mode=${newMode}`, { replace: true });
+ }
+
+ function handleAnimationComplete(
+ currentMode: "login" | "register",
+ mode: "login" | "register",
+ enteringElementRef: RefObject<"login" | "register" | null>,
+ formRef: React.RefObject,
+ setContainerHeight: (height: number) => void
+ ) {
+ return () => {
+ if (currentMode === mode && enteringElementRef.current === mode) {
+ enteringElementRef.current = null;
+
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ if (formRef.current && currentMode === mode) {
+ const height = formRef.current.scrollHeight;
+ if (height > 0) {
+ setContainerHeight(height);
+ }
+ }
+ });
+ });
+ }
+ }
+ }
+
+ return (
+
+
+
+ {currentMode === "login" ? (
+
+ switchMode("register")} />
+
+ ) : (
+
+ switchMode("login")} />
+
+ )}
+
+
+ {icon && (
+
+ {icon.replace("--filled", "").replace("--outlined", "")}
+
+ )}
+
+ setIsFocused(true)}
+ onBlur={() => setIsFocused(false)}
+ autoComplete={autocomplete}
+ required={required}
+ maxLength={maxlength}
+ placeholder={label + (required ? " *" : "")}
+ className={styles.input}
+ />
+
+ {togglePassword && type === "password" && (
+
+ )}
+
+ {charCount} / {maxlength}
+
+ )}
+
+ );
+ }
+);
+
+AuthTextField.displayName = "AuthTextField";
diff --git a/frontend/src/pages/auth/LoginForm.tsx b/frontend/src/pages/auth/LoginForm.tsx
new file mode 100644
index 0000000..be6b091
--- /dev/null
+++ b/frontend/src/pages/auth/LoginForm.tsx
@@ -0,0 +1,220 @@
+import { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { motion, type Transition, type Variants } from "motion/react";
+import { useImmer } from "use-immer";
+import type { ErrorResponse, LoginRequest, LoginResponse } from "@/core/types";
+import { API_BASE_URL } from "@/core/config";
+import { useAppState } from "@/pages/chat/state";
+import { MaterialButton } from "@/utils/material";
+import { ensureKeysOnLogin, deriveAuthSecret } from "@/core/api/authApi";
+import { AuthTextField, type AuthTextFieldHandle } from "./AuthTextField";
+import { initialize, isSupported, startElectronReceiver, subscribe } from "@/core/push-notifications/push-notifications";
+import { isElectron } from "@/core/electron/electron";
+import type { Alert, AlertType } from "./Auth";
+import { AuthHeader, AlertsContainer } from "./Auth";
+import styles from "./auth.module.scss";
+
+const loginFieldVariants: Variants = {
+ initial: {
+ opacity: 0,
+ y: 10
+ },
+ animate: {
+ opacity: 1,
+ y: 0
+ }
+};
+
+const loginFieldTransition: Transition = {
+ duration: 0.3,
+ ease: "easeInOut"
+};
+
+const loginButtonVariants: Variants = {
+ initial: {
+ opacity: 0,
+ y: 10
+ },
+ animate: {
+ opacity: 1,
+ y: 0
+ }
+};
+
+const loginButtonTransition: Transition = {
+ duration: 0.3,
+ delay: 0.4,
+ ease: "easeInOut"
+};
+
+interface LoginFormProps {
+ onSwitchMode: () => void;
+}
+
+export function LoginForm({ onSwitchMode }: LoginFormProps) {
+ const [isLoading, setIsLoading] = useState(false);
+ const [alerts, updateAlerts] = useImmer([]);
+ const setUser = useAppState(state => state.setUser);
+ const navigate = useNavigate();
+
+ function showAlert(type: AlertType, message: string) {
+ updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
+ }
+
+ const usernameElement = useRef(null);
+ const passwordElement = useRef(null);
+
+ async function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+
+ if (isLoading) return;
+
+ const username = usernameElement.current!.value.trim();
+ const password = passwordElement.current!.value.trim();
+
+ if (!username || !password) {
+ showAlert("danger", "Пожалуйста, заполните все поля");
+ return;
+ }
+
+ setIsLoading(true);
+
+ try {
+ const derived = await deriveAuthSecret(username, password);
+ const request: LoginRequest = {
+ username: username,
+ password: derived
+ }
+
+ const response = await fetch(`${API_BASE_URL}/login`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(request)
+ });
+
+ if (response.ok) {
+ const data: LoginResponse = await response.json();
+ setUser(data.token, data.user);
+
+ try {
+ await ensureKeysOnLogin(password, data.token);
+ } catch (e) {
+ console.error("Key setup failed:", e);
+ }
+
+ navigate("/chat");
+
+ try {
+ if (isSupported()) {
+ const initialized = await initialize();
+ if (initialized) {
+ await subscribe(data.token);
+
+ if (isElectron) {
+ await startElectronReceiver();
+ }
+
+ console.log("Notifications enabled");
+ } else {
+ console.log("Notification permission denied");
+ }
+ } else {
+ console.log("Notifications not supported");
+ }
+ } catch (e) {
+ console.error("Notification setup failed:", e);
+ }
+ } else {
+ const data: ErrorResponse = await response.json();
+
+ if (response.status === 403 && response.headers.get("suspension_reason")) {
+ const suspensionReason = response.headers.get("suspension_reason");
+ const setSuspended = useAppState.getState().setSuspended;
+ setSuspended(suspensionReason || "No reason provided");
+ return;
+ }
+
+ showAlert("danger", data.message || "Неверное имя пользователя или пароль");
+ }
+ } catch (error) {
+ showAlert("danger", "Ошибка соединения с сервером");
+ } finally {
+ setIsLoading(false);
+ }
+ }
+
+ return (
+ <>
+
+
+
+ );
+}
+
diff --git a/frontend/src/pages/auth/LoginPage.tsx b/frontend/src/pages/auth/LoginPage.tsx
deleted file mode 100644
index 15e8c60..0000000
--- a/frontend/src/pages/auth/LoginPage.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { useImmer } from "use-immer";
-import { AlertsContainer, type Alert, type AlertType } from "./Auth";
-import { AuthContainer, AuthHeader } from "./Auth";
-import type { ErrorResponse, LoginRequest, LoginResponse } from "@/core/types";
-import { ensureKeysOnLogin, deriveAuthSecret } from "@/core/api/authApi";
-import { API_BASE_URL } from "@/core/config";
-import { useRef } from "react";
-import type { TextField } from "mdui/components/text-field";
-import { useAppState } from "@/pages/chat/state";
-import { initialize, isSupported, startElectronReceiver, subscribe } from "@/core/push-notifications/push-notifications";
-import { isElectron } from "@/core/electron/electron";
-import { useNavigate } from "react-router-dom";
-import styles from "./auth.module.scss";
-import useDownloadAppScreen from "@/core/hooks/useDownloadAppScreen";
-import { MaterialButton, MaterialTextField } from "@/utils/material";
-
-export default function LoginPage() {
- const [alerts, updateAlerts] = useImmer([]);
- const setUser = useAppState(state => state.setUser);
- const navigate = useNavigate();
- const { navigate: navigateDownloadApp } = useDownloadAppScreen();
- if (navigateDownloadApp) return navigateDownloadApp;
-
- function showAlert(type: AlertType, message: string) {
- updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
- }
-
- const usernameElement = useRef(null);
- const passwordElement = useRef(null);
-
- return (
-
-
-
-
- )
-}
diff --git a/frontend/src/pages/auth/RegisterForm.tsx b/frontend/src/pages/auth/RegisterForm.tsx
new file mode 100644
index 0000000..b3e5c02
--- /dev/null
+++ b/frontend/src/pages/auth/RegisterForm.tsx
@@ -0,0 +1,249 @@
+import { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { motion, type Transition, type Variants } from "motion/react";
+import { useImmer } from "use-immer";
+import type { ErrorResponse, RegisterRequest, LoginResponse } from "@/core/types";
+import { API_BASE_URL } from "@/core/config";
+import { useAppState } from "@/pages/chat/state";
+import { MaterialButton, MaterialIconButton } from "@/utils/material";
+import { ensureKeysOnLogin, deriveAuthSecret } from "@/core/api/authApi";
+import { AuthTextField, type AuthTextFieldHandle } from "./AuthTextField";
+import type { Alert, AlertType } from "./Auth";
+import { AuthHeader, AlertsContainer } from "./Auth";
+import styles from "./auth.module.scss";
+
+const registerFieldVariants: Variants = {
+ initial: {
+ opacity: 0,
+ y: 10
+ },
+ animate: {
+ opacity: 1,
+ y: 0
+ }
+};
+
+const registerFieldTransition: Transition = {
+ duration: 0.3,
+ ease: "easeInOut"
+};
+
+const registerButtonVariants: Variants = {
+ initial: {
+ opacity: 0,
+ y: 10
+ },
+ animate: {
+ opacity: 1,
+ y: 0
+ }
+};
+
+const registerButtonTransition: Transition = {
+ duration: 0.3,
+ delay: 0.6,
+ ease: "easeInOut"
+};
+
+interface RegisterFormProps {
+ onSwitchMode: () => void;
+}
+
+export function RegisterForm({ onSwitchMode }: RegisterFormProps) {
+ const [isLoading, setIsLoading] = useState(false);
+ const [alerts, updateAlerts] = useImmer([]);
+ const setUser = useAppState(state => state.setUser);
+ const navigate = useNavigate();
+
+ function showAlert(type: AlertType, message: string) {
+ updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
+ }
+
+ const displayNameElement = useRef(null);
+ const usernameElement = useRef(null);
+ const passwordElement = useRef(null);
+ const confirmPasswordElement = useRef(null);
+
+ async function handleSubmit(e: React.FormEvent) {
+ e.preventDefault();
+
+ if (isLoading) return;
+
+ const displayName = displayNameElement.current!.value.trim();
+ const username = usernameElement.current!.value.trim();
+ const password = passwordElement.current!.value.trim();
+ const confirmPassword = confirmPasswordElement.current!.value.trim();
+
+ if (!displayName || !username || !password || !confirmPassword) {
+ showAlert("danger", "Пожалуйста, заполните все поля");
+ return;
+ }
+
+ if (password !== confirmPassword) {
+ showAlert("danger", "Пароли не совпадают");
+ return;
+ }
+
+ if (displayName.length < 1 || displayName.length > 64) {
+ showAlert("danger", "Отображаемое имя должно быть от 1 до 64 символов");
+ return;
+ }
+
+ if (username.length < 3 || username.length > 20) {
+ showAlert("danger", "Имя пользователя должно быть от 3 до 20 символов");
+ return;
+ }
+
+ if (!/^[a-zA-Z0-9_-]+$/.test(username)) {
+ showAlert("danger", "Имя пользователя может содержать только английские буквы, цифры, дефисы и подчеркивания");
+ return;
+ }
+
+ if (password.length < 5 || password.length > 50) {
+ showAlert("danger", "Пароль должен быть от 5 до 50 символов");
+ return;
+ }
+
+ setIsLoading(true);
+
+ try {
+ const derived = await deriveAuthSecret(username, password);
+ const request: RegisterRequest = {
+ display_name: displayName,
+ username: username,
+ password: derived,
+ confirm_password: derived
+ }
+
+ const response = await fetch(`${API_BASE_URL}/register`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(request)
+ });
+
+ if (response.ok) {
+ const data: LoginResponse = await response.json();
+ setUser(data.token, data.user);
+
+ try {
+ await ensureKeysOnLogin(password, data.token);
+ } catch (e) {
+ console.error("Key setup failed:", e);
+ }
+
+ navigate("/chat");
+ } else {
+ const data: ErrorResponse = await response.json();
+ showAlert("danger", data.message || "Ошибка при регистрации");
+ }
+ } catch (error) {
+ showAlert("danger", "Ошибка соединения с сервером");
+ } finally {
+ setIsLoading(false);
+ }
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isLoading ? "Регистрация..." : "Зарегистрироваться"}
+
+
+
+
+
+