Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the Form class and more user settings

Browse source
This commit is contained in:
MathMan05 2024-08-25 23:19:07 -05:00
parent d641ee6961
commit db7b55b79c
5 changed files with 675 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

190
.dist/localuser.js
View file

@ -932,82 +932,125 @@ class Localuser {
}
{
const security = settings.addButton("Account Settings");
if (this.mfa_enabled) {
security.addTextInput("Disable 2FA, totp code:", _ => {
fetch(this.info.api + "/users/@me/mfa/totp/disable", {
method: "POST",
const genSecurity = () => {
security.removeAll();
if (this.mfa_enabled) {
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({
code: _
})
}).then(r => r.json()).then(json => {
if (json.message) {
alert(json.message);
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 {
this.mfa_enabled = false;
alert("2FA turned off successfully");
throw [copy, "Passwords don't match"];
}
});
});
}
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 () { 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();
});
};
genSecurity();
}
{
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

260
.dist/settings.js
View file

@ -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 = "" } = {}) {
const textInput = new TextInput(label, onSubmit, this, { initText });
addTextInput(label, onSubmit, { initText = "", password = false } = {}) {
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();
container = new WeakRef(document.createElement("div"));
addText(str) {
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");
title.textContent = this.name;
div.append(title);
const title = document.createElement("h2");
title.textContent = this.name;
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.generate(thing);
}
this.generateContainter();
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 } = {}) {
const textInput = this.options.addTextInput(label, _ => { }, { initText });
addTextInput(label, formName, { initText = "", required = false, password = false } = {}) {
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");
button.onclick = _ => {
this.submit();
};
button.textContent = this.submitText;
div.append(button);
div.classList.add("FormSettings");
if (!this.traditionalSubmit) {
const button = document.createElement("button");
button.onclick = _ => {
this.submit();
};
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) {
this.errors(json.errors);
}
if (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];

192
webpage/localuser.ts
View file

@ -943,82 +943,121 @@ class Localuser{
}
{
const security=settings.addButton("Account Settings");
if(this.mfa_enabled){
security.addTextInput("Disable 2FA, totp code:",_=>{
fetch(this.info.api+"/users/@me/mfa/totp/disable",{
method:"POST",
headers:this.headers,
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(_=>{
const genSecurity=()=>{
security.removeAll();
if(this.mfa_enabled){
security.addButtonInput("","Disable 2FA",()=>{
const form=security.addSubForm("2FA Disable",(_:any)=>{
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();
}
})
}]
])
update.show();
})
},{
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",(_: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

255
webpage/settings.ts
View file

@ -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=""}={}){
const textInput=new TextInput(label,onSubmit,this,{initText});
addTextInput(label:string,onSubmit:(str:string)=>void,{initText="",password=false}={}){
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();
container:WeakRef<HTMLDivElement>=new WeakRef(document.createElement("div"));
addText(str:string){
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");
title.textContent=this.name;
div.append(title);
title.classList.add("settingstitle");
}
const title=document.createElement("h2");
title.textContent=this.name;
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.generate(thing);
}
this.generateContainter();
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}={}){
const textInput=this.options.addTextInput(label,_=>{},{initText});
addTextInput(label:string,formName:string,{initText="",required=false,password=false}={}){
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");
button.onclick=_=>{
this.submit();
div.classList.add("FormSettings");
if(!this.traditionalSubmit){
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){
this.errors(json.errors)
}
if(json.errors&&this.errors(json.errors)) return;
this.onSubmit(json);
})
}else{
this.onSubmit(build);
}
console.warn("needs to be implemented")
}
errors(errors){
for(const error of errors){
errors(errors:{code:number,message:string,errors:{[key:string]:{_errors:{message:string,code:string}}}}){
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;

18
webpage/style.css
View file

@ -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;
@ -1932,4 +1936,16 @@ form div{
.optionElement{
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;
}