Settings to allow users to delete their account

backend/LexBoxApi/GraphQL/LexMutations.cs

@@ -153,4 +153,16 @@ public async Task<User> DeleteUserByAdmin(DeleteUserByAdminInput input, LexBoxDb
         await user.ExecuteDeleteAsync();
         return User;
     }
+    [Error<NotFoundException>]
+    [Error<DbError>]
+    [UseMutationConvention]
+    public async Task<User> DeleteUserByUser(DeleteUserByUserInput input, LexBoxDbContext dbContext){
+        var user = await dbContext.Users.FindAsync(input.UserId);
+        if (user is null) throw new NotFoundException("User not found");
+        if (_loggedInContext.User.Id != input.UserId) throw new UnauthorizedAccessException();
+        var User = await dbContext.Users.FindAsync(input.UserId);
+        var del = dbContext.Users.Where(u => u.Id == input.UserId);
+        await del.ExecuteDeleteAsync();
+        return User;
+    }
 }

frontend/schema.graphql

@@ -172,6 +172,17 @@ type DeleteUserByAdminPayload {
   user: User
 }
 
+union DeleteUserByUserError = DbError | NotFoundError
+
+input DeleteUserByUserInput {
+  userId: UUID!
+}
+
+type DeleteUserByUserPayload {
+  errors: [DeleteUserByUserError!]
+  user: User
+}
+
 interface Error {
   message: String!
 }
@@ -204,6 +215,7 @@ type Mutation {
   changeUserAccountData(input: ChangeUserAccountDataInput!): ChangeUserAccountDataPayload!
   createProject(input: CreateProjectInput!): CreateProjectPayload!
   deleteUserByAdmin(input: DeleteUserByAdminInput!): DeleteUserByAdminPayload!
+  deleteUserByUser(input: DeleteUserByUserInput!): DeleteUserByUserPayload!
   removeProjectMember(input: RemoveProjectMemberInput!): Project
 }
 

frontend/src/lib/components/modals/FormModal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Readable } from 'svelte/store';
-
   import Modal, { DialogResponse } from '$lib/components/modals/Modal.svelte';
   import { FormError, lexSuperForm } from '$lib/forms';
   import Form from '$lib/forms/Form.svelte';

frontend/src/lib/i18n/locales/en.json

@@ -39,7 +39,12 @@
     "name": "Display name",
     "reset_password": "Reset your password instead?",
     "success": "Success: your account has been updated",
-    "button_update": "Update account info"
+    "button_update": "Update account info",
+    "more_settings": "More Settings",
+    "delete_account": "Delete Account",
+    "delete_user": "delete account",
+    "delete_user_label": "Enter 'delete account' to delete your account.",
+    "keyphrase": "delete account"
   },
   "appbar": {
     "app_name": "Language Depot"

frontend/src/routes/(authenticated)/user/+page.svelte

@@ -5,17 +5,32 @@
   import { Page } from '$lib/layout';
   import { _changeUserAccountData } from './+page';
   import type { ChangeUserAccountDataInput } from '$lib/gql/types';
+  import { TrashIcon } from '$lib/icons';
   import z from 'zod';
+  import { goto } from '$app/navigation';
+  import DeleteAccountModal from './DeleteAccountModal.svelte';
+  import { _deleteUserByUser } from './+page';
+  import type { DeleteUserByUserInput } from '$lib/gql/types';
 
   export let data: PageData;
   $: user = data?.user;
   $: userid = user?.id;
+  let deleteModal: DeleteAccountModal;
 
+  async function openDeleteModal(): Promise<void> {
+    await deleteModal.open();
+  }
   const formSchema = z.object({
     email: z.string().email(),
     name: z.string(),
   });
-
+  async function deleteMe(): Promise<void> {
+    const deleteUserByUserInput: DeleteUserByUserInput = {
+      userId: userid as string,
+    };
+    await _deleteUserByUser(deleteUserByUserInput);
+    await goto('/logout');
+  }
   let { form, errors, enhance, message, submitting } = lexSuperForm(formSchema, async () => {
     const changeUserAccountDataInput: ChangeUserAccountDataInput = {
       email: $form.email,
@@ -25,7 +40,6 @@
     const result = await _changeUserAccountData(changeUserAccountDataInput);
     $message = result.error?.message;
   });
-
   $: {
     if (user) {
       form.set({
@@ -57,8 +71,16 @@
       <a class="link my-4" href="/resetPassword">
         {$t('account_settings.reset_password')}
       </a>
+      <div class="collapse text-error w-full underline rounded-box collapse-arrow">
+        <input type="checkbox" />
+        <div class="collapse-title text-xl font-medium">{$t('account_settings.more_settings')}</div>
+        <div class="collapse-content">
+          <span class="btn btn-error" on:click={openDeleteModal}>{$t('account_settings.delete_account')}<TrashIcon/></span>
+        </div>
+      </div>
       <FormError error={$message} />
       <Button loading={$submitting}>{$t('account_settings.button_update')}</Button>
     </Form>
   </div>
 </Page>
+<DeleteAccountModal deleteUser={deleteMe} bind:this={deleteModal} />

frontend/src/routes/(authenticated)/user/+page.ts

@@ -2,6 +2,8 @@ import type {
   $OpResult,
   ChangeUserAccountDataMutation,
   ChangeUserAccountDataInput,
+  DeleteUserByUserMutation,
+  DeleteUserByUserInput
 
 } from '$lib/gql/types';
 import { getClient, graphql } from '$lib/gql';
@@ -39,3 +41,27 @@ export async function _changeUserAccountData(input: ChangeUserAccountDataInput):
   }
   return result;
 }
+export async function _deleteUserByUser(input: DeleteUserByUserInput): $OpResult<DeleteUserByUserMutation> {
+  //language=GraphQL
+  const result = await getClient()
+    .mutation(
+      graphql(`
+        mutation DeleteUserByUser($input: DeleteUserByUserInput!) {
+          deleteUserByUser(input: $input) {
+            user {
+              id
+            }
+            errors {
+              ... on Error {
+                message
+              }
+            }
+          }
+        }
+      `),
+      { input: input },
+      //invalidates the graphql user cache, but who knows
+      { additionalTypenames: ['Users'] },
+    );
+  return result;
+}