marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lightmode/Darkmode merge including many fixes since 2.0.2

Browse Source
This commit is contained in:
Frikky
2025-05-19 00:04:37 +02:00
parent 7bc246c003
commit a4ebf3e558
59 changed files with 5931 additions and 2961 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/UserManagmentTab.jsx
+77 -49
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useContext, memo } from "react";
import { toast } from 'react-toastify';
import { Context } from "../context/ContextApi.jsx";
import {
FormControl,
InputLabel,
@@ -35,7 +35,7 @@ import {
import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
import ContentCopyOutlinedIcon from '@mui/icons-material/ContentCopyOutlined';
import theme from "../theme.jsx";
import {getTheme} from "../theme.jsx";
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
@@ -75,12 +75,17 @@ const UserManagmentTab = memo((props) => {
const [logsViewModal, setLogsViewModal] = React.useState(false);
const [ipSelected, setIpSelected] = React.useState("");
const [userLogViewing, setUserLogViewing] = React.useState({});
const { themeMode, supportEmail, brandColor } = useContext(Context);
const theme = getTheme(themeMode, brandColor);
useEffect(() => {
if (selectedOrganization?.mfa_required !== MFARequired) {
setMFARequired(selectedOrganization?.mfa_required);
}
}, [selectedOrganization]);
useEffect(() => { if(users?.length === 0){
getUsers();
} }, []);
@@ -363,7 +368,7 @@ const UserManagmentTab = memo((props) => {
toast("Failed to deactivate user: " + responseJson.reason);
} else if (responseJson.success === false) {
toast(
"Failed to deactivate user. Please contact support@shuffler.io if this persists.",
`Failed to deactivate user. Please contact ${supportEmail} if this persists.`,
);
} else {
toast("Changed activation for user " + data.id);
@@ -602,7 +607,7 @@ const UserManagmentTab = memo((props) => {
}}
>
<DialogTitle>
<Typography style={{ color: "white", textTransform: 'none', fontSize: 24 }}>
<Typography variant="h5" style={{ textTransform: 'none', fontSize: 24 }}>
Add user
</Typography>
</DialogTitle>
@@ -619,7 +624,7 @@ const UserManagmentTab = memo((props) => {
InputProps={{
style: {
height: "50px",
color: "white",
color: theme.palette.textFieldStyle.color,
fontSize: "1em",
},
}}
@@ -682,17 +687,17 @@ const UserManagmentTab = memo((props) => {
</div>
{loginInfo}
</DialogContent>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', p: 2, backgroundColor: "#212121" }}>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', p: 2, backgroundColor: theme.palette.platformColor }}>
<Button
style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#ff8544", marginRight: 5 }}
style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, marginRight: 5, color: theme.palette.primary.main }}
onClick={() => setModalOpen(false)}
color="primary"
>
Cancel
</Button>
<Button
variant="contained"
style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#1a1a1a", backgroundColor: "#ff8544" }}
color="primary"
style={{ borderRadius: "2px", textTransform: 'none', fontSize:16,}}
onClick={() => {
if (isCloud) {
inviteUser(modalUser);
@@ -700,7 +705,6 @@ const UserManagmentTab = memo((props) => {
submitUser(modalUser);
}
}}
color="primary"
>
Submit
</Button>
@@ -751,7 +755,7 @@ const UserManagmentTab = memo((props) => {
}}
>
<DialogTitle style={{ maxWidth: "800px", width: "100%", textAlign: "center", margin: "auto", backgroundColor: theme?.palette?.DialogStyle?.backgroundColor}}>
<span style={{ color: "white", backgroundColor: theme?.palette?.DialogStyle?.backgroundColor }}>
<span style={{ color: theme.palette.text.primary, backgroundColor: theme?.palette?.DialogStyle?.backgroundColor }}>
<EditIcon style={{ marginTop: 5 }} /> Editing {selectedUser.username}
</span>
</DialogTitle>
@@ -845,9 +849,10 @@ const UserManagmentTab = memo((props) => {
backgroundColor: theme.palette.inputColor,
}}
/>
<div style={{ margin: "auto", maxWidth: 450 }}>
<Button
style={{textTransform: 'none', fontSize: 16}}
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', margin: "auto", maxWidth: 450 }}>
<div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
<Button
style={{textTransform: 'none', fontSize: 16, whiteSpace: 'nowrap', textWrap: 'nowarp'}}
variant="outlined"
color="primary"
disabled={selectedUser.username === userdata.username}
@@ -859,7 +864,7 @@ const UserManagmentTab = memo((props) => {
{selectedUser.active ? "Delete from org" : "Delete from org"}
</Button>
<Button
style={{ textTransform: 'none', fontSize: 16 }}
style={{ textTransform: 'none', fontSize: 16, whiteSpace: 'nowrap', textWrap: 'nowarp', }}
variant="outlined"
color="primary"
disabled={
@@ -880,7 +885,7 @@ const UserManagmentTab = memo((props) => {
}
variant="outlined"
color="primary"
style={{textTransform: 'none', fontSize: 16}}
style={{textTransform: 'none', fontSize: 16, whiteSpace: 'nowrap', textWrap: 'nowarp', }}
>
{selectedUser.mfa_info !== undefined &&
selectedUser.mfa_info !== null &&
@@ -888,6 +893,7 @@ const UserManagmentTab = memo((props) => {
? "Disable 2FA"
: "Enable 2FA"}
</Button>
</div>
{isCloud && userdata.support && selectedUser.id !== userdata.id ? (
<Button
@@ -897,6 +903,8 @@ const UserManagmentTab = memo((props) => {
marginTop: 50,
border: "1px solid #d52b2b",
textTransform: "none",
whiteSpace: 'nowrap',
textWrap: 'nowarp',
color:
showDeleteAccountTextbox === true &&
deleteAccountText?.length > 0 &&
@@ -1269,23 +1277,23 @@ const UserManagmentTab = memo((props) => {
) : null
return (
<div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", }}>
<div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: theme.palette.platformColor, borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949", }}>
{modalView}
{editUserModal}
{logview}
<div style={{ height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
<div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin' }}>
<div style={{ height: "100%", maxHeight: 1700, overflowY: "auto", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
<div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin' }}>
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<div>
<div style={{ marginBottom: 20 }}>
<h2 style={{ marginBottom: 8, marginTop: 0, color: "#FFFFFF" }}>User Management</h2>
<span style={{ color: "#9E9E9E" }}>
<Typography variant="h5" style={{ marginBottom: 8, marginTop: 0, }}>User Management</Typography>
<Typography variant="body2" color="textSecondary">
Add, edit, distribute or remove users from your organization.{" "}
<a
target="_blank"
rel="noopener noreferrer"
href="/admin?admin_tab=sso"
style={{ color: "#FF8444" }}
style={{ color: theme.palette.linkColor }}
>
Configure SSO
</a>
@@ -1296,15 +1304,15 @@ const UserManagmentTab = memo((props) => {
target="_blank"
rel="noopener noreferrer"
href="/docs/organizations#user_management"
style={{ color: "#FF8444" }}
style={{ color: theme.palette.linkColor }}
>
learn more about users
</a>
</span>
</Typography>
</div>
<div />
<Button
style={{ color: "#1a1a1a", backgroundColor: "#ff8544",fontSize: 16, textTransform: 'none', borderRadius: 4, width: 162, height: 40, boxShadow: 'none' }}
style={{ fontSize: 16, textTransform: 'none', borderRadius: 4, width: 162, height: 40, boxShadow: 'none' }}
variant="contained"
color="primary"
onClick={() => setModalOpen(true)}
@@ -1312,9 +1320,9 @@ const UserManagmentTab = memo((props) => {
Add user
</Button>
<Button
style={{ backgroundColor: "#2F2F2F", boxShadow: 'none', borderRadius: 4, width: 81, height: 40, marginLeft: 16, marginRight: 15 }}
style={{ boxShadow: 'none', borderRadius: 4, width: 81, height: 40, marginLeft: 16, marginRight: 15 }}
variant="contained"
color="primary"
color="secondary"
onClick={() => getUsers()}
>
<CachedIcon />
@@ -1334,7 +1342,7 @@ const UserManagmentTab = memo((props) => {
style={{
borderRadius: 4,
marginTop: 24,
border: "1px solid #494949",
border: theme.palette.defaultBorder,
width: "100%",
overflowX: "auto",
paddingBottom: 0,
@@ -1350,7 +1358,7 @@ const UserManagmentTab = memo((props) => {
paddingBottom: 0,
}}
>
<ListItem style={{ width: "100%", padding: "10px 10px 10px 0px", verticalAlign: 'middle', borderBottom: "1px solid #494949", display: "table-row" }}>
<ListItem style={{ width: "100%", padding: "10px 10px 10px 0px", verticalAlign: 'middle', borderBottom: theme.palette.defaultBorder, display: "table-row" }}>
{["Username", /*"API Key",*/ "Role", /*"Active",*/ "Type", "MFA", ...(selectedOrganization?.child_orgs?.length > 0 ? ["Suborgs"]: []), "Actions", "Last Login"].map((header, index) => (
<ListItemText
key={index}
@@ -1360,7 +1368,7 @@ const UserManagmentTab = memo((props) => {
padding: index === 0 ? "0px 8px 8px 15px": "0px 8px 8px 8px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
borderBottom: "1px solid #494949",
borderBottom: theme.palette.defaultBorder,
position: "sticky",
verticalAlign: "middle",
}}
@@ -1373,7 +1381,7 @@ const UserManagmentTab = memo((props) => {
key={rowIndex}
style={{
display: "table-row",
backgroundColor: "#212121",
backgroundColor: theme.palette.platformColor,
}}
>
{Array(9)
@@ -1390,7 +1398,7 @@ const UserManagmentTab = memo((props) => {
variant="text"
animation="wave"
sx={{
backgroundColor: "#1a1a1a",
backgroundColor: theme.palette.loaderColor,
height: "20px",
borderRadius: "4px",
}}
@@ -1401,9 +1409,9 @@ const UserManagmentTab = memo((props) => {
))
): users === 0 ? null
: users?.map((data, index) => {
var bgColor = "#212121";
var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
if (index % 2 === 0) {
bgColor = "#1A1A1A";
bgColor = themeMode === "dark" ? "#1A1A1A" : "#EAEAEA";
}
const timeNow = new Date().getTime();
@@ -1434,8 +1442,7 @@ const UserManagmentTab = memo((props) => {
style={{
cursor: "pointer",
textDecoration: "underline",
textDecorationColor: "#F76742",
color: "#F76742",
color: theme.palette.linkColor,
}}
onClick={() => {
setLogsViewModal(true);
@@ -1465,7 +1472,7 @@ const UserManagmentTab = memo((props) => {
maxWidth: 150,
minWidth: 100,
width: 'auto',
color: "#FF8444",
color: theme.palette.primary.main,
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden",
@@ -1522,8 +1529,8 @@ const UserManagmentTab = memo((props) => {
setUser(data.id, "role", e.target.value);
}}
sx={{
backgroundColor: "#1A1A1A",
color: "white",
backgroundColor: theme.palette.backgroundColor,
color: theme.palette.textColor,
height: "50px",
borderRadius: "4px",
marginTop: "8px",
@@ -1542,27 +1549,35 @@ const UserManagmentTab = memo((props) => {
>
<MenuItem
sx={{
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: "white",
backgroundColor: theme.palette.backgroundColor,
color: theme.palette.textColor,
"&:hover": {
backgroundColor: theme.palette.hoverColor,
},
}}
value={"admin"}
>
Org Admin
</MenuItem>
<MenuItem
style={{
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: "white",
sx={{
backgroundColor: theme.palette.backgroundColor,
color: theme.palette.textColor,
"&:hover": {
backgroundColor: theme.palette.hoverColor,
},
}}
value={"user"}
>
Org User
</MenuItem>
<MenuItem
style={{
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: "white",
sx={{
backgroundColor: theme.palette.backgroundColor,
color: theme.palette.textColor,
"&:hover": {
backgroundColor: theme.palette.hoverColor,
},
}}
value={"org-reader"}
>
@@ -1664,7 +1679,20 @@ const UserManagmentTab = memo((props) => {
}
}}
>
<img src="/icons/editIcon.svg" alt="edit icon" style={{width: 24, height: 24}} />
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z"
stroke={themeMode=== "dark" ? "#F1F1F1" : "#333"}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</IconButton>
{/* <Button
onClick={() => {