mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Implement account suspension, right to delete any message for owner, account deletion
This commit is contained in:
+10
-2
@@ -6,6 +6,7 @@ import { parseProfileLink } from "./core/profileLinks";
|
||||
import NotFoundPage from "./pages/not-found/NotFoundPage";
|
||||
import ProtectedRoute from "./pages/ProtectedRoute";
|
||||
import DownloadAppPage from "./pages/download-app/DownloadAppPage";
|
||||
import { SuspensionDialog } from "./pages/chat/ui/SuspensionDialog";
|
||||
|
||||
// Lazy load route components
|
||||
const HomePage = lazy(() => import("./pages/home/HomePage"));
|
||||
@@ -66,7 +67,7 @@ function SmartCatchAll() {
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const { restoreUserFromStorage } = useAppState();
|
||||
const { restoreUserFromStorage, user } = useAppState();
|
||||
const [authReady, setAuthReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -74,7 +75,7 @@ export default function App() {
|
||||
setAuthReady(true);
|
||||
});
|
||||
}, [restoreUserFromStorage]);
|
||||
|
||||
|
||||
return authReady && (
|
||||
<BrowserRouter>
|
||||
<ElectronTitleBar />
|
||||
@@ -85,6 +86,13 @@ export default function App() {
|
||||
))}
|
||||
</Routes>
|
||||
</div>
|
||||
{user.isSuspended && (
|
||||
<SuspensionDialog
|
||||
reason={user.suspensionReason || "No reason provided"}
|
||||
open={true}
|
||||
onOpenChange={() => {}} // Suspended users can't close the dialog
|
||||
/>
|
||||
)}
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { createPortal } from "react-dom";
|
||||
import { useEffect, type ReactNode } from "react";
|
||||
import { motion, AnimatePresence, type Transition } from "motion/react";
|
||||
|
||||
interface StyledDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
children: ReactNode;
|
||||
onBackdropClick?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function StyledDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
children,
|
||||
onBackdropClick,
|
||||
className = ""
|
||||
}: StyledDialogProps) {
|
||||
const transition: Transition = { duration: 0.3, type: "tween", ease: "easeInOut" };
|
||||
|
||||
// Handle ESC key
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
function handleEsc(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") {
|
||||
onOpenChange(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", handleEsc);
|
||||
return () => document.removeEventListener("keydown", handleEsc);
|
||||
}
|
||||
}, [open, onOpenChange]);
|
||||
|
||||
return createPortal(
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
className={`styled-dialog-backdrop ${className}`}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
if (onBackdropClick) {
|
||||
onBackdropClick();
|
||||
} else {
|
||||
onOpenChange(false);
|
||||
}
|
||||
}
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={transition}>
|
||||
<motion.div
|
||||
className={`styled-dialog ${className}`}
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
transition={transition}>
|
||||
<div className="styled-dialog-content">
|
||||
{children}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.getElementById("root")!
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
@use "../../../css/colors" as *;
|
||||
@use "../../../css/material" as *;
|
||||
@use "sass:color";
|
||||
|
||||
// Base Styled Dialog Styles
|
||||
.styled-dialog-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.styled-dialog {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: calc(100vh - 60px);
|
||||
background: $color-dark-surface-container;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
|
||||
0 9px 46px 8px rgba(0, 0, 0, 0.12),
|
||||
0 11px 15px -7px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// Framer Motion handles all animations
|
||||
// Removed CSS transitions to prevent interference
|
||||
|
||||
.styled-dialog-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
Vendored
+3
@@ -118,6 +118,9 @@ export interface User {
|
||||
bio?: string;
|
||||
profile_picture: string;
|
||||
verified?: boolean;
|
||||
suspended?: boolean;
|
||||
suspension_reason?: string | null;
|
||||
deleted?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -11,6 +11,7 @@ import { delay } from "@/utils/utils";
|
||||
import { CallSignalingHandler } from "./calls/signaling";
|
||||
import { onlineStatusManager } from "./onlineStatusManager";
|
||||
import { typingManager } from "./typingManager";
|
||||
import { useAppState } from "@/pages/chat/state";
|
||||
|
||||
/**
|
||||
* Creates a new WebSocket connection to the chat server
|
||||
@@ -129,6 +130,19 @@ websocket.addEventListener("message", (e) => {
|
||||
typingManager.handleDmTyping(response as any);
|
||||
} else if (response.type === "stopDmTyping") {
|
||||
typingManager.handleStopDmTyping(response as any);
|
||||
} else if (response.type === "suspended") {
|
||||
// Handle account suspension
|
||||
const { setSuspended } = useAppState.getState();
|
||||
const reason = response.data?.reason || "No reason provided";
|
||||
setSuspended(reason);
|
||||
// Close WebSocket connection
|
||||
websocket.close();
|
||||
} else if (response.type === "account_deleted") {
|
||||
// Handle account deletion - silent logout
|
||||
const { logout } = useAppState.getState();
|
||||
logout();
|
||||
// Close WebSocket connection
|
||||
websocket.close();
|
||||
}
|
||||
|
||||
// Route message to global handler if set
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
@use "components";
|
||||
@use "colors" as *;
|
||||
@use "material" as *;
|
||||
@use "../core/components/css/styled-dialog";
|
||||
|
||||
@use "fonts/montserrat";
|
||||
@use "fonts/material-symbols";
|
||||
@@ -41,4 +42,8 @@ mdui-dialog {
|
||||
> *:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
mdui-icon {
|
||||
user-select: none;
|
||||
}
|
||||
@@ -98,6 +98,15 @@ export default function LoginPage() {
|
||||
}
|
||||
} else {
|
||||
const data: ErrorResponse = await response.json();
|
||||
|
||||
// Check for suspension
|
||||
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; // Don't show alert, SuspensionDialog will be shown
|
||||
}
|
||||
|
||||
showAlert("danger", data.message || "Неверное имя пользователя или пароль");
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
@@ -2,219 +2,173 @@
|
||||
@use "../../../css/material" as *;
|
||||
@use "sass:color";
|
||||
|
||||
// Profile Dialog Styles
|
||||
.profile-dialog-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
// Profile Dialog Specific Styles
|
||||
// Base dialog styles are now in _styled-dialog.scss
|
||||
|
||||
&.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
.styled-dialog-content {
|
||||
align-items: center;
|
||||
|
||||
.error-message {
|
||||
color: $color-dark-error;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.profile-picture-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 16px;
|
||||
|
||||
.profile-picture {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 60px;
|
||||
object-fit: cover;
|
||||
border: 3px solid $color-dark-outline;
|
||||
}
|
||||
|
||||
.profile-picture-edit-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 60px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.username-section {
|
||||
text-align: center;
|
||||
|
||||
.username-with-badge {
|
||||
gap: 0;
|
||||
|
||||
.username-input {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: $color-dark-on-surface;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.online-status-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
.online-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: $color-dark-primary;
|
||||
|
||||
&.offline {
|
||||
background: $color-dark-on-surface-variant;
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 0.875rem;
|
||||
color: $color-dark-on-surface;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-sections {
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: calc(100% - (16px * 2));
|
||||
box-sizing: border-box;
|
||||
|
||||
.section {
|
||||
$edge-radius: 24px;
|
||||
|
||||
background: $color-dark-surface-container-high;
|
||||
border-radius: 10px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
transition: outline 0.1s ease;
|
||||
outline: 0px solid transparent;
|
||||
outline-offset: -1px;
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
|
||||
.label {
|
||||
font-size: small;
|
||||
color: $color-dark-on-surface-variant;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $color-dark-on-surface;
|
||||
font-size: medium;
|
||||
width: 100%;
|
||||
line-height: 1.4;
|
||||
font-family: inherit;
|
||||
cursor: text;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
caret-color: $color-dark-primary;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-dark-on-surface-variant;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// First and last section
|
||||
&:first-child {
|
||||
border-top-left-radius: $edge-radius;
|
||||
border-top-right-radius: $edge-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $edge-radius;
|
||||
border-bottom-right-radius: $edge-radius;
|
||||
}
|
||||
|
||||
&.error {
|
||||
outline: 1px solid $color-dark-error;
|
||||
|
||||
.error-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-dialog {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: calc(100vh - 60px);
|
||||
background: $color-dark-surface-container;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
|
||||
0 9px 46px 8px rgba(0, 0, 0, 0.12),
|
||||
0 11px 15px -7px rgba(0, 0, 0, 0.2);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
|
||||
&.open {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.profile-dialog-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.error-message {
|
||||
color: $color-dark-error;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.profile-picture-section {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 16px;
|
||||
|
||||
.profile-picture {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 60px;
|
||||
object-fit: cover;
|
||||
border: 3px solid $color-dark-outline;
|
||||
}
|
||||
|
||||
.profile-picture-edit-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 60px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.username-section {
|
||||
text-align: center;
|
||||
|
||||
.username-with-badge {
|
||||
gap: 0;
|
||||
|
||||
.username-input {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: $color-dark-on-surface;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.online-status-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
.online-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: $color-dark-primary;
|
||||
|
||||
&.offline {
|
||||
background: $color-dark-on-surface-variant;
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 0.875rem;
|
||||
color: $color-dark-on-surface;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-sections {
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: calc(100% - (16px * 2));
|
||||
box-sizing: border-box;
|
||||
|
||||
.section {
|
||||
$edge-radius: 24px;
|
||||
|
||||
background: $color-dark-surface-container-high;
|
||||
border-radius: 10px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
transition: outline 0.1s ease;
|
||||
outline: 0px solid transparent;
|
||||
outline-offset: -1px;
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
|
||||
.label {
|
||||
font-size: small;
|
||||
color: $color-dark-on-surface-variant;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: $color-dark-on-surface;
|
||||
font-size: medium;
|
||||
width: 100%;
|
||||
line-height: 1.4;
|
||||
font-family: inherit;
|
||||
cursor: text;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
caret-color: $color-dark-primary;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-dark-on-surface-variant;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// First and last section
|
||||
&:first-child {
|
||||
border-top-left-radius: $edge-radius;
|
||||
border-top-right-radius: $edge-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: $edge-radius;
|
||||
border-bottom-right-radius: $edge-radius;
|
||||
}
|
||||
|
||||
&.error {
|
||||
outline: 1px solid $color-dark-error;
|
||||
|
||||
.error-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.styled-dialog {
|
||||
.profile-dialog-fab {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
@@ -227,4 +181,28 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Admin Actions Section
|
||||
.admin-actions-section {
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.admin-actions-header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.admin-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-buttons mdui-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
@use "../../../css/colors" as *;
|
||||
@use "../../../css/material" as *;
|
||||
@use "sass:color";
|
||||
|
||||
// Suspension Dialog Content Styles
|
||||
.suspension-dialog-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
|
||||
.suspension-icon-section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.suspension-icon {
|
||||
font-size: 80px;
|
||||
color: #f44336;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.suspension-text {
|
||||
max-width: 400px;
|
||||
|
||||
.suspension-headline {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
color: #f44336;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.suspension-body {
|
||||
font-size: 16px;
|
||||
margin: 0 0 20px 0;
|
||||
color: $color-dark-on-surface;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.suspension-reason {
|
||||
text-align: left;
|
||||
|
||||
strong {
|
||||
color: $color-dark-on-surface;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.suspension-reason-text {
|
||||
background: $color-dark-surface-container-high;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
color: $color-dark-on-surface;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.suspension-secondary {
|
||||
font-size: 14px;
|
||||
margin: 20px 0 0 0;
|
||||
color: $color-dark-on-surface-variant;
|
||||
line-height: 1.4;
|
||||
|
||||
a {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,4 +10,5 @@
|
||||
@use "animations";
|
||||
@use "callWindow";
|
||||
@use "profile-dialog";
|
||||
@use "typing-indicators";
|
||||
@use "typing-indicators";
|
||||
@use "suspension-dialog";
|
||||
@@ -26,6 +26,9 @@ export interface ProfileDialogData {
|
||||
online?: boolean;
|
||||
isOwnProfile: boolean;
|
||||
verified?: boolean;
|
||||
suspended?: boolean;
|
||||
suspension_reason?: string | null;
|
||||
deleted?: boolean;
|
||||
}
|
||||
|
||||
interface ActiveDM {
|
||||
@@ -73,6 +76,8 @@ interface ChatState {
|
||||
export interface UserState {
|
||||
currentUser: User | null;
|
||||
authToken: string | null;
|
||||
isSuspended: boolean;
|
||||
suspensionReason: string | null;
|
||||
}
|
||||
|
||||
interface AppState {
|
||||
@@ -112,6 +117,7 @@ interface AppState {
|
||||
setUser: (token: string, user: User) => void;
|
||||
logout: () => void;
|
||||
restoreUserFromStorage: () => Promise<void>;
|
||||
setSuspended: (reason: string) => void;
|
||||
|
||||
// Profile dialog state
|
||||
setProfileDialog: (data: ProfileDialogData | null) => void;
|
||||
@@ -226,13 +232,17 @@ export const useAppState = create<AppState>((set, get) => ({
|
||||
// User state
|
||||
user: {
|
||||
currentUser: null,
|
||||
authToken: null
|
||||
authToken: null,
|
||||
isSuspended: false,
|
||||
suspensionReason: null
|
||||
},
|
||||
setUser: (token: string, user: User) => {
|
||||
set(() => ({
|
||||
user: {
|
||||
currentUser: user,
|
||||
authToken: token
|
||||
authToken: token,
|
||||
isSuspended: user.suspended || false,
|
||||
suspensionReason: user.suspension_reason || null
|
||||
}
|
||||
}));
|
||||
|
||||
@@ -279,7 +289,9 @@ export const useAppState = create<AppState>((set, get) => ({
|
||||
set(() => ({
|
||||
user: {
|
||||
currentUser: null,
|
||||
authToken: null
|
||||
authToken: null,
|
||||
isSuspended: false,
|
||||
suspensionReason: null
|
||||
}
|
||||
}));
|
||||
},
|
||||
@@ -296,10 +308,25 @@ export const useAppState = create<AppState>((set, get) => ({
|
||||
const user: User = await response.json();
|
||||
restoreKeys();
|
||||
|
||||
// Check if user is suspended
|
||||
if (user.suspended) {
|
||||
set(() => ({
|
||||
user: {
|
||||
currentUser: user,
|
||||
authToken: token,
|
||||
isSuspended: true,
|
||||
suspensionReason: user.suspension_reason || null
|
||||
}
|
||||
}));
|
||||
return; // Don't initialize managers or notifications for suspended users
|
||||
}
|
||||
|
||||
set(() => ({
|
||||
user: {
|
||||
currentUser: user,
|
||||
authToken: token
|
||||
authToken: token,
|
||||
isSuspended: false,
|
||||
suspensionReason: null
|
||||
}
|
||||
}));
|
||||
|
||||
@@ -679,5 +706,13 @@ export const useAppState = create<AppState>((set, get) => ({
|
||||
dmTypingUsers: newDmTypingUsers
|
||||
}
|
||||
};
|
||||
})
|
||||
}),
|
||||
|
||||
setSuspended: (reason: string) => set((state) => ({
|
||||
user: {
|
||||
...state.user,
|
||||
isSuspended: true,
|
||||
suspensionReason: reason
|
||||
}
|
||||
}))
|
||||
}));
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useState, useEffect, useRef, useMemo, type ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useAppState } from "@/pages/chat/state";
|
||||
import type { ProfileDialogData } from "@/pages/chat/state";
|
||||
import defaultAvatar from "@/images/default-avatar.png";
|
||||
import { confirm } from "mdui/functions/confirm";
|
||||
import { prompt } from "mdui/functions/prompt";
|
||||
import { updateProfile, uploadProfilePicture, fetchUserProfileById } from "@/core/api/profileApi";
|
||||
import { RichTextArea } from "@/core/components/RichTextArea";
|
||||
import { StatusBadge } from "@/core/components/StatusBadge";
|
||||
@@ -11,6 +11,7 @@ import { VerifyButton } from "@/core/components/VerifyButton";
|
||||
import { onlineStatusManager } from "@/core/onlineStatusManager";
|
||||
import { OnlineStatus } from "./right/OnlineStatus";
|
||||
import { Input } from "@/core/components/Input";
|
||||
import { StyledDialog } from "@/core/components/StyledDialog";
|
||||
|
||||
interface SectionProps {
|
||||
type: string;
|
||||
@@ -74,7 +75,6 @@ export function ProfileDialog() {
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [errors, setErrors] = useState<{[key: string]: string}>({});
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [openClass, setOpenClass] = useState(false);
|
||||
|
||||
// Handle dialog open/close based on state
|
||||
useEffect(() => {
|
||||
@@ -82,13 +82,7 @@ export function ProfileDialog() {
|
||||
// Fetch fresh data when opening dialog
|
||||
fetchFreshProfileData(chat.profileDialog);
|
||||
} else if (!chat.profileDialog && isOpen) {
|
||||
// Start close animation
|
||||
setOpenClass(false);
|
||||
|
||||
// Wait for animation to complete before closing
|
||||
setTimeout(() => {
|
||||
setIsOpen(false);
|
||||
}, 300);
|
||||
setIsOpen(false);
|
||||
}
|
||||
}, [chat.profileDialog, isOpen]);
|
||||
|
||||
@@ -123,30 +117,7 @@ export function ProfileDialog() {
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger transition after component mounts
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// Small delay to ensure DOM is ready for transition
|
||||
const timer = requestAnimationFrame(() => {
|
||||
setOpenClass(true);
|
||||
});
|
||||
return () => cancelAnimationFrame(timer);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Handle ESC key
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
function handleEsc(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") {
|
||||
handleClose();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", handleEsc);
|
||||
return () => document.removeEventListener("keydown", handleEsc);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Subscribe to user's online status when dialog opens
|
||||
useEffect(() => {
|
||||
@@ -197,35 +168,21 @@ export function ProfileDialog() {
|
||||
confirmText: "Закрыть",
|
||||
cancelText: "Отмена"
|
||||
});
|
||||
triggerCloseAnimation();
|
||||
closeProfileDialog();
|
||||
} catch {
|
||||
// User cancelled, do nothing
|
||||
}
|
||||
} else {
|
||||
triggerCloseAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
function triggerCloseAnimation() {
|
||||
setOpenClass(false);
|
||||
|
||||
// Wait for animation to complete before closing
|
||||
setTimeout(() => {
|
||||
closeProfileDialog();
|
||||
}, 300); // Match CSS transition duration
|
||||
};
|
||||
|
||||
function handleBackdropClick(e: React.MouseEvent) {
|
||||
if (e.target === e.currentTarget) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function handleDisplayNameChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
if (!currentData) return;
|
||||
const newValue = e.target.value;
|
||||
setCurrentData({ ...currentData, display_name: newValue });
|
||||
|
||||
|
||||
// Validate display name in real-time
|
||||
validateDisplayName(newValue);
|
||||
};
|
||||
@@ -233,7 +190,7 @@ export function ProfileDialog() {
|
||||
function handleUsernameChange(value: string) {
|
||||
if (!currentData) return;
|
||||
setCurrentData({ ...currentData, username: value });
|
||||
|
||||
|
||||
// Validate username in real-time
|
||||
validateUsername(value);
|
||||
};
|
||||
@@ -266,19 +223,19 @@ export function ProfileDialog() {
|
||||
|
||||
function validateDisplayName(value: string) {
|
||||
let error = "";
|
||||
|
||||
|
||||
if (!value || value.trim().length === 0) {
|
||||
error = "Отображаемое имя не может быть пустым";
|
||||
} else if (value.length > 64) {
|
||||
error = "Отображаемое имя не может быть длиннее 64 символов";
|
||||
}
|
||||
|
||||
|
||||
setErrors(prev => ({ ...prev, display_name: error }));
|
||||
};
|
||||
|
||||
function validateUsername(value: string) {
|
||||
let error = "";
|
||||
|
||||
|
||||
if (!value || value.trim().length === 0) {
|
||||
error = "Имя пользователя не может быть пустым";
|
||||
} else if (value.length < 3) {
|
||||
@@ -288,7 +245,7 @@ export function ProfileDialog() {
|
||||
} else if (!/^[a-zA-Z0-9_-]+$/.test(value)) {
|
||||
error = "Имя пользователя может содержать только английские буквы, цифры, дефисы и подчеркивания";
|
||||
}
|
||||
|
||||
|
||||
setErrors(prev => ({ ...prev, username: error }));
|
||||
};
|
||||
|
||||
@@ -297,7 +254,7 @@ export function ProfileDialog() {
|
||||
validateDisplayName(currentData.display_name || "");
|
||||
validateUsername(currentData.username || "");
|
||||
}
|
||||
|
||||
|
||||
return !errors.display_name && !errors.username;
|
||||
};
|
||||
|
||||
@@ -352,8 +309,8 @@ export function ProfileDialog() {
|
||||
setUser(user.authToken, updatedUser);
|
||||
}
|
||||
|
||||
// Close dialog with animation after successful save
|
||||
triggerCloseAnimation();
|
||||
// Close dialog after successful save
|
||||
closeProfileDialog();
|
||||
} catch (error) {
|
||||
console.error("Failed to save profile:", error);
|
||||
// Handle API errors
|
||||
@@ -375,6 +332,90 @@ export function ProfileDialog() {
|
||||
});
|
||||
}
|
||||
|
||||
async function handleSuspend() {
|
||||
if (!currentData?.userId || !user.authToken) return;
|
||||
|
||||
const isSuspending = !currentData.suspended;
|
||||
|
||||
try {
|
||||
if (isSuspending) {
|
||||
const reason = await prompt({
|
||||
headline: "Suspend Account",
|
||||
description: "Enter the reason for suspending this account:",
|
||||
confirmText: "Suspend",
|
||||
cancelText: "Cancel"
|
||||
});
|
||||
|
||||
if (reason) {
|
||||
const response = await fetch(`/api/user/${currentData.userId}/suspend`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${user.authToken}`,
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ reason })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
closeProfileDialog();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
console.error("Failed to suspend user:", error);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Unsuspend user
|
||||
const response = await fetch(`/api/user/${currentData.userId}/unsuspend`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${user.authToken}`,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
closeProfileDialog();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
console.error("Failed to unsuspend user:", error);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to ${isSuspending ? 'suspend' : 'unsuspend'} user:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!currentData?.userId || !user.authToken) return;
|
||||
|
||||
try {
|
||||
await confirm({
|
||||
headline: "Delete Account",
|
||||
description: "This will permanently delete user data but preserve messages and conversations. If the user is online, they will be immediately logged out. This action cannot be undone.",
|
||||
confirmText: "Delete",
|
||||
cancelText: "Cancel"
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/user/${currentData.userId}/delete`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${user.authToken}`,
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
closeProfileDialog();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
console.error("Failed to delete user:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
// User cancelled or error occurred
|
||||
console.error("Failed to delete user:", error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const fabVisible = useMemo(() => {
|
||||
let hasErrors = false;
|
||||
@@ -387,15 +428,19 @@ export function ProfileDialog() {
|
||||
return hasChanges && currentData?.isOwnProfile && !isSaving && !hasErrors;
|
||||
}, [hasChanges, currentData?.isOwnProfile, isSaving, errors]);
|
||||
|
||||
if (!isOpen || !currentData) return null;
|
||||
if (!currentData) return null;
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className={`profile-dialog-backdrop ${openClass ? "open" : ""}`}
|
||||
onClick={handleBackdropClick}>
|
||||
<div className={`profile-dialog ${openClass ? "open" : ""}`}>
|
||||
<div className="profile-dialog-content">
|
||||
<div className="profile-picture-section">
|
||||
return (
|
||||
<StyledDialog
|
||||
open={isOpen}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
handleClose();
|
||||
}
|
||||
}}
|
||||
onBackdropClick={handleClose}
|
||||
>
|
||||
<div className="profile-picture-section">
|
||||
<img
|
||||
className="profile-picture"
|
||||
src={currentData.profilePicture || defaultAvatar}
|
||||
@@ -435,14 +480,46 @@ export function ProfileDialog() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(currentData?.userId || currentData?.isOwnProfile) && (
|
||||
{(currentData?.userId || currentData?.isOwnProfile) && !currentData.deleted && (
|
||||
<div className="online-status-section">
|
||||
<OnlineStatus userId={currentData.userId || user.currentUser!.id} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Verify button for owner */}
|
||||
{!currentData.isOwnProfile && currentData.userId && (
|
||||
{/* Admin Actions Section - Hide for deleted users */}
|
||||
{!currentData.isOwnProfile && user.currentUser?.id === 1 && !currentData.deleted && (
|
||||
<div className="admin-actions-section">
|
||||
<h3 className="admin-actions-header">Admin Actions</h3>
|
||||
<div className="admin-buttons">
|
||||
<mdui-button
|
||||
variant="filled"
|
||||
color="error"
|
||||
icon={currentData.suspended ? "check_circle--filled" : "block--filled"}
|
||||
onClick={handleSuspend}
|
||||
>
|
||||
{currentData.suspended ? "Unsuspend Account" : "Suspend Account"}
|
||||
</mdui-button>
|
||||
<mdui-button
|
||||
variant="filled"
|
||||
color="error"
|
||||
icon="delete_forever--filled"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
Delete Account
|
||||
</mdui-button>
|
||||
<VerifyButton
|
||||
userId={currentData.userId!}
|
||||
verified={currentData.verified || false}
|
||||
onVerificationChange={(verified) => {
|
||||
setCurrentData({ ...currentData, verified });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Verify button for non-admin owner */}
|
||||
{!currentData.isOwnProfile && currentData.userId && user.currentUser?.id !== 1 && (
|
||||
<div className="verify-section">
|
||||
<VerifyButton
|
||||
userId={currentData.userId}
|
||||
@@ -454,49 +531,51 @@ export function ProfileDialog() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="profile-sections">
|
||||
<Section
|
||||
type="username"
|
||||
error={errors.username}
|
||||
icon="alternate_email--filled"
|
||||
label="Имя пользователя:"
|
||||
value={currentData.username}
|
||||
onChange={handleUsernameChange}
|
||||
readOnly={!currentData.isOwnProfile}
|
||||
placeholder="username" />
|
||||
|
||||
{currentData.bio !== undefined && (
|
||||
{/* Hide profile sections for deleted users */}
|
||||
{!currentData.deleted && (
|
||||
<div className="profile-sections">
|
||||
<Section
|
||||
type="bio"
|
||||
icon="info--filled"
|
||||
label="О себе:"
|
||||
value={currentData.bio}
|
||||
onChange={handleBioChange}
|
||||
type="username"
|
||||
error={errors.username}
|
||||
icon="alternate_email--filled"
|
||||
label="Имя пользователя:"
|
||||
value={currentData.username}
|
||||
onChange={handleUsernameChange}
|
||||
readOnly={!currentData.isOwnProfile}
|
||||
placeholder="Нет информации о себе"
|
||||
textArea />
|
||||
)}
|
||||
placeholder="username" />
|
||||
|
||||
{currentData.memberSince && (
|
||||
<Section
|
||||
type="member-since"
|
||||
icon="calendar_month--filled"
|
||||
label="Участник с:"
|
||||
value={formatDate(currentData.memberSince)}
|
||||
readOnly={true} />
|
||||
)}
|
||||
{currentData.bio !== undefined && (
|
||||
<Section
|
||||
type="bio"
|
||||
icon="info--filled"
|
||||
label="О себе:"
|
||||
value={currentData.bio}
|
||||
onChange={handleBioChange}
|
||||
readOnly={!currentData.isOwnProfile}
|
||||
placeholder="Нет информации о себе"
|
||||
textArea />
|
||||
)}
|
||||
|
||||
{currentData.verified && (
|
||||
<Section
|
||||
type="verified"
|
||||
icon="verified--filled"
|
||||
label="Верификация:"
|
||||
value="Этот аккаунт - официальное лицо FromChat."
|
||||
readOnly={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{currentData.memberSince && (
|
||||
<Section
|
||||
type="member-since"
|
||||
icon="calendar_month--filled"
|
||||
label="Участник с:"
|
||||
value={formatDate(currentData.memberSince)}
|
||||
readOnly={true} />
|
||||
)}
|
||||
|
||||
{currentData.verified && (
|
||||
<Section
|
||||
type="verified"
|
||||
icon="verified--filled"
|
||||
label="Верификация:"
|
||||
value="Этот аккаунт - официальное лицо FromChat."
|
||||
readOnly={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{currentData.isOwnProfile && (
|
||||
<mdui-fab
|
||||
@@ -514,8 +593,6 @@ export function ProfileDialog() {
|
||||
style={{ display: "none" }}
|
||||
onChange={handleFileSelect}
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
document.getElementById("root")!
|
||||
</StyledDialog>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { StyledDialog } from "@/core/components/StyledDialog";
|
||||
|
||||
interface SuspensionDialogProps {
|
||||
reason: string;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function SuspensionDialog({ reason, open, onOpenChange }: SuspensionDialogProps) {
|
||||
return (
|
||||
<StyledDialog
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<div className="suspension-dialog-content">
|
||||
<div className="suspension-icon-section">
|
||||
<mdui-icon name="block--filled" className="suspension-icon" />
|
||||
</div>
|
||||
|
||||
<div className="suspension-text">
|
||||
<h2 className="suspension-headline">Аккаунт заблокирован</h2>
|
||||
<p className="suspension-body">
|
||||
Ваш аккаунт был заблокирован за нарушение правил сообщества.
|
||||
Вы не можете отправлять сообщения или взаимодействовать с другими пользователями.
|
||||
</p>
|
||||
{reason && reason !== "No reason provided" && (
|
||||
<div className="suspension-reason">
|
||||
<strong>Причина блокировки:</strong>
|
||||
<div className="suspension-reason-text">
|
||||
{reason}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<p className="suspension-secondary">
|
||||
Если вы считаете, что блокировка была применена по ошибке,
|
||||
<a href="https://t.me/denis0001_dev" target="_blank" rel="noopener noreferrer">обратитесь к администратору</a> для рассмотрения вашего случая.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</StyledDialog>
|
||||
);
|
||||
}
|
||||
@@ -487,7 +487,7 @@ export function Message({ message, isAuthor, onContextMenu, onReactionClick, isD
|
||||
{!isAuthor && !isDm && (
|
||||
<div className="message-profile-pic" onClick={handleProfileClick}>
|
||||
<img
|
||||
src={message.profile_picture || defaultAvatar}
|
||||
src={message.username?.startsWith("Deleted User #") ? defaultAvatar : (message.profile_picture || defaultAvatar)}
|
||||
alt={message.username}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import type { Message, Size2D } from "@/core/types";
|
||||
import { EmojiMenu } from "./EmojiMenu";
|
||||
import { useAppState } from "@/pages/chat/state";
|
||||
|
||||
interface MessageContextMenuProps {
|
||||
message: Message;
|
||||
@@ -33,6 +34,7 @@ export function MessageContextMenu({
|
||||
isOpen,
|
||||
onOpenChange
|
||||
}: MessageContextMenuProps) {
|
||||
const { user } = useAppState();
|
||||
// Internal state for closing animation
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
const [calculatedPosition, setCalculatedPosition] = useState(position);
|
||||
@@ -209,7 +211,7 @@ export function MessageContextMenu({
|
||||
onDelete(message);
|
||||
handleClose();
|
||||
},
|
||||
show: isAuthor
|
||||
show: isAuthor || user.currentUser?.id === 1
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user