account deletion

2 files changed, 38 insertions, 4 deletions

diff --git a/src/routes/(app)/account/[id]/+page.server.ts b/src/routes/(app)/account/[id]/+page.server.ts
index 7d1c503a..35b5517d 100644
--- a/src/routes/(app)/account/[id]/+page.server.ts
+++ b/src/routes/(app)/account/[id]/+page.server.ts
@@ -1,5 +1,11 @@
 import { error, redirect } from "@sveltejs/kit";
-import { auth, post, fd } from "$lib/utils";
+import { auth, get, post, fd } from "$lib/utils";
+
+
+export let load = async ({ cookies, params }) => {
+  let account = await get(`/account/${params.id}`, auth(cookies));
+  return { account };
+}
 
 export const actions = {
   default: async ({ cookies, params, request }) => {
diff --git a/src/routes/(app)/account/[id]/+page.svelte b/src/routes/(app)/account/[id]/+page.svelte
index 152e8dfc..df121168 100644
--- a/src/routes/(app)/account/[id]/+page.svelte
+++ b/src/routes/(app)/account/[id]/+page.svelte
@@ -1,8 +1,22 @@
 <script>
+  import { goto } from "$app/navigation";
+  import { fail, focus, post } from "$lib/utils";
   import { enhance } from "$app/forms";
   import { t } from "$lib/translations";
   import Icon from "$comp/Icon.svelte";
-  let name;
+
+  export let data;
+  let { account, user } = data;
+  let { id, name } = account;
+
+  let del = async () => {
+    try {
+      await post("/api/account/delete", { id });
+      goto(`/${user.username}`);
+    } catch (e) {
+      fail(e.message);
+    }
+  };
 </script>
 
 <div class="space-y-5">
@@ -12,10 +26,24 @@
     <form class="space-y-5" method="POST">
       <div>
         <label for="display" class="font-bold mb-1 block">Account name</label>
-        <input type="text" name="name" bind:value={name} />
+        <input use:focus type="text" name="name" bind:value={name} />
       </div>
 
-      <button type="submit">Save</button>
+      <div class="space-y-2">
+        <button
+          type="submit"
+          class="rounded-2xl border py-3 font-bold mx-auto bg-black text-white px-4 w-full"
+          >Submit</button
+        >
+        <button
+          on:click={del}
+          type="button"
+          class="flex gap-2 rounded-2xl border py-3 font-bold mx-auto px-4 w-full justify-center border-red-600 border-2"
+        >
+          <Icon icon="trash" style="w-8 my-auto" />
+          <div class="my-auto">Delete</div></button
+        >
+      </div>
     </form>
   </div>
 </div>