TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Exit section

Browse Source
This commit is contained in:
Manav Rathi
2024-10-11 13:51:47 +05:30
parent 5442742cf3
commit e5c6999b94
2 changed files with 87 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
web/apps/photos/src/components/DeleteAccountModal.tsx
View File

@@ -116,87 +116,85 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
};
return (
<>
<TitledMiniDialog
fullWidth
open={open}
onClose={onClose}
fullScreen={isMobile}
title={t("delete_account")}
<TitledMiniDialog
fullWidth
open={open}
onClose={onClose}
fullScreen={isMobile}
title={t("delete_account")}
>
<Formik<FormValues>
initialValues={{
reason: "",
feedback: "",
}}
validationSchema={Yup.object().shape({
reason: Yup.string().required(t("required")),
})}
validateOnChange={false}
validateOnBlur={false}
onSubmit={initiateDelete}
>
<Formik<FormValues>
initialValues={{
reason: "",
feedback: "",
}}
validationSchema={Yup.object().shape({
reason: Yup.string().required(t("required")),
})}
validateOnChange={false}
validateOnBlur={false}
onSubmit={initiateDelete}
>
{({
values,
errors,
handleChange,
handleSubmit,
}): JSX.Element => (
<form noValidate onSubmit={handleSubmit}>
<Stack spacing={"24px"}>
<DropdownInput
options={deleteReasonOptions()}
label={t("delete_account_reason_label")}
placeholder={t(
"delete_account_reason_placeholder",
)}
selected={values.reason}
setSelected={handleChange("reason")}
messageProps={{ color: "critical.main" }}
message={errors.reason}
/>
<MultilineInput
label={t("delete_account_feedback_label")}
placeholder={t(
"delete_account_feedback_placeholder",
)}
value={values.feedback}
onChange={handleChange("feedback")}
message={errors.feedback}
messageProps={{ color: "critical.main" }}
rowCount={3}
/>
<CheckboxInput
checked={acceptDataDeletion}
onChange={setAcceptDataDeletion}
label={t(
"delete_account_confirm_checkbox_label",
)}
/>
<Stack spacing={"8px"}>
<LoadingButton
type="submit"
size="large"
color="critical"
disabled={!acceptDataDeletion}
loading={loading}
>
{t("delete_account_confirm")}
</LoadingButton>
<FocusVisibleButton
size="large"
color={"secondary"}
onClick={onClose}
>
{t("cancel")}
</FocusVisibleButton>
</Stack>
{({
values,
errors,
handleChange,
handleSubmit,
}): JSX.Element => (
<form noValidate onSubmit={handleSubmit}>
<Stack spacing={"24px"}>
<DropdownInput
options={deleteReasonOptions()}
label={t("delete_account_reason_label")}
placeholder={t(
"delete_account_reason_placeholder",
)}
selected={values.reason}
setSelected={handleChange("reason")}
messageProps={{ color: "critical.main" }}
message={errors.reason}
/>
<MultilineInput
label={t("delete_account_feedback_label")}
placeholder={t(
"delete_account_feedback_placeholder",
)}
value={values.feedback}
onChange={handleChange("feedback")}
message={errors.feedback}
messageProps={{ color: "critical.main" }}
rowCount={3}
/>
<CheckboxInput
checked={acceptDataDeletion}
onChange={setAcceptDataDeletion}
label={t(
"delete_account_confirm_checkbox_label",
)}
/>
<Stack spacing={"8px"}>
<LoadingButton
type="submit"
size="large"
color="critical"
disabled={!acceptDataDeletion}
loading={loading}
>
{t("delete_account_confirm")}
</LoadingButton>
<FocusVisibleButton
size="large"
color={"secondary"}
onClick={onClose}
>
{t("cancel")}
</FocusVisibleButton>
</Stack>
</form>
)}
</Formik>
</TitledMiniDialog>
</>
</Stack>
</form>
)}
</Formik>
</TitledMiniDialog>
);
};

30
web/apps/photos/src/components/Sidebar/index.tsx
View File

@@ -612,43 +612,33 @@ const HelpSection: React.FC = () => {
};
const ExitSection: React.FC = () => {
const { setDialogMessage, logout } = useContext(AppContext);
const { showMiniDialog, logout } = useContext(AppContext);
const [deleteAccountModalView, setDeleteAccountModalView] = useState(false);
const { show: showDeleteAccount, props: deleteAccountVisibilityProps } =
useModalVisibility();
const closeDeleteAccountModal = () => setDeleteAccountModalView(false);
const openDeleteAccountModal = () => setDeleteAccountModalView(true);
const confirmLogout = () => {
setDialogMessage({
const handleLogout = () =>
showMiniDialog({
title: t("logout_message"),
proceed: {
text: t("logout"),
action: logout,
variant: "critical",
},
close: { text: t("cancel") },
continue: { text: t("logout"), color: "critical", action: logout },
buttonDirection: "row"
});
};
return (
<>
<EnteMenuItem
onClick={confirmLogout}
onClick={handleLogout}
color="critical"
label={t("logout")}
variant="secondary"
/>
<EnteMenuItem
onClick={openDeleteAccountModal}
onClick={showDeleteAccount}
color="critical"
variant="secondary"
label={t("delete_account")}
/>
<DeleteAccountModal
open={deleteAccountModalView}
onClose={closeDeleteAccountModal}
/>
<DeleteAccountModal {...deleteAccountVisibilityProps} />
</>
);
};