diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx index 2cfdaad5d..f584d1cac 100644 --- a/Client/src/Components/ButtonSpinner/index.jsx +++ b/Client/src/Components/ButtonSpinner/index.jsx @@ -18,25 +18,12 @@ const levelConfig = { variant: "contained", color: "error", }, - imagePrimary: { - color: "primary", - variant: "contained", - }, - imageSecondary: { - color: "secondary", - variant: "outlined", - }, - imageTertiary: { - color: "tertiary", - variant: "text", - }, }; /** - * ButtonSpinner component displays a button with loading loadingText capability. * @component * @param {Object} props - * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The style level of the button. + * @param {'primary' | 'secondary' | 'tertiary' | 'error'} props.level - The style level of the button. * @param {string} props.label - The label text displayed on the button. * @param {React.ReactNode} [props.img] - Icon or image element to display within the button. * @param {boolean} [props.disabled=false] - Determines if the button is disabled. diff --git a/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx new file mode 100644 index 000000000..8343a9819 --- /dev/null +++ b/Client/src/Components/TabPanels/ProfileSettings/PasswordPanel.jsx @@ -0,0 +1,183 @@ +import TabPanel from "@mui/lab/TabPanel"; +import React, { useState } from "react"; +import AnnouncementsDualButtonWithIcon from "../../Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon"; +import { useTheme } from "@emotion/react"; +import { + Box, + Divider, + FormControl, + IconButton, + InputAdornment, + OutlinedInput, + Stack, + Typography, +} from "@mui/material"; +import VisibilityOff from "@mui/icons-material/VisibilityOff"; +import Visibility from "@mui/icons-material/Visibility"; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; +import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined"; +import ButtonSpinner from "../../ButtonSpinner"; + +/** + * PasswordPanel component manages the form for editing password. + * + * @returns {JSX.Element} + */ + +const PasswordPanel = () => { + const theme = useTheme(); + //TODO - use redux loading state + //!! - currently all loading buttons are tied to the same state + const [isLoading, setIsLoading] = useState(false); + const [showPassword, setShowPassword] = useState(false); + + //TODO - implement save password function + const handleSavePassword = () => { + setIsLoading(true); + setTimeout(() => { + setIsLoading(false); + setIsOpen(false); + }, 2000); + }; + return ( + +
+
+ } + subject="SSO login" + body="Since you logged in via SSO, you cannot reset or modify your password." + /> +
+
+ + + Current Password + + + + + setShowPassword((show) => !show)} + sx={{ + width: "30px", + height: "30px", + "&:focus": { + outline: "none", + }, + }} + > + {!showPassword ? ( + + ) : ( + + )} + + + } + > + +
+
+ + + Password + + + + + setShowPassword((show) => !show)} + sx={{ + width: "30px", + height: "30px", + "&:focus": { + outline: "none", + }, + }} + > + {!showPassword ? ( + + ) : ( + + )} + + + } + > + +
+
+ + + Confirm new password + + + + } + body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol." + /> + +
+
+ ); +}; + +PasswordPanel.propTypes = { + // No props are being passed to this component, hence no specific PropTypes are defined. + }; + +export default PasswordPanel; diff --git a/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx b/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx new file mode 100644 index 000000000..024b1d499 --- /dev/null +++ b/Client/src/Components/TabPanels/ProfileSettings/ProfilePanel.jsx @@ -0,0 +1,294 @@ +import { useTheme } from "@emotion/react"; +import { useState } from "react"; +import TabPanel from "@mui/lab/TabPanel"; +import { + Avatar, + Box, + Divider, + Modal, + Stack, + TextField, + Typography, +} from "@mui/material"; +import ButtonSpinner from "../../ButtonSpinner"; +import Button from "../../Button"; + +/** + * ProfilePanel component displays a form for editing user profile information + * and allows for actions like updating profile picture, credentials, + * and deleting account. + * + * @returns {JSX.Element} + */ + +const ProfilePanel = () => { + const theme = useTheme(); + //TODO - use redux loading state + //!! - currently all loading buttons are tied to the same state + const [isLoading, setIsLoading] = useState(false); + //TODO - implement delete profile picture function + const handleDeletePicture = () => { + setIsLoading(true); + setTimeout(() => { + setIsLoading(false); + }, 2000); + }; + //TODO - implement update profile function + const handleUpdatePicture = () => {}; + const [isOpen, setIsOpen] = useState(false); + //TODO - implement delete account function + const handleDeleteAccount = () => { + setIsLoading(true); + setTimeout(() => { + setIsLoading(false); + setIsOpen(false); + }, 2000); + }; + //TODO - implement save profile function + const handleSaveProfile = () => { + setIsLoading(true); + setTimeout(() => { + setIsLoading(false); + setIsOpen(false); + }, 2000); + }; + + return ( + +
+
+ + + First Name + + + {/* TODO - use existing textfield components */} + +
+
+ + + Last Name + + + {/* TODO - use existing textfield components */} + +
+
+ + + Email + + + After updating, you'll receive a confirmation email. + + + {/* TODO - use existing textfield components */} + +
+
+ + + Your Photo + + + This photo will be displayed in your profile page. + + + + {/* TODO - Use Avatar component instead of @mui */} + + + {/* TODO - modal popup for update pfp? */} +
+
+