From cc9c1ca82e6449727cca82e833bcb6bcb0432a10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Tue, 18 Jul 2023 07:09:03 +0200
Subject: [PATCH] Fixed login screen.

---
 static/css/login.css   | 46 +++++++++++++++-------
 static/css/main.css    | 42 +++++++++++---------
 static/css/theme.css   |  7 ++++
 static/js/app.mjs      | 23 ++++++++---
 static/less/login.less | 87 +++++++++++++++++++++++++-----------------
 static/less/main.less  | 20 +++++-----
 static/less/theme.less |  9 +++++
 7 files changed, 154 insertions(+), 80 deletions(-)

diff --git a/static/css/login.css b/static/css/login.css
index 50a59ac..cbe85cb 100644
--- a/static/css/login.css
+++ b/static/css/login.css
@@ -1,33 +1,53 @@
+/*
+@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
+@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
+@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
+@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
+@theme_gradient: linear-gradient(to right, #659999, #f4791f);
+*/
 #login {
+  height: 100%;
+  background: #eee;
+}
+#login .header {
+  background: linear-gradient(to right, #3e5151, #decba4);
+  width: 100%;
+  padding: 16px;
+  text-align: center;
+  color: #fff;
+}
+#login .header h1 {
+  margin-bottom: 0px;
+}
+#login .fields {
   display: grid;
   justify-items: center;
-  height: 100%;
+  padding: 32px;
 }
-#login input {
-  max-width: 300px;
+#login .fields input {
   margin-bottom: 32px;
-  width: 100%;
   border: 0px;
-  border-bottom: 1px solid #444;
-  font-size: 18pt;
+  border: 1px solid #444;
+  padding: 8px;
+  width: 100%;
+  font-size: 1.25em;
   background-color: #fff;
 }
-#login input:focus {
+#login .fields input:focus {
   outline: none;
 }
-#login button {
-  max-width: 300px;
+#login .fields button {
   border: 1px solid #666;
   background: #fff;
   color: #444;
-  padding: 16px 32px;
-  font-size: 1em;
+  padding: 12px 24px;
+  font-size: 1.25em;
   align-self: center;
 }
-#login button:hover {
+#login .fields button:hover {
   background: #ddd;
 }
-#login .auth-failed {
+#login .fields .auth-failed {
   margin-top: 32px;
   color: #a00;
   background: #fff;
diff --git a/static/css/main.css b/static/css/main.css
index 2ce59f2..56ee6a9 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,3 +1,10 @@
+/*
+@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
+@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
+@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
+@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
+@theme_gradient: linear-gradient(to right, #659999, #f4791f);
+*/
 html {
   box-sizing: border-box;
 }
@@ -134,11 +141,6 @@ header {
   align-items: center;
   padding: 8px 0px;
   color: #333c11;
-  background: linear-gradient(to right, #009fff, #ec2f4b);
-  background: linear-gradient(to right, #f5af19, #f12711);
-  background: linear-gradient(to right, #fdc830, #f37335);
-  background: linear-gradient(to right, #8a2387, #e94057, #f27121);
-  background: linear-gradient(to right, #659999, #f4791f);
   background: linear-gradient(to right, #3e5151, #decba4);
   color: #fff;
 }
@@ -512,7 +514,13 @@ header .menu {
 .layout-keys #keys {
   display: block;
 }
-#app {
+#app.login {
+  padding-top: 64px;
+  display: grid;
+  grid-template-columns: minmax(min-content, 300px);
+  justify-content: center;
+}
+#app.node {
   display: grid;
   grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
   grid-template-columns: min-content 1fr;
@@ -521,26 +529,26 @@ header .menu {
   color: #fff;
   height: 100%;
 }
-#app.toggle-tree {
+#app.node.toggle-tree {
   grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
   grid-template-columns: 1fr;
   grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
   /* blank */
 }
-#app.toggle-tree #tree {
+#app.node.toggle-tree #tree {
   display: none;
 }
 @media only screen and (max-width: 932px) {
-  #app {
+  #app.node {
     grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
     grid-template-columns: 1fr;
     grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
     /* blank */
   }
-  #app #tree {
+  #app.node #tree {
     display: none;
   }
-  #app.toggle-tree {
+  #app.node.toggle-tree {
     display: grid;
     grid-template-areas: "header" "tree";
     grid-template-columns: 1fr;
@@ -549,22 +557,22 @@ header .menu {
     color: #fff;
     height: 100%;
   }
-  #app.toggle-tree #crumbs {
+  #app.node.toggle-tree #crumbs {
     display: none;
   }
-  #app.toggle-tree .child-nodes {
+  #app.node.toggle-tree .child-nodes {
     display: none;
   }
-  #app.toggle-tree .node-name {
+  #app.node.toggle-tree .node-name {
     display: none;
   }
-  #app.toggle-tree .grow-wrap {
+  #app.node.toggle-tree .grow-wrap {
     display: none;
   }
-  #app.toggle-tree #file-section {
+  #app.node.toggle-tree #file-section {
     display: none;
   }
-  #app.toggle-tree #tree {
+  #app.node.toggle-tree #tree {
     display: block;
   }
   .node-content {
diff --git a/static/css/theme.css b/static/css/theme.css
index e69de29..39ea0b1 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -0,0 +1,7 @@
+/*
+@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
+@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
+@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
+@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
+@theme_gradient: linear-gradient(to right, #659999, #f4791f);
+*/
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 02cb7a7..5e8cec3 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -28,14 +28,20 @@ class App extends Component {
 		this.setStartNode()
 	}//}}}
 	render() {//{{{
+		let app_el = document.getElementById('app')
+
 		if(!this.session.initialized) {
 			return html`<div>Validating session</div>`
 		}
- 
+
 		if(!this.session.authenticated()) {
+			app_el.classList.remove('node')
+			app_el.classList.add('login')
 			return html`<${Login} ref=${this.login} />`
 		}
 
+		app_el.classList.remove('login')
+		app_el.classList.add('node')
 		return html`
 			<${Tree} app=${this} ref=${this.tree} />
 			<${NodeUI} app=${this} ref=${this.nodeUI} />
@@ -162,11 +168,16 @@ class Login extends Component {
 
 		return html`
 		<div id="login">
-			<h1>Notes</h1>
-			<input id="username" type="text"     placeholder="Username" value=${username} oninput=${evt=>this.setState({ username: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
-			<input id="password" type="password" placeholder="Password" value=${password} oninput=${evt=>this.setState({ password: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
-			<button onclick=${()=>this.login()}>Login</button>
-			${authentication_failed}
+			<div class="header">
+				<h1>Notes</h1>
+			</div>
+
+			<div class="fields">
+				<input id="username" type="text"     placeholder="Username" value=${username} oninput=${evt=>this.setState({ username: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
+				<input id="password" type="password" placeholder="Password" value=${password} oninput=${evt=>this.setState({ password: evt.target.value})} onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
+				<button onclick=${()=>this.login()}>Login</button>
+				${authentication_failed}
+			</div>
 		</div>
 		`
 	}//}}}
diff --git a/static/less/login.less b/static/less/login.less
index 6fe0c0e..2670a2c 100644
--- a/static/less/login.less
+++ b/static/less/login.less
@@ -1,44 +1,61 @@
 @import "theme.less";
 
 #login {
-	display: grid;
-	justify-items: center;
 	height: 100%;
+	background: #eee;
 
-	input {
-		max-width: 300px;
-		margin-bottom: 32px;
+	.header {
+		background: @theme_gradient;
 		width: 100%;
-		border: 0px;
-		border-bottom: 1px solid #444;
-
-		font-size: 18pt;
-		background-color: @background;
-		
-		&:focus {
-			outline: none;
-		}
-	}
-
-	button {
-		max-width: 300px;
-		border: 1px solid #666;
-		background: @background;
-		color: #444;
-		padding: 16px 32px;
-		font-size: 1em;
-		align-self: center;
-
-		&:hover {
-			background: #ddd;
-		}
-	}
-
-	.auth-failed {
-		margin-top: 32px;
-		color: #a00;
-		background: #fff;
 		padding: 16px;
-		border-radius: 8px;
+		text-align: center;
+		color: #fff;
+
+		h1 {
+			margin-bottom: 0px;
+		}
 	}
+
+	.fields {
+		display: grid;
+		justify-items: center;
+		padding: 32px;
+
+		input {
+			margin-bottom: 32px;
+			border: 0px;
+			border: 1px solid #444;
+			padding: 8px;
+			width: 100%;
+
+			font-size: 1.25em;
+			background-color: @background;
+			
+			&:focus {
+				outline: none;
+			}
+		}
+
+		button {
+			border: 1px solid #666;
+			background: @background;
+			color: #444;
+			padding: 12px 24px;
+			font-size: 1.25em;
+			align-self: center;
+
+			&:hover {
+				background: #ddd;
+			}
+		}
+
+		.auth-failed {
+			margin-top: 32px;
+			color: #a00;
+			background: #fff;
+			padding: 16px;
+			border-radius: 8px;
+		}
+	}
+
 }
diff --git a/static/less/main.less b/static/less/main.less
index 5dbe7ce..350fecd 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -156,15 +156,9 @@ header {
 	grid-area: header;
 	grid-template-columns: min-content 1fr repeat(3, min-content);
 	align-items: center;
-	//background: @accent_1;
 	padding: 8px 0px;
 	color: darken(@accent_1, 35%);
-	background: linear-gradient(to right, #009fff, #ec2f4b);
-	background: linear-gradient(to right, #f5af19, #f12711);
-	background: linear-gradient(to right, #fdc830, #f37335);
-	background: linear-gradient(to right, #8a2387, #e94057, #f27121);
-	background: linear-gradient(to right, #659999, #f4791f);
-	background: linear-gradient(to right, #3e5151, #decba4);
+	background: @theme_gradient;
 	color: #fff;
 
 	&.modified {
@@ -606,7 +600,15 @@ header {
 	#keys         { display: block }
 }
 
-#app {
+#app.login {
+	padding-top: 64px;
+
+	display: grid;
+	grid-template-columns: minmax(min-content, 300px);
+	justify-content: center;
+}
+
+#app.node {
 	.layout-tree();
 
 	&.toggle-tree {
@@ -616,7 +618,7 @@ header {
 }
 
 @media only screen and (max-width: 932px) {
-	#app {
+	#app.node {
 		.layout-crumbs();
 
 		&.toggle-tree {
diff --git a/static/less/theme.less b/static/less/theme.less
index 6239d85..e6932f9 100644
--- a/static/less/theme.less
+++ b/static/less/theme.less
@@ -3,3 +3,12 @@
 @accent_1: #abc837;
 @accent_2: #ecbf00;
 @accent_3: #c84a37;
+
+/*
+@theme_gradient: linear-gradient(to right, #009fff, #ec2f4b);
+@theme_gradient: linear-gradient(to right, #f5af19, #f12711);
+@theme_gradient: linear-gradient(to right, #fdc830, #f37335);
+@theme_gradient: linear-gradient(to right, #8a2387, #e94057, #f27121);
+@theme_gradient: linear-gradient(to right, #659999, #f4791f);
+*/
+@theme_gradient: linear-gradient(to right, #3e5151, #decba4);