this is like hakf done lmao whatever

src/svelte/elem/prompts/OptionPicker.svelte

@@ -41,7 +41,7 @@
             <div class="optPicker">
 
                 <div class="category">
-                    <p>{activeModal.title}</p>
+                    <p style:margin-bottom="10px">{activeModal.title}</p>
                 </div>
                 
                 {#each activeModal.modal as option (option.id)}

src/svelte/elem/prompts/account.js

@@ -1,4 +1,90 @@
-import { fetchAccountData } from "../stores.mjs"
+import { fetchAccountData, account } from "../stores.mjs"
+import { get } from "svelte/store";
+
+export function deleteAccount(optPicker) {
+    optPicker.picker("What should we do with your files?",[
+        {
+            name: "Delete my files",
+            icon: "/static/assets/icons/admin/delete_file.svg",
+            description: "Your files will be permanently deleted",
+            id: true
+        },
+        {
+            name: "Do nothing",
+            icon: "/static/assets/icons/file.svg",
+            description: "Your files will not be affected",
+            id: false
+        }
+    ]).then((exp) => {
+        if (exp) {
+            let deleteFiles = exp.selected
+
+            optPicker.picker(`Enter your username to continue.`,[
+                {
+                    name: "Enter your username",
+                    icon: "/static/assets/icons/person.svg",
+                    inputSettings: {},
+                    id:"username"
+                },
+                {
+                    name: `Delete account ${deleteFiles ? "& files" : ""}`,
+                    icon: "/static/assets/icons/delete_account.svg",
+                    description: `This cannot be undone.`,
+                    id: true
+                }
+            ]).then((fin) => {
+                if (fin && fin.selected) {
+                    if (fin.username != (get(account)||{}).username) {
+                        optPicker.picker("Incorrect username. Please try again.",[])
+                        return
+                    }
+                    
+                    fetch(`/auth/delete_account`,{method:"POST", body:JSON.stringify({
+                        deleteFiles
+                    })}).then((response) => {
+                        
+                        if (response.status != 200) {
+                            optPicker.picker(`${response.status} ${response.statusText}`,[])
+                        }
+        
+                        fetchAccountData()
+                    })
+                    
+                }
+            })
+        }
+    })
+}
+
+export function userChange(optPicker) {
+    optPicker.picker("Change username",[
+        {
+            name: "New username",
+            icon: "/static/assets/icons/person.svg",
+            id: "username",
+            inputSettings: {}
+        },
+        {
+            name: "OK",
+            icon: "/static/assets/icons/update.svg",
+            description: "",
+            id: true
+        }
+    ]).then((exp) => {
+        if (exp && exp.selected) {
+            fetch(`/auth/change_username`,{method:"POST", body:JSON.stringify({
+                username:exp.username
+            })}).then((response) => {
+                
+                if (response.status != 200) {
+                    optPicker.picker(`${response.status} ${response.statusText}`,[])
+                }
+
+                fetchAccountData()
+            })
+        }
+    })
+}
 
 export function pwdChng(optPicker) {
     optPicker.picker("Change password",[

src/svelte/elem/pulldowns/Accounts.svelte

@@ -130,7 +130,7 @@
                 </button>
                 
                 {#if !$account.admin}
-                    <button>
+                    <button on:click={() => accOpts.deleteAccount(optPicker)}>
                         <img src="/static/assets/icons/delete_account.svg" alt="delete account">
                         <p>Delete account</p>
                     </button>