add account switcher to loading screen
This commit is contained in:
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) {
|
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");
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
151
webpage/index.ts
151
webpage/index.ts
|
@ -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");
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue