Fix the Form class and more user settings

.dist/localuser.js

@@ -932,82 +932,125 @@ class Localuser {
         }
         {
             const security = settings.addButton("Account Settings");
-            if (this.mfa_enabled) {
+            const genSecurity = () => {
-                security.addTextInput("Disable 2FA, totp code:", _ => {
+                security.removeAll();
-                    fetch(this.info.api + "/users/@me/mfa/totp/disable", {
+                if (this.mfa_enabled) {
-                        method: "POST",
+                    security.addButtonInput("", "Disable 2FA", () => {
+                        const form = security.addSubForm("2FA Disable", (_) => {
+                            if (_.message) {
+                                switch (_.code) {
+                                    case 60008:
+                                        form.error("code", "Invalid code");
+                                        break;
+                                }
+                            }
+                            else {
+                                this.mfa_enabled = false;
+                                security.returnFromSub();
+                                genSecurity();
+                            }
+                        }, {
+                            fetchURL: (this.info.api + "/users/@me/mfa/totp/disable"),
+                            headers: this.headers
+                        });
+                        form.addTextInput("Code:", "code", { required: true });
+                    });
+                }
+                else {
+                    security.addButtonInput("", "Enable 2FA", async () => {
+                        let secret = "";
+                        for (let i = 0; i < 18; i++) {
+                            secret += "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"[Math.floor(Math.random() * 32)];
+                        }
+                        const form = security.addSubForm("2FA Setup", (_) => {
+                            if (_.message) {
+                                switch (_.code) {
+                                    case 60008:
+                                        form.error("code", "Invalid code");
+                                        break;
+                                    case 400:
+                                        form.error("password", "Incorrect password");
+                                        break;
+                                }
+                            }
+                            else {
+                                genSecurity();
+                                this.mfa_enabled = true;
+                                security.returnFromSub();
+                            }
+                        }, {
+                            fetchURL: (this.info.api + "/users/@me/mfa/totp/enable/"),
+                            headers: this.headers
+                        });
+                        form.addTitle("Copy this secret into your totp(time-based one time password) app");
+                        form.addText(`Your secret is: ${secret} and it's 6 digits, with a 30 second token period`);
+                        form.addTextInput("Account Password:", "password", { required: true, password: true });
+                        form.addTextInput("Code:", "code", { required: true });
+                        form.setValue("secret", secret);
+                    });
+                }
+                security.addButtonInput("", "Change discriminator", () => {
+                    const form = security.addSubForm("Change Discriminator", (_) => { security.returnFromSub(); }, {
+                        fetchURL: (this.info.api + "/users/@me/"),
                         headers: this.headers,
-                        body: JSON.stringify({
+                        method: "PATCH"
-                            code: _
+                    });
-                        })
+                    form.addTextInput("New discriminator:", "discriminator");
-                    }).then(r => r.json()).then(json => {
+                });
-                        if (json.message) {
+                security.addButtonInput("", "Change email", () => {
-                            alert(json.message);
+                    const form = security.addSubForm("Change Email", (_) => { security.returnFromSub(); }, {
+                        fetchURL: (this.info.api + "/users/@me/"),
+                        headers: this.headers,
+                        method: "PATCH"
+                    });
+                    form.addTextInput("Password:", "password", { password: true });
+                    if (this.mfa_enabled) {
+                        form.addTextInput("Code:", "code");
+                    }
+                    form.addTextInput("New email:", "email");
+                });
+                security.addButtonInput("", "Change username", () => {
+                    const form = security.addSubForm("Change Username", (_) => { security.returnFromSub(); }, {
+                        fetchURL: (this.info.api + "/users/@me/"),
+                        headers: this.headers,
+                        method: "PATCH"
+                    });
+                    form.addTextInput("Password:", "password", { password: true });
+                    if (this.mfa_enabled) {
+                        form.addTextInput("Code:", "code");
+                    }
+                    form.addTextInput("New username:", "username");
+                });
+                security.addButtonInput("", "Change password", () => {
+                    const form = security.addSubForm("Change Password", (_) => { security.returnFromSub(); }, {
+                        fetchURL: (this.info.api + "/users/@me/"),
+                        headers: this.headers,
+                        method: "PATCH"
+                    });
+                    form.addTextInput("Old password:", "password", { password: true });
+                    if (this.mfa_enabled) {
+                        form.addTextInput("Code:", "code");
+                    }
+                    let in1 = "";
+                    let in2 = "";
+                    form.addTextInput("New password:", "").watchForChange(text => {
+                        in1 = text;
+                    });
+                    const copy = form.addTextInput("New password again:", "");
+                    copy.watchForChange(text => {
+                        in2 = text;
+                    });
+                    form.setValue("new_password", () => {
+                        if (in1 === in2) {
+                            return in1;
                         }
                         else {
-                            this.mfa_enabled = false;
+                            throw [copy, "Passwords don't match"];
-                            alert("2FA turned off successfully");
                         }
                     });
                 });
-            }
+            };
-            else {
+            genSecurity();
-                security.addButtonInput("", "Enable 2FA", async () => {
-                    let secret = "";
-                    for (let i = 0; i < 18; i++) {
-                        secret += "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"[Math.floor(Math.random() * 32)];
-                    }
-                    let password = "";
-                    let code = "";
-                    const addmodel = new Dialog(["vdiv",
-                        ["title", "2FA set up"],
-                        ["text", "Copy this secret into your totp(time-based one time password) app"],
-                        ["text", `Your secret is: ${secret} and it's 6 digits, with a 30 second token period`],
-                        ["textbox", "Account password:", "", function () { password = this.value; }],
-                        ["textbox", "Code:", "", function () { code = this.value; }],
-                        ["button", "", "Submit", () => {
-                                fetch(this.info.api + "/users/@me/mfa/totp/enable/", {
-                                    method: "POST",
-                                    headers: this.headers,
-                                    body: JSON.stringify({
-                                        password,
-                                        code,
-                                        secret
-                                    })
-                                }).then(r => r.json()).then(json => {
-                                    if (json.message) {
-                                        alert(json.message);
-                                    }
-                                    else {
-                                        alert("2FA set up successfully");
-                                        addmodel.hide();
-                                        this.mfa_enabled = true;
-                                    }
-                                });
-                            }]]);
-                    console.log("here :3");
-                    addmodel.show();
-                });
-            }
-            let disc = "";
-            const updatedisc = security.addButtonInput("", "Change discriminator", () => {
-                const update = new Dialog(["vdiv",
-                    ["title", "Change discriminator"],
-                    ["textbox", "New discriminator:", "", (e) => {
-                            disc = e.target.value;
-                        }],
-                    ["button", "", "submit", () => {
-                            this.changeDiscriminator(disc).then(_ => {
-                                if (_.message) {
-                                    alert(_.errors.discriminator._errors[0].message);
-                                }
-                                else {
-                                    update.hide();
-                                }
-                            });
-                        }]]);
-                update.show();
-            });
         }
         {
             const connections = settings.addButton("Connections");
@@ -1086,13 +1129,6 @@ class Localuser {
         }
         settings.show();
     }
-    async changeDiscriminator(discriminator) {
-        return await (await fetch(this.info.api + "/users/@me/", {
-            method: "PATCH",
-            headers: this.headers,
-            body: JSON.stringify({ discriminator })
-        })).json();
-    }
     async manageApplication(appId = "") {
         const res = await fetch(this.info.api + "/applications/" + appId, {
             headers: this.headers

.dist/settings.js

@@ -50,6 +50,7 @@ class Buttons {
     generateHTMLArea(buttonInfo, htmlarea) {
         let html;
         if (buttonInfo instanceof Options) {
+            buttonInfo.subOptions = undefined;
             html = buttonInfo.generateHTML();
         }
         else {
@@ -73,11 +74,13 @@ class TextInput {
     onSubmit;
     value;
     input;
-    constructor(label, onSubmit, owner, { initText = "" } = {}) {
+    password;
+    constructor(label, onSubmit, owner, { initText = "", password = false } = {}) {
         this.label = label;
         this.value = initText;
         this.owner = owner;
         this.onSubmit = onSubmit;
+        this.password = password;
     }
     generateHTML() {
         const div = document.createElement("div");
@@ -86,7 +89,7 @@ class TextInput {
         div.append(span);
         const input = document.createElement("input");
         input.value = this.value;
-        input.type = "text";
+        input.type = this.password ? "password" : "text";
         input.oninput = this.onChange.bind(this);
         this.input = new WeakRef(input);
         div.append(input);
@@ -109,6 +112,36 @@ class TextInput {
         this.onSubmit(this.value);
     }
 }
+class SettingsText {
+    onSubmit;
+    value;
+    text;
+    constructor(text) {
+        this.text = text;
+    }
+    generateHTML() {
+        const span = document.createElement("span");
+        span.innerText = this.text;
+        return span;
+    }
+    watchForChange() { }
+    submit() { }
+}
+class SettingsTitle {
+    onSubmit;
+    value;
+    text;
+    constructor(text) {
+        this.text = text;
+    }
+    generateHTML() {
+        const span = document.createElement("h2");
+        span.innerText = this.text;
+        return span;
+    }
+    watchForChange() { }
+    submit() { }
+}
 class CheckboxInput {
     label;
     owner;
@@ -400,12 +433,23 @@ class Options {
     owner;
     ltr;
     value;
+    html = new WeakMap();
+    container = new WeakRef(document.createElement("div"));
     constructor(name, owner, { ltr = false } = {}) {
         this.name = name;
         this.options = [];
         this.owner = owner;
         this.ltr = ltr;
     }
+    removeAll() {
+        while (this.options.length) {
+            this.options.pop();
+        }
+        const container = this.container.deref();
+        if (container) {
+            container.innerHTML = "";
+        }
+    }
     watchForChange() { }
     ;
     addOptions(name, { ltr = false } = {}) {
@@ -414,9 +458,39 @@ class Options {
         this.generate(options);
         return options;
     }
+    subOptions;
+    addSubOptions(name, { ltr = false } = {}) {
+        const options = new Options(name, this, { ltr });
+        this.subOptions = options;
+        const container = this.container.deref();
+        if (container) {
+            this.generateContainter();
+        }
+        else {
+            throw Error("Tried to make a subOptions when the options weren't rendered");
+        }
+        return options;
+    }
+    addSubForm(name, onSubmit, { ltr = false, submitText = "Submit", fetchURL = "", headers = {}, method = "POST", traditionalSubmit = false } = {}) {
+        const options = new Form(name, this, onSubmit, { ltr, submitText, fetchURL, headers, method, traditionalSubmit });
+        this.subOptions = options;
+        const container = this.container.deref();
+        if (container) {
+            this.generateContainter();
+        }
+        else {
+            throw Error("Tried to make a subForm when the options weren't rendered");
+        }
+        return options;
+    }
+    returnFromSub() {
+        this.subOptions = undefined;
+        this.generateContainter();
+    }
     addSelect(label, onSubmit, selections, { defaultIndex = 0 } = {}) {
         const select = new SelectInput(label, onSubmit, selections, this, { defaultIndex });
         this.options.push(select);
+        this.generate(select);
         return select;
     }
     addFileInput(label, onSubmit, { clear = false } = {}) {
@@ -425,8 +499,8 @@ class Options {
         this.generate(FI);
         return FI;
     }
-    addTextInput(label, onSubmit, { initText = "" } = {}) {
+    addTextInput(label, onSubmit, { initText = "", password = false } = {}) {
-        const textInput = new TextInput(label, onSubmit, this, { initText });
+        const textInput = new TextInput(label, onSubmit, this, { initText, password });
         this.options.push(textInput);
         this.generate(textInput);
         return textInput;
@@ -461,8 +535,18 @@ class Options {
         this.generate(box);
         return box;
     }
-    html = new WeakMap();
+    addText(str) {
-    container = new WeakRef(document.createElement("div"));
+        const text = new SettingsText(str);
+        this.options.push(text);
+        this.generate(text);
+        return text;
+    }
+    addTitle(str) {
+        const text = new SettingsTitle(str);
+        this.options.push(text);
+        this.generate(text);
+        return text;
+    }
     generate(elm) {
         const container = this.container.deref();
         if (container) {
@@ -476,24 +560,61 @@ class Options {
             container.append(div);
         }
     }
+    title = new WeakRef(document.createElement("h2"));
     generateHTML() {
         const div = document.createElement("div");
         div.classList.add("titlediv");
-        if (this.name !== "") {
+        const title = document.createElement("h2");
-            const title = document.createElement("h2");
+        title.textContent = this.name;
-            title.textContent = this.name;
+        div.append(title);
-            div.append(title);
+        if (this.name !== "")
             title.classList.add("settingstitle");
-        }
+        this.title = new WeakRef(title);
         const container = document.createElement("div");
         this.container = new WeakRef(container);
         container.classList.add(this.ltr ? "flexltr" : "flexttb", "flexspace");
-        for (const thing of this.options) {
+        this.generateContainter();
-            this.generate(thing);
-        }
         div.append(container);
         return div;
     }
+    generateContainter() {
+        const container = this.container.deref();
+        if (container) {
+            const title = this.title.deref();
+            if (title)
+                title.innerHTML = "";
+            container.innerHTML = "";
+            if (this.subOptions) {
+                container.append(this.subOptions.generateHTML()); //more code needed, though this is enough for now
+                if (title) {
+                    const name = document.createElement("span");
+                    name.innerText = this.name;
+                    name.classList.add("clickable");
+                    name.onclick = () => {
+                        this.returnFromSub();
+                    };
+                    title.append(name, " > ", this.subOptions.name);
+                }
+            }
+            else {
+                for (const thing of this.options) {
+                    this.generate(thing);
+                }
+                if (title) {
+                    title.innerText = this.name;
+                }
+            }
+            if (title && title.innerText !== "") {
+                title.classList.add("settingstitle");
+            }
+            else if (title) {
+                title.classList.remove("settingstitle");
+            }
+        }
+        else {
+            console.warn("tried to generate container, but it did not exist");
+        }
+    }
     changed() {
         if (this.owner instanceof Options || this.owner instanceof Form) {
             this.owner.changed();
@@ -531,14 +652,17 @@ class Form {
     options;
     owner;
     ltr;
-    names;
+    names = new Map();
     required = new WeakSet();
     submitText;
     fetchURL;
-    headers;
+    headers = {};
     method;
     value;
-    constructor(name, owner, onSubmit, { ltr = false, submitText = "Submit", fetchURL = "", headers = {}, method = "POST" } = {}) {
+    traditionalSubmit;
+    values = {};
+    constructor(name, owner, onSubmit, { ltr = false, submitText = "Submit", fetchURL = "", headers = {}, method = "POST", traditionalSubmit = false } = {}) {
+        this.traditionalSubmit = traditionalSubmit;
         this.name = name;
         this.method = method;
         this.submitText = submitText;
@@ -549,13 +673,16 @@ class Form {
         this.ltr = ltr;
         this.onSubmit = onSubmit;
     }
+    setValue(key, value) {
+        this.values[key] = value;
+    }
     addSelect(label, formName, selections, { defaultIndex = 0, required = false } = {}) {
         const select = this.options.addSelect(label, _ => { }, selections, { defaultIndex });
         this.names.set(formName, select);
         if (required) {
             this.required.add(select);
         }
-        return;
+        return select;
     }
     addFileInput(label, formName, { required = false } = {}) {
         const FI = this.options.addFileInput(label, _ => { }, {});
@@ -563,15 +690,15 @@ class Form {
         if (required) {
             this.required.add(FI);
         }
-        return;
+        return FI;
     }
-    addTextInput(label, formName, { initText = "", required = false } = {}) {
+    addTextInput(label, formName, { initText = "", required = false, password = false } = {}) {
-        const textInput = this.options.addTextInput(label, _ => { }, { initText });
+        const textInput = this.options.addTextInput(label, _ => { }, { initText, password });
         this.names.set(formName, textInput);
         if (required) {
             this.required.add(textInput);
         }
-        return;
+        return textInput;
     }
     addColorInput(label, formName, { initColor = "", required = false } = {}) {
         const colorInput = this.options.addColorInput(label, _ => { }, { initColor });
@@ -579,7 +706,7 @@ class Form {
         if (required) {
             this.required.add(colorInput);
         }
-        return;
+        return colorInput;
     }
     addMDInput(label, formName, { initText = "", required = false } = {}) {
         const mdInput = this.options.addMDInput(label, _ => { }, { initText });
@@ -587,7 +714,7 @@ class Form {
         if (required) {
             this.required.add(mdInput);
         }
-        return;
+        return mdInput;
     }
     addCheckboxInput(label, formName, { initState = false, required = false } = {}) {
         const box = this.options.addCheckboxInput(label, _ => { }, { initState });
@@ -595,17 +722,26 @@ class Form {
         if (required) {
             this.required.add(box);
         }
-        return;
+        return box;
+    }
+    addText(str) {
+        this.options.addText(str);
+    }
+    addTitle(str) {
+        this.options.addTitle(str);
     }
     generateHTML() {
         const div = document.createElement("div");
         div.append(this.options.generateHTML());
-        const button = document.createElement("button");
+        div.classList.add("FormSettings");
-        button.onclick = _ => {
+        if (!this.traditionalSubmit) {
-            this.submit();
+            const button = document.createElement("button");
-        };
+            button.onclick = _ => {
-        button.textContent = this.submitText;
+                this.submit();
-        div.append(button);
+            };
+            button.textContent = this.submitText;
+            div.append(button);
+        }
         return div;
     }
     onSubmit;
@@ -614,21 +750,48 @@ class Form {
     }
     ;
     changed() {
+        if (this.traditionalSubmit) {
+            this.owner.changed();
+        }
     }
     submit() {
         const build = {};
+        for (const key of Object.keys(this.values)) {
+            const thing = this.values[key];
+            if (thing instanceof Function) {
+                try {
+                    build[key] = thing();
+                }
+                catch (e) {
+                    const elm = this.options.html.get(e[0]);
+                    if (elm) {
+                        const html = elm.deref();
+                        if (html) {
+                            this.makeError(html, e[1]);
+                        }
+                    }
+                    return;
+                }
+            }
+            else {
+                build[key] = thing;
+            }
+        }
         for (const thing of this.names.keys()) {
+            if (thing === "")
+                continue;
             const input = this.names.get(thing);
             build[thing] = input.value;
         }
-        if (this.fetchURL === "") {
+        if (this.fetchURL !== "") {
             fetch(this.fetchURL, {
                 method: this.method,
-                body: JSON.stringify(build)
+                body: JSON.stringify(build),
+                headers: this.headers
             }).then(_ => _.json()).then(json => {
-                if (json.errors) {
+                if (json.errors && this.errors(json.errors))
-                    this.errors(json.errors);
+                    return;
-                }
+                this.onSubmit(json);
             });
         }
         else {
@@ -637,16 +800,37 @@ class Form {
         console.warn("needs to be implemented");
     }
     errors(errors) {
-        for (const error of errors) {
+        if (!(errors instanceof Object)) {
+            return;
+        }
+        ;
+        for (const error of Object.keys(errors)) {
             const elm = this.names.get(error);
             if (elm) {
                 const ref = this.options.html.get(elm);
                 if (ref && ref.deref()) {
                     const html = ref.deref();
-                    this.makeError(html, error._errors[0].message);
+                    this.makeError(html, errors[error]._errors[0].message);
+                    return true;
                 }
             }
         }
+        return false;
+    }
+    error(formElm, errorMessage) {
+        const elm = this.names.get(formElm);
+        if (elm) {
+            const htmlref = this.options.html.get(elm);
+            if (htmlref) {
+                const html = htmlref.deref();
+                if (html) {
+                    this.makeError(html, errorMessage);
+                }
+            }
+        }
+        else {
+            console.warn(formElm + " is not a valid form property");
+        }
     }
     makeError(e, message) {
         let element = e.getElementsByClassName("suberror")[0];

webpage/localuser.ts

@@ -943,82 +943,121 @@ class Localuser{
         }
         {
             const security=settings.addButton("Account Settings");
-            if(this.mfa_enabled){
+            const genSecurity=()=>{
-                security.addTextInput("Disable 2FA, totp code:",_=>{
+                security.removeAll();
-                    fetch(this.info.api+"/users/@me/mfa/totp/disable",{
+                if(this.mfa_enabled){
-                        method:"POST",
+                    security.addButtonInput("","Disable 2FA",()=>{
-                        headers:this.headers,
+                        const form=security.addSubForm("2FA Disable",(_:any)=>{
-                        body:JSON.stringify({
-                            code:_
-                        })
-                    }).then(r=>r.json()).then(json=>{
-                        if(json.message){
-                            alert(json.message);
-                        }else{
-                            this.mfa_enabled=false;
-                            alert("2FA turned off successfully");
-                        }
-                    });
-                })
-            }else{
-                security.addButtonInput("","Enable 2FA",async ()=>{
-                    let secret=""
-                    for(let i=0;i<18;i++){
-                        secret+="ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"[Math.floor(Math.random()*32)];
-                    }
-                    let password="";
-                    let code="";
-                    const addmodel=new Dialog(
-                        ["vdiv",
-                            ["title","2FA set up"],
-                            ["text","Copy this secret into your totp(time-based one time password) app"],
-                            ["text",`Your secret is: ${secret} and it's 6 digits, with a 30 second token period`],
-                            ["textbox","Account password:","",function(this:HTMLInputElement){password=this.value}],
-                            ["textbox","Code:","",function(this:HTMLInputElement){code=this.value}],
-                            ["button","","Submit",()=>{
-                                fetch(this.info.api+"/users/@me/mfa/totp/enable/",{
-                                    method:"POST",
-                                    headers:this.headers,
-                                    body:JSON.stringify({
-                                        password,
-                                        code,
-                                        secret
-                                    })
-                                }).then(r=>r.json()).then(json=>{
-                                    if(json.message){
-                                        alert(json.message);
-                                    }else{
-                                        alert("2FA set up successfully");
-                                        addmodel.hide();
-                                        this.mfa_enabled=true;
-                                    }
-                                })
-                            }]
-
-                        ]);
-                    console.log("here :3")
-                    addmodel.show();
-                })
-            }
-            let disc="";
-            const updatedisc=security.addButtonInput("","Change discriminator",()=>{
-                const update=new Dialog(["vdiv",
-                    ["title","Change discriminator"],
-                    ["textbox","New discriminator:","",(e:InputEvent)=>{
-                        disc=(e.target as HTMLInputElement).value;
-                    }],
-                    ["button","","submit",()=>{
-                        this.changeDiscriminator(disc).then(_=>{
                             if(_.message){
-                                alert(_.errors.discriminator._errors[0].message);
+                                switch(_.code){
+                                    case 60008:
+                                        form.error("code","Invalid code");
+                                        break;
+                                }
                             }else{
-                                update.hide();
+                                this.mfa_enabled=false;
+                                security.returnFromSub();
+                                genSecurity();
                             }
-                        })
+                        },{
-                    }]
+                            fetchURL:(this.info.api+"/users/@me/mfa/totp/disable"),
-                ])
+                            headers:this.headers
-                update.show();
+                        });
-            })
+                        form.addTextInput("Code:","code",{required:true});
+                    })
+                }else{
+                    security.addButtonInput("","Enable 2FA",async ()=>{
+                        let secret=""
+                        for(let i=0;i<18;i++){
+                            secret+="ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"[Math.floor(Math.random()*32)];
+                        }
+                        const form=security.addSubForm("2FA Setup",(_:any)=>{
+                            if(_.message){
+                                switch(_.code){
+                                    case 60008:
+                                        form.error("code","Invalid code");
+                                        break;
+                                    case 400:
+                                        form.error("password","Incorrect password");
+                                        break;
+                                }
+                            }else{
+                                genSecurity();
+                                this.mfa_enabled=true;
+                                security.returnFromSub();
+                            }
+                        },{
+                            fetchURL:(this.info.api+"/users/@me/mfa/totp/enable/"),
+                            headers:this.headers
+                        });
+                        form.addTitle("Copy this secret into your totp(time-based one time password) app");
+                        form.addText(`Your secret is: ${secret} and it's 6 digits, with a 30 second token period`);
+                        form.addTextInput("Account Password:","password",{required:true,password:true});
+                        form.addTextInput("Code:","code",{required:true});
+                        form.setValue("secret",secret);
+                    })
+                }
+                security.addButtonInput("","Change discriminator",()=>{
+                    const form=security.addSubForm("Change Discriminator",(_)=>{security.returnFromSub()},{
+                        fetchURL:(this.info.api+"/users/@me/"),
+                        headers:this.headers,
+                        method:"PATCH"
+                    });
+                    form.addTextInput("New discriminator:","discriminator")
+                });
+                security.addButtonInput("","Change email",()=>{
+                    const form=security.addSubForm("Change Email",(_)=>{security.returnFromSub()},{
+                        fetchURL:(this.info.api+"/users/@me/"),
+                        headers:this.headers,
+                        method:"PATCH"
+                    });
+                    form.addTextInput("Password:","password",{password:true});
+                    if(this.mfa_enabled){
+                        form.addTextInput("Code:","code");
+                    }
+                    form.addTextInput("New email:","email");
+                });
+                security.addButtonInput("","Change username",()=>{
+                    const form=security.addSubForm("Change Username",(_)=>{security.returnFromSub()},{
+                        fetchURL:(this.info.api+"/users/@me/"),
+                        headers:this.headers,
+                        method:"PATCH"
+                    });
+                    form.addTextInput("Password:","password",{password:true});
+                    if(this.mfa_enabled){
+                        form.addTextInput("Code:","code");
+                    }
+                    form.addTextInput("New username:","username");
+                });
+                security.addButtonInput("","Change password",()=>{
+                    const form=security.addSubForm("Change Password",(_)=>{security.returnFromSub()},{
+                        fetchURL:(this.info.api+"/users/@me/"),
+                        headers:this.headers,
+                        method:"PATCH"
+                    });
+                    form.addTextInput("Old password:","password",{password:true});
+                    if(this.mfa_enabled){
+                        form.addTextInput("Code:","code");
+                    }
+                    let in1="";
+                    let in2="";
+                    form.addTextInput("New password:","").watchForChange(text=>{
+                        in1=text;
+                    });
+                    const copy=form.addTextInput("New password again:","")
+                    copy.watchForChange(text=>{
+                        in2=text;
+                    });
+                    form.setValue("new_password",()=>{
+                        if(in1===in2){
+                            return in1;
+                        }else{
+                            throw [copy,"Passwords don't match"]
+                        }
+                    })
+                });
+            }
+            genSecurity();
         }
         {
             const connections=settings.addButton("Connections");
@@ -1106,13 +1145,6 @@ class Localuser{
         }
         settings.show();
     }
-    async changeDiscriminator(discriminator:string){
-        return await (await fetch(this.info.api+"/users/@me/",{
-            method:"PATCH",
-            headers:this.headers,
-            body:JSON.stringify({discriminator})
-        })).json();
-    }
     async manageApplication(appId="") {
         const res=await fetch(this.info.api+"/applications/" + appId, {
             headers: this.headers

webpage/settings.ts

@@ -55,6 +55,7 @@ class Buttons implements OptionsElement<unknown>{
     private generateHTMLArea(buttonInfo:Options|string,htmlarea:HTMLElement){
         let html:HTMLElement;
         if(buttonInfo instanceof Options){
+            buttonInfo.subOptions=undefined;
             html=buttonInfo.generateHTML();
         }else{
             html=this.handleString(buttonInfo);
@@ -80,11 +81,13 @@ class TextInput implements OptionsElement<string>{
     readonly onSubmit:(str:string)=>void;
     value:string;
     input:WeakRef<HTMLInputElement>;
-    constructor(label:string,onSubmit:(str:string)=>void,owner:Options,{initText=""}={}){
+    password:boolean;
+    constructor(label:string,onSubmit:(str:string)=>void,owner:Options,{initText="",password=false}={}){
         this.label=label;
         this.value=initText;
         this.owner=owner;
         this.onSubmit=onSubmit;
+        this.password=password;
     }
     generateHTML():HTMLDivElement{
         const div=document.createElement("div");
@@ -93,7 +96,7 @@ class TextInput implements OptionsElement<string>{
         div.append(span);
         const input=document.createElement("input");
         input.value=this.value;
-        input.type="text";
+        input.type=this.password?"password":"text";
         input.oninput=this.onChange.bind(this);
         this.input=new WeakRef(input);
         div.append(input);
@@ -117,6 +120,36 @@ class TextInput implements OptionsElement<string>{
     }
 }
 
+class SettingsText implements OptionsElement<void>{
+    readonly onSubmit:(str:string)=>void;
+    value:void;
+    readonly text:string
+    constructor(text:string){
+        this.text=text;
+    }
+    generateHTML():HTMLSpanElement{
+        const span=document.createElement("span");
+        span.innerText=this.text;
+        return span;
+    }
+    watchForChange(){}
+    submit(){}
+}
+class SettingsTitle implements OptionsElement<void>{
+    readonly onSubmit:(str:string)=>void;
+    value:void;
+    readonly text:string
+    constructor(text:string){
+        this.text=text;
+    }
+    generateHTML():HTMLSpanElement{
+        const span=document.createElement("h2");
+        span.innerText=this.text;
+        return span;
+    }
+    watchForChange(){}
+    submit(){}
+}
 class CheckboxInput implements OptionsElement<boolean>{
     readonly label:string;
     readonly owner:Options;
@@ -408,12 +441,22 @@ class Options implements OptionsElement<void>{
     readonly owner:Buttons|Options|Form;
     readonly ltr:boolean;
     value:void;
+    readonly html:WeakMap<OptionsElement<any>,WeakRef<HTMLDivElement>>=new WeakMap();
+    container:WeakRef<HTMLDivElement>=new WeakRef(document.createElement("div"));
     constructor(name:string,owner:Buttons|Options|Form,{ltr=false}={}){
         this.name=name;
         this.options=[];
         this.owner=owner;
         this.ltr=ltr;
-
+    }
+    removeAll(){
+        while(this.options.length){
+            this.options.pop();
+        }
+        const container=this.container.deref();
+        if(container){
+            container.innerHTML="";
+        }
     }
     watchForChange(){};
     addOptions(name:string,{ltr=false}={}){
@@ -422,9 +465,37 @@ class Options implements OptionsElement<void>{
         this.generate(options);
         return options;
     }
+    subOptions:Options|Form|undefined;
+    addSubOptions(name:string,{ltr=false}={}){
+        const options=new Options(name,this,{ltr});
+        this.subOptions=options;
+        const container=this.container.deref();
+        if(container){
+            this.generateContainter();
+        }else{
+            throw Error("Tried to make a subOptions when the options weren't rendered");
+        }
+        return options;
+    }
+    addSubForm(name:string,onSubmit:((arg1:object)=>void),{ltr=false,submitText="Submit",fetchURL="",headers={},method="POST",traditionalSubmit=false}={}){
+        const options=new Form(name,this,onSubmit,{ltr,submitText,fetchURL,headers,method,traditionalSubmit});
+        this.subOptions=options;
+        const container=this.container.deref();
+        if(container){
+            this.generateContainter();
+        }else{
+            throw Error("Tried to make a subForm when the options weren't rendered");
+        }
+        return options;
+    }
+    returnFromSub(){
+        this.subOptions=undefined;
+        this.generateContainter();
+    }
     addSelect(label:string,onSubmit:(str:number)=>void,selections:string[],{defaultIndex=0}={}){
         const select=new SelectInput(label,onSubmit,selections,this,{defaultIndex});
         this.options.push(select);
+        this.generate(select);
         return select;
     }
     addFileInput(label:string,onSubmit:(files:FileList)=>void,{clear=false}={}){
@@ -433,8 +504,8 @@ class Options implements OptionsElement<void>{
         this.generate(FI);
         return FI;
     }
-    addTextInput(label:string,onSubmit:(str:string)=>void,{initText=""}={}){
+    addTextInput(label:string,onSubmit:(str:string)=>void,{initText="",password=false}={}){
-        const textInput=new TextInput(label,onSubmit,this,{initText});
+        const textInput=new TextInput(label,onSubmit,this,{initText,password});
         this.options.push(textInput);
         this.generate(textInput);
         return textInput;
@@ -469,8 +540,18 @@ class Options implements OptionsElement<void>{
         this.generate(box);
         return box;
     }
-    readonly html:WeakMap<OptionsElement<any>,WeakRef<HTMLElement>>=new WeakMap();
+    addText(str:string){
-    container:WeakRef<HTMLDivElement>=new WeakRef(document.createElement("div"));
+        const text=new SettingsText(str);
+        this.options.push(text);
+        this.generate(text);
+        return text;
+    }
+    addTitle(str:string){
+        const text=new SettingsTitle(str);
+        this.options.push(text);
+        this.generate(text);
+        return text;
+    }
     generate(elm:OptionsElement<any>){
         const container=this.container.deref();
         if(container){
@@ -484,24 +565,57 @@ class Options implements OptionsElement<void>{
             container.append(div);
         }
     }
+    title:WeakRef<HTMLElement>=new WeakRef(document.createElement("h2"));
     generateHTML():HTMLElement{
         const div=document.createElement("div");
         div.classList.add("titlediv");
-        if(this.name!==""){
+        const title=document.createElement("h2");
-            const title=document.createElement("h2");
+        title.textContent=this.name;
-            title.textContent=this.name;
+        div.append(title);
-            div.append(title);
+        if(this.name!=="") title.classList.add("settingstitle");
-            title.classList.add("settingstitle");
+        this.title=new WeakRef(title);
-        }
         const container=document.createElement("div");
         this.container=new WeakRef(container);
         container.classList.add(this.ltr?"flexltr":"flexttb","flexspace");
-        for(const thing of this.options){
+        this.generateContainter();
-            this.generate(thing);
-        }
         div.append(container);
         return div;
     }
+    generateContainter(){
+        const container=this.container.deref();
+        if(container){
+            const title=this.title.deref();
+            if(title) title.innerHTML="";
+            container.innerHTML="";
+            if(this.subOptions){
+                container.append(this.subOptions.generateHTML());//more code needed, though this is enough for now
+                if(title){
+                    const name=document.createElement("span");
+                    name.innerText=this.name;
+                    name.classList.add("clickable");
+                    name.onclick=()=>{
+                        this.returnFromSub();
+                    }
+                    title.append(name," > ",this.subOptions.name)
+                }
+            }else{
+                for(const thing of this.options){
+                    this.generate(thing);
+                }
+                if(title){
+                    title.innerText=this.name;
+                }
+            }
+            if(title&&title.innerText!==""){
+                title.classList.add("settingstitle");
+            }else if(title){
+                title.classList.remove("settingstitle");
+            }
+
+        }else{
+            console.warn("tried to generate container, but it did not exist");
+        }
+    }
     changed(){
         if(this.owner instanceof Options||this.owner instanceof Form){
             this.owner.changed();
@@ -538,16 +652,19 @@ class Options implements OptionsElement<void>{
 class Form implements OptionsElement<object>{
     name:string;
     readonly options:Options;
-    readonly owner:Buttons|Options;
+    readonly owner:Options;
     readonly ltr:boolean;
-    readonly names:Map<string,OptionsElement<any>>
+    readonly names:Map<string,OptionsElement<any>>=new Map();
     readonly required:WeakSet<OptionsElement<any>>=new WeakSet();
     readonly submitText:string;
     readonly fetchURL:string;
-    readonly headers:object;
+    readonly headers={};
     readonly method:string;
     value:object;
-    constructor(name:string,owner:Buttons|Options,onSubmit:((arg1:object)=>void),{ltr=false,submitText="Submit",fetchURL="",headers={},method="POST"}={}){
+    traditionalSubmit:boolean;
+    values={};
+    constructor(name:string,owner:Options,onSubmit:((arg1:object)=>void),{ltr=false,submitText="Submit",fetchURL="",headers={},method="POST",traditionalSubmit=false}={}){
+        this.traditionalSubmit=traditionalSubmit;
         this.name=name;
         this.method=method;
         this.submitText=submitText;
@@ -558,14 +675,16 @@ class Form implements OptionsElement<object>{
         this.ltr=ltr;
         this.onSubmit=onSubmit;
     }
-
+    setValue(key:string,value:any){//the value can't really be anything, but I don't care enough to fix this
+        this.values[key]=value;
+    }
     addSelect(label:string,formName:string,selections:string[],{defaultIndex=0,required=false}={}){
         const select=this.options.addSelect(label,_=>{},selections,{defaultIndex});
         this.names.set(formName,select);
         if(required){
             this.required.add(select);
         }
-        return;
+        return select;
     }
     addFileInput(label:string,formName:string,{required=false}={}){
         const FI=this.options.addFileInput(label,_=>{},{});
@@ -573,16 +692,16 @@ class Form implements OptionsElement<object>{
         if(required){
             this.required.add(FI);
         }
-        return;
+        return FI;
     }
 
-    addTextInput(label:string,formName:string,{initText="",required=false}={}){
+    addTextInput(label:string,formName:string,{initText="",required=false,password=false}={}){
-        const textInput=this.options.addTextInput(label,_=>{},{initText});
+        const textInput=this.options.addTextInput(label,_=>{},{initText,password});
         this.names.set(formName,textInput);
         if(required){
             this.required.add(textInput);
         }
-        return;
+        return textInput;
     }
     addColorInput(label:string,formName:string,{initColor="",required=false}={}){
         const colorInput=this.options.addColorInput(label,_=>{},{initColor});
@@ -590,7 +709,7 @@ class Form implements OptionsElement<object>{
         if(required){
             this.required.add(colorInput);
         }
-        return;
+        return colorInput;
     }
 
     addMDInput(label:string,formName:string,{initText="",required=false}={}){
@@ -599,7 +718,7 @@ class Form implements OptionsElement<object>{
         if(required){
             this.required.add(mdInput);
         }
-        return;
+        return mdInput;
     }
 
     addCheckboxInput(label:string,formName:string,{initState=false,required=false}={}){
@@ -608,18 +727,26 @@ class Form implements OptionsElement<object>{
         if(required){
             this.required.add(box);
         }
-        return;
+        return box;
+    }
+    addText(str:string){
+        this.options.addText(str);
+    }
+    addTitle(str:string){
+        this.options.addTitle(str);
     }
-
     generateHTML():HTMLElement{
         const div=document.createElement("div");
         div.append(this.options.generateHTML());
-        const button=document.createElement("button");
+        div.classList.add("FormSettings");
-        button.onclick=_=>{
+        if(!this.traditionalSubmit){
-            this.submit();
+            const button=document.createElement("button");
+            button.onclick=_=>{
+                this.submit();
+            }
+            button.textContent=this.submitText;
+            div.append(button)
         }
-        button.textContent=this.submitText;
-        div.append(button)
         return div;
     }
     onSubmit:((arg1:object)=>void);
@@ -627,38 +754,78 @@ class Form implements OptionsElement<object>{
         this.onSubmit=func;
     };
     changed(){
+        if(this.traditionalSubmit){
+            this.owner.changed();
+        }
     }
     submit(){
-        const build={}
+        const build={};
+        for(const key of Object.keys(this.values)){
+            const thing=this.values[key];
+            if(thing instanceof Function){
+                try{
+                    build[key]=thing();
+                }catch(e:any){
+                    const elm=this.options.html.get(e[0]);
+                    if(elm){
+                        const html=elm.deref();
+                        if(html){
+                            this.makeError(html,e[1]);
+                        }
+                    }
+                    return;
+                }
+            }else{
+                build[key]=thing;
+            }
+        }
         for(const thing of this.names.keys()){
+            if(thing==="") continue;
             const input=this.names.get(thing) as OptionsElement<any>;
             build[thing]=input.value;
         }
-        if(this.fetchURL===""){
+        if(this.fetchURL!==""){
             fetch(this.fetchURL,{
                 method:this.method,
-                body:JSON.stringify(build)
+                body:JSON.stringify(build),
+                headers:this.headers
             }).then(_=>_.json()).then(json=>{
-                if(json.errors){
+                if(json.errors&&this.errors(json.errors)) return;
-                    this.errors(json.errors)
+                this.onSubmit(json);
-                }
             })
         }else{
             this.onSubmit(build);
         }
         console.warn("needs to be implemented")
     }
-    errors(errors){
+    errors(errors:{code:number,message:string,errors:{[key:string]:{_errors:{message:string,code:string}}}}){
-        for(const error of errors){
+        if(!(errors instanceof Object)){return};
+        for(const error of Object.keys(errors)){
             const elm=this.names.get(error);
             if(elm){
                 const ref=this.options.html.get(elm);
                 if(ref&&ref.deref()){
                     const html=ref.deref() as HTMLDivElement;
-                    this.makeError(html,error._errors[0].message)
+                    this.makeError(html,errors[error]._errors[0].message)
+                    return true;
                 }
             }
         }
+        return false;
+    }
+    error(formElm:string,errorMessage:string){
+        const elm=this.names.get(formElm);
+        if(elm){
+            const htmlref=this.options.html.get(elm);
+            if(htmlref){
+                const html=htmlref.deref();
+                if(html){
+                    this.makeError(html,errorMessage);
+                }
+            }
+        }else{
+            console.warn(formElm+" is not a valid form property")
+        }
     }
     makeError(e:HTMLDivElement,message:string){
         let element=e.getElementsByClassName("suberror")[0] as HTMLElement;

webpage/style.css

@@ -1283,6 +1283,7 @@ span {
 .flexspace{
 	gap:.1in;
 	padding: .05in;
+	box-sizing: border-box;
 }
 .titlediv{
 	height:100%;
@@ -1297,6 +1298,7 @@ span {
 	background: var(--primary-bg);
 	padding: .06in .2in;
 	background: var(--server-bg);
+	box-sizing: border-box;
 }
 .exitsettings{
 	position:absolute;
@@ -1522,6 +1524,7 @@ span {
 	justify-content: space-evenly;
 	padding: .075in;
 	box-sizing: border-box;
+	pointer-events: none;
 }
 @keyframes goout {
 	0%,100%{
@@ -1655,10 +1658,11 @@ form div{
 	background:var(--primary-bg);
 	position: relative;
 	height: 100%;
-	/* box-sizing: border-box; */
+	box-sizing: border-box;
 	display: flex;
 	align-content: stretch;
 	align-items: stretch;
+	width: 100%;
 }
 .dontshrink{
 	flex-shrink:0;
@@ -1933,3 +1937,15 @@ form div{
 	border-radius:.03in;
 	box-shadow: .01in .01in .1in #00000059;
 }
+.FormSettings{
+	display:flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: .1in;
+}
+.clickable{
+	cursor:pointer;
+}
+.clickable:hover{
+	text-decoration:underline;
+}