account deletion

6 files changed, 47 insertions, 18 deletions

diff --git a/bun.lockb b/bun.lockb
index 97e0841d..96e1a3c5 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index a8573c37..6294bc44 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -20,7 +20,7 @@
     <div class="flex">
       <Balance {balance} {user} {rate} />
       <a href={`/account/${id}`} class="contents">
-        <button class="ml-auto flex gap-1 mb-auto">
+        <button class="ml-auto flex gap-1 mb-auto pb-2 pl-2">
           <div class="my-auto text-secondary">{name}</div>
           <Icon icon="settings" style="w-8 my-auto" />
         </button>
diff --git a/src/locales/en.json b/src/locales/en.json
index fd2807b4..ba7ebc87 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -331,7 +331,7 @@
 		"voucher": "Payment code",
 		"qr": "QR",
 		"copy": "Copy",
-		"amountPrompt": "Always prompt for amount",
+		"amountPrompt": "Prompt for amount",
 		"shareLink": "Share link",
 		"copyLink": "Copy link",
 		"copyText": "Copy text",
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>
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 36f5d261..96ff6406 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -136,14 +136,14 @@
       >
         <img
           {src}
-          class="mx-auto z-10 rounded-2xl w-[260px] rounded-2xl"
+          class="mx-auto z-10 max-w-[360px]"
           bind:this={qr}
           alt={txt}
         />
       </a>
     </div>
   {:else}
-    <div class="break-all pb-5 text-center text-secondary">
+    <div class="break-all pb-5 text-center text-secondary text-xl">
       {txt}
     </div>
   {/if}
@@ -188,7 +188,7 @@
     </div>
   {/if}
 
-  <div class="text-secondary space-y-2 text-xl">
+  <div class="text-secondary space-y-2 text-xl pt-2">
     <button
       type="button"
       class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border whitespace-nowrap mb-2"
@@ -303,7 +303,7 @@
     <div
       class="relative mx-auto p-12 border w-96 shadow-lg rounded-md bg-white space-y-5 top-10"
     >
-      <form submit={setAmount}>
+      <form on:submit|preventDefault={setAmount}>
         <Numpad
           bind:amount={newAmount}
           bind:currency
@@ -313,6 +313,7 @@
         />
         <div class="w-full flex flex-wrap gap-2">
           <button
+            bind:this={submit}
             type="submit"
             on:click={setAmount}
             class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto bg-black text-white w-full"
@@ -320,7 +321,6 @@
             <div class="my-auto">Ok</div>
           </button>
           <button
-            bind:this={submit}
             type="button"
             class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto w-full"
             on:click={toggleAmount}
@@ -331,8 +331,8 @@
         </div>
       </form>
 
-      <div class="flex justify-between items-center">
-        <span class="font-bold">{$t("payments.amountPrompt")}</span>
+      <div class="flex justify-center gap-3">
+        <div class="text-secondary">{$t("payments.amountPrompt")}</div>
         <Toggle id="notify" bind:value={$amountPrompt} />
       </div>
     </div>
@@ -343,9 +343,4 @@
   .invoice {
     view-transition-name: invoice;
   }
-
-  .clip-qr {
-    @apply overflow-hidden;
-    clip-path: inset(5%);
-  }
 </style>