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

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;
}