134 lines
4.1 KiB
TypeScript
134 lines
4.1 KiB
TypeScript
import { GefestElement } from "../../modules/Gefest/element";
|
|
import { GefestA } from "../../modules/Gefest/primitives/a";
|
|
import { GefestCenter } from "../../modules/Gefest/primitives/center";
|
|
import { GefestHeader } from "../../modules/Gefest/primitives/header";
|
|
import { DefaultElement } from "../default-element";
|
|
|
|
export interface AuthenticationRules {
|
|
type: "password"
|
|
};
|
|
|
|
type formType = "text" | "email" | "password" | "textarea";
|
|
function getFormItem (elementHtmlId: string, title: string, type: formType = "text", placeholder : string | null = null): DefaultElement {
|
|
const label: DefaultElement = new (class extends DefaultElement {
|
|
constructor() {
|
|
super([
|
|
title
|
|
]);
|
|
this.addClass("form-label");
|
|
this.setAttribute("for", elementHtmlId);
|
|
}
|
|
protected htmlTag = "label";
|
|
});
|
|
const input: DefaultElement = new (class extends DefaultElement {
|
|
constructor() {
|
|
super([]);
|
|
this.id = elementHtmlId;
|
|
this.addClass("form-control");
|
|
if (!{
|
|
text: true,
|
|
email: true,
|
|
password: true,
|
|
textarea: false
|
|
}[type]) {
|
|
this.setAttribute("type", type);
|
|
}
|
|
if (placeholder !== null) {
|
|
this.setAttribute("placeholder", placeholder);
|
|
}
|
|
}
|
|
protected htmlTag = {
|
|
text: "input",
|
|
email: "input",
|
|
password: "input",
|
|
textarea: "textarea"
|
|
}[type];
|
|
});
|
|
|
|
return new (class extends DefaultElement { constructor() { super([
|
|
label, input
|
|
]); this.addClass("mb-3"); } });
|
|
}
|
|
class RegisterForm extends DefaultElement {
|
|
link: GefestA;
|
|
constructor(authRules : AuthenticationRules) {
|
|
const header = new GefestHeader("Registration", 2);
|
|
header.addClass("card-title");
|
|
const link = new GefestA("Login to account");
|
|
link.addClass("link-secondary");
|
|
link.addClass("noselect");
|
|
link.setPersonalStyle("cursor: pointer;");
|
|
|
|
const args = [
|
|
getFormItem("username", "Username"),
|
|
getFormItem("password", "Password", "password"),
|
|
];
|
|
switch (authRules.type) {
|
|
case "password":
|
|
args.push(getFormItem(
|
|
"serverPassword",
|
|
"Server Password",
|
|
"password"
|
|
));
|
|
break;
|
|
}
|
|
|
|
super([
|
|
new GefestCenter([header, link]),
|
|
...args
|
|
]);
|
|
this.link = link;
|
|
this.isHidden = true;
|
|
}
|
|
}
|
|
class LoginForm extends DefaultElement {
|
|
link: GefestA;
|
|
constructor() {
|
|
const header = new GefestHeader("Login", 2);
|
|
header.addClass("card-title");
|
|
const link = new GefestA("Create a new account");
|
|
link.addClass("link-secondary");
|
|
link.addClass("noselect");
|
|
link.setPersonalStyle("cursor: pointer;");
|
|
|
|
super([
|
|
new GefestCenter([
|
|
header, link
|
|
]),
|
|
getFormItem("username", "Username"),
|
|
getFormItem("password", "Password", "password"),
|
|
]);
|
|
this.link = link;
|
|
}
|
|
}
|
|
export class AuthenticationPage extends DefaultElement {
|
|
constructor(authRules : AuthenticationRules) {
|
|
const login = new LoginForm;
|
|
const register = new RegisterForm(authRules);
|
|
|
|
const update = () => {
|
|
login.update();
|
|
register.update();
|
|
};
|
|
login.link.onClick = () => {
|
|
login.isHidden = true;
|
|
register.isHidden = false;
|
|
update();
|
|
};
|
|
register.link.onClick = () => {
|
|
login.isHidden = false;
|
|
register.isHidden = true;
|
|
update();
|
|
};
|
|
|
|
super([
|
|
new (class extends DefaultElement { constructor() { super([
|
|
login,
|
|
register
|
|
]); this.addClass("card-body"); } })
|
|
]);
|
|
this.addClass("card");
|
|
this.addClass("border");
|
|
this.addClass("auth-card");
|
|
}
|
|
} |