From 7d8bb1023ed1b57885672f2a94ae2157f8e3823c Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Sun, 19 Mar 2023 01:37:59 +0100
Subject: [PATCH] feat: add button to remove existing user/member avatar

---
 frontend/src/routes/edit/EditableField.svelte |  1 -
 .../src/routes/edit/member/[id]/+page.svelte  |  5 +++-
 frontend/src/routes/edit/profile/+page.svelte | 29 ++++++++++---------
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/frontend/src/routes/edit/EditableField.svelte b/frontend/src/routes/edit/EditableField.svelte
index 72b1ad0..683b9f7 100644
--- a/frontend/src/routes/edit/EditableField.svelte
+++ b/frontend/src/routes/edit/EditableField.svelte
@@ -47,7 +47,6 @@
       tooltip="Move field right"
       click={() => moveField(false)}
     />
-    <!-- <InputGroupText>Name</InputGroupText> -->
     <Input bind:value={field.name} />
     <Button color="danger" on:click={() => deleteField()}>Delete field</Button>
   </InputGroup>
diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index 2cdf312..ce6c7e8 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -317,7 +317,9 @@
         <h4>Avatar</h4>
         <div class="row">
           <div class="col-md text-center">
-            {#if avatar}
+            {#if avatar === ""}
+              <FallbackImage alt="Current avatar" urls={[]} width={200} />
+            {:else if avatar}
               <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" />
             {:else}
               <FallbackImage alt="Current avatar" urls={memberAvatars(data.member)} width={200} />
@@ -335,6 +337,7 @@
               <Icon name="info-circle-fill" /> Only PNG, JPEG, GIF, and WebP can be used as avatars.
               Avatars cannot be larger than 1 MB, and animated avatars will be made static.
             </p>
+            <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
           </div>
         </div>
       </div>
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index eae1a32..ebe1ac8 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -12,15 +12,7 @@
   } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
-  import {
-    Alert,
-    Button,
-    ButtonDropdown,
-    DropdownToggle,
-    FormGroup,
-    Icon,
-    Input,
-  } from "sveltestrap";
+  import { Alert, Button, ButtonGroup, FormGroup, Icon, Input } from "sveltestrap";
   import { encode } from "base64-arraybuffer";
   import { apiFetchClient } from "$lib/api/fetch";
   import IconButton from "$lib/components/IconButton.svelte";
@@ -248,9 +240,15 @@
 
 <h1>
   Edit profile
-  {#if modified}
-    <Button color="success" on:click={() => updateUser()}>Save changes</Button>
-  {/if}
+  <ButtonGroup>
+    <Button color="secondary" href="/@{$userStore?.name}">
+      <Icon name="chevron-left" />
+      Back to your profile
+    </Button>
+    {#if modified}
+      <Button color="success" on:click={() => updateUser()}>Save changes</Button>
+    {/if}
+  </ButtonGroup>
 </h1>
 
 {#if error}
@@ -266,7 +264,9 @@
         <h4>Avatar</h4>
         <div class="row">
           <div class="col-md text-center">
-            {#if avatar}
+            {#if avatar === ""}
+              <FallbackImage alt="Current avatar" urls={[]} width={200} />
+            {:else if avatar}
               <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" />
             {:else}
               <FallbackImage alt="Current avatar" urls={userAvatars($userStore)} width={200} />
@@ -284,6 +284,9 @@
               <Icon name="info-circle-fill" /> Only PNG, JPEG, GIF, and WebP images can be used as avatars.
               Avatars cannot be larger than 1 MB, and animated avatars will be made static.
             </p>
+            <p>
+              <a href="" on:click={() => (avatar = "")}>Remove avatar</a>
+            </p>
           </div>
         </div>
       </div>