dan/ester_os
1
0
Fork 0
mirror of https://github.com/danbulant/ester_os synced 2026-07-05 11:00:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Better stylings

Browse source
This commit is contained in:
danbulant 2020-02-16 15:08:32 +01:00
parent d31158ec33
commit 97397d7fda
2 changed files with 110 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
client/src/renderers/login.ts
View file

@ -6,28 +6,35 @@ import './styles/login.css';
class Login implements RenderDef { class Login implements RenderDef {
name = "login"; name = "login";
state = RenderStates.Init; state = RenderStates.Init;
removePrevious = true;
element:HTMLElement = null; element:HTMLElement = null;
counter:number = 0;
listener:NodeJS.Timeout = null; listener:NodeJS.Timeout = null;
keyListener() { keyListener() {
clearTimeout(this.listener); this.counter = 0;
this.listener = setTimeout(() => { this.showWelcome() }, 15000);
} }
render(){ render(){
if(!this.element)throw new Error("Cannot render without preparing login"); if(!this.element)throw new Error("Cannot render without preparing login");
console.log("Login renderer active"); console.log("[LOGIN] Active");
this.listener = setTimeout(() => { this.showWelcome() }, 15000); this.listener = setInterval(() => {
document.addEventListener('keypress', this.keyListener, false); this.counter++;
if(this.counter > 14) this.showWelcome();
}, 1000);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach((name)=>{
document.addEventListener(name, this.keyListener, true);
});
document.body.appendChild(this.element); document.body.appendChild(this.element);
} }
showWelcome(){ showWelcome(){
if(this.state != RenderStates.Rendered)return;
var w = new Welcome(); var w = new Welcome();
var p = w.prepare(); var p = w.prepare();
this.element.classList.add("inactive"); this.element.classList.add("inactive");
@ -45,17 +52,60 @@ class Login implements RenderDef {
this.element = document.createElement("div"); this.element = document.createElement("div");
var el = this.element; var el = this.element;
el.innerText = "Pls login";
el.className = "login"; el.className = "login";
console.log("Login renderer prepared"); var loginForm = document.createElement("div");
loginForm.className = "login-form";
el.appendChild(loginForm);
var avatar = document.createElement("img");
avatar.className = "avatar";
avatar.src = "https://clinicforspecialchildren.org/wp-content/uploads/2016/08/avatar-placeholder.gif";
loginForm.appendChild(avatar);
var username = document.createElement("input");
username.type = "text";
username.className = "username";
username.placeholder = "Username";
loginForm.appendChild(username);
var password = document.createElement("input");
password.type = "password";
password.className = "password";
password.placeholder = "Password";
loginForm.appendChild(password);
var submit = document.createElement("button");
submit.innerText = "login";
submit.className = "submit";
submit.onclick = this.login;
loginForm.appendChild(submit);
var error = document.createElement("div");
error.innerText = "This user doesn't exist";
error.className = "error";
error.style.display = "none";
loginForm.appendChild(error);
console.log("[LOGIN] Ready");
}
login(){
console.log("[LOGIN] Submitting");
} }
eject(){ eject(){
console.log("Login renderer ejected"); if(this.state == RenderStates.Ejected)throw Error("Already ejected login");
console.log("[LOGIN] Ejected");
this.state = RenderStates.Ejected; this.state = RenderStates.Ejected;
document.body.removeChild(this.element); document.body.removeChild(this.element);
document.removeEventListener('keypress', this.keyListener); clearInterval(this.listener);
this.counter = 0;
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach((name)=>{
document.removeEventListener(name, this.keyListener, true);
});
} }
} }

49
client/src/renderers/styles/login.css
View file

@ -28,3 +28,52 @@
backdrop-filter: blur(0px); backdrop-filter: blur(0px);
} }
} }
.login .login-form {
padding-top: 50%;
margin-top: -450px;
padding-left: 50%;
margin-left: -85px;
width: 170px;
height: 200px;
height: auto;
}
.login .login-form .error {
font-size: 15px;
color: red;
}
.login .avatar {
border-radius: 50%;/* ROUND */
padding-left: 10px;
padding-right: 10px;
height: 150px;
width: 150px;
}
.login .login-form .username {
display: block;
width: 163px;
margin-top: 5px;
}
.login .login-form .password {
display: inline;
width: 123px;
}
.login .login-form input {
height: 20px;
border-radius: 2px;
margin: 0;
padding: 0;
border: none;
padding-left: 5px;
border: 1px solid black;
}
.login .login-form input:focus {
outline: none;
}
.login .login-form button {
display: inline;
width: 40px;
height: 22px;
}