Add user account deletion (#619)

agnaistic · Sep 9, 2023 · a4565ab · a4565ab
1 parent d1ee61d
commit a4565ab
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 14 deletions.
diff --git a/web/pages/Home/ChangeLog.tsx b/web/pages/Home/ChangeLog.tsx
@@ -4,6 +4,10 @@ import { markdown } from '../../shared/markdown'
 import { setComponentPageTitle } from '../../shared/util'
 
 const text = `
+_9 Sept 2023_
+- "Enter" no longer sends message on mobile
+- Added ability to delete account
+
 _8 Sept 2023_
 - Add the "Agnaistic" service for models hosted by Agnai
 - Add stop sequences and phrase bias

diff --git a/web/pages/Profile/index.tsx b/web/pages/Profile/index.tsx
@@ -1,4 +1,4 @@
-import { Save, X } from 'lucide-solid'
+import { AlertTriangle, Save, X } from 'lucide-solid'
 import { Component, Show, createEffect, createSignal, onMount } from 'solid-js'
 import AvatarIcon from '../../shared/AvatarIcon'
 import Button from '../../shared/Button'
@@ -43,6 +43,7 @@ const ProfilePage: Component<{ footer?: (children: any) => void }> = (props) =>
   const nav = useNavigate()
   const state = userStore()
   const [pass, setPass] = createSignal(false)
+  const [del, setDel] = createSignal(false)
   const [avatar, setAvatar] = createSignal<File | undefined>()
 
   const onAvatar = (files: FileInputResult[]) => {
@@ -132,25 +133,31 @@ const ProfilePage: Component<{ footer?: (children: any) => void }> = (props) =>
             <Button onClick={() => setPass(true)}>Change Password</Button>
           </div>
 
-          <div class="flex justify-center">
-            <Button
-              schema="warning"
-              onClick={() => {
-                userStore.modal(false)
-                userStore.logout()
-                nav('/')
-              }}
-            >
-              Logout
-            </Button>
-          </div>
+          <Show when={state.user?._id !== 'anon'}>
+            <div class="flex justify-center gap-4">
+              <Button
+                schema="warning"
+                onClick={() => {
+                  userStore.logout()
+                  nav('/')
+                }}
+              >
+                Logout
+              </Button>
+
+              <Button schema="red" onClick={() => setDel(true)}>
+                <AlertTriangle /> Delete Account <AlertTriangle />
+              </Button>
+            </div>
+          </Show>
 
           <Show when={!props.footer}>
             <div class="mt-4 flex w-full justify-end">{footer}</div>
           </Show>
         </div>
       </form>
       <PasswordModal show={pass()} close={() => setPass(false)} />
+      <DeleteAccountModal show={del()} close={() => setDel(false)} />
     </>
   )
 }
@@ -211,3 +218,57 @@ const PasswordModal: Component<{ show: boolean; close: () => void }> = (props) =
 
   return null
 }
+
+const DeleteAccountModal: Component<{ show: boolean; close: () => void }> = (props) => {
+  const state = userStore()
+  const [username, setUsername] = createSignal('')
+
+  const deleteAccount = () => {
+    if (!username()) return
+    if (username() !== state.user?.username) return
+
+    props.close()
+    userStore.deleteAccount()
+  }
+
+  rootModalStore.addModal({
+    id: 'delete-account-modal',
+    element: (
+      <Modal
+        title="Delete Account"
+        show={props.show}
+        close={props.close}
+        footer={
+          <>
+            <Button schema="secondary" onClick={props.close}>
+              Cancel
+            </Button>
+          </>
+        }
+      >
+        <div class="flex flex-col items-center gap-2">
+          <TitleCard type="rose" class="font-bold">
+            This is irreversible! Your account cannot be recovered if it is deleted.
+          </TitleCard>
+
+          <p>Enter your username then click "Confirm" to confirm the deletion of your account</p>
+
+          <TextInput
+            fieldName="delete-username"
+            onInput={(ev) => setUsername(ev.currentTarget.value)}
+            placeholder="Username"
+          />
+          <Button
+            disabled={username() !== state.user?.username}
+            schema="red"
+            onClick={deleteAccount}
+          >
+            Confirm Deletion
+          </Button>
+        </div>
+      </Modal>
+    ),
+  })
+
+  return null
+}
diff --git a/web/store/user.ts b/web/store/user.ts
@@ -195,7 +195,7 @@ export const userStore = createStore<UserState>(
       const res = await api.post('/user/register', newUser)
       yield { loading: false }
       if (res.error) {
-        return toastStore.error(`Failed to register`)
+        return toastStore.error(`Failed to register: ${res.error}`)
       }
 
       setAuth(res.result.token)
@@ -220,11 +220,24 @@ export const userStore = createStore<UserState>(
         profile: undefined,
         user: undefined,
         loggedIn: false,
+        showProfile: false,
         ui,
       }
       events.emit(EVENTS.loggedOut)
     },
 
+    async *deleteAccount() {
+      const res = await api.method('delete', '/user/my-account')
+      if (res.result) {
+        toastStore.error('Account deleted')
+        userStore.logout()
+      }
+
+      if (res.error) {
+        toastStore.error(`Could not delete account: ${res.error}`)
+      }
+    },
+
     async saveUI({ ui }, update: Partial<UI.UISettings>) {
       // const mode = update.mode ? update.mode : ui.mode
       const next: UI.UISettings = { ...ui, ...update }