From e24c4f9b0033fc82092a7c5c87bd56792d549cb6 Mon Sep 17 00:00:00 2001 From: sam Date: Thu, 19 Dec 2024 17:15:50 +0100 Subject: [PATCH] feat(frontend): self-service delete, force delete pages --- .../src/lib/i18n/locales/en.json | 29 +++++++- .../src/routes/settings/+page.svelte | 5 +- .../routes/settings/delete/+page.server.ts | 41 +++++++++++ .../src/routes/settings/delete/+page@.svelte | 55 +++++++++++++++ .../settings/delete/success/+page@.svelte | 20 ++++++ .../settings/force-delete/+page.server.ts | 53 +++++++++++++++ .../settings/force-delete/+page@.svelte | 68 +++++++++++++++++++ .../force-delete/success/+page@.svelte | 20 ++++++ .../routes/settings/reactivate/+page@.svelte | 18 ++--- 9 files changed, 298 insertions(+), 11 deletions(-) create mode 100644 Foxnouns.Frontend/src/routes/settings/delete/+page.server.ts create mode 100644 Foxnouns.Frontend/src/routes/settings/delete/+page@.svelte create mode 100644 Foxnouns.Frontend/src/routes/settings/delete/success/+page@.svelte create mode 100644 Foxnouns.Frontend/src/routes/settings/force-delete/+page.server.ts create mode 100644 Foxnouns.Frontend/src/routes/settings/force-delete/+page@.svelte create mode 100644 Foxnouns.Frontend/src/routes/settings/force-delete/success/+page@.svelte diff --git a/Foxnouns.Frontend/src/lib/i18n/locales/en.json b/Foxnouns.Frontend/src/lib/i18n/locales/en.json index 87a9cdd..73472ad 100644 --- a/Foxnouns.Frontend/src/lib/i18n/locales/en.json +++ b/Foxnouns.Frontend/src/lib/i18n/locales/en.json @@ -167,7 +167,34 @@ "force-delete-header": "Permanently delete your account", "reactivate-button": "Reactivate my account", "reactivated-header": "Account reactivated", - "reactivated-explanation": "Your account has been reactivated!" + "reactivated-explanation": "Your account has been reactivated!", + "force-delete-input-label": "To delete your account, type your username (@{{username}}), including the @, in the box below:", + "force-delete-export-hint": "If you haven't done so yet, we recommend you download an export of your data before continuing:", + "force-delete-export-link": "export your data", + "force-delete-irreversible": "This process is irreversible.", + "force-delete-username-available": "Your username will immediately be available for other users to take.", + "force-delete-immediate-delete": "This will immediately delete all of your profiles, including avatars.", + "force-delete-page-explanation": "Your account is currently pending deletion. If you want all your data deleted immediately, you can do so here.", + "force-delete-page-header": "Permanently delete your account", + "force-delete-checkbox-label": "Yes, I understand that my data will be permanently deleted and cannot be recovered.", + "force-delete-page-button": "Delete my account", + "account-is-deleted-header": "Your account has been deleted", + "account-is-deleted-permanently-description": "Your account has been deleted. Note that it may take a few minutes for all of your data to be removed.", + "account-is-deleted-close-page": "You may now close this page.", + "soft-delete-button": "Deactivate your account", + "soft-delete-hint": "If you want to delete your account, use the button below.", + "soft-delete-header": "Deactivate your account", + "force-delete-page-cancel": "I changed my mind, cancel", + "soft-delete-page-header": "Deactivate your account", + "soft-delete-page-explanation": "If you want to delete your account, you can do so here.", + "soft-delete-90-days": "Your account will be permanently deleted after 90 days.", + "soft-delete-can-reactivate": "If you change your mind, you can log in and go to the settings page at any time to reactivate your account.", + "soft-delete-keep-username": "You will keep your current username until your account is permanently deleted.", + "soft-delete-can-delete-permanently": "If you want to delete all your data early, you can do so by logging in and going to the settings page.", + "soft-delete-page-button": "Deactivate my account", + "soft-delete-input-label": "To deactivate your account, type your username (@{{username}}), including the @, in the box below:", + "account-is-deactivated-header": "Your account has been deactivated", + "account-is-deactivated-description": "Your account has been deactivated, and will be deleted in 90 days. If you change your mind, just log in again, and you will have the option to reactivate your account. If you want to delete your data immediately, you should also log in again, and you will be able to request immediate deletion." }, "yes": "Yes", "no": "No", diff --git a/Foxnouns.Frontend/src/routes/settings/+page.svelte b/Foxnouns.Frontend/src/routes/settings/+page.svelte index 6963b31..d5f90ac 100644 --- a/Foxnouns.Frontend/src/routes/settings/+page.svelte +++ b/Foxnouns.Frontend/src/routes/settings/+page.svelte @@ -110,8 +110,9 @@ {#if !data.user.deleted}
-

Delete your account

-

+

{$t("settings.soft-delete-header")}

+

{$t("settings.soft-delete-hint")}

+ {$t("settings.soft-delete-button")}
{/if} diff --git a/Foxnouns.Frontend/src/routes/settings/delete/+page.server.ts b/Foxnouns.Frontend/src/routes/settings/delete/+page.server.ts new file mode 100644 index 0000000..4ac1d19 --- /dev/null +++ b/Foxnouns.Frontend/src/routes/settings/delete/+page.server.ts @@ -0,0 +1,41 @@ +import { fastRequest } from "$api"; +import ApiError, { ErrorCode, type RawApiError } from "$api/error"; +import { clearToken } from "$lib"; +import { redirect } from "@sveltejs/kit"; + +export const load = async ({ parent }) => { + const { meUser } = await parent(); + if (!meUser) redirect(303, "/"); + + if (meUser.deleted) + throw new ApiError({ + message: "You cannot use this page.", + status: 403, + code: ErrorCode.Forbidden, + }); + + return { user: meUser! }; +}; + +export const actions = { + default: async ({ request, fetch, cookies }) => { + const body = await request.formData(); + const username = body.get("username") as string; + const currentUsername = body.get("current-username") as string; + + if (!username || username !== currentUsername) { + return { + ok: false, + error: { + message: "Username doesn't match your username.", + status: 400, + code: ErrorCode.BadRequest, + } as RawApiError, + }; + } + + await fastRequest("POST", "/self-delete/delete", { fetch, cookies, isInternal: true }); + clearToken(cookies); + redirect(303, "/settings/delete/success"); + }, +}; diff --git a/Foxnouns.Frontend/src/routes/settings/delete/+page@.svelte b/Foxnouns.Frontend/src/routes/settings/delete/+page@.svelte new file mode 100644 index 0000000..cb5fec2 --- /dev/null +++ b/Foxnouns.Frontend/src/routes/settings/delete/+page@.svelte @@ -0,0 +1,55 @@ + + + + {$t("settings.soft-delete-page-header")} • pronouns.cc + + +
+
+

{$t("settings.soft-delete-page-header")}

+ +

+ {$t("settings.soft-delete-page-explanation")} +

+ +
    +
  • {$t("settings.soft-delete-90-days")}
    • +
  • + {$t("settings.soft-delete-can-reactivate")} +
    • +
  • {$t("settings.soft-delete-keep-username")}
    • +
  • + {$t("settings.soft-delete-can-delete-permanently")} +
    • +
+ +
+ +

+ {$t("settings.soft-delete-input-label", { username: data.user.username })} + + +

+
+ + {$t("settings.force-delete-page-cancel")} +
+ +
+
diff --git a/Foxnouns.Frontend/src/routes/settings/delete/success/+page@.svelte b/Foxnouns.Frontend/src/routes/settings/delete/success/+page@.svelte new file mode 100644 index 0000000..9b35518 --- /dev/null +++ b/Foxnouns.Frontend/src/routes/settings/delete/success/+page@.svelte @@ -0,0 +1,20 @@ + + + + {$t("settings.soft-delete-page-header")} • pronouns.cc + + +
+
+

{$t("settings.account-is-deactivated-header")}

+

+ {$t("settings.account-is-deactivated-description")} +

+

{$t("settings.account-is-deleted-close-page")}

+

+ {$t("error.back-to-main-page-button")} +

+
+
diff --git a/Foxnouns.Frontend/src/routes/settings/force-delete/+page.server.ts b/Foxnouns.Frontend/src/routes/settings/force-delete/+page.server.ts new file mode 100644 index 0000000..1816ce7 --- /dev/null +++ b/Foxnouns.Frontend/src/routes/settings/force-delete/+page.server.ts @@ -0,0 +1,53 @@ +import { fastRequest } from "$api"; +import ApiError, { ErrorCode, type RawApiError } from "$api/error"; +import { clearToken } from "$lib"; +import { redirect } from "@sveltejs/kit"; + +export const load = async ({ parent }) => { + const { meUser } = await parent(); + if (!meUser) redirect(303, "/"); + + if (!meUser.deleted) + throw new ApiError({ + message: "You cannot use this page.", + status: 403, + code: ErrorCode.Forbidden, + }); + + return { user: meUser! }; +}; + +export const actions = { + default: async ({ request, fetch, cookies }) => { + const body = await request.formData(); + const username = body.get("username") as string; + const currentUsername = body.get("current-username") as string; + const confirmed = !!body.get("confirm"); + + if (!username || username !== currentUsername) { + return { + ok: false, + error: { + message: "Username doesn't match your username.", + status: 400, + code: ErrorCode.BadRequest, + } as RawApiError, + }; + } + + if (!confirmed) { + return { + ok: false, + error: { + message: "You must check the box to continue.", + status: 400, + code: ErrorCode.BadRequest, + } as RawApiError, + }; + } + + await fastRequest("POST", "/self-delete/force", { fetch, cookies, isInternal: true }); + clearToken(cookies); + redirect(303, "/settings/force-delete/success"); + }, +}; diff --git a/Foxnouns.Frontend/src/routes/settings/force-delete/+page@.svelte b/Foxnouns.Frontend/src/routes/settings/force-delete/+page@.svelte new file mode 100644 index 0000000..4b39e62 --- /dev/null +++ b/Foxnouns.Frontend/src/routes/settings/force-delete/+page@.svelte @@ -0,0 +1,68 @@ + + + + {$t("settings.force-delete-page-header")} • pronouns.cc + + +
+
+

{$t("settings.force-delete-page-header")}

+ +

+ {$t("settings.force-delete-page-explanation")} +

+ +
    +
  • {$t("settings.force-delete-immediate-delete")}
    • +
  • {$t("settings.force-delete-username-available")}
    • +
  • {$t("settings.force-delete-irreversible")}
    • +
+ +

+ {$t("settings.force-delete-export-hint")} + {$t("settings.force-delete-export-link")} +

+ +
+ +

+ {$t("settings.force-delete-input-label", { username: data.user.username })} + + +

+
+ + +
+
+ + {$t("settings.force-delete-page-cancel")} +
+ +
+
diff --git a/Foxnouns.Frontend/src/routes/settings/force-delete/success/+page@.svelte b/Foxnouns.Frontend/src/routes/settings/force-delete/success/+page@.svelte new file mode 100644 index 0000000..7fd5bd5 --- /dev/null +++ b/Foxnouns.Frontend/src/routes/settings/force-delete/success/+page@.svelte @@ -0,0 +1,20 @@ + + + + {$t("settings.force-delete-page-header")} • pronouns.cc + + +
+
+

{$t("settings.account-is-deleted-header")}

+

+ {$t("settings.account-is-deleted-permanently-description")} +

+

{$t("settings.account-is-deleted-close-page")}

+

+ {$t("error.back-to-main-page-button")} +

+
+
diff --git a/Foxnouns.Frontend/src/routes/settings/reactivate/+page@.svelte b/Foxnouns.Frontend/src/routes/settings/reactivate/+page@.svelte index acfb617..cf70c4b 100644 --- a/Foxnouns.Frontend/src/routes/settings/reactivate/+page@.svelte +++ b/Foxnouns.Frontend/src/routes/settings/reactivate/+page@.svelte @@ -6,15 +6,17 @@ let { data }: Props = $props(); -
-

{$t("settings.reactivated-header")}

+
+
+

{$t("settings.reactivated-header")}

-

{$t("settings.reactivated-explanation")}

+

{$t("settings.reactivated-explanation")}

-
- {$t("edit-profile.back-to-settings-tab")} - - {$t("error.back-to-profile-button")} - +
+ {$t("edit-profile.back-to-settings-tab")} + + {$t("error.back-to-profile-button")} + +