From 57eb1d6ccf2328128efc6b7b4621ea7cb997bf2a Mon Sep 17 00:00:00 2001
From: Neeraj Gupta <254676+ua741@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:50:16 +0530
Subject: [PATCH] [staff] Show correct status for passkey

---
 infra/staff/src/App.tsx                      |   3 +-
 infra/staff/src/components/UserComponent.tsx | 519 +++++++------------
 2 files changed, 200 insertions(+), 322 deletions(-)

diff --git a/infra/staff/src/App.tsx b/infra/staff/src/App.tsx
index bb3e04f78f..f37ffa7ea8 100644
--- a/infra/staff/src/App.tsx
+++ b/infra/staff/src/App.tsx
@@ -45,6 +45,7 @@ interface Security {
     isEmailMFAEnabled: boolean;
     isTwoFactorEnabled: boolean;
     passkeys: string;
+    passkeyCount: number;
 }
 
 interface UserResponse {
@@ -181,7 +182,7 @@ const App: React.FC = () => {
                         .isTwoFactorEnabled
                         ? "Enabled"
                         : "Disabled",
-                    Passkeys: "None",
+                    Passkeys: (userDataResponse.details?.profileData.passkeyCount ?? 0) > 0 ? "Enabled" : "Disabled",
                 },
             };
 
diff --git a/infra/staff/src/components/UserComponent.tsx b/infra/staff/src/components/UserComponent.tsx
index f26e9431a4..4cefabed50 100644
--- a/infra/staff/src/components/UserComponent.tsx
+++ b/infra/staff/src/components/UserComponent.tsx
@@ -2,7 +2,6 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import EditIcon from "@mui/icons-material/Edit";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-
 import Grid from "@mui/material/Grid";
 import IconButton from "@mui/material/IconButton";
 import Paper from "@mui/material/Paper";
@@ -19,6 +18,7 @@ import DeleteAccount from "./DeleteAccont";
 import Disable2FA from "./Disable2FA";
 import DisablePasskeys from "./DisablePasskeys";
 import UpdateSubscription from "./UpdateSubscription";
+
 export interface UserData {
     User: Record<string, string>;
     Storage: Record<string, string>;
@@ -34,341 +34,218 @@ const UserComponent: React.FC<UserComponentProps> = ({ userData }) => {
     const [deleteAccountOpen, setDeleteAccountOpen] = React.useState(false);
     const [disable2FAOpen, setDisable2FAOpen] = React.useState(false);
     const [twoFactorEnabled, setTwoFactorEnabled] = React.useState(false);
-    const [is2FADisabled, setIs2FADisabled] = React.useState(false);
-    const [updateSubscriptionOpen, setUpdateSubscriptionOpen] =
-        React.useState(false);
+    const [updateSubscriptionOpen, setUpdateSubscriptionOpen] = React.useState(false);
     const [changeEmailOpen, setChangeEmailOpen] = React.useState(false);
-    const [DisablePasskeysOpen, setDisablePasskeysOpen] = React.useState(false);
+    const [disablePasskeysOpen, setDisablePasskeysOpen] = React.useState(false);
 
     React.useEffect(() => {
-        if (userData?.Security["Two factor 2FA"] === "Enabled") {
-            setTwoFactorEnabled(true);
-        } else {
-            setTwoFactorEnabled(false);
-        }
+        setTwoFactorEnabled(userData?.Security["Two factor 2FA"] === "Enabled");
     }, [userData]);
 
-    const handleEditEmail = () => {
-        console.log("Edit Email clicked");
-        setChangeEmailOpen(true);
-    };
+    const handleEditEmail = () => setChangeEmailOpen(true);
+    const handleDeleteAccountClick = () => setDeleteAccountOpen(true);
+    const handleEditSubscription = () => setUpdateSubscriptionOpen(true);
+    const handleDisablePasskeys = () => setDisablePasskeysOpen(true);
 
-    const handleCloseChangeEmail = () => {
-        setChangeEmailOpen(false);
-    };
-
-    const handleDeleteAccountClick = () => {
-        setDeleteAccountOpen(true);
-    };
-
-    const handleCloseDeleteAccount = () => {
-        setDeleteAccountOpen(false);
-    };
-
-    const handleOpenDisable2FA = () => {
-        setDisable2FAOpen(true);
-    };
-
-    const handleCloseDisable2FA = () => {
-        setDisable2FAOpen(false);
-    };
-
-    const handleDisable2FA = () => {
-        setIs2FADisabled(true);
-    };
-
-    const handleCancelDisable2FA = () => {
-        setTwoFactorEnabled(true);
-        handleCloseDisable2FA();
-    };
-
-    const handleEditSubscription = () => {
-        setUpdateSubscriptionOpen(true);
-    };
-
-    const handleCloseUpdateSubscription = () => {
-        setUpdateSubscriptionOpen(false);
-    };
-
-    const handleOpenDisablePasskeys = () => {
-        setDisablePasskeysOpen(true);
-    };
-
-    const handleCloseDisablePasskeys = () => {
-        setDisablePasskeysOpen(false);
-    };
-
-    const handleDisablePasskeys = () => {
-        console.log("Close family action");
-        handleOpenDisablePasskeys();
-    };
-
-    if (!userData) {
-        return null;
-    }
+    if (!userData) return null;
 
     return (
         <Grid container spacing={6} justifyContent="center">
             {Object.entries(userData).map(([title, data]) => (
                 <Grid item xs={12} sm={10} md={6} key={title}>
-                    <TableContainer
-                        component={Paper}
-                        variant="outlined"
-                        sx={{
-                            backgroundColor: "#F1F1F3",
-                            minHeight: 300,
-                            display: "flex",
-                            flexDirection: "column",
-                            marginBottom: "20px",
-                            height: "100%",
-                            width: "100%",
-                            padding: "13px",
-                            overflowX: "hidden", // Prevent horizontal scrolling
-                            "&:not(:last-child)": {
-                                marginBottom: "40px",
-                            },
-                        }}
-                    >
-                        <Box
-                            sx={{
-                                display: "flex",
-                                justifyContent: "space-between",
-                                alignItems: "center",
-                                padding: "16px",
-                                width: "100%",
-                            }}
-                        >
-                            <Typography
-                                variant="h6"
-                                component="div"
-                                sx={{
-                                    fontWeight: "bold",
-                                    textAlign: "center",
-                                    width: "100%",
-                                }}
-                            >
-                                {title}
-                            </Typography>
-                            {title === "User" && (
-                                <IconButton
-                                    edge="start"
-                                    aria-label="delete"
-                                    onClick={handleDeleteAccountClick}
-                                >
-                                    <DeleteIcon style={{ color: "" }} />
-                                </IconButton>
-                            )}
-                            {title === "Subscription" && (
-                                <IconButton
-                                    edge="end"
-                                    aria-label="edit"
-                                    onClick={handleEditSubscription}
-                                >
-                                    <EditIcon
-                                        style={{
-                                            color: "black",
-                                            marginRight: "15px",
-                                        }}
-                                    />
-                                </IconButton>
-                            )}
-                        </Box>
-
-                        <Table
-                            sx={{
-                                width: "100%",
-                                tableLayout: "fixed", // Ensure table layout is fixed
-                                height: "100%",
-                                borderBottom: "none",
-                            }}
-                            aria-label={title}
-                        >
-                            <TableBody>
-                                {Object.entries(
-                                    data as Record<string, string>,
-                                ).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",
-                                            }}
-                                        >
-                                            {label === "Email" ? (
-                                                <Box
-                                                    sx={{
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent:
-                                                            "flex-end",
-                                                    }}
-                                                >
-                                                    <Typography>
-                                                        {value}
-                                                    </Typography>
-                                                    <IconButton
-                                                        edge="end"
-                                                        aria-label="edit-email"
-                                                        onClick={
-                                                            handleEditEmail
-                                                        }
-                                                    >
-                                                        <EditIcon
-                                                            style={{
-                                                                color: "black",
-                                                            }}
-                                                        />
-                                                    </IconButton>
-                                                </Box>
-                                            ) : label === "Passkeys" ? (
-                                                <Button
-                                                    variant="outlined"
-                                                    onClick={
-                                                        handleDisablePasskeys
-                                                    }
-                                                >
-                                                    Disable Passkeys
-                                                </Button>
-                                            ) : typeof value === "string" ? (
-                                                label === "Two factor 2FA" ? (
-                                                    is2FADisabled ||
-                                                    value === "Disabled" ? (
-                                                        <Typography
-                                                            sx={{
-                                                                width: "100%",
-                                                                paddingLeft:
-                                                                    "1px",
-                                                            }}
-                                                        >
-                                                            {value}
-                                                        </Typography>
-                                                    ) : (
-                                                        <Box
-                                                            sx={{
-                                                                display: "flex",
-                                                                alignItems:
-                                                                    "center",
-                                                                justifyContent:
-                                                                    "right",
-                                                                width: "100%",
-                                                                paddingRight:
-                                                                    "50px",
-                                                            }}
-                                                        >
-                                                            <Typography
-                                                                sx={{
-                                                                    marginRight:
-                                                                        "1px",
-                                                                }}
-                                                            >
-                                                                {value}
-                                                            </Typography>
-                                                            {value ===
-                                                                "Enabled" && (
-                                                                <Switch
-                                                                    checked={
-                                                                        twoFactorEnabled
-                                                                    }
-                                                                    onChange={(
-                                                                        e,
-                                                                    ) => {
-                                                                        const isChecked =
-                                                                            e
-                                                                                .target
-                                                                                .checked;
-                                                                        setTwoFactorEnabled(
-                                                                            isChecked,
-                                                                        );
-                                                                        if (
-                                                                            !isChecked
-                                                                        ) {
-                                                                            handleOpenDisable2FA();
-                                                                        }
-                                                                    }}
-                                                                    sx={{
-                                                                        "& .MuiSwitch-switchBase.Mui-checked":
-                                                                            {
-                                                                                color: "#00B33C",
-                                                                                "&:hover":
-                                                                                    {
-                                                                                        backgroundColor:
-                                                                                            "rgba(0, 179, 60, 0.08)",
-                                                                                    },
-                                                                            },
-                                                                        "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track":
-                                                                            {
-                                                                                backgroundColor:
-                                                                                    "#00B33C",
-                                                                            },
-                                                                    }}
-                                                                />
-                                                            )}
-                                                        </Box>
-                                                    )
-                                                ) : (
-                                                    <Typography>
-                                                        {value}
-                                                    </Typography>
-                                                )
-                                            ) : (
-                                                <Typography>
-                                                    {String(value)}
-                                                </Typography>
-                                            )}
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
-                        </Table>
-                    </TableContainer>
+                    <DataTable
+                        title={title}
+                        data={data}
+                        onEditEmail={handleEditEmail}
+                        onDeleteAccount={handleDeleteAccountClick}
+                        onEditSubscription={handleEditSubscription}
+                        onDisablePasskeys={handleDisablePasskeys}
+                        twoFactorEnabled={twoFactorEnabled}
+                        setTwoFactorEnabled={setTwoFactorEnabled}
+                        setDisable2FAOpen={setDisable2FAOpen}
+                    />
                 </Grid>
             ))}
 
-            <DeleteAccount
-                open={deleteAccountOpen}
-                handleClose={handleCloseDeleteAccount}
-            />
-
-            <Disable2FA
-                open={disable2FAOpen}
-                handleClose={handleCancelDisable2FA}
-                handleDisable2FA={handleDisable2FA}
-            />
-
-            <UpdateSubscription
-                open={updateSubscriptionOpen}
-                onClose={handleCloseUpdateSubscription}
-            />
-
-            <ChangeEmail
-                open={changeEmailOpen}
-                onClose={handleCloseChangeEmail}
-            />
-
-            <DisablePasskeys
-                open={DisablePasskeysOpen}
-                handleClose={handleCloseDisablePasskeys}
-                handleDisablePasskeys={handleCloseDisablePasskeys}
-            />
+            <DeleteAccount open={deleteAccountOpen} handleClose={() => setDeleteAccountOpen(false)} />
+            <Disable2FA open={disable2FAOpen} handleClose={() => setDisable2FAOpen(false)} handleDisable2FA={() => setTwoFactorEnabled(false)} />
+            <UpdateSubscription open={updateSubscriptionOpen} onClose={() => setUpdateSubscriptionOpen(false)} />
+            <ChangeEmail open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />
+            <DisablePasskeys open={disablePasskeysOpen} handleClose={() => setDisablePasskeysOpen(false)} handleDisablePasskeys={() => setDisablePasskeysOpen(false)} />
         </Grid>
     );
 };
 
-export default UserComponent;
+interface DataTableProps {
+    title: string;
+    data: Record<string, string>;
+    onEditEmail: () => void;
+    onDeleteAccount: () => void;
+    onEditSubscription: () => void;
+    onDisablePasskeys: () => void;
+    twoFactorEnabled: boolean;
+    setTwoFactorEnabled: (enabled: boolean) => void;
+    setDisable2FAOpen: (open: boolean) => void;
+}
+
+const DataTable: React.FC<DataTableProps> = ({
+    title,
+    data,
+    onEditEmail,
+    onDeleteAccount,
+    onEditSubscription,
+    onDisablePasskeys,
+    twoFactorEnabled,
+    setTwoFactorEnabled,
+    setDisable2FAOpen,
+}) => (
+    <TableContainer
+        component={Paper}
+        variant="outlined"
+        sx={{
+            backgroundColor: "#F1F1F3",
+            minHeight: 300,
+            display: "flex",
+            flexDirection: "column",
+            marginBottom: "20px",
+            height: "100%",
+            width: "100%",
+            padding: "13px",
+            overflowX: "hidden",
+            "&:not(:last-child)": {
+                marginBottom: "40px",
+            },
+        }}
+    >
+        <Box
+            sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "16px",
+                width: "100%",
+            }}
+        >
+            <Typography
+                variant="h6"
+                component="div"
+                sx={{
+                    fontWeight: "bold",
+                    textAlign: "center",
+                    width: "100%",
+                }}
+            >
+                {title}
+            </Typography>
+            {title === "User" && (
+                <IconButton edge="start" aria-label="delete" onClick={onDeleteAccount}>
+                    <DeleteIcon style={{ color: "" }} />
+                </IconButton>
+            )}
+            {title === "Subscription" && (
+                <IconButton edge="end" aria-label="edit" onClick={onEditSubscription}>
+                    <EditIcon style={{ color: "black", marginRight: "15px" }} />
+                </IconButton>
+            )}
+        </Box>
+
+        <Table
+            sx={{
+                width: "100%",
+                tableLayout: "fixed",
+                height: "100%",
+                borderBottom: "none",
+            }}
+            aria-label={title}
+        >
+            <TableBody>
+                {Object.entries(data).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",
+                            }}
+                        >
+                            {renderTableCellContent(label, value, onEditEmail, onDisablePasskeys, twoFactorEnabled, setTwoFactorEnabled, setDisable2FAOpen)}
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    </TableContainer>
+);
+
+const renderTableCellContent = (
+    label: string,
+    value: string,
+    onEditEmail: () => void,
+    onDisablePasskeys: () => void,
+    twoFactorEnabled: boolean,
+    setTwoFactorEnabled: (enabled: boolean) => void,
+    setDisable2FAOpen: (open: boolean) => void,
+) => {
+    switch (label) {
+        case "Email":
+            return (
+                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "flex-end" }}>
+                    <Typography>{value}</Typography>
+                    <IconButton edge="end" aria-label="edit-email" onClick={onEditEmail}>
+                        <EditIcon style={{ color: "black" }} />
+                    </IconButton>
+                </Box>
+            );
+        case "Passkeys":
+            return value === "Enabled" ? (
+                <Button variant="outlined" onClick={onDisablePasskeys}>
+                    Remove Passkey
+                </Button>
+            ) : (
+                <Typography sx={{ width: "100%", paddingLeft: "1px" }}>{value}</Typography>
+            );
+        case "Two factor 2FA":
+            return (
+                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "right", width: "100%", paddingRight: "50px" }}>
+                    <Typography sx={{ marginRight: "1px" }}>{value}</Typography>
+                    {value === "Enabled" && (
+                        <Switch
+                            checked={twoFactorEnabled}
+                            onChange={(e) => {
+                                const isChecked = e.target.checked;
+                                setTwoFactorEnabled(isChecked);
+                                if (!isChecked) {
+                                    setDisable2FAOpen(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>
+            );
+        default:
+            return <Typography>{value}</Typography>;
+    }
+};
+
+export default UserComponent;
\ No newline at end of file