-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* export results and args * new js package * add icon * table components * quick save * extract id from body * school name field * ready for review * only teachers * fix rendering issue and create placeholder tabs * merge from dev * working order * create sub view for leaving school * merge from dev * student dashboard * Merge branch 'development' into portal-frontend-25 * new js package * quick save * improve form cleaning * delete account form * merge from dev * exclude repeat password * Merge branch 'development' into portal-frontend-31 * review findings * new js package * feedback * sync with config * hard install * simplify
- Loading branch information
Showing
12 changed files
with
1,101 additions
and
828 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import * as forms from "codeforlife/components/form" | ||
| import { | ||
| Button, | ||
| Dialog, | ||
| Unstable_Grid2 as Grid, | ||
| Stack, | ||
| Typography, | ||
| } from "@mui/material" | ||
| import { type FC, useState } from "react" | ||
| import { DeleteOutline as DeleteOutlineIcon } from "@mui/icons-material" | ||
| import { logout } from "codeforlife/utils/auth" | ||
| import { useNavigate } from "codeforlife/hooks" | ||
|
|
||
| import { | ||
| type DestroyIndependentUserArg, | ||
| type RetrieveUserResult, | ||
| useDestroyIndependentUserMutation, | ||
| useLazyValidatePasswordQuery, | ||
| } from "../../api/user" | ||
| import { paths } from "../../router" | ||
|
|
||
| const ConfirmDialog: FC<{ | ||
| open: boolean | ||
| onClose: () => void | ||
| destroyIndyUserArg?: DestroyIndependentUserArg | ||
| }> = ({ open, onClose, destroyIndyUserArg }) => { | ||
| const [destroyIndyUser] = useDestroyIndependentUserMutation() | ||
| const navigate = useNavigate() | ||
|
|
||
| if (!destroyIndyUserArg) return <></> | ||
|
|
||
| return ( | ||
| <Dialog open={open}> | ||
| <Typography variant="h5" textAlign="center"> | ||
| You are about to delete your account | ||
| </Typography> | ||
| <Typography> | ||
| This action is not reversible. Are you sure you wish to proceed? | ||
| </Typography> | ||
| <Stack direction={{ xs: "column", sm: "row" }} spacing={3}> | ||
| <Button variant="outlined" onClick={onClose}> | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| className="alert" | ||
| endIcon={<DeleteOutlineIcon />} | ||
| onClick={() => { | ||
| destroyIndyUser(destroyIndyUserArg) | ||
| .unwrap() | ||
| .then(() => { | ||
| logout() | ||
| navigate(paths._, { | ||
| state: { | ||
| notifications: [ | ||
| { | ||
| props: { | ||
| children: "Your account was successfully deleted.", | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }) | ||
| }) | ||
| }} | ||
| > | ||
| Delete | ||
| </Button> | ||
| </Stack> | ||
| </Dialog> | ||
| ) | ||
| } | ||
|
|
||
| export interface DeleteAccountFormProps { | ||
| user: RetrieveUserResult | ||
| } | ||
|
|
||
| const DeleteAccountForm: FC<DeleteAccountFormProps> = ({ user }) => { | ||
| const [confirmDialog, setConfirmDialog] = useState<{ | ||
| open: boolean | ||
| destroyIndyUserArg?: DestroyIndependentUserArg | ||
| }>({ open: false }) | ||
| const [validatePassword] = useLazyValidatePasswordQuery() | ||
|
|
||
| return ( | ||
| <> | ||
| <ConfirmDialog | ||
| open={confirmDialog.open} | ||
| onClose={() => { | ||
| setConfirmDialog({ open: false }) | ||
| }} | ||
| destroyIndyUserArg={confirmDialog.destroyIndyUserArg} | ||
| /> | ||
| <Typography variant="h5">Delete account</Typography> | ||
| <Typography> | ||
| If you no longer wish to have a Code for Life account, you can delete it | ||
| by confirming below. You will receive an email to confirm this decision. | ||
| </Typography> | ||
| <Typography fontWeight="bold">This can't be reversed.</Typography> | ||
| <forms.Form | ||
| initialValues={{ | ||
| id: user.id, | ||
| password: "", | ||
| remove_from_newsletter: false, | ||
| }} | ||
| onSubmit={values => { | ||
| validatePassword({ id: values.id, password: values.password }) | ||
| .unwrap() | ||
| .then(() => { | ||
| setConfirmDialog({ open: true, destroyIndyUserArg: values }) | ||
| }) | ||
| }} | ||
| > | ||
| <Grid container columnSpacing={4}> | ||
| <Grid xs={12} sm={6}> | ||
| <forms.PasswordField | ||
| required | ||
| label="Current password" | ||
| placeholder="Enter your current password" | ||
| /> | ||
| </Grid> | ||
| <Grid xs={12} sm={6}> | ||
| {/* TODO: only display this checkbox if the user has been added to the newsletter. */} | ||
| <forms.CheckboxField | ||
| name="remove_from_newsletter" | ||
| formControlLabelProps={{ | ||
| label: | ||
| "Please remove me from the newsletter and marketing emails too.", | ||
| }} | ||
| /> | ||
| </Grid> | ||
| </Grid> | ||
| <forms.SubmitButton | ||
| className="alert" | ||
| endIcon={<DeleteOutlineIcon />} | ||
| sx={theme => ({ marginTop: theme.spacing(3) })} | ||
| > | ||
| Delete account | ||
| </forms.SubmitButton> | ||
| </forms.Form> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default DeleteAccountForm |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import * as page from "codeforlife/components/page" | ||
| import { type SessionMetadata, useQueryManager } from "codeforlife/hooks" | ||
| import { type FC } from "react" | ||
| import { LinkButton } from "codeforlife/components/router" | ||
| import { Typography } from "@mui/material" | ||
|
|
||
| import DeleteAccountForm from "./DeleteAccountForm" | ||
| import UpdateAccountForm from "./UpdateAccountForm" | ||
| import { paths } from "../../router" | ||
| import { useRetrieveUserQuery } from "../../api/user" | ||
|
|
||
| export interface StudentAccountProps { | ||
| userType: "student" | "indy" | ||
| } | ||
|
|
||
| const _StudentAccount: FC<SessionMetadata> = ({ user_type, user_id }) => | ||
| useQueryManager(useRetrieveUserQuery, user_id, user => ( | ||
| <> | ||
| <page.Banner | ||
| header={`Welcome, ${user.first_name}`} | ||
| textAlign="center" | ||
| bgcolor={user_type === "student" ? "tertiary" : "secondary"} | ||
| /> | ||
| <page.Section> | ||
| <UpdateAccountForm user={user} /> | ||
| </page.Section> | ||
| {user_type === "indy" && ( | ||
| <> | ||
| <page.Section boxProps={{ bgcolor: "info.main" }}> | ||
| <Typography variant="h5">Join a school or club</Typography> | ||
| <Typography> | ||
| To find out about linking your Code For Life account with a school | ||
| or club, click 'Join'. | ||
| </Typography> | ||
| <LinkButton to={paths.indy.dashboard.joinClass._}>Join</LinkButton> | ||
| </page.Section> | ||
| <page.Section> | ||
| <DeleteAccountForm user={user} /> | ||
| </page.Section> | ||
| </> | ||
| )} | ||
| </> | ||
| )) | ||
|
|
||
| const StudentAccount: FC<StudentAccountProps> = ({ userType }) => ( | ||
| <page.Page session={{ userType }}>{_StudentAccount}</page.Page> | ||
| ) | ||
|
|
||
| export default StudentAccount |
Oops, something went wrong.