add account switcher to loading screen

This commit is contained in:
MathMan05 2024-08-11 15:41:51 -05:00
parent 6ac1a4e904
commit ef2d228b70
6 changed files with 178 additions and 133 deletions

View file

@ -14,72 +14,88 @@ const users = getBulkUsers();
if (!users.currentuser) { if (!users.currentuser) {
window.location.href = '/login.html'; window.location.href = '/login.html';
} }
let thisuser = new Localuser(users.users[users.currentuser]); function showAccountSwitcher() {
thisuser.initwebsocket().then(_ => { const table = document.createElement("div");
thisuser.loaduser(); for (const thing of Object.values(users.users)) {
thisuser.init(); const specialuser = thing;
document.getElementById("loading").classList.add("doneloading"); console.log(specialuser.pfpsrc);
document.getElementById("loading").classList.remove("loading"); const userinfo = document.createElement("div");
console.log("done loading"); userinfo.classList.add("flexltr", "switchtable");
}); const pfp = document.createElement("img");
userinfo.append(pfp);
const user = document.createElement("div");
userinfo.append(user);
user.append(specialuser.username);
user.append(document.createElement("br"));
const span = document.createElement("span");
span.textContent = specialuser.serverurls.wellknown.replace("https://", "").replace("http://", "");
user.append(span);
user.classList.add("userinfo");
span.classList.add("serverURL");
pfp.src = specialuser.pfpsrc;
pfp.classList.add("pfp");
table.append(userinfo);
userinfo.addEventListener("click", _ => {
thisuser.unload();
document.getElementById("loading").classList.remove("doneloading");
document.getElementById("loading").classList.add("loading");
thisuser = new Localuser(specialuser);
users["currentuser"] = specialuser.uid;
localStorage.setItem("userinfos", JSON.stringify(users));
thisuser.initwebsocket().then(_ => {
thisuser.loaduser();
thisuser.init();
document.getElementById("loading").classList.add("doneloading");
document.getElementById("loading").classList.remove("loading");
console.log("done loading");
});
userinfo.remove();
});
}
{
const td = document.createElement("div");
td.classList.add("switchtable");
td.append("Switch accounts ⇌");
td.addEventListener("click", _ => {
window.location.href = "/login.html";
});
table.append(td);
}
table.classList.add("accountSwitcher");
if (Contextmenu.currentmenu != "") {
Contextmenu.currentmenu.remove();
}
Contextmenu.currentmenu = table;
console.log(table);
document.body.append(table);
}
{ {
const userinfo = document.getElementById("userinfo"); const userinfo = document.getElementById("userinfo");
userinfo.addEventListener("click", function (event) { userinfo.addEventListener("click", _ => {
const table = document.createElement("div"); _.stopImmediatePropagation();
for (const thing of Object.values(users.users)) { showAccountSwitcher();
const specialuser = thing;
console.log(specialuser.pfpsrc);
const userinfo = document.createElement("div");
userinfo.classList.add("flexltr", "switchtable");
const pfp = document.createElement("img");
userinfo.append(pfp);
const user = document.createElement("div");
userinfo.append(user);
user.append(specialuser.username);
user.append(document.createElement("br"));
const span = document.createElement("span");
span.textContent = specialuser.serverurls.wellknown.replace("https://", "").replace("http://", "");
user.append(span);
user.classList.add("userinfo");
span.classList.add("serverURL");
pfp.src = specialuser.pfpsrc;
pfp.classList.add("pfp");
table.append(userinfo);
userinfo.addEventListener("click", _ => {
thisuser.unload();
document.getElementById("loading").classList.remove("doneloading");
document.getElementById("loading").classList.add("loading");
thisuser = new Localuser(specialuser);
users["currentuser"] = specialuser.uid;
localStorage.setItem("userinfos", JSON.stringify(users));
thisuser.initwebsocket().then(_ => {
thisuser.loaduser();
thisuser.init();
document.getElementById("loading").classList.add("doneloading");
document.getElementById("loading").classList.remove("loading");
console.log("done loading");
});
userinfo.remove();
});
}
{
const td = document.createElement("div");
td.classList.add("switchtable");
td.append("Switch accounts ⇌");
td.addEventListener("click", _ => {
window.location.href = "/login.html";
});
table.append(td);
}
table.classList.add("accountSwitcher");
if (Contextmenu.currentmenu != "") {
Contextmenu.currentmenu.remove();
}
Contextmenu.currentmenu = table;
console.log(table);
document.body.append(table);
event.stopImmediatePropagation();
}); });
const switchaccounts = document.getElementById("switchaccounts");
switchaccounts.addEventListener("click", _ => {
_.stopImmediatePropagation();
showAccountSwitcher();
});
console.log("this ran");
}
let thisuser;
try {
thisuser = new Localuser(users.users[users.currentuser]);
thisuser.initwebsocket().then(_ => {
thisuser.loaduser();
thisuser.init();
document.getElementById("loading").classList.add("doneloading");
document.getElementById("loading").classList.remove("loading");
console.log("done loading");
});
}
catch {
document.getElementById("load-desc").textContent = "Account unable to start";
thisuser = new Localuser(-1);
} }
{ {
const menu = new Contextmenu("create rightclick"); const menu = new Contextmenu("create rightclick");

View file

@ -36,6 +36,9 @@ class Localuser {
errorBackoff = 0; errorBackoff = 0;
mfa_enabled; mfa_enabled;
constructor(userinfo) { constructor(userinfo) {
if (userinfo === -1) {
return;
}
this.token = userinfo.token; this.token = userinfo.token;
this.userinfo = userinfo; this.userinfo = userinfo;
this.serverurls = this.userinfo.serverurls; this.serverurls = this.userinfo.serverurls;
@ -104,7 +107,9 @@ class Localuser {
this.outoffocus(); this.outoffocus();
this.guilds = []; this.guilds = [];
this.guildids = new Map(); this.guildids = new Map();
this.ws.close(4001); if (this.ws) {
this.ws.close(4001);
}
SnowFlake.clear(); SnowFlake.clear();
User.clear(); User.clear();
} }

View file

@ -22,6 +22,7 @@
<img src="/logo.svg" width="1in" height="1in"> <img src="/logo.svg" width="1in" height="1in">
<h1>Jank Client is loading</h1> <h1>Jank Client is loading</h1>
<h2 id="load-desc">This shouldn't take long</h2> <h2 id="load-desc">This shouldn't take long</h2>
<h1 id="switchaccounts">Switch Accounts</h1>
</div> </div>
</div> </div>
<div class="flexltr" id="page"> <div class="flexltr" id="page">

View file

@ -19,77 +19,94 @@ if(!users.currentuser){
window.location.href = '/login.html'; window.location.href = '/login.html';
} }
let thisuser=new Localuser(users.users[users.currentuser]);
thisuser.initwebsocket().then(_=>{ function showAccountSwitcher(){
thisuser.loaduser(); const table=document.createElement("div");
thisuser.init(); for(const thing of Object.values(users.users)){
document.getElementById("loading").classList.add("doneloading"); const specialuser=thing as Specialuser;
document.getElementById("loading").classList.remove("loading"); console.log(specialuser.pfpsrc)
console.log("done loading")
}); const userinfo=document.createElement("div");
userinfo.classList.add("flexltr","switchtable");
const pfp=document.createElement("img");
userinfo.append(pfp);
const user=document.createElement("div");
userinfo.append(user);
user.append(specialuser.username);
user.append(document.createElement("br"));
const span=document.createElement("span");
span.textContent=specialuser.serverurls.wellknown.replace("https://","").replace("http://","");
user.append(span);
user.classList.add("userinfo")
span.classList.add("serverURL")
pfp.src=specialuser.pfpsrc;
pfp.classList.add("pfp");
table.append(userinfo);
userinfo.addEventListener("click",_=>{
thisuser.unload();
document.getElementById("loading").classList.remove("doneloading");
document.getElementById("loading").classList.add("loading");
thisuser=new Localuser(specialuser);
users["currentuser"]=specialuser.uid;
localStorage.setItem("userinfos",JSON.stringify(users));
thisuser.initwebsocket().then(_=>{
thisuser.loaduser();
thisuser.init();
document.getElementById("loading").classList.add("doneloading");
document.getElementById("loading").classList.remove("loading");
console.log("done loading")
});
userinfo.remove();
})
}
{
const td=document.createElement("div");
td.classList.add("switchtable")
td.append("Switch accounts ⇌");
td.addEventListener("click",_=>{
window.location.href="/login.html";
})
table.append(td);
}
table.classList.add("accountSwitcher");
if(Contextmenu.currentmenu!=""){
Contextmenu.currentmenu.remove();
}
Contextmenu.currentmenu=table;
console.log(table);
document.body.append(table);
}
{ {
const userinfo=document.getElementById("userinfo"); const userinfo=document.getElementById("userinfo");
userinfo.addEventListener("click",function(event){ userinfo.addEventListener("click",_=>{
const table=document.createElement("div"); _.stopImmediatePropagation();
for(const thing of Object.values(users.users)){ showAccountSwitcher();
const specialuser=thing as Specialuser;
console.log(specialuser.pfpsrc)
const userinfo=document.createElement("div");
userinfo.classList.add("flexltr","switchtable");
const pfp=document.createElement("img");
userinfo.append(pfp);
const user=document.createElement("div");
userinfo.append(user);
user.append(specialuser.username);
user.append(document.createElement("br"));
const span=document.createElement("span");
span.textContent=specialuser.serverurls.wellknown.replace("https://","").replace("http://","");
user.append(span);
user.classList.add("userinfo")
span.classList.add("serverURL")
pfp.src=specialuser.pfpsrc;
pfp.classList.add("pfp");
table.append(userinfo);
userinfo.addEventListener("click",_=>{
thisuser.unload();
document.getElementById("loading").classList.remove("doneloading");
document.getElementById("loading").classList.add("loading");
thisuser=new Localuser(specialuser);
users["currentuser"]=specialuser.uid;
localStorage.setItem("userinfos",JSON.stringify(users));
thisuser.initwebsocket().then(_=>{
thisuser.loaduser();
thisuser.init();
document.getElementById("loading").classList.add("doneloading");
document.getElementById("loading").classList.remove("loading");
console.log("done loading")
});
userinfo.remove();
})
}
{
const td=document.createElement("div");
td.classList.add("switchtable")
td.append("Switch accounts ⇌");
td.addEventListener("click",_=>{
window.location.href="/login.html";
})
table.append(td);
}
table.classList.add("accountSwitcher");
if(Contextmenu.currentmenu!=""){
Contextmenu.currentmenu.remove();
}
Contextmenu.currentmenu=table;
console.log(table);
document.body.append(table);
event.stopImmediatePropagation();
}) })
const switchaccounts=document.getElementById("switchaccounts");
switchaccounts.addEventListener("click",_=>{
_.stopImmediatePropagation();
showAccountSwitcher();
})
console.log("this ran")
} }
let thisuser:Localuser;
try{
thisuser=new Localuser(users.users[users.currentuser]);
thisuser.initwebsocket().then(_=>{
thisuser.loaduser();
thisuser.init();
document.getElementById("loading").classList.add("doneloading");
document.getElementById("loading").classList.remove("loading");
console.log("done loading")
});
}catch{
document.getElementById("load-desc").textContent="Account unable to start";
thisuser=new Localuser(-1);
}
{ {
const menu=new Contextmenu("create rightclick"); const menu=new Contextmenu("create rightclick");

View file

@ -39,7 +39,10 @@ class Localuser{
connectionSucceed=0; connectionSucceed=0;
errorBackoff=0; errorBackoff=0;
mfa_enabled:boolean; mfa_enabled:boolean;
constructor(userinfo:Specialuser){ constructor(userinfo:Specialuser|-1){
if(userinfo===-1){
return;
}
this.token=userinfo.token; this.token=userinfo.token;
this.userinfo=userinfo; this.userinfo=userinfo;
this.serverurls=this.userinfo.serverurls; this.serverurls=this.userinfo.serverurls;
@ -110,7 +113,9 @@ class Localuser{
this.outoffocus(); this.outoffocus();
this.guilds=[]; this.guilds=[];
this.guildids=new Map(); this.guildids=new Map();
this.ws.close(4001) if(this.ws){
this.ws.close(4001)
}
SnowFlake.clear(); SnowFlake.clear();
User.clear(); User.clear();
} }

View file

@ -1058,6 +1058,7 @@ span {
max-height: 80vh; max-height: 80vh;
overflow: auto; overflow: auto;
border:solid var(--black) .035in; border:solid var(--black) .035in;
z-index: 102;
} }
.switchtable{ .switchtable{
transition: background .3s; transition: background .3s;