Updated launchpad UI to be expandable in the future. Updated UI for the hosts to be able to easily configure them. They stil need organizational system (folders, etc.)

2025-03-13 22:42:18 -05:00
parent e41bec5e4d
commit e2e35e6130
13 changed files with 802 additions and 136 deletions
--- a/src/modals/ProfileModal.jsx
+++ b/src/modals/ProfileModal.jsx
@@ -0,0 +1,93 @@
+import PropTypes from 'prop-types';
+import { CssVarsProvider } from '@mui/joy/styles';
+import {Modal, Button, DialogTitle, DialogContent, ModalDialog, Stack } from '@mui/joy';
+import theme from '/src/theme';
+
+const ProfileModal = ({ isHidden, getUser, handleDeleteUser, handleLogoutUser, setIsProfileHidden }) => {
+    const handleDelete = () => {
+        handleDeleteUser({
+            onSuccess: () => {
+                window.location.reload();
+            }
+        });
+    };
+
+    const handleLogout = () => {
+        handleLogoutUser({
+            onSuccess: () => {
+                window.location.reload();
+            }
+        });
+    }
+
+    const getUserName = () => {
+        const user = getUser();
+        return user ? user.username : '';
+    }
+
+    return (
+        <CssVarsProvider theme={theme}>
+            <Modal open={!isHidden} onClose={() => setIsProfileHidden(true)}>
+                <ModalDialog
+                    layout="center"
+                    sx={{
+                        backgroundColor: theme.palette.general.tertiary,
+                        borderColor: theme.palette.general.secondary,
+                        color: theme.palette.text.primary,
+                        padding: 3,
+                        borderRadius: 10,
+                        width: "auto",
+                        maxWidth: "90vw",
+                        minWidth: "fit-content",
+                        overflow: "hidden",
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        gap: 1,
+                    }}
+                >
+                    <DialogTitle sx={{ marginBottom: 1.5 }}>
+                        {getUserName()}
+                    </DialogTitle>
+                    <DialogContent>
+                        <Stack spacing={2} sx={{ width: "100%", maxWidth: "100%", overflow: "hidden", mt: 1.5 }}>
+                            <Button
+                                onClick={handleDelete}
+                                sx={{
+                                    backgroundColor: theme.palette.general.primary,
+                                    '&:hover': {
+                                        backgroundColor: theme.palette.general.disabled,
+                                    },
+                                }}
+                            >
+                                Delete User
+                            </Button>
+                            <Button
+                                onClick={handleLogout}
+                                sx={{
+                                    backgroundColor: theme.palette.general.primary,
+                                    '&:hover': {
+                                        backgroundColor: theme.palette.general.disabled,
+                                    },
+                                }}
+                            >
+                                Logout
+                            </Button>
+                        </Stack>
+                    </DialogContent>
+                </ModalDialog>
+            </Modal>
+        </CssVarsProvider>
+    );
+};
+
+ProfileModal.propTypes = {
+    isHidden: PropTypes.bool.isRequired,
+    getUser: PropTypes.func.isRequired,
+    handleDeleteUser: PropTypes.func.isRequired,
+    handleLogoutUser: PropTypes.func.isRequired,
+    setIsProfileHidden: PropTypes.func.isRequired,
+};
+
+export default ProfileModal;