nessi
565d538c35
Implemented DELETE `/admin/users/{user_id}/permanent` endpoint with safeguards preventing self-deletion and blocking deletion of game hosts. Added cascade deletion of user's game memberships, chips, sheet states, and invite tokens, with winner references nullified. Added trash icon button (🗑) to admin user rows with bilingual confirmation dialog and error handling for game ownership conflicts. Adjusted
515 lines
13 KiB
JavaScript
515 lines
13 KiB
JavaScript
import { stylesTokens } from "./theme";
|
|
|
|
export const styles = {
|
|
page: {
|
|
minHeight: "100dvh",
|
|
background: "transparent",
|
|
position: "relative",
|
|
zIndex: 1,
|
|
},
|
|
|
|
shell: {
|
|
fontFamily: '"IM Fell English", system-ui',
|
|
padding: "22px 16px 42px",
|
|
maxWidth: 760,
|
|
margin: "0 auto",
|
|
},
|
|
|
|
topBar: {
|
|
position: "relative",
|
|
zIndex: 50,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
padding: "14px 16px",
|
|
borderRadius: 18,
|
|
background: `linear-gradient(135deg, rgba(31, 28, 32, 0.90), ${stylesTokens.panelBg})`,
|
|
border: `1px solid ${stylesTokens.headerBorder}`,
|
|
boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08)",
|
|
backdropFilter: "blur(14px) saturate(1.12)",
|
|
WebkitBackdropFilter: "blur(14px) saturate(1.12)",
|
|
},
|
|
|
|
card: {
|
|
borderRadius: 20,
|
|
overflow: "hidden",
|
|
border: `1px solid ${stylesTokens.panelBorder}`,
|
|
background: `linear-gradient(145deg, rgba(25, 24, 28, 0.88), ${stylesTokens.panelBg})`,
|
|
boxShadow: "0 20px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07)",
|
|
backdropFilter: "blur(14px) saturate(1.08)",
|
|
WebkitBackdropFilter: "blur(14px) saturate(1.08)",
|
|
},
|
|
|
|
cardBody: {
|
|
padding: "14px 16px",
|
|
display: "flex",
|
|
gap: 10,
|
|
alignItems: "center",
|
|
},
|
|
|
|
sectionHeader: {
|
|
padding: "13px 16px",
|
|
fontWeight: 1000,
|
|
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
|
|
letterSpacing: 1.5,
|
|
fontSize: 14,
|
|
color: stylesTokens.textGold,
|
|
|
|
// WICHTIG: Header-Farben aus Theme-Tokens, nicht hart codiert
|
|
background: `linear-gradient(180deg, ${stylesTokens.headerBgTop}, ${stylesTokens.headerBgBottom})`,
|
|
borderBottom: `1px solid ${stylesTokens.headerBorder}`,
|
|
|
|
textTransform: "uppercase",
|
|
textShadow: "0 1px 0 rgba(0,0,0,0.72)",
|
|
},
|
|
|
|
row: {
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr 54px 68px",
|
|
gap: 10,
|
|
padding: "13px 16px",
|
|
alignItems: "center",
|
|
borderBottom: "1px solid rgba(233,216,166,0.10)",
|
|
borderLeft: "4px solid rgba(0,0,0,0)",
|
|
},
|
|
|
|
name: {
|
|
cursor: "pointer",
|
|
userSelect: "none",
|
|
fontWeight: 800,
|
|
letterSpacing: 0.2,
|
|
color: stylesTokens.textMain,
|
|
},
|
|
|
|
statusCell: {
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
|
|
statusBadge: {
|
|
width: 34,
|
|
height: 34,
|
|
display: "inline-flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderRadius: 999,
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
fontWeight: 1100,
|
|
fontSize: 16,
|
|
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
|
|
},
|
|
|
|
tagBtn: {
|
|
padding: "8px 0",
|
|
fontWeight: 1000,
|
|
borderRadius: 13,
|
|
border: `1px solid rgba(233,216,166,0.22)`,
|
|
background: "rgba(255,255,255,0.055)",
|
|
color: stylesTokens.textGold,
|
|
cursor: "pointer",
|
|
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
|
|
},
|
|
|
|
helpBtn: {
|
|
padding: "10px 12px",
|
|
borderRadius: 13,
|
|
border: `1px solid rgba(233,216,166,0.22)`,
|
|
background: "rgba(255,255,255,0.055)",
|
|
color: stylesTokens.textGold,
|
|
fontWeight: 1000,
|
|
cursor: "pointer",
|
|
whiteSpace: "nowrap",
|
|
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
|
|
},
|
|
|
|
input: {
|
|
width: "100%",
|
|
padding: "11px 12px",
|
|
borderRadius: 13,
|
|
border: `1px solid rgba(233,216,166,0.22)`,
|
|
background: "rgba(7,7,10,0.64)",
|
|
color: stylesTokens.textMain,
|
|
outline: "none",
|
|
fontSize: 15,
|
|
},
|
|
|
|
primaryBtn: {
|
|
padding: "11px 15px",
|
|
borderRadius: 13,
|
|
border: `1px solid rgba(233,216,166,0.34)`,
|
|
background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
|
|
color: stylesTokens.textGold,
|
|
fontWeight: 1000,
|
|
cursor: "pointer",
|
|
boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
|
|
},
|
|
|
|
secondaryBtn: {
|
|
padding: "10px 12px",
|
|
borderRadius: 13,
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
background: "rgba(255,255,255,0.055)",
|
|
color: stylesTokens.textMain,
|
|
fontWeight: 900,
|
|
cursor: "pointer",
|
|
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
|
|
},
|
|
|
|
// Admin
|
|
adminWrap: {
|
|
position: "relative",
|
|
zIndex: 1,
|
|
marginTop: 14,
|
|
padding: 14,
|
|
borderRadius: 20,
|
|
border: `1px solid ${stylesTokens.panelBorder}`,
|
|
background: `linear-gradient(145deg, rgba(25, 24, 28, 0.86), ${stylesTokens.panelBg})`,
|
|
boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06)",
|
|
backdropFilter: "blur(14px) saturate(1.08)",
|
|
WebkitBackdropFilter: "blur(14px) saturate(1.08)",
|
|
},
|
|
adminTop: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: 10,
|
|
},
|
|
adminTitle: {
|
|
fontWeight: 1000,
|
|
color: stylesTokens.textGold,
|
|
},
|
|
adminFieldLabel: {
|
|
display: "grid",
|
|
gap: 5,
|
|
color: stylesTokens.textDim,
|
|
fontSize: 12,
|
|
fontWeight: 800,
|
|
},
|
|
userRow: {
|
|
display: "grid",
|
|
gap: 8,
|
|
padding: 10,
|
|
borderRadius: 12,
|
|
background: "rgba(255,255,255,0.055)",
|
|
border: `1px solid rgba(233,216,166,0.10)`,
|
|
},
|
|
|
|
// Modal
|
|
modalOverlay: {
|
|
position: "fixed",
|
|
inset: 0, // statt top/left/right/bottom
|
|
width: "100%", // ✅ NICHT 100vw
|
|
height: "100%", // ✅ NICHT 100vh
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: "calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))",
|
|
boxSizing: "border-box", // wichtig bei padding
|
|
zIndex: 2147483647,
|
|
background: "rgba(0,0,0,0.72)",
|
|
overflowY: "auto",
|
|
},
|
|
|
|
modalCard: {
|
|
width: "min(560px, 100%)",
|
|
borderRadius: 20,
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
background: "linear-gradient(145deg, rgba(27,25,30,0.98), rgba(11,11,14,0.98))",
|
|
boxShadow: "0 24px 70px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.07)",
|
|
padding: 16,
|
|
maxHeight: "calc(100dvh - 32px)",
|
|
overflow: "auto",
|
|
},
|
|
modalHeader: {
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
},
|
|
modalCloseBtn: {
|
|
width: 38,
|
|
height: 38,
|
|
borderRadius: 12,
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
background: "rgba(255,255,255,0.06)",
|
|
color: stylesTokens.textGold,
|
|
fontWeight: 1000,
|
|
cursor: "pointer",
|
|
lineHeight: "38px",
|
|
textAlign: "center",
|
|
},
|
|
|
|
// Help
|
|
helpBody: {
|
|
marginTop: 10,
|
|
paddingTop: 4,
|
|
maxHeight: "70vh",
|
|
overflow: "auto",
|
|
},
|
|
helpSectionTitle: {
|
|
fontWeight: 1000,
|
|
color: stylesTokens.textGold,
|
|
marginTop: 10,
|
|
marginBottom: 6,
|
|
},
|
|
helpText: {
|
|
color: stylesTokens.textMain,
|
|
opacity: 0.92,
|
|
lineHeight: 1.35,
|
|
},
|
|
helpList: {
|
|
marginTop: 10,
|
|
display: "grid",
|
|
gap: 8,
|
|
},
|
|
helpListRow: {
|
|
display: "grid",
|
|
gridTemplateColumns: "42px 1fr",
|
|
gap: 10,
|
|
alignItems: "center",
|
|
color: stylesTokens.textMain,
|
|
},
|
|
helpBadge: {
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: 38,
|
|
height: 38,
|
|
borderRadius: 12,
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
fontWeight: 1100,
|
|
fontSize: 18,
|
|
},
|
|
helpMiniTag: {
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: 38,
|
|
height: 38,
|
|
borderRadius: 12,
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
background: "rgba(255,255,255,0.06)",
|
|
color: stylesTokens.textGold,
|
|
fontWeight: 1100,
|
|
},
|
|
helpDivider: {
|
|
margin: "14px 0",
|
|
height: 1,
|
|
background: "rgba(233,216,166,0.12)",
|
|
},
|
|
|
|
// Login
|
|
loginPage: {
|
|
minHeight: "100dvh",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
padding: 20,
|
|
background: "transparent",
|
|
zIndex: 1,
|
|
},
|
|
loginCard: {
|
|
width: "100%",
|
|
maxWidth: 420,
|
|
padding: 26,
|
|
borderRadius: 24,
|
|
position: "relative",
|
|
zIndex: 2,
|
|
border: `1px solid ${stylesTokens.headerBorder}`,
|
|
background: `linear-gradient(145deg, rgba(29, 27, 31, 0.92), ${stylesTokens.panelBg})`,
|
|
boxShadow: "0 24px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.08)",
|
|
backdropFilter: "blur(16px) saturate(1.12)",
|
|
WebkitBackdropFilter: "blur(16px) saturate(1.12)",
|
|
animation: "popIn 240ms ease-out",
|
|
color: stylesTokens.textMain,
|
|
},
|
|
loginTitle: {
|
|
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
|
|
fontWeight: 1000,
|
|
fontSize: 26,
|
|
color: stylesTokens.textGold,
|
|
textAlign: "center",
|
|
letterSpacing: 0.6,
|
|
},
|
|
loginSubtitle: {
|
|
marginTop: 6,
|
|
textAlign: "center",
|
|
color: stylesTokens.textMain,
|
|
opacity: 0.9,
|
|
fontSize: 15,
|
|
lineHeight: 1.4,
|
|
},
|
|
loginFieldWrap: {
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
},
|
|
loginInput: {
|
|
width: "100%",
|
|
padding: "11px 12px",
|
|
borderRadius: 13,
|
|
border: `1px solid rgba(233,216,166,0.22)`,
|
|
background: "rgba(7,7,10,0.64)",
|
|
color: stylesTokens.textMain,
|
|
outline: "none",
|
|
fontSize: 16,
|
|
},
|
|
loginBtn: {
|
|
padding: "12px 15px",
|
|
borderRadius: 14,
|
|
border: `1px solid rgba(233,216,166,0.34)`,
|
|
background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
|
|
color: stylesTokens.textGold,
|
|
fontWeight: 1000,
|
|
fontSize: 16,
|
|
cursor: "pointer",
|
|
boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
|
|
},
|
|
loginHint: {
|
|
marginTop: 18,
|
|
fontSize: 13,
|
|
opacity: 0.78,
|
|
textAlign: "center",
|
|
color: stylesTokens.textDim,
|
|
lineHeight: 1.35,
|
|
},
|
|
|
|
candleGlowLayer: {
|
|
position: "absolute",
|
|
inset: 0,
|
|
pointerEvents: "none",
|
|
background: `
|
|
radial-gradient(circle at 20% 25%, rgba(255, 200, 120, 0.16), rgba(0,0,0,0) 40%),
|
|
radial-gradient(circle at 80% 30%, rgba(255, 210, 140, 0.12), rgba(0,0,0,0) 42%),
|
|
radial-gradient(circle at 55% 75%, rgba(255, 180, 100, 0.08), rgba(0,0,0,0) 45%)
|
|
`,
|
|
animation: "candleGlow 3.8s ease-in-out infinite",
|
|
mixBlendMode: "multiply",
|
|
},
|
|
|
|
inputRow: {
|
|
display: "flex",
|
|
alignItems: "stretch",
|
|
width: "100%",
|
|
},
|
|
inputInRow: {
|
|
flex: 1,
|
|
padding: 10,
|
|
borderRadius: "12px 0 0 12px",
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
background: "rgba(10,10,12,0.60)",
|
|
color: stylesTokens.textMain,
|
|
outline: "none",
|
|
minWidth: 0,
|
|
fontSize: 16,
|
|
},
|
|
pwToggleBtn: {
|
|
width: 48,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
borderRadius: "0 12px 12px 0",
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
borderLeft: "none",
|
|
background: "rgba(255,255,255,0.06)",
|
|
color: stylesTokens.textGold,
|
|
cursor: "pointer",
|
|
fontWeight: 900,
|
|
padding: 0,
|
|
},
|
|
|
|
// Background
|
|
bgFixed: {
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100vw",
|
|
height: "100dvh",
|
|
zIndex: -1,
|
|
pointerEvents: "none",
|
|
transform: "translateZ(0)",
|
|
backfaceVisibility: "hidden",
|
|
willChange: "transform",
|
|
},
|
|
|
|
bgMap: {
|
|
position: "absolute",
|
|
inset: 0,
|
|
backgroundImage: stylesTokens.bgImage,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
filter: "saturate(0.72) contrast(1.12) brightness(0.42) blur(1.2px)",
|
|
transform: "scale(1.015)",
|
|
backgroundColor: "rgba(8, 7, 12, 0.34)",
|
|
backgroundBlendMode: "multiply",
|
|
},
|
|
|
|
chipGrid: {
|
|
marginTop: 12,
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
|
|
gap: 8,
|
|
},
|
|
|
|
chipBtn: {
|
|
padding: "10px 14px",
|
|
borderRadius: 13,
|
|
border: "1px solid rgba(233,216,166,0.18)",
|
|
background: "rgba(255,255,255,0.055)",
|
|
color: stylesTokens.textGold,
|
|
fontWeight: 1000,
|
|
cursor: "pointer",
|
|
minWidth: 64,
|
|
},
|
|
|
|
userBtn: {
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
padding: "10px 12px",
|
|
borderRadius: 14,
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
background: "rgba(255,255,255,0.05)",
|
|
color: stylesTokens.textMain,
|
|
fontWeight: 900,
|
|
cursor: "pointer",
|
|
boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
|
|
maxWidth: 180,
|
|
},
|
|
|
|
userDropdown: {
|
|
position: "absolute",
|
|
right: 0,
|
|
top: "calc(100% + 8px)",
|
|
minWidth: 220,
|
|
borderRadius: 14,
|
|
border: `1px solid rgba(233,216,166,0.18)`,
|
|
background: "linear-gradient(145deg, rgba(29,27,33,0.98), rgba(10,10,13,0.96))",
|
|
boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
|
|
overflow: "hidden",
|
|
zIndex: 99999,
|
|
backdropFilter: "blur(14px)",
|
|
},
|
|
|
|
userDropdownItem: {
|
|
width: "100%",
|
|
textAlign: "left",
|
|
padding: "10px 12px",
|
|
border: "none",
|
|
background: "transparent",
|
|
color: stylesTokens.textMain,
|
|
fontWeight: 900,
|
|
cursor: "pointer",
|
|
},
|
|
|
|
userDropdownDivider: {
|
|
height: 1,
|
|
background: "rgba(233,216,166,0.12)",
|
|
},
|
|
};
|