Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | 1x 213x 1x 75x 75x 75x 75x 75x 75x 3x 3x 3x 2x 2x 2x 2x 2x 2x 1x 1x 3x 75x 2x 2x 2x 2x 2x 2x 2x 75x | /* eslint-disable react/prop-types */
import { useFormik } from "formik";
import * as yup from "yup";
import * as React from "react";
import { useState } from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import { Alert, Box, CircularProgress, IconButton, InputAdornment, TextField, Typography } from "@mui/material";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import { useSnackbar } from "notistack";
import { StudentDataAPI } from "@/api/student/StudentDataAPI";
const studentDataAPI = new StudentDataAPI();
function PasswordField({ name, label, show, onToggle, values, touched, errors, handleChange, handleBlur }) {
return (
<TextField
name={name}
label={label}
type={show ? "text" : "password"}
value={values[name]}
onChange={handleChange}
onBlur={handleBlur}
error={touched[name] && Boolean(errors[name])}
helperText={touched[name] && errors[name]}
variant="outlined"
fullWidth
required
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={onToggle} edge="end">
{show ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
},
}}
/>
);
}
const validationSchema = yup.object({
currentPassword: yup.string().required("Current password is required"),
newPassword: yup
.string()
.min(10, "Password must be at least 10 characters")
.max(25, "Password must be no more than 25 characters")
.matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).+$/, {
message:
"Password must include an uppercase letter, a lowercase letter, a number, and a special character",
excludeEmptyString: true,
})
.notOneOf([yup.ref("currentPassword")], "New password must differ from current password")
.required("New password is required"),
confirmPassword: yup
.string()
.oneOf([yup.ref("newPassword")], "Passwords do not match")
.required("Please confirm your new password"),
});
export default function ChangePassword({ showDialog, setShowDialog }) {
const { enqueueSnackbar } = useSnackbar();
const [showCurrent, setShowCurrent] = useState(false);
const [showNew, setShowNew] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
const [serverError, setServerError] = useState("");
const formik = useFormik({
initialValues: {
currentPassword: "",
newPassword: "",
confirmPassword: "",
},
validationSchema,
onSubmit: async (values, { setSubmitting, resetForm }) => {
setServerError("");
try {
await studentDataAPI.updatePassword(values.currentPassword, values.newPassword);
resetForm();
setShowCurrent(false);
setShowNew(false);
setShowConfirm(false);
setShowDialog(false);
// The current password was just verified, so the user stays
// signed in — no forced logout. (Revoking the user's *other*
// sessions server-side is a separate backend follow-up.)
enqueueSnackbar("Password changed successfully.", { variant: "success" });
} catch (error) {
const detail =
error?.response?.data?.detail || error?.message || "Failed to change password. Please try again.";
setServerError(detail);
} finally {
setSubmitting(false);
}
},
});
const handleClose = () => {
Iif (formik.isSubmitting) return;
formik.resetForm();
setServerError("");
setShowCurrent(false);
setShowNew(false);
setShowConfirm(false);
setShowDialog(false);
};
return (
<Dialog open={showDialog} aria-labelledby="change-password-dialog-title" fullWidth maxWidth="sm">
<DialogTitle id="change-password-dialog-title">
<Typography variant="body1">Change Password</Typography>
</DialogTitle>
<DialogContent dividers>
<Box sx={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
{serverError && <Alert severity="error">{serverError}</Alert>}
<PasswordField
name="currentPassword"
label="Current password"
show={showCurrent}
onToggle={() => setShowCurrent((v) => !v)}
values={formik.values}
touched={formik.touched}
errors={formik.errors}
handleChange={formik.handleChange}
handleBlur={formik.handleBlur}
/>
<PasswordField
name="newPassword"
label="New password"
show={showNew}
onToggle={() => setShowNew((v) => !v)}
values={formik.values}
touched={formik.touched}
errors={formik.errors}
handleChange={formik.handleChange}
handleBlur={formik.handleBlur}
/>
<PasswordField
name="confirmPassword"
label="Confirm new password"
show={showConfirm}
onToggle={() => setShowConfirm((v) => !v)}
values={formik.values}
touched={formik.touched}
errors={formik.errors}
handleChange={formik.handleChange}
handleBlur={formik.handleBlur}
/>
</Box>
</DialogContent>
<DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
<Button sx={{ width: "150px" }} variant="inherit" onClick={handleClose} disabled={formik.isSubmitting}>
Cancel
</Button>
<Button
sx={{ width: "150px" }}
variant="contained"
color="primary"
onClick={formik.handleSubmit}
disabled={formik.isSubmitting}
>
{formik.isSubmitting ? <CircularProgress size={24} color="inherit" /> : "Save"}
</Button>
</DialogActions>
</Dialog>
);
}
|