113 lines
3.3 KiB
JavaScript
113 lines
3.3 KiB
JavaScript
export class fenetre {
|
|
constructor(width = 320, height = 220, title = "Window") {
|
|
this.main = document.createElement("div");
|
|
this.main.style.width = width + "px";
|
|
this.main.style.height = height + "px";
|
|
this.main.style.position = "fixed";
|
|
this.main.style.top = "50%";
|
|
this.main.style.left = "50%";
|
|
this.main.style.transform = "translate(-50%, -50%)";
|
|
this.main.style.backgroundColor = "#000";
|
|
this.main.style.border = "2px ridge white";
|
|
this.main.style.color = "white";
|
|
this.main.style.zIndex = "100";
|
|
this.main.style.display = "none";
|
|
|
|
// Header
|
|
this.header = document.createElement("div");
|
|
this.header.innerText = title;
|
|
this.header.style.padding = "6px";
|
|
this.header.style.background = "#222";
|
|
this.header.style.cursor = "move";
|
|
|
|
// Close
|
|
this.closeBtn = document.createElement("span");
|
|
this.closeBtn.innerText = "✖";
|
|
this.closeBtn.style.float = "right";
|
|
this.closeBtn.style.cursor = "pointer";
|
|
this.closeBtn.onclick = () => this.hide();
|
|
|
|
this.header.appendChild(this.closeBtn);
|
|
|
|
// Body
|
|
this.body = document.createElement("div");
|
|
this.body.style.padding = "10px";
|
|
|
|
this.main.append(this.header, this.body);
|
|
document.body.appendChild(this.main);
|
|
}
|
|
|
|
show() {
|
|
this.main.style.display = "block";
|
|
}
|
|
|
|
hide() {
|
|
this.main.style.display = "none";
|
|
}
|
|
}
|
|
|
|
export class LoginWindow extends fenetre {
|
|
constructor() {
|
|
super(320, 240, "Connexion");
|
|
|
|
this.mode = "login"; // login | register
|
|
|
|
this.username = document.createElement("input");
|
|
this.username.placeholder = "Username";
|
|
|
|
this.password = document.createElement("input");
|
|
this.password.type = "password";
|
|
this.password.placeholder = "Password";
|
|
|
|
this.submit = document.createElement("button");
|
|
this.submit.innerText = "Se connecter";
|
|
|
|
this.switch = document.createElement("button");
|
|
this.switch.innerText = "S'inscrire";
|
|
|
|
this.message = document.createElement("div");
|
|
this.message.style.fontSize = "0.8em";
|
|
|
|
this.body.append(
|
|
this.username,
|
|
this.password,
|
|
this.submit,
|
|
this.switch,
|
|
this.message
|
|
);
|
|
|
|
this.applyStyles();
|
|
this.bindEvents();
|
|
}
|
|
|
|
applyStyles() {
|
|
this.body.style.display = "flex";
|
|
this.body.style.flexDirection = "column";
|
|
this.body.style.gap = "8px";
|
|
}
|
|
|
|
bindEvents() {
|
|
this.switch.onclick = () => this.toggleMode();
|
|
|
|
this.submit.onclick = () => {
|
|
this.message.innerText =
|
|
this.mode === "login"
|
|
? "Tentative de connexion..."
|
|
: "Tentative d'inscription...";
|
|
};
|
|
}
|
|
|
|
toggleMode() {
|
|
if (this.mode === "login") {
|
|
this.mode = "register";
|
|
this.header.firstChild.textContent = "Inscription";
|
|
this.submit.innerText = "S'inscrire";
|
|
this.switch.innerText = "Se connecter";
|
|
} else {
|
|
this.mode = "login";
|
|
this.header.firstChild.textContent = "Connexion";
|
|
this.submit.innerText = "Se connecter";
|
|
this.switch.innerText = "S'inscrire";
|
|
}
|
|
}
|
|
} |