TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[staff] Show expired plan in red

Browse Source
This commit is contained in:
Neeraj Gupta
2024-11-27 11:57:11 +05:30
parent 4e1bc124ff
commit 51aa4cfaeb
3 changed files with 111 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
infra/staff/src/App.tsx
View File

@@ -190,7 +190,10 @@ const App: React.FC = () => {
0) > 0
? "Enabled"
: "Disabled",
"Can Disable EmailMFA": userDataResponse.details?.profileData.canDisableEmailMFA ? "Yes":"No",
"Can Disable EmailMFA": userDataResponse.details
?.profileData.canDisableEmailMFA
? "Yes"
: "No",
AuthCodes: `${userDataResponse.authCodes ?? 0}`,
},
};

9
infra/staff/src/components/ToggleEmailMFA.tsx
View File

@@ -86,7 +86,9 @@ const ToggleEmailMFA: React.FC<ToggleEmailMFAProps> = ({
handleToggleEmailMFA(enable); // Notify parent component of successful action with status
handleClose(); // Close dialog on successful action
console.log(`Email MFA ${enable ? "enabled" : "disabled"} successfully`);
console.log(
`Email MFA ${enable ? "enabled" : "disabled"} successfully`,
);
} catch (error) {
if (error instanceof Error) {
alert(error.message);
@@ -130,7 +132,8 @@ const ToggleEmailMFA: React.FC<ToggleEmailMFAProps> = ({
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Do you want to enable or disable Email MFA for this account?
Do you want to enable or disable Email MFA for this
account?
</DialogContentText>
</DialogContent>
<DialogActions sx={{ justifyContent: "center" }}>
@@ -180,4 +183,4 @@ const ToggleEmailMFA: React.FC<ToggleEmailMFAProps> = ({
);
};
export default ToggleEmailMFA;
export default ToggleEmailMFA;

178
infra/staff/src/components/UserComponent.tsx
View File

@@ -17,8 +17,8 @@ import ChangeEmail from "./ChangeEmail";
import DeleteAccount from "./DeleteAccont";
import Disable2FA from "./Disable2FA";
import DisablePasskeys from "./DisablePasskeys";
import UpdateSubscription from "./UpdateSubscription";
import ToggleEmailMFA from "./ToggleEmailMFA";
import UpdateSubscription from "./UpdateSubscription";
export interface UserData {
User: Record<string, string>;
@@ -46,7 +46,9 @@ const UserComponent: React.FC<UserComponentProps> = ({ userData }) => {
React.useEffect(() => {
setTwoFactorEnabled(userData?.Security["Two factor 2FA"] === "Enabled");
setEmail2FAEnabled(userData?.Security["Email MFA"] === "Enabled");
setCanDisableEmailMFA(userData?.Security["Can Disable EmailMFA"] === "Yes");
setCanDisableEmailMFA(
userData?.Security["Can Disable EmailMFA"] === "Yes",
);
}, [userData]);
const handleEditEmail = () => setChangeEmailOpen(true);
@@ -91,7 +93,7 @@ const UserComponent: React.FC<UserComponentProps> = ({ userData }) => {
open={email2FAOpen}
handleClose={() => setEmail2FAToggleOpen(false)}
handleToggleEmailMFA={(status) => setEmail2FAToggleOpen(status)}
/>
/>
<UpdateSubscription
open={updateSubscriptionOpen}
onClose={() => setUpdateSubscriptionOpen(false)}
@@ -209,46 +211,46 @@ const DataTable: React.FC<DataTableProps> = ({
{Object.entries(data)
.filter(([label]) => label !== "Can Disable EmailMFA")
.map(([label, value], index) => (
<TableRow key={label}>
<TableCell
component="th"
scope="row"
style={{
padding: "16px",
borderBottom:
index === 1 || index === 0
? "1px solid rgba(224, 224, 224, 1)"
: "none",
}}
>
{label}
</TableCell>
<TableCell
align="right"
style={{
padding: "10px",
borderBottom:
index === 1 || index === 0
? "1px solid rgba(224, 224, 224, 1)"
: "none",
}}
>
{/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
{renderTableCellContent(
label,
value,
onEditEmail,
onDisablePasskeys,
canDisableEmailMFA,
twoFactorEnabled,
setTwoFactorEnabled,
setDisable2FAOpen,
email2FAEnabled,
setEmail2FAToggleOpen,
)}
</TableCell>
</TableRow>
))}
<TableRow key={label}>
<TableCell
component="th"
scope="row"
style={{
padding: "16px",
borderBottom:
index === 1 || index === 0
? "1px solid rgba(224, 224, 224, 1)"
: "none",
}}
>
{label}
</TableCell>
<TableCell
align="right"
style={{
padding: "10px",
borderBottom:
index === 1 || index === 0
? "1px solid rgba(224, 224, 224, 1)"
: "none",
}}
>
{/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
{renderTableCellContent(
label,
value,
onEditEmail,
onDisablePasskeys,
canDisableEmailMFA,
twoFactorEnabled,
setTwoFactorEnabled,
setDisable2FAOpen,
email2FAEnabled,
setEmail2FAToggleOpen,
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
@@ -335,41 +337,63 @@ const renderTableCellContent = (
)}
</Box>
);
case "Email MFA":
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "right",
width: "100%",
paddingRight: "50px",
}}
>
<Typography sx={{ marginRight: "1px" }}>{value}</Typography>
{canToggleEmailMFA && (
<Switch
checked={email2FAEnabled}
onChange={(e) => {
setEmail2FAToggleOpen(true);
}}
sx={{
"& .MuiSwitch-switchBase.Mui-checked": {
color: "#00B33C",
"&:hover": {
backgroundColor:
"rgba(0, 179, 60, 0.08)",
},
// If Expirty time (in format 30/1/2026, 11:12:53 am) is greatheer than current date, show it in bold green
case "Expiry time": {
const expiryTime = new Date(
Date.parse(
value.replace(
/(\d+)\/(\d+)\/(\d+), (\d+:\d+:\d+ \w+)/,
"$2/$1/$3 $4",
),
),
);
const currentTime = new Date();
return (
<Typography
sx={{
color: expiryTime > currentTime ? "#00B33C" : "red",
}}
>
{value}
</Typography>
);
}
case "Email MFA":
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "right",
width: "100%",
paddingRight: "50px",
}}
>
<Typography sx={{ marginRight: "1px" }}>{value}</Typography>
{canToggleEmailMFA && (
<Switch
checked={email2FAEnabled}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onChange={(_) => {
setEmail2FAToggleOpen(true);
}}
sx={{
"& .MuiSwitch-switchBase.Mui-checked": {
color: "#00B33C",
"&:hover": {
backgroundColor:
"rgba(0, 179, 60, 0.08)",
},
"& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track":
{
backgroundColor: "#00B33C",
},
}}
/>
)}
</Box>
);
},
"& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track":
{
backgroundColor: "#00B33C",
},
}}
/>
)}
</Box>
);
default:
return <Typography>{value}</Typography>;
}