wip

static/css/login.css

@@ -0,0 +1,37 @@
+#app {
+  display: grid;
+  justify-items: center;
+  margin-top: 128px;
+}
+#logo {
+  margin-bottom: 48px;
+}
+#box {
+  display: grid;
+  grid-gap: 16px 0;
+  justify-items: center;
+  width: 300px;
+  padding: 48px 0px;
+  background-color: #fff;
+  box-shadow: 0px 20px 52px -33px rgba(0, 0, 0, 0.75);
+  border-left: 8px solid #666;
+}
+#box input {
+  padding: 4px 8px;
+  font-size: 1em;
+  width: calc(100% - 64px);
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
+#box button {
+  padding: 6px 16px;
+  font-size: 1em;
+  border-radius: 4px;
+  border: none;
+  background-color: #fe5f55;
+  color: #fff;
+}
+#box #error {
+  color: #c33;
+  margin-top: 16px;
+}

static/css/main.css

@@ -1,5 +1,7 @@
 html {
   box-sizing: border-box;
+  background: #efede8;
+  font-size: 14pt;
 }
 *,
 *:before,

static/js/api.mjs

@@ -0,0 +1,67 @@
+export class API {
+	// query resolves into the JSON data produced by the application, or an exception with 'type' and 'error' properties.
+	static async query(method, path, request) {
+		return new Promise((resolve, reject) => {
+			const body = JSON.stringify(request)
+			const headers = {}
+
+			// Authentication is done with a bearer token.
+			// Here provided to the backend if set.
+			const token = localStorage.getItem('token')
+			if (token) {
+				headers.Authorization = `Bearer ${token}`
+			}
+
+			fetch(path, { method, headers, body })
+				.then(response => {
+					// An HTTP communication level error occured.
+					if (!response.ok || response.status != 200)
+						return reject({
+							type: 'http',
+							error: response,
+						})
+					return response.json()
+				})
+				.then(json => {
+					// Application level response are handled here.
+					if (!json.OK)
+						return reject({
+							type: 'application',
+							error: json.Error,
+							application: json,
+						})
+					resolve(json)
+				})
+				.catch(err =>
+					// Catch any other errors from fetch.
+					reject({
+						type: 'http',
+						error: err,
+					}))
+		})
+	}
+
+	static hasAuthenticationToken() {//{{{
+		const token = localStorage.getItem('token')
+		return token !== null && token !== ''
+	}//}}}
+	static authenticate(username, password) {//{{{
+		return new Promise((resolve, reject) => {
+			const req = { username, password }
+			API.query('POST', '/user/authenticate', req)
+				.then(response => {
+					localStorage.setItem('token', response.Token)
+					localStorage.setItem('user', JSON.stringify(response.User))
+					resolve(response.User)
+				})
+				.catch(e => {
+					console.log(e.type, e.error)
+					reject(e.error)
+				})
+		})
+	}//}}}
+	static logout() {//{{{
+		localStorage.removeItem('token')
+		location.href = '/'
+	}//}}}
+}

static/js/app.mjs

@@ -1 +1,23 @@
-console.log('app.mjs')
+import { h, Component, createRef } from 'preact'
+import htm from 'htm'
+import { API } from 'api'
+const html = htm.bind(h)
+
+export class Notes2 {
+	constructor() {//{{{
+	}//}}}
+	render() {//{{{
+		return html`
+			<button onclick=${()=>API.logout()}>Log out</button>
+		`
+	}//}}}
+
+	treeGet() {
+		const req = {}
+		API.query('POST', '/tree/get', req)
+			.then(response => {
+				console.log(response)
+			})
+			.catch(e => console.log(e.type, e.error))
+	}
+}

static/less/login.less

@@ -0,0 +1,44 @@
+@import "theme.less";
+
+#app {
+	display: grid;
+	justify-items: center;
+	margin-top: 128px;
+}
+
+#logo {
+	margin-bottom: 48px;
+}
+
+#box {
+	display: grid;
+	grid-gap: 16px 0;
+	justify-items: center;
+	width: 300px;
+	padding: 48px 0px;
+	background-color: #fff;
+	box-shadow: 0px 20px 52px -33px rgba(0,0,0,0.75);
+	border-left: 8px solid @color3;
+
+	input {
+		padding: 4px 8px;
+		font-size: 1em;
+		width: calc(100% - 64px);
+		border: 1px solid #aaa;
+		border-radius: 4px;
+	}
+
+	button {
+		padding: 6px 16px;
+		font-size: 1em;
+		border-radius: 4px;
+		border: none;
+		background-color: @color1;
+		color: #fff;
+	}
+
+	#error {
+		color: #c33;
+		margin-top: 16px;
+	}
+}

static/less/loop_make.sh

@@ -6,14 +6,10 @@ do
 	inotifywait -q -e MODIFY *less
 	#sleep 0.5
 	clear
-
-	for THEME in $(ls theme-*.less | sed -e 's/^theme-\(.*\)\.less$/\1/'); do
-		export THEME=$THEME
-		make -j12
-		#curl -s http://notes.lan:1371/_ws/css_update
-	done
-	echo -e "\n\e[32;1mOK!\e[0m"
-	sleep 1
-	clear
-
+	if make -j12; then
+		echo -e "\n\e[32;1mOK!\e[0m"
+		curl -s http://notes.lan:1371/css_updated
+		sleep 1
+		clear
+	fi
 done

static/less/main.less

@@ -1,5 +1,9 @@
+@import "theme.less";
+
 html {
 	box-sizing: border-box;
+	background: @color2;
+	font-size: 14pt;
 }
 
 *,

static/less/theme.less

@@ -0,0 +1,3 @@
+@color1: #fe5f55;
+@color2: #efede8;
+@color3: #666;