this isn't spaghetti code this is an abomination

src/server/routes/authRoutes.ts

@@ -138,7 +138,7 @@ authRoutes.post("/change_password", (req,res) => {
         return
     }
 
-    if (body.password.length < 8) {
+    if (typeof body.password != "string" || body.password.length < 8) {
         ServeError(res,400,"password must be 8 characters or longer")
         return
     }

src/style/app/pulldown.scss

@@ -2,17 +2,17 @@
 @use "pulldown/help";
 @use "pulldown/accounts";
 @use "pulldown/files";
+@use "pulldown/modals";
 
-#overlay {
+#overlay, .modalContainer {
     position:absolute;
     left:0px;
     height: 100%;
     width:100%;
     top:0px;
-    opacity:0.25;
     border:none;
     outline:none;
-    background-color:#AAAAAA;
+    background-color:rgba(170, 170, 170, 0.25);
 
     z-index: 1000;
 }

src/style/app/pulldown/accounts.scss

@@ -161,79 +161,5 @@
                 }
             }
         }
-
-        .accountOptions {
-
-            button {
-                position:relative;
-                width:100%;
-                cursor:pointer;
-                height:50px;
-                background-color: #191919;
-                border:none;
-                border-bottom:1px solid #AAAAAA;
-                transition-duration:150ms;
-
-                img {
-                    position:absolute;
-                    left:13px;
-                    top:50%;
-                    transform:translateY(-50%);
-                }
-
-                p {
-                    text-align:left;
-                    position:absolute;
-                    top:50%;
-                    left:50px;
-                    color:#DDDDDD;
-                    transform:translateY(-50%);
-                    font-size:14px;
-
-                    span {
-                        color:#777777;
-                        font-size:12px;
-                    }
-                }
-
-                &:hover {
-                    transition-duration:150ms;
-                    background-color: #252525;
-                }
-
-                @media screen and (max-width:500px) {
-                    height:70px;
-                    p {
-                        font-size:16px;
-                        left:70px;
-
-                        span {
-                            font-size:14px;
-                        }
-                    }
-
-                    img {
-                        width:30px;
-                        height:30px;
-                        left:20px;
-                    }
-                }
-
-            }
-
-            .category {
-                border-bottom: 1px solid #AAAAAA;
-
-                p {
-                    color: #AAAAAA;
-                    font-size: 14px;
-                    margin: 10px 0px 3px 0px;
-
-                    @media screen and (max-width:500px) {
-                        font-size:16px;
-                    }
-                }
-            }
-        }
     }
 }

src/style/app/pulldown/modals.scss

@@ -0,0 +1,99 @@
+.optPicker {
+
+    button, .inp {
+        position:relative;
+        width:100%;
+        height:50px;
+        background-color: #191919;
+        border:none;
+        border-bottom:1px solid #AAAAAA;
+        transition-duration:150ms;
+
+        img {
+            position:absolute;
+            left:13px;
+            top:50%;
+            transform:translateY(-50%);
+        }
+
+        p,input {
+            text-align:left;
+            position:absolute;
+            top:50%;
+            left:50px;
+            color:#DDDDDD;
+            transform:translateY(-50%);
+            font-size:14px;
+            background-color:#00000000;
+            border:none;
+
+            span {
+                color:#777777;
+                font-size:12px;
+            }
+        }
+
+        input {
+            height:100%;
+            width:calc(100% - 50px);
+            outline:none; /* bad idea but i don't even care anymore */
+            margin:0px;
+            padding:0px;
+        }
+
+        @media screen and (max-width:500px) {
+            height:70px;
+            p,input {
+                font-size:16px;
+                left:70px;
+
+                span {
+                    font-size:14px;
+                }
+            }
+
+            input {
+                width:calc( 100% - 70px );
+            }
+
+            img {
+                width:30px;
+                height:30px;
+                left:20px;
+            }
+        }
+
+    }
+
+    button {
+        cursor:pointer;
+
+        &:hover {
+            transition-duration:150ms;
+            background-color: #252525;
+        }
+    }
+
+    .category {
+        border-bottom: 1px solid #AAAAAA;
+
+        p {
+            color: #AAAAAA;
+            font-size: 14px;
+            margin: 10px 0px 3px 0px;
+
+            @media screen and (max-width:500px) {
+                font-size:16px;
+            }
+        }
+    }
+}
+
+.modal {
+    position:absolute;
+    background-color:#191919;
+    width:100%;
+    transform:translateY(-100%);
+    top:100%;
+    left:0%;
+}

src/svelte/elem/prompts/OptionPicker.svelte

@@ -0,0 +1,77 @@
+<script>
+    import { fade, slide } from "svelte/transition";
+
+
+    let activeModal;
+    let modalResults;
+
+    /**
+     * 
+     * @param mdl {name:string,icon:string,description:string,id:string}[]
+     * @returns Promise
+     */
+    export function picker(title,mdl) {
+        if (activeModal) forceCancel()
+
+        return new Promise((resolve,reject) => {
+            activeModal = {
+                resolve,
+                title,
+                modal:mdl
+            }
+
+            modalResults = {
+
+            }
+        })
+    }
+
+    export function forceCancel() {
+        if (activeModal && activeModal.resolve) {
+            activeModal.resolve(null)
+        }
+        activeModal = null
+    }
+</script>
+
+{#if activeModal}
+    <button class="modalContainer" on:click|self={forceCancel} transition:fade={{duration:200}}>
+        <div class="modal" transition:slide={{duration:200}}>
+
+            <div class="optPicker">
+
+                <div class="category">
+                    <p>{activeModal.title}</p>
+                </div>
+                
+                {#each activeModal.modal as option (option.id)}
+                    {#if option.inputSettings}
+                        <div class="inp">
+                            <img src={option.icon} alt={option.id}>
+
+                            <!-- i have to do this stupidness because of svelte but -->
+                            <!-- its reason for blocking this is pretty good sooooo -->
+
+                            {#if option.inputSettings.password}
+                                <input placeholder={option.name} type="password" bind:value={modalResults[option.id]}>
+                            {:else}
+                                <input placeholder={option.name} bind:value={modalResults[option.id]}>
+                            {/if}
+                        </div>
+                    {:else}
+                        <button on:click={() => {activeModal.resolve({...modalResults,selected:option.id});activeModal=null;modalResults=null;}}>
+                            <img src={option.icon} alt={option.id}>
+                            <p>{option.name}<span><br />{option.description}</span></p>
+                        </button>
+                    {/if}
+                {/each}
+
+                <button on:click={forceCancel}>
+                    <img src="/static/assets/icons/delete.svg" alt="cancel">
+                    <p>Cancel</p>
+                </button>
+
+            </div>
+        </div>
+    </button>
+{/if}

src/svelte/elem/prompts/passwordChange.js

@@ -0,0 +1,31 @@
+export function pwdChng(optPicker) {
+    optPicker.picker("Change password",[
+        {
+            name: "New password",
+            icon: "/static/assets/icons/change_password.svg",
+            id: "password",
+            inputSettings: {
+                password: true
+            }
+        },
+        {
+            name: "OK",
+            icon: "/static/assets/icons/update.svg",
+            description: "This will log you out of all sessions",
+            id: true
+        }
+    ]).then((exp) => {
+        if (exp && exp.selected) {
+            fetch(`/auth/change_password`,{method:"POST", body:JSON.stringify({
+                password:exp.password
+            })}).then((response) => {
+                
+                if (response.status != 200) {
+                    optPicker.picker(`${response.status} ${response.statusText}`,[])
+                }
+
+                fetchAccountData()
+            })
+        }
+    })
+}

src/svelte/elem/pulldowns/Accounts.svelte

@@ -4,6 +4,8 @@
     import { circIn,circOut } from "svelte/easing"
     import { account, fetchAccountData, serverStats } from "../stores.mjs";
     import { fade } from "svelte/transition";
+    import OptionPicker from "../prompts/OptionPicker.svelte";
+    import { pwdChng } from "../prompts/passwordChange";
 
     let targetAction
     let inProgress
@@ -11,6 +13,8 @@
 
     let pwErr
 
+    let optPicker;
+
     // lazy
 
     let username
@@ -59,6 +63,7 @@
 </script>
 
 <Pulldown name="accounts">
+    <OptionPicker bind:this={optPicker} />
     {#if Object.keys($account).length == 0}
 
         <div class="notLoggedIn" transition:fade={{duration:200}}>
@@ -108,7 +113,7 @@
                 Hey there, <span class="monospace">@{$account.username}</span>
             </h1>
 
-            <div class="accountOptions">
+            <div class="optPicker">
 
                 <div class="category">
                     <p>Account</p>
@@ -119,7 +124,7 @@
                     <p>Change username</p>
                 </button>
 
-                <button>
+                <button on:click={() => pwdChng(optPicker)}>
                     <img src="/static/assets/icons/change_password.svg" alt="change password">
                     <p>Change password<span><br />You will be logged out of all sessions</span></p>
                 </button>