account settings

4 files changed, 51 insertions, 3 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index d52c4f52..a8573c37 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -5,7 +5,7 @@
   import { t } from "$lib/translations";
 
   export let user, rate, account;
-  let { seed, balance, id } = account;
+  let { name, seed, balance, id } = account;
   $: type = seed ? "Savings" : "Cash";
 
   $: refresh(account);
@@ -17,7 +17,15 @@
 
 <a href={`/payments`} class="block" on:click={setAccount}>
   <div class="border rounded-xl shadow p-4 space-y-5">
-    <Balance {balance} {user} {rate} />
+    <div class="flex">
+      <Balance {balance} {user} {rate} />
+      <a href={`/account/${id}`} class="contents">
+        <button class="ml-auto flex gap-1 mb-auto">
+          <div class="my-auto text-secondary">{name}</div>
+          <Icon icon="settings" style="w-8 my-auto" />
+        </button>
+      </a>
+    </div>
 
     <div class="flex flex-wrap gap-3 justify-center w-full text-xl">
       <a href={`/send`} class="contents grow" on:click={setAccount}>
diff --git a/src/routes/(app)/account/[id]/+page.server.ts b/src/routes/(app)/account/[id]/+page.server.ts
new file mode 100644
index 00000000..7d1c503a
--- /dev/null
+++ b/src/routes/(app)/account/[id]/+page.server.ts
@@ -0,0 +1,19 @@
+import { error, redirect } from "@sveltejs/kit";
+import { auth, post, fd } from "$lib/utils";
+
+export const actions = {
+  default: async ({ cookies, params, request }) => {
+    let { id } = params;
+    let body = await fd(request);
+    let username = cookies.get("username");
+
+    try {
+      await post(`/account/${id}`, body, auth(cookies));
+    } catch (e: any) {
+      console.log(e);
+      error(400, { message: e.message });
+    }
+
+    redirect(303, `/${username}`);
+  },
+};
diff --git a/src/routes/(app)/account/[id]/+page.svelte b/src/routes/(app)/account/[id]/+page.svelte
new file mode 100644
index 00000000..152e8dfc
--- /dev/null
+++ b/src/routes/(app)/account/[id]/+page.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { enhance } from "$app/forms";
+  import { t } from "$lib/translations";
+  import Icon from "$comp/Icon.svelte";
+  let name;
+</script>
+
+<div class="space-y-5">
+  <h1 class="text-center text-3xl font-semibold">Account settings</h1>
+
+  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
+    <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} />
+      </div>
+
+      <button type="submit">Save</button>
+    </form>
+  </div>
+</div>
diff --git a/src/routes/(app)/settings/[...tab]/+page.svelte b/src/routes/(app)/settings/[...tab]/+page.svelte
index df66dbd0..f59806d1 100644
--- a/src/routes/(app)/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/settings/[...tab]/+page.svelte
@@ -137,7 +137,7 @@
           content: JSON.stringify({
             name: user.username,
             about: user.address,
-            picture: `${PUBLIC_COINOS_URL}/public/${user.profile}.webp`,
+            picture: `${$page.url.origin}/public/${user.profile}.webp`,
           }),
           tags: [],
         };