diff --git a/frontend/src/main-page/settings/ChangePasswordModal.tsx b/frontend/src/main-page/settings/ChangePasswordModal.tsx new file mode 100644 index 0000000..744aad4 --- /dev/null +++ b/frontend/src/main-page/settings/ChangePasswordModal.tsx @@ -0,0 +1,136 @@ +import { useState } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faXmark } from "@fortawesome/free-solid-svg-icons"; +import { + PasswordField, + PasswordRequirements, + isPasswordValid, +} from "../../sign-up"; + +export type ChangePasswordFormValues = { + currentPassword: string; + newPassword: string; +}; + +type ChangePasswordModalProps = { + isOpen: boolean; + onClose: () => void; + onSubmit?: (values: ChangePasswordFormValues) => void; + error?: string | null; +}; + +export default function ChangePasswordModal({ + isOpen, + onClose, + onSubmit, + error = null, +}: ChangePasswordModalProps) { + const [currentPassword, setCurrentPassword] = useState(""); + const [newPassword, setNewPassword] = useState(""); + const [reEnterPassword, setReEnterPassword] = useState(""); + + if (!isOpen) return null; + + const newPasswordValid = isPasswordValid(newPassword); + const passwordsMatch = newPassword !== "" && newPassword === reEnterPassword; + const passwordsDontMatch = + reEnterPassword !== "" && newPassword !== reEnterPassword; + const allFilled = + currentPassword.trim() !== "" && + newPassword !== "" && + reEnterPassword !== ""; + const canSave = + allFilled && newPasswordValid && passwordsMatch; + + const handleClose = () => { + setCurrentPassword(""); + setNewPassword(""); + setReEnterPassword(""); + onClose(); + }; + + const handleSave = () => { + if (!canSave) return; + onSubmit?.({ + currentPassword: currentPassword.trim(), + newPassword, + }); + handleClose(); + }; + + return ( +
+
+
+

+ Change Password +

+ +
+ +
+ setCurrentPassword(e.target.value)} + error={!!error} + /> + + setNewPassword(e.target.value)} + /> + + setReEnterPassword(e.target.value)} + error={!!error || passwordsDontMatch} + /> + + + + {(error || passwordsDontMatch) && ( +
+ {error ?? "Your passwords do not match."} +
+ )} + + +
+
+
+ ); +} diff --git a/frontend/src/main-page/settings/Settings.tsx b/frontend/src/main-page/settings/Settings.tsx index 1c76c69..e296464 100644 --- a/frontend/src/main-page/settings/Settings.tsx +++ b/frontend/src/main-page/settings/Settings.tsx @@ -1,31 +1,67 @@ +import { useState } from "react"; import Button from "../../components/Button"; import InfoCard from "./components/InfoCard"; import logo from "../../images/logo.svg"; import { faPenToSquare } from "@fortawesome/free-solid-svg-icons"; +import ChangePasswordModal from "./ChangePasswordModal"; + +const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + +const initialPersonalInfo = { + firstName: "John", + lastName: "Doe", + email: "john.doe@gmail.com", +}; export default function Settings() { + const [personalInfo, setPersonalInfo] = useState(initialPersonalInfo); + const [isEditingPersonalInfo, setIsEditingPersonalInfo] = useState(false); + const [editForm, setEditForm] = useState(initialPersonalInfo); + const [personalInfoError, setPersonalInfoError] = useState(null); + const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false); + const [changePasswordError, setChangePasswordError] = useState(null); + + const handleStartEdit = () => { + setEditForm(personalInfo); + setPersonalInfoError(null); + setIsEditingPersonalInfo(true); + }; + + const handleCancelEdit = () => { + setEditForm(personalInfo); + setPersonalInfoError(null); + setIsEditingPersonalInfo(false); + }; + + const handleSaveEdit = () => { + if (!EMAIL_REGEX.test(editForm.email)) { + setPersonalInfoError("Email is not valid."); + return; + } + + setPersonalInfo(editForm); + setIsEditingPersonalInfo(false); + setPersonalInfoError(null); + }; + return (

Settings

- {/* Avatar */} Profile - {/* Buttons + helper text */}

Profile Picture

-
+ + } />
@@ -70,10 +167,23 @@ export default function Settings() {
+ + setIsChangePasswordModalOpen(false)} + error={changePasswordError} + onSubmit={(values) => { + // Backend: call API with values.currentPassword and values.newPassword + void values; + }} + />
); } diff --git a/frontend/src/main-page/settings/components/InfoCard.tsx b/frontend/src/main-page/settings/components/InfoCard.tsx index a8ffa24..04bcdc1 100644 --- a/frontend/src/main-page/settings/components/InfoCard.tsx +++ b/frontend/src/main-page/settings/components/InfoCard.tsx @@ -9,9 +9,17 @@ type InfoCardProps = { title?: string; fields: InfoField[]; action?: ReactNode; + isEditing?: boolean; + editContent?: ReactNode; }; -export default function InfoCard({ title, fields, action }: InfoCardProps) { +export default function InfoCard({ + title, + fields, + action, + isEditing, + editContent, +}: InfoCardProps) { return (
{(title || action) && ( @@ -25,16 +33,20 @@ export default function InfoCard({ title, fields, action }: InfoCardProps) {
)} -
- {fields.map((field) => ( -
-

{field.label}

-

- {field.value} -

-
- ))} -
+ {isEditing && editContent ? ( + editContent + ) : ( +
+ {fields.map((field) => ( +
+

{field.label}

+

+ {field.value} +

+
+ ))} +
+ )}
); } diff --git a/frontend/src/sign-up/PasswordField.tsx b/frontend/src/sign-up/PasswordField.tsx index 671389a..081c57a 100644 --- a/frontend/src/sign-up/PasswordField.tsx +++ b/frontend/src/sign-up/PasswordField.tsx @@ -90,9 +90,9 @@ export default function PasswordField({ tabIndex={-1} > {visible ? ( - - ) : ( + ) : ( + )}
diff --git a/frontend/src/sign-up/PasswordRequirements.tsx b/frontend/src/sign-up/PasswordRequirements.tsx index 69c32d2..69fa543 100644 --- a/frontend/src/sign-up/PasswordRequirements.tsx +++ b/frontend/src/sign-up/PasswordRequirements.tsx @@ -21,6 +21,11 @@ export const PASSWORD_REQUIREMENTS: PasswordRequirement[] = [ { id: "lower", label: "1 Lowercase", check: (p) => /[a-z]/.test(p) }, ]; +/** Returns true if the password meets all requirements (same logic as sign-up). */ +export function isPasswordValid(password: string): boolean { + return PASSWORD_REQUIREMENTS.every((r) => r.check(password)); +} + type PasswordRequirementsProps = { password: string; }; diff --git a/frontend/src/sign-up/index.ts b/frontend/src/sign-up/index.ts index 39dca3d..752f1a3 100644 --- a/frontend/src/sign-up/index.ts +++ b/frontend/src/sign-up/index.ts @@ -2,7 +2,7 @@ export { default as BrandingPanel } from "./BrandingPanel"; export { default as InputField } from "../components/InputField"; export { default as LoginPrompt } from "./LoginPrompt"; export { default as PasswordField } from "./PasswordField"; -export { default as PasswordRequirements } from "./PasswordRequirements"; +export { default as PasswordRequirements, isPasswordValid } from "./PasswordRequirements"; export { default as SignUpButton } from "./SignUpButton"; export { default as SignUpForm } from "./SignUpForm"; export type { SignUpFormProps, SignUpFormValues } from "./SignUpForm";