add account switcher to loading screen
This commit is contained in:
MathMan05
parent
6ac1a4e904
commit
ef2d228b70
6 changed files with 178 additions and 133 deletions
142
.dist/index.js
142
.dist/index.js
|
|
@ -14,72 +14,88 @@ const users = getBulkUsers();
|
|||
if (!users.currentuser) {
|
||||
window.location.href = '/login.html';
|
||||
}
|
||||
let 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");
|
||||
});
|
||||
function showAccountSwitcher() {
|
||||
const table = document.createElement("div");
|
||||
for (const thing of Object.values(users.users)) {
|
||||
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);
|
||||
}
|
||||
{
|
||||
const userinfo = document.getElementById("userinfo");
|
||||
userinfo.addEventListener("click", function (event) {
|
||||
const table = document.createElement("div");
|
||||
for (const thing of Object.values(users.users)) {
|
||||
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();
|
||||
userinfo.addEventListener("click", _ => {
|
||||
_.stopImmediatePropagation();
|
||||
showAccountSwitcher();
|
||||
});
|
||||
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");
|
||||
|
|
|
|||
|
|
@ -36,6 +36,9 @@ class Localuser {
|
|||
errorBackoff = 0;
|
||||
mfa_enabled;
|
||||
constructor(userinfo) {
|
||||
if (userinfo === -1) {
|
||||
return;
|
||||
}
|
||||
this.token = userinfo.token;
|
||||
this.userinfo = userinfo;
|
||||
this.serverurls = this.userinfo.serverurls;
|
||||
|
|
@ -104,7 +107,9 @@ class Localuser {
|
|||
this.outoffocus();
|
||||
this.guilds = [];
|
||||
this.guildids = new Map();
|
||||
this.ws.close(4001);
|
||||
if (this.ws) {
|
||||
this.ws.close(4001);
|
||||
}
|
||||
SnowFlake.clear();
|
||||
User.clear();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
<img src="/logo.svg" width="1in" height="1in">
|
||||
<h1>Jank Client is loading</h1>
|
||||
<h2 id="load-desc">This shouldn't take long</h2>
|
||||
<h1 id="switchaccounts">Switch Accounts</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flexltr" id="page">
|
||||
|
|
|
|||
151
webpage/index.ts
151
webpage/index.ts
|
|
@ -19,77 +19,94 @@ if(!users.currentuser){
|
|||
window.location.href = '/login.html';
|
||||
}
|
||||
|
||||
let 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")
|
||||
});
|
||||
|
||||
function showAccountSwitcher(){
|
||||
const table=document.createElement("div");
|
||||
for(const thing of Object.values(users.users)){
|
||||
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);
|
||||
}
|
||||
{
|
||||
const userinfo=document.getElementById("userinfo");
|
||||
userinfo.addEventListener("click",function(event){
|
||||
const table=document.createElement("div");
|
||||
for(const thing of Object.values(users.users)){
|
||||
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();
|
||||
userinfo.addEventListener("click",_=>{
|
||||
_.stopImmediatePropagation();
|
||||
showAccountSwitcher();
|
||||
})
|
||||
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");
|
||||
|
|
|
|||
|
|
@ -39,7 +39,10 @@ class Localuser{
|
|||
connectionSucceed=0;
|
||||
errorBackoff=0;
|
||||
mfa_enabled:boolean;
|
||||
constructor(userinfo:Specialuser){
|
||||
constructor(userinfo:Specialuser|-1){
|
||||
if(userinfo===-1){
|
||||
return;
|
||||
}
|
||||
this.token=userinfo.token;
|
||||
this.userinfo=userinfo;
|
||||
this.serverurls=this.userinfo.serverurls;
|
||||
|
|
@ -110,7 +113,9 @@ class Localuser{
|
|||
this.outoffocus();
|
||||
this.guilds=[];
|
||||
this.guildids=new Map();
|
||||
this.ws.close(4001)
|
||||
if(this.ws){
|
||||
this.ws.close(4001)
|
||||
}
|
||||
SnowFlake.clear();
|
||||
User.clear();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1058,6 +1058,7 @@ span {
|
|||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
border:solid var(--black) .035in;
|
||||
z-index: 102;
|
||||
}
|
||||
.switchtable{
|
||||
transition: background .3s;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue