mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Merge branch 'feature/homepage'
This commit is contained in:
+3
-1
@@ -9,7 +9,8 @@
|
||||
.LSOverride
|
||||
|
||||
# Icon must end with two \r
|
||||
Icon
|
||||
Icon
|
||||
|
||||
|
||||
# Thumbnails
|
||||
._*
|
||||
@@ -572,3 +573,4 @@ package-lock.json
|
||||
backend/alembic/**
|
||||
!backend/alembic/env.py
|
||||
!backend/alembic/script.py.mako
|
||||
!frontend/src/pages/app/resources/css/lib
|
||||
@@ -0,0 +1,50 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||
import { ElectronTitleBar } from "./pages/app/ui/components/Electron";
|
||||
import { useAppState } from "./pages/app/ui/state";
|
||||
import { useEffect, useState } from "react";
|
||||
import HomePage from "./pages/HomePage";
|
||||
import LoginPage from "./pages/LoginPage";
|
||||
import RegisterPage from "./pages/RegisterPage";
|
||||
import ChatPage from "./pages/ChatPage";
|
||||
import DownloadAppPage from "./pages/DownloadAppPage";
|
||||
import NotFoundPage from "./pages/NotFoundPage";
|
||||
import ProtectedRoute from "./pages/ProtectedRoute";
|
||||
import { isElectron } from "./pages/app/electron/electron";
|
||||
import { MINIMUM_WIDTH } from "./pages/app/core/config";
|
||||
import useWindowSize from "./pages/app/ui/hooks/useWindowSize";
|
||||
|
||||
export default function App() {
|
||||
const { restoreUserFromStorage } = useAppState();
|
||||
const { width } = useWindowSize();
|
||||
const [authReady, setAuthReady] = useState(false);
|
||||
|
||||
// Restore user from localStorage on app initialization
|
||||
useEffect(() => {
|
||||
restoreUserFromStorage().finally(() => {
|
||||
setAuthReady(true);
|
||||
});
|
||||
}, [restoreUserFromStorage]);
|
||||
|
||||
return authReady && (
|
||||
<BrowserRouter>
|
||||
{!isElectron && width < MINIMUM_WIDTH && <Navigate to="/download-app" replace />}
|
||||
<ElectronTitleBar />
|
||||
<div id="main-wrapper">
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/download-app" element={<DownloadAppPage />} />
|
||||
<Route path="/">
|
||||
<Route path="chat" element={
|
||||
<ProtectedRoute>
|
||||
<ChatPage />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
</Route>
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
@@ -5,14 +5,14 @@
|
||||
* @version 1.0.0
|
||||
*/
|
||||
|
||||
import './resources/css/style.scss';
|
||||
import './pages/app/resources/css/style.scss';
|
||||
import "mdui/mdui.css";
|
||||
|
||||
import "./utils/material";
|
||||
import "./core/init";
|
||||
import "./electron/electron";
|
||||
import "./pages/app/utils/material";
|
||||
import "./pages/app/core/init";
|
||||
import "./pages/app/electron/electron";
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './ui/App';
|
||||
import App from './App';
|
||||
import { StrictMode } from 'react';
|
||||
|
||||
// Initialize React app
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import { LeftPanel } from "./app/ui/components/chat/LeftPanel";
|
||||
import { RightPanel } from "./app/ui/components/chat/RightPanel";
|
||||
|
||||
export default function ChatPage() {
|
||||
return (
|
||||
<div id="chat-interface">
|
||||
<div className="all-container">
|
||||
<LeftPanel />
|
||||
<RightPanel />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
export default function DownloadAppPage() {
|
||||
return (
|
||||
<div className="download-app-screen">
|
||||
<div className="inner">
|
||||
<h1>Чтобы пользоваться мессенджером, скачайте приложение</h1>
|
||||
<p>
|
||||
Этот сайт <b>не предназначен</b> для работы на маленьких экранах, поэтому
|
||||
вам нужно скачать приложение мессенджера.
|
||||
</p>
|
||||
|
||||
<a href="https://github.com/denis0001-dev/FromChat-android/releases/latest">
|
||||
<mdui-button>Скачать на GitHub</mdui-button>
|
||||
</a>
|
||||
|
||||
<p>
|
||||
Если возникнут сложности или есть вопросы, нажмите кнопку!
|
||||
</p>
|
||||
|
||||
<a href="https://t.me/denis0001-dev">
|
||||
<mdui-button>Написать в поддержку</mdui-button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAppState } from "./app/ui/state";
|
||||
|
||||
function GitHubLink({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<a href="https://github.com/denis0001-dev/FromChat" target="_blank">{children}</a>
|
||||
);
|
||||
}
|
||||
|
||||
function SupportLink({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<a href="https://t.me/denis0001-dev" target="_blank">{children}</a>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAppState();
|
||||
|
||||
const handleGetStarted = () => {
|
||||
if (user.authToken && user.currentUser) {
|
||||
navigate("/chat");
|
||||
} else {
|
||||
navigate("/login");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="homepage">
|
||||
<header className="homepage-header">
|
||||
<div className="container">
|
||||
<div className="header-content">
|
||||
<div className="logo">
|
||||
<h1>FromChat</h1>
|
||||
<span className="tagline">100% открытый мессенджер</span>
|
||||
</div>
|
||||
<nav className="header-nav">
|
||||
<GitHubLink>
|
||||
<mdui-button variant="text">GitHub</mdui-button>
|
||||
</GitHubLink>
|
||||
<SupportLink>
|
||||
<mdui-button variant="text">Поддержка</mdui-button>
|
||||
</SupportLink>
|
||||
|
||||
{user.authToken ? (
|
||||
<mdui-button variant="filled" onClick={() => navigate("/chat")}>
|
||||
Перейти в чат
|
||||
</mdui-button>
|
||||
) : (
|
||||
<mdui-button variant="filled" onClick={() => navigate("/login")}>
|
||||
Войти
|
||||
</mdui-button>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="homepage-main">
|
||||
<section className="hero">
|
||||
<div className="container">
|
||||
<div className="hero-content">
|
||||
<h2 className="hero-title">
|
||||
Безопасный мессенджер с открытым исходным кодом
|
||||
</h2>
|
||||
<p className="hero-description">
|
||||
FromChat — это полностью открытый мессенджер с end-to-end шифрованием,
|
||||
поддержкой файлов и уведомлений. Создан для тех, кто ценит приватность и свободу.
|
||||
</p>
|
||||
<div className="hero-actions">
|
||||
<mdui-button
|
||||
variant="filled"
|
||||
onClick={handleGetStarted}
|
||||
>
|
||||
{user.authToken ? "Перейти в чат" : "Начать общение"}
|
||||
</mdui-button>
|
||||
<mdui-button
|
||||
variant="outlined"
|
||||
onClick={() => navigate("/register")}
|
||||
>
|
||||
Зарегистрироваться
|
||||
</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-visual">
|
||||
<div className="chat-preview">
|
||||
<div className="chat-window">
|
||||
<div className="chat-header">
|
||||
<div className="chat-title">Общий чат</div>
|
||||
<div className="online-indicator">●</div>
|
||||
</div>
|
||||
<div className="chat-messages">
|
||||
<div className="message received">
|
||||
<div className="message-avatar">А</div>
|
||||
<div className="message-content">
|
||||
<div className="message-text">Привет! Как дела?</div>
|
||||
<div className="message-time">14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="message sent">
|
||||
<div className="message-content">
|
||||
<div className="message-text">Всё отлично! А у тебя как?</div>
|
||||
<div className="message-time">14:32</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="message received">
|
||||
<div className="message-avatar">Б</div>
|
||||
<div className="message-content">
|
||||
<div className="message-text">Отправляю файл 📎</div>
|
||||
<div className="message-time">14:35</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="features">
|
||||
<div className="container">
|
||||
<h3 className="section-title">Возможности</h3>
|
||||
<div className="features-grid">
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="security"></mdui-icon>
|
||||
</div>
|
||||
<h4>End-to-End Шифрование</h4>
|
||||
<p>
|
||||
Ваши личные сообщения защищены современным шифрованием X25519 + AES-GCM.
|
||||
Только вы и получатель можете прочитать сообщения.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="code"></mdui-icon>
|
||||
</div>
|
||||
<h4>100% открытый код</h4>
|
||||
<p>
|
||||
Весь исходный код доступен на <GitHubLink>GitHub</GitHubLink>. Вы можете проверить безопасность,
|
||||
внести изменения или развернуть свой сервер.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="attach_file"></mdui-icon>
|
||||
</div>
|
||||
<h4>Обмен Файлами</h4>
|
||||
<p>
|
||||
Отправляйте файлы до 4 ГБ. Файлы в личных сообщениях шифруются.
|
||||
В общем чате шифрования нет, так как ваши сообщения могут читать все пользователи FromChat.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="notifications"></mdui-icon>
|
||||
</div>
|
||||
<h4>Уведомления</h4>
|
||||
<p>
|
||||
Получайте push-уведомления в браузере и настольном приложении.
|
||||
Никогда не пропустите важное сообщение.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="edit"></mdui-icon>
|
||||
</div>
|
||||
<h4>Редактирование</h4>
|
||||
<p>
|
||||
Редактируйте и удаляйте свои сообщения. Отвечайте на сообщения
|
||||
для лучшего контекста общения.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-card">
|
||||
<div className="feature-icon">
|
||||
<mdui-icon name="computer"></mdui-icon>
|
||||
</div>
|
||||
<h4>Кроссплатформенность</h4>
|
||||
<p>
|
||||
Работает в браузере и как настольное приложение для Windows,
|
||||
macOS и Linux. Единый интерфейс везде.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="download">
|
||||
<div className="container">
|
||||
<div className="download-content">
|
||||
<h3>Скачайте приложение</h3>
|
||||
<p>
|
||||
Для лучшего опыта используйте настольное приложение с поддержкой
|
||||
уведомлений и автономной работы.
|
||||
</p>
|
||||
<div className="download-buttons">
|
||||
<a
|
||||
href="https://github.com/Toolbox-io/FromChat/actions/workflows/build.yml"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<mdui-button variant="filled">
|
||||
<mdui-icon name="download" slot="icon"></mdui-icon>
|
||||
Скачать для ПК
|
||||
</mdui-button>
|
||||
</a>
|
||||
<mdui-button variant="outlined" onClick={() => navigate("/login")}>
|
||||
<mdui-icon name="language" slot="icon"></mdui-icon>
|
||||
Веб-версия
|
||||
</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="cta">
|
||||
<div className="container">
|
||||
<div className="cta-content">
|
||||
<h3>Готовы начать общение?</h3>
|
||||
<p>
|
||||
Присоединяйтесь к FromChat и общайтесь безопасно с друзьями и коллегами.
|
||||
</p>
|
||||
<div className="cta-actions">
|
||||
<mdui-button
|
||||
variant="filled"
|
||||
onClick={() => navigate("/register")}
|
||||
>
|
||||
Создать аккаунт
|
||||
</mdui-button>
|
||||
<mdui-button
|
||||
variant="outlined"
|
||||
onClick={() => navigate("/login")}
|
||||
>
|
||||
Войти
|
||||
</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="homepage-footer">
|
||||
<div className="container">
|
||||
<div className="footer-content">
|
||||
<div className="footer-section">
|
||||
<h4>Ссылки</h4>
|
||||
<GitHubLink>GitHub</GitHubLink>
|
||||
<SupportLink>Поддержка</SupportLink>
|
||||
</div>
|
||||
<div className="footer-section">
|
||||
<h4>Лицензия</h4>
|
||||
<p>GPL-3.0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom">
|
||||
<p>© 2025 FromChat. Сделано программистом denis0001-dev с ❤️ для свободы общения.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { useImmer } from "use-immer";
|
||||
import { AlertsContainer, type Alert, type AlertType } from "./app/ui/components/Alerts";
|
||||
import { AuthContainer, AuthHeader } from "./app/ui/components/Auth";
|
||||
import type { ErrorResponse, LoginRequest, LoginResponse } from "./app/core/types";
|
||||
import { ensureKeysOnLogin } from "./app/auth/crypto";
|
||||
import { API_BASE_URL } from "./app/core/config";
|
||||
import { useRef } from "react";
|
||||
import type { TextField } from "mdui/components/text-field";
|
||||
import { useAppState } from "./app/ui/state";
|
||||
import { MaterialTextField } from "./app/ui/components/core/TextField";
|
||||
import { initialize, isSupported, startElectronReceiver, subscribe } from "./app/utils/push-notifications";
|
||||
import { isElectron } from "./app/electron/electron";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LoginPage() {
|
||||
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
||||
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<TextField>(null);
|
||||
const passwordElement = useRef<TextField>(null);
|
||||
|
||||
return (
|
||||
<AuthContainer>
|
||||
<AuthHeader icon="login" title="Добро пожаловать!" subtitle="Войдите в свой аккаунт" />
|
||||
<div className="auth-body">
|
||||
<AlertsContainer alerts={alerts} />
|
||||
|
||||
<form
|
||||
onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const username = usernameElement.current!.value.trim();
|
||||
const password = passwordElement.current!.value.trim();
|
||||
|
||||
if (!username || !password) {
|
||||
showAlert("danger", "Пожалуйста, заполните все поля");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const request: LoginRequest = {
|
||||
username: username,
|
||||
password: password
|
||||
}
|
||||
|
||||
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();
|
||||
// Store the JWT token first
|
||||
setUser(data.token, data.user);
|
||||
|
||||
// Setup keys with the token we just received
|
||||
try {
|
||||
await ensureKeysOnLogin(password, data.token);
|
||||
} catch (e) {
|
||||
console.error("Key setup failed:", e);
|
||||
}
|
||||
|
||||
navigate("/chat");
|
||||
|
||||
// Initialize notifications
|
||||
try {
|
||||
if (isSupported()) {
|
||||
const initialized = await initialize();
|
||||
if (initialized) {
|
||||
await subscribe(data.token);
|
||||
|
||||
// For Electron, start the notification receiver
|
||||
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();
|
||||
showAlert("danger", data.message || "Неверное имя пользователя или пароль");
|
||||
}
|
||||
} catch (error) {
|
||||
showAlert("danger", "Ошибка соединения с сервером");
|
||||
}
|
||||
}}>
|
||||
<MaterialTextField
|
||||
label="Имя пользователя"
|
||||
id="login-username"
|
||||
name="username"
|
||||
variant="outlined"
|
||||
icon="person--filled"
|
||||
autocomplete="username"
|
||||
required
|
||||
ref={usernameElement} />
|
||||
|
||||
<MaterialTextField
|
||||
label="Пароль"
|
||||
id="login-password"
|
||||
name="password"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
toggle-password
|
||||
icon="password--filled"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
ref={passwordElement} />
|
||||
|
||||
<mdui-button type="submit">Войти</mdui-button>
|
||||
</form>
|
||||
|
||||
<div className="text-center">
|
||||
<p>
|
||||
Ещё нет аккаунта?
|
||||
<a
|
||||
href="#"
|
||||
className="link"
|
||||
onClick={() => navigate("/register")}>
|
||||
Зарегистрируйтесь
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AuthContainer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function NotFoundPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="not-found-page">
|
||||
<div className="not-found-container">
|
||||
<div className="not-found-content">
|
||||
<div className="error-code">404</div>
|
||||
<h1>Страница не найдена</h1>
|
||||
<p>
|
||||
К сожалению, запрашиваемая страница не существует или была перемещена.
|
||||
</p>
|
||||
<div className="not-found-actions">
|
||||
<mdui-button
|
||||
variant="filled"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
На главную
|
||||
</mdui-button>
|
||||
<mdui-button
|
||||
variant="outlined"
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
Назад
|
||||
</mdui-button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="not-found-illustration">
|
||||
<mdui-icon name="search_off"></mdui-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { useEffect } from "react";
|
||||
import { useAppState } from "./app/ui/state";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface ProtectedRouteProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function ProtectedRoute({ children }: ProtectedRouteProps) {
|
||||
const { user } = useAppState();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!user.authToken) {
|
||||
navigate("/login");
|
||||
return;
|
||||
}
|
||||
}, [user.authToken, user.currentUser, navigate]);
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import { useImmer } from "use-immer";
|
||||
import { AuthContainer, AuthHeader } from "./app/ui/components/Auth";
|
||||
import { AlertsContainer, type Alert, type AlertType } from "./app/ui/components/Alerts";
|
||||
import { useRef } from "react";
|
||||
import { TextField } from "mdui/components/text-field";
|
||||
import type { ErrorResponse, RegisterRequest, LoginResponse } from "./app/core/types";
|
||||
import { API_BASE_URL } from "./app/core/config";
|
||||
import { useAppState } from "./app/ui/state";
|
||||
import { MaterialTextField } from "./app/ui/components/core/TextField";
|
||||
import { ensureKeysOnLogin } from "./app/auth/crypto";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
||||
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<TextField>(null);
|
||||
const passwordElement = useRef<TextField>(null);
|
||||
const confirmPasswordElement = useRef<TextField>(null);
|
||||
|
||||
return (
|
||||
<AuthContainer>
|
||||
<AuthHeader icon="person_add" title="Регистрация" subtitle="Создайте новый аккаунт" />
|
||||
<div className="auth-body">
|
||||
<AlertsContainer alerts={alerts} />
|
||||
|
||||
<form onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const username = usernameElement.current!.value.trim();
|
||||
const password = passwordElement.current!.value.trim();
|
||||
const confirmPassword = confirmPasswordElement.current!.value.trim();
|
||||
|
||||
if (!username || !password || !confirmPassword) {
|
||||
showAlert("danger", "Пожалуйста, заполните все поля");
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
showAlert("danger", "Пароли не совпадают");
|
||||
return;
|
||||
}
|
||||
|
||||
if (username.length < 3 || username.length > 20) {
|
||||
showAlert("danger", "Имя пользователя должно быть от 3 до 20 символов");
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 5 || password.length > 50) {
|
||||
showAlert("danger", "Пароль должен быть от 5 до 50 символов");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const request: RegisterRequest = {
|
||||
username: username,
|
||||
password: password,
|
||||
confirm_password: confirmPassword
|
||||
}
|
||||
|
||||
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();
|
||||
// Store the JWT token first
|
||||
setUser(data.token, data.user);
|
||||
|
||||
// Setup keys with the token we just received
|
||||
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", "Ошибка соединения с сервером");
|
||||
}
|
||||
}}>
|
||||
<MaterialTextField
|
||||
label="Имя пользователя"
|
||||
id="register-username"
|
||||
name="username"
|
||||
variant="outlined"
|
||||
icon="person--filled"
|
||||
autocomplete="username"
|
||||
maxlength={20}
|
||||
counter
|
||||
required
|
||||
ref={usernameElement} />
|
||||
<MaterialTextField
|
||||
label="Пароль"
|
||||
id="register-password"
|
||||
name="password"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
toggle-password
|
||||
icon="password--filled"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
ref={passwordElement} />
|
||||
<MaterialTextField
|
||||
label="Подтвердите пароль"
|
||||
id="register-confirm-password"
|
||||
name="confirm_password"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
toggle-password
|
||||
icon="password--filled"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
ref={confirmPasswordElement} />
|
||||
|
||||
<mdui-button type="submit">Зарегистрироваться</mdui-button>
|
||||
</form>
|
||||
|
||||
<div className="text-center">
|
||||
<p>
|
||||
Уже есть аккаунт?
|
||||
<a
|
||||
href="#"
|
||||
id="login-link"
|
||||
className="link"
|
||||
onClick={() => navigate("/login")}>
|
||||
Войдите
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AuthContainer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.not-found-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.not-found-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 3rem;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.not-found-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 6rem;
|
||||
font-weight: 900;
|
||||
color: #667eea;
|
||||
line-height: 1;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.not-found-content h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #2d3748;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.not-found-content p {
|
||||
font-size: 1.1rem;
|
||||
color: #718096;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.not-found-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.not-found-illustration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #667eea;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.not-found-container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 2rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.not-found-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.not-found-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
+162
-31
@@ -1,8 +1,26 @@
|
||||
@use "common/colors" as *;
|
||||
@use "common/material" as *;
|
||||
@use "sass:color";
|
||||
|
||||
#chat-interface {
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, $color-dark-background 0%, $color-dark-surface-container 70%, rgba($color-dark-primary-container, 0.3) 100%);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba($color-dark-primary, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba($color-dark-tertiary, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba($color-dark-secondary, 0.1) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
@@ -69,10 +87,13 @@
|
||||
|
||||
.chat-header {
|
||||
padding: 16px;
|
||||
background: $color-dark-surface-container;
|
||||
background: rgba($color-dark-surface-container, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: black 0 0 20px;
|
||||
box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.chat-header-avatar {
|
||||
width: 45px;
|
||||
@@ -148,8 +169,10 @@
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
padding: 10px 20px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
@@ -337,9 +360,47 @@
|
||||
}
|
||||
|
||||
&.received .message-inner {
|
||||
background-color: $color-dark-surface-container;
|
||||
background: $color-dark-surface-container;
|
||||
color: $color-dark-on-surface;
|
||||
border-top-left-radius: 5px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba($color-dark-outline-variant, 0.4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba($color-dark-primary, 0.05), rgba($color-dark-tertiary, 0.03));
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.received .message-time {
|
||||
color: $color-dark-on-surface-variant;
|
||||
font-weight: 500;
|
||||
|
||||
.message-status-indicator {
|
||||
.success-icon {
|
||||
color: $color-dark-on-surface-variant;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
color: #ff6b6b;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sent {
|
||||
@@ -347,13 +408,47 @@
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-inner {
|
||||
background-color: $color-dark-primary-container;
|
||||
color: $color-dark-on-primary-container;
|
||||
background: linear-gradient(135deg, color.adjust($color-dark-primary, $lightness: 8%), color.adjust($color-dark-primary-container, $lightness: 5%));
|
||||
color: $color-dark-on-primary;
|
||||
border-top-right-radius: 5px;
|
||||
box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
|
||||
border: 1px solid rgba($color-dark-primary, 0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.message-time {
|
||||
color: $color-dark-on-primary-container;
|
||||
color: $color-dark-on-primary;
|
||||
font-weight: 500;
|
||||
|
||||
.message-status-indicator {
|
||||
.success-icon {
|
||||
color: $color-dark-on-primary;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
color: #ff6b6b;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -401,30 +496,15 @@
|
||||
|
||||
.chat-input-wrapper {
|
||||
position: relative;
|
||||
margin: 0 20px 20px 20px;
|
||||
|
||||
&::before {
|
||||
$height: 20px;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -$height;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
$color-dark-surface,
|
||||
rgba(255, 255, 255, 0),
|
||||
);
|
||||
}
|
||||
margin: 0 10px 10px 10px;
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
background-color: $color-dark-surface-container;
|
||||
background: $color-dark-surface-container;
|
||||
border-radius: 30px;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba($color-dark-outline-variant, 0.4);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.contextual-preview {
|
||||
padding: 12px 16px 0 16px;
|
||||
@@ -467,11 +547,17 @@
|
||||
outline: none;
|
||||
caret-color: $color-dark-primary;
|
||||
color: $color-dark-on-surface;
|
||||
background: transparent;
|
||||
resize: none;
|
||||
font: inherit;
|
||||
font-size: 13pt;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-dark-on-surface-variant;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@@ -485,17 +571,21 @@
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: $color-dark-primary;
|
||||
background: linear-gradient(135deg, color.adjust($color-dark-primary, $lightness: 8%), color.adjust($color-dark-primary-container, $lightness: 5%));
|
||||
color: $color-dark-on-primary;
|
||||
border: none;
|
||||
border: 1px solid rgba($color-dark-primary, 0.5);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.25s ease;
|
||||
transition: all 0.25s ease;
|
||||
align-self: flex-end;
|
||||
box-shadow: 0 0 20px rgba($color-dark-primary, 0.4);
|
||||
|
||||
@include hoverStateLayer($background: $color-dark-primary);
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 30px rgba($color-dark-primary, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -505,6 +595,47 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ChatHeader component styles
|
||||
.chat-header-left {
|
||||
.product-name {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||
}
|
||||
|
||||
.profile {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba($color-dark-primary, 0.4);
|
||||
box-shadow: 0 0 15px rgba($color-dark-primary, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 25px rgba($color-dark-primary, 0.5);
|
||||
border-color: rgba($color-dark-primary, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-profile-pic {
|
||||
img {
|
||||
width: 40px;
|
||||
@@ -0,0 +1,657 @@
|
||||
@use "common/material" as *;
|
||||
|
||||
.homepage {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, $color-dark-background 0%, $color-dark-surface-container 50%, $color-dark-primary-container 100%);
|
||||
color: $color-dark-on-background;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, rgba($color-dark-primary, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba($color-dark-tertiary, 0.3) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba($color-dark-secondary, 0.2) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// Cascaded styles for all child elements
|
||||
* {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Container styles
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
// Header styles
|
||||
.homepage-header {
|
||||
padding: 1rem 0;
|
||||
background: rgba($color-dark-surface-container, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba($color-dark-primary, 0.3);
|
||||
box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hero section
|
||||
.hero {
|
||||
padding: 4rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
margin-top: 0;
|
||||
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1.5rem;
|
||||
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary, $color-dark-secondary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 30px rgba($color-dark-primary, 0.5);
|
||||
animation: neonGlow 3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
|
||||
.chat-preview {
|
||||
perspective: 1000px;
|
||||
|
||||
.chat-window {
|
||||
background: rgba($color-dark-surface-container, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 1.5rem;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.5),
|
||||
0 0 20px rgba($color-dark-primary, 0.3),
|
||||
inset 0 1px 0 rgba($color-dark-primary, 0.2);
|
||||
transform: rotateY(-5deg) rotateX(5deg);
|
||||
color: $color-dark-on-surface;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
border: 1px solid rgba($color-dark-primary, 0.3);
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba($color-dark-primary, 0.3);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.chat-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.online-indicator {
|
||||
color: $color-dark-primary;
|
||||
font-size: 0.8rem;
|
||||
text-shadow: 0 0 10px rgba($color-dark-primary, 0.8);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
|
||||
&.sent {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
background: linear-gradient(135deg, $color-dark-primary, $color-dark-primary-container);
|
||||
color: $color-dark-on-primary;
|
||||
box-shadow: 0 0 15px rgba($color-dark-primary, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.received {
|
||||
.message-content {
|
||||
background: rgba($color-dark-surface-variant, 0.8);
|
||||
color: $color-dark-on-surface-variant;
|
||||
border: 1px solid rgba($color-dark-outline-variant, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, $color-dark-primary, $color-dark-tertiary);
|
||||
color: $color-dark-on-primary;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 10px rgba($color-dark-primary, 0.4);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 70%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 18px;
|
||||
position: relative;
|
||||
|
||||
.message-text {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.7;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Features section
|
||||
.features {
|
||||
padding: 6rem 0;
|
||||
background: rgba($color-dark-surface-container, 0.3);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid rgba($color-dark-primary, 0.2);
|
||||
border-bottom: 1px solid rgba($color-dark-primary, 0.2);
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 3rem;
|
||||
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
|
||||
.feature-card {
|
||||
background: rgba($color-dark-surface-container, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
border: 1px solid rgba($color-dark-primary, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba($color-dark-primary, 0.1), rgba($color-dark-tertiary, 0.1));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.3),
|
||||
0 0 30px rgba($color-dark-primary, 0.2);
|
||||
border-color: rgba($color-dark-primary, 0.5);
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, rgba($color-dark-primary, 0.3), rgba($color-dark-tertiary, 0.3));
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid rgba($color-dark-primary, 0.4);
|
||||
box-shadow: 0 0 15px rgba($color-dark-primary, 0.2);
|
||||
user-select: none;
|
||||
|
||||
mdui-icon {
|
||||
font-size: 1.5rem;
|
||||
color: $color-dark-primary;
|
||||
text-shadow: 0 0 10px rgba($color-dark-primary, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: $color-dark-on-surface;
|
||||
text-shadow: 0 0 10px rgba($color-dark-primary, 0.3);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
opacity: 0.9;
|
||||
color: $color-dark-on-surface-variant;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Download section
|
||||
.download {
|
||||
padding: 6rem 0;
|
||||
|
||||
.download-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.download-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CTA section
|
||||
.cta {
|
||||
padding: 6rem 0;
|
||||
background: rgba($color-dark-surface-container, 0.3);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid rgba($color-dark-primary, 0.2);
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
h3 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
background: linear-gradient(45deg, $color-dark-primary, $color-dark-tertiary);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.homepage-footer {
|
||||
background: rgba($color-dark-surface-container, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
padding: 3rem 0 1rem;
|
||||
border-top: 1px solid rgba($color-dark-primary, 0.3);
|
||||
box-shadow: 0 -4px 20px rgba($color-dark-primary, 0.1);
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.footer-section {
|
||||
h4 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: $color-dark-on-surface;
|
||||
text-shadow: 0 0 10px rgba($color-dark-primary, 0.3);
|
||||
}
|
||||
|
||||
p {
|
||||
opacity: 0.8;
|
||||
line-height: 1.6;
|
||||
color: $color-dark-on-surface-variant;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-dark-on-surface;
|
||||
text-decoration: none;
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.25rem 0;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: $color-dark-primary;
|
||||
text-shadow: 0 0 10px rgba($color-dark-primary, 0.5);
|
||||
background: rgba($color-dark-primary, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid rgba($color-dark-primary, 0.3);
|
||||
|
||||
p {
|
||||
opacity: 0.7;
|
||||
margin: 0;
|
||||
color: $color-dark-on-surface-variant;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Keyframes for animations
|
||||
@keyframes neonGlow {
|
||||
0% {
|
||||
text-shadow: 0 0 20px rgba($color-dark-primary, 0.5), 0 0 40px rgba($color-dark-primary, 0.3);
|
||||
}
|
||||
100% {
|
||||
text-shadow: 0 0 30px rgba($color-dark-primary, 0.8), 0 0 60px rgba($color-dark-primary, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Design
|
||||
@media (min-width: 1024px) {
|
||||
.homepage {
|
||||
.homepage-header {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 2rem);
|
||||
max-width: 1200px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba($color-dark-primary, 0.3);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.3),
|
||||
0 0 20px rgba($color-dark-primary, 0.2);
|
||||
backdrop-filter: blur(30px);
|
||||
background: rgba($color-dark-surface-container, 0.9);
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.homepage {
|
||||
.homepage-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.homepage {
|
||||
.container {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.homepage-header {
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
|
||||
.hero-content {
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
padding: 1rem;
|
||||
|
||||
.chat-preview {
|
||||
.chat-window {
|
||||
transform: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.feature-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.download {
|
||||
.download-content {
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.download-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
.cta-content {
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.cta-actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-footer {
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.homepage {
|
||||
.hero {
|
||||
.hero-content {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features {
|
||||
.section-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.download {
|
||||
.download-content {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
.cta-content {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+2
@@ -10,6 +10,8 @@
|
||||
@use "electron";
|
||||
@use "dialogs/reply";
|
||||
@use "download-app";
|
||||
@use "404" as not-found;
|
||||
@use "homepage";
|
||||
|
||||
@use "lib/fonts/montserrat";
|
||||
@use "lib/fonts/material-symbols";
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
+4
-3
@@ -7,14 +7,15 @@ import { API_BASE_URL } from "../../core/config";
|
||||
import { useRef } from "react";
|
||||
import type { TextField } from "mdui/components/text-field";
|
||||
import { useAppState } from "../state";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { MaterialTextField } from "../components/core/TextField";
|
||||
import { initialize, isSupported, startElectronReceiver, subscribe } from "../../utils/push-notifications";
|
||||
import { isElectron } from "../../electron/electron";
|
||||
|
||||
export default function LoginScreen() {
|
||||
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
||||
const setCurrentPage = useAppState(state => state.setCurrentPage);
|
||||
const setUser = useAppState(state => state.setUser);
|
||||
const navigate = useNavigate();
|
||||
|
||||
function showAlert(type: AlertType, message: string) {
|
||||
updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
|
||||
@@ -67,7 +68,7 @@ export default function LoginScreen() {
|
||||
console.error("Key setup failed:", e);
|
||||
}
|
||||
|
||||
setCurrentPage("chat");
|
||||
navigate("/chat");
|
||||
|
||||
// Initialize notifications
|
||||
try {
|
||||
@@ -130,7 +131,7 @@ export default function LoginScreen() {
|
||||
<a
|
||||
href="#"
|
||||
className="link"
|
||||
onClick={() => setCurrentPage("register")}>
|
||||
onClick={() => navigate("/register")}>
|
||||
Зарегистрируйтесь
|
||||
</a>
|
||||
</p>
|
||||
+4
-3
@@ -7,13 +7,14 @@ import { TextField } from "mdui/components/text-field";
|
||||
import type { ErrorResponse, RegisterRequest, LoginResponse } from "../../core/types";
|
||||
import { API_BASE_URL } from "../../core/config";
|
||||
import { useAppState } from "../state";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { MaterialTextField } from "../components/core/TextField";
|
||||
import { ensureKeysOnLogin } from "../../auth/crypto";
|
||||
|
||||
export default function RegisterScreen() {
|
||||
const [alerts, updateAlerts] = useImmer<Alert[]>([]);
|
||||
const setCurrentPage = useAppState(state => state.setCurrentPage);
|
||||
const setUser = useAppState(state => state.setUser);
|
||||
const navigate = useNavigate();
|
||||
|
||||
function showAlert(type: AlertType, message: string) {
|
||||
updateAlerts((alerts) => { alerts.push({type: type, message: message}) });
|
||||
@@ -83,7 +84,7 @@ export default function RegisterScreen() {
|
||||
console.error("Key setup failed:", e);
|
||||
}
|
||||
|
||||
setCurrentPage("chat");
|
||||
navigate("/chat");
|
||||
} else {
|
||||
const data: ErrorResponse = await response.json();
|
||||
showAlert("danger", data.message || "Ошибка при регистрации");
|
||||
@@ -136,7 +137,7 @@ export default function RegisterScreen() {
|
||||
href="#"
|
||||
id="login-link"
|
||||
className="link"
|
||||
onClick={() => setCurrentPage("login")}>
|
||||
onClick={() => navigate("/login")}>
|
||||
Войдите
|
||||
</a>
|
||||
</p>
|
||||
@@ -10,7 +10,6 @@ import { API_BASE_URL } from "../core/config";
|
||||
import { initialize, subscribe, startElectronReceiver, isSupported } from "../utils/push-notifications";
|
||||
import { isElectron } from "../electron/electron";
|
||||
|
||||
type Page = "login" | "register" | "chat"
|
||||
export type ChatTabs = "chats" | "channels" | "contacts" | "dms"
|
||||
|
||||
interface ActiveDM {
|
||||
@@ -37,9 +36,6 @@ export interface UserState {
|
||||
}
|
||||
|
||||
interface AppState {
|
||||
currentPage: Page;
|
||||
setCurrentPage: (page: Page) => void;
|
||||
|
||||
// Chat state
|
||||
chat: ChatState;
|
||||
addMessage: (message: Message) => void;
|
||||
@@ -60,13 +56,10 @@ interface AppState {
|
||||
user: UserState;
|
||||
setUser: (token: string, user: User) => void;
|
||||
logout: () => void;
|
||||
restoreUserFromStorage: () => void;
|
||||
restoreUserFromStorage: () => Promise<void>;
|
||||
}
|
||||
|
||||
export const useAppState = create<AppState>((set, get) => ({
|
||||
currentPage: "login", // default page
|
||||
setCurrentPage: (page: Page) => set({ currentPage: page }),
|
||||
|
||||
// Chat state
|
||||
chat: {
|
||||
messages: [],
|
||||
@@ -191,8 +184,7 @@ export const useAppState = create<AppState>((set, get) => ({
|
||||
user: {
|
||||
currentUser: null,
|
||||
authToken: null
|
||||
},
|
||||
currentPage: "login"
|
||||
}
|
||||
}));
|
||||
},
|
||||
restoreUserFromStorage: async () => {
|
||||
@@ -212,8 +204,7 @@ export const useAppState = create<AppState>((set, get) => ({
|
||||
user: {
|
||||
currentUser: user,
|
||||
authToken: token
|
||||
},
|
||||
currentPage: "chat"
|
||||
}
|
||||
}));
|
||||
|
||||
try {
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
import nacl from "tweetnacl";
|
||||
import { hkdfExtractAndExpand } from "../crypto/kdf";
|
||||
import { hkdfExtractAndExpand } from "./kdf";
|
||||
|
||||
export interface X25519KeyPair {
|
||||
publicKey: Uint8Array;
|
||||
+2
-1
@@ -2,6 +2,7 @@ import { API_BASE_URL } from "../core/config";
|
||||
import { isElectron } from "../electron/electron";
|
||||
import { websocket } from "../core/websocket";
|
||||
import type { NewMessageWebSocketMessage, WebSocketMessage } from "../core/types";
|
||||
import serviceWorker from "../service-worker/service-worker.ts?worker&url";
|
||||
|
||||
export interface PushSubscriptionData {
|
||||
endpoint: string;
|
||||
@@ -152,7 +153,7 @@ export async function initialize(): Promise<boolean> {
|
||||
}
|
||||
|
||||
try {
|
||||
registration = await navigator.serviceWorker.register("/assets/serviceWorker.js");
|
||||
registration = await navigator.serviceWorker.register(serviceWorker, { type: "module" });
|
||||
console.log("Service Worker registered successfully");
|
||||
|
||||
const permission = await Notification.requestPermission();
|
||||
@@ -1,50 +0,0 @@
|
||||
import { MINIMUM_WIDTH } from "../core/config";
|
||||
import { isElectron } from "../electron/electron";
|
||||
import { ElectronTitleBar } from "./components/Electron";
|
||||
import useWindowSize from "./hooks/useWindowSize";
|
||||
import ChatScreen from "./screen/ChatScreen";
|
||||
import DownloadAppScreen from "./screen/DownloadAppScreen";
|
||||
import LoginScreen from "./screen/LoginScreen";
|
||||
import RegisterScreen from "./screen/RegisterScreen";
|
||||
import { useAppState } from "./state";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function App() {
|
||||
const { currentPage, restoreUserFromStorage } = useAppState();
|
||||
const { width } = useWindowSize();
|
||||
|
||||
// Restore user from localStorage on app initialization
|
||||
useEffect(() => {
|
||||
restoreUserFromStorage();
|
||||
}, [restoreUserFromStorage]);
|
||||
|
||||
if (!isElectron && width < MINIMUM_WIDTH) {
|
||||
return <DownloadAppScreen />
|
||||
}
|
||||
|
||||
let page = <LoginScreen />;
|
||||
|
||||
switch (currentPage) {
|
||||
case "login": {
|
||||
page = <LoginScreen />
|
||||
break;
|
||||
}
|
||||
case "register": {
|
||||
page = <RegisterScreen />
|
||||
break;
|
||||
}
|
||||
case "chat": {
|
||||
page = <ChatScreen />
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ElectronTitleBar />
|
||||
<div id="main-wrapper">
|
||||
{page}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
+2
-44
@@ -5,8 +5,6 @@ import electron from "vite-plugin-electron/simple";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { resolve } from "path";
|
||||
|
||||
const serviceWorkerPath = resolve(__dirname, "src/service-worker/service-worker.ts");
|
||||
|
||||
const plugins: PluginOption[] = [
|
||||
react(),
|
||||
createHtmlPlugin({
|
||||
@@ -20,31 +18,7 @@ const plugins: PluginOption[] = [
|
||||
minifyCSS: true,
|
||||
minifyJS: true
|
||||
}
|
||||
}),
|
||||
{
|
||||
name: 'service-worker-redirect',
|
||||
configureServer(server) {
|
||||
server.middlewares.use(async (req, res, next) => {
|
||||
if (req.url === '/assets/serviceWorker.js') {
|
||||
try {
|
||||
const traspiled = await server.transformRequest(serviceWorkerPath);
|
||||
|
||||
res.writeHead(200, {
|
||||
'Content-Type': "application/javascript"
|
||||
});
|
||||
res.end(traspiled!.code);
|
||||
} catch (e) {
|
||||
try {
|
||||
res.writeHead(500);
|
||||
res.end();
|
||||
} catch (e) {}
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
|
||||
if (process.env.VITE_ELECTRON) {
|
||||
@@ -107,22 +81,6 @@ export default defineConfig({
|
||||
cssMinify: true,
|
||||
assetsInlineLimit: 0,
|
||||
outDir: process.env.VITE_ELECTRON ? "build/electron/dist" : "build/normal/dist",
|
||||
chunkSizeWarningLimit: 1024,
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
serviceWorker: serviceWorkerPath
|
||||
},
|
||||
output: {
|
||||
entryFileNames: (chunkInfo) => {
|
||||
// Проверяем имя чанка
|
||||
if (chunkInfo.name === 'serviceWorker') {
|
||||
return 'assets/serviceWorker.js'; // Указываем фиксированное имя для этого скрипта
|
||||
}
|
||||
// Для остальных файлов используем стандартное именование с хэшем
|
||||
return 'assets/[name]-[hash].js';
|
||||
}
|
||||
}
|
||||
}
|
||||
chunkSizeWarningLimit: 1024
|
||||
}
|
||||
});
|
||||
@@ -68,6 +68,7 @@
|
||||
"mdui": "^2.1.4",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.9.3",
|
||||
"tweetnacl": "^1.0.3",
|
||||
"use-immer": "^0.11.0",
|
||||
"zustand": "^5.0.8"
|
||||
|
||||
Reference in New Issue
Block a user