mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-12-22 09:00:10 +00:00
login: modularize frontend code
all in ts/modules/login.ts
This commit is contained in:
parent
b13fe7f3e4
commit
b8cc75c6b4
GPG Key ID:
BBC65952848FB1A2
@ -1,5 +1,5 @@
|
||||
<div id="modal-login" class="modal">
|
||||
<form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3" id="form-login" href="">
|
||||
<form class="card relative mx-auto my-[10%] w-4/5 lg:w-1/3 form-login" href="">
|
||||
<span class="heading">{{ .strings.login }}</span>
|
||||
<input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
|
||||
<input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">
|
||||
|
||||
85
ts/admin.ts
85
ts/admin.ts
@ -6,8 +6,9 @@ import { inviteList, createInvite } from "./modules/invites.js";
|
||||
import { accountsList } from "./modules/accounts.js";
|
||||
import { settingsList } from "./modules/settings.js";
|
||||
import { ProfileEditor } from "./modules/profiles.js";
|
||||
import { _get, _post, notificationBox, whichAnimationEvent, toggleLoader } from "./modules/common.js";
|
||||
import { _get, _post, notificationBox, whichAnimationEvent } from "./modules/common.js";
|
||||
import { Updater } from "./modules/update.js";
|
||||
import { Login } from "./modules/login.js";
|
||||
|
||||
let theme = new nightwind();
|
||||
|
||||
@ -165,75 +166,25 @@ window.onpopstate = (event: PopStateEvent) => {
|
||||
window.tabs.switch(event.state);
|
||||
}
|
||||
|
||||
function login(username: string, password: string, run?: (state?: number) => void) {
|
||||
const req = new XMLHttpRequest();
|
||||
req.responseType = 'json';
|
||||
let url = window.URLBase;
|
||||
const refresh = (username == "" && password == "");
|
||||
if (refresh) {
|
||||
url += "/token/refresh";
|
||||
} else {
|
||||
url += "/token/login";
|
||||
const login = new Login(window.modals.login as Modal, "/");
|
||||
login.onLogin = () => {
|
||||
window.updater = new Updater();
|
||||
setInterval(() => { window.invites.reload(); accounts.reload(); }, 30*1000);
|
||||
const currentTab = window.tabs.current;
|
||||
switch (currentTab) {
|
||||
case "invites":
|
||||
window.invites.reload();
|
||||
break;
|
||||
case "accounts":
|
||||
accounts.reload();
|
||||
break;
|
||||
case "settings":
|
||||
settings.reload();
|
||||
break;
|
||||
}
|
||||
req.open("GET", url, true);
|
||||
if (!refresh) {
|
||||
req.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
|
||||
}
|
||||
req.onreadystatechange = function (): void {
|
||||
if (this.readyState == 4) {
|
||||
if (this.status != 200) {
|
||||
let errorMsg = window.lang.notif("errorConnection");
|
||||
if (this.response) {
|
||||
errorMsg = this.response["error"];
|
||||
}
|
||||
if (!errorMsg) {
|
||||
errorMsg = window.lang.notif("errorUnknown");
|
||||
}
|
||||
if (!refresh) {
|
||||
window.notifications.customError("loginError", errorMsg);
|
||||
} else {
|
||||
window.modals.login.show();
|
||||
}
|
||||
} else {
|
||||
const data = this.response;
|
||||
window.token = data["token"];
|
||||
window.updater = new Updater(); // mmm, a race condition
|
||||
window.modals.login.close();
|
||||
setInterval(() => { window.invites.reload(); accounts.reload(); }, 30*1000);
|
||||
const currentTab = window.tabs.current;
|
||||
switch (currentTab) {
|
||||
case "invites":
|
||||
window.invites.reload();
|
||||
break;
|
||||
case "accounts":
|
||||
accounts.reload();
|
||||
break;
|
||||
case "settings":
|
||||
settings.reload();
|
||||
break;
|
||||
}
|
||||
document.getElementById("logout-button").classList.remove("unfocused");
|
||||
}
|
||||
if (run) { run(+this.status); }
|
||||
}
|
||||
};
|
||||
req.send();
|
||||
}
|
||||
|
||||
(document.getElementById('form-login') as HTMLFormElement).onsubmit = (event: SubmitEvent) => {
|
||||
event.preventDefault();
|
||||
const button = (event.target as HTMLElement).querySelector(".submit") as HTMLSpanElement;
|
||||
const username = (document.getElementById("login-user") as HTMLInputElement).value;
|
||||
const password = (document.getElementById("login-password") as HTMLInputElement).value;
|
||||
if (!username || !password) {
|
||||
window.notifications.customError("loginError", window.lang.notif("errorLoginBlank"));
|
||||
return;
|
||||
}
|
||||
toggleLoader(button);
|
||||
login(username, password, () => toggleLoader(button));
|
||||
};
|
||||
|
||||
login("", "");
|
||||
login.login("", "");
|
||||
|
||||
(document.getElementById('logout-button') as HTMLButtonElement).onclick = () => _post("/logout", null, (req: XMLHttpRequest): boolean => {
|
||||
if (req.readyState == 4 && req.status == 200) {
|
||||
|
||||
73
ts/modules/login.ts
Normal file
73
ts/modules/login.ts
Normal file
@ -0,0 +1,73 @@
|
||||
import { Modal } from "../modules/modal.js";
|
||||
import { toggleLoader } from "../modules/common.js";
|
||||
|
||||
export class Login {
|
||||
private _modal: Modal;
|
||||
private _form: HTMLFormElement;
|
||||
private _url: string;
|
||||
private _onLogin: (username: string, password: string) => void;
|
||||
|
||||
constructor(modal: Modal, endpoint: string) {
|
||||
|
||||
this._url = window.URLBase + endpoint;
|
||||
if (this._url[this._url.length-1] != '/') this._url += "/";
|
||||
this._url += "token/";
|
||||
|
||||
this._modal = modal;
|
||||
this._form = this._modal.asElement().querySelector(".form-login") as HTMLFormElement;
|
||||
this._form.onsubmit = (event: SubmitEvent) => {
|
||||
event.preventDefault();
|
||||
const button = (event.target as HTMLElement).querySelector(".submit") as HTMLSpanElement;
|
||||
const username = (document.getElementById("login-user") as HTMLInputElement).value;
|
||||
const password = (document.getElementById("login-password") as HTMLInputElement).value;
|
||||
if (!username || !password) {
|
||||
window.notifications.customError("loginError", window.lang.notif("errorLoginBlank"));
|
||||
return;
|
||||
}
|
||||
toggleLoader(button);
|
||||
this.login(username, password, () => toggleLoader(button));
|
||||
};
|
||||
}
|
||||
|
||||
get onLogin() { return this._onLogin; }
|
||||
set onLogin(f: (username: string, password: string) => void) { this._onLogin = f; }
|
||||
|
||||
login = (username: string, password: string, run?: (state?: number) => void) => {
|
||||
const req = new XMLHttpRequest();
|
||||
req.responseType = 'json';
|
||||
const refresh = (username == "" && password == "");
|
||||
req.open("GET", this._url + (refresh ? "refresh" : "login"), true);
|
||||
if (!refresh) {
|
||||
req.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
|
||||
}
|
||||
req.onreadystatechange = ((req: XMLHttpRequest, _: Event): any => {
|
||||
if (req.readyState == 4) {
|
||||
if (req.status != 200) {
|
||||
let errorMsg = window.lang.notif("errorConnection");
|
||||
if (req.response) {
|
||||
errorMsg = req.response["error"];
|
||||
}
|
||||
if (!errorMsg) {
|
||||
errorMsg = window.lang.notif("errorUnknown");
|
||||
}
|
||||
if (!refresh) {
|
||||
window.notifications.customError("loginError", errorMsg);
|
||||
} else {
|
||||
this._modal.show();
|
||||
}
|
||||
} else {
|
||||
const data = req.response;
|
||||
window.token = data["token"];
|
||||
if (this._onLogin) {
|
||||
this._onLogin(username, password);
|
||||
}
|
||||
this._modal.close();
|
||||
document.getElementById("logout-button").classList.remove("unfocused");
|
||||
}
|
||||
if (run) { run(+req.status); }
|
||||
}
|
||||
}).bind(this, req);
|
||||
req.send();
|
||||
};
|
||||
}
|
||||
|
||||
@ -54,4 +54,6 @@ export class Modal implements Modal {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
asElement = () => { return this.modal; }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user