Session

static/js/app.mjs

@@ -3,6 +3,7 @@ import 'preact/devtools'
 //import { signal } from 'preact/signals'
 import { h, Component, render, createRef } from 'preact'
 import htm from 'htm'
+import Session from 'session'
 const html = htm.bind(h)
 
 class App extends Component {
@@ -14,7 +15,7 @@ class App extends Component {
 		this.wsConnect()
 		this.wsLoop()
 
-		this.sessionID = window.localStorage.getItem("sessionID")
+
 	}//}}}
 	render() {//{{{
 		if(this.sessionID === null) {
@@ -63,6 +64,51 @@ class App extends Component {
 		}
 	}//}}}
 
+	responseError({comm, app}) {//{{{
+		if(comm !== undefined) {
+			comm.text().then(body=>alert(body))
+			return
+		}
+
+		if(app !== undefined && app.hasOwnProperty('error')) {
+			alert(app.error)
+			return
+		}
+
+		if(app !== undefined) {
+			alert(JSON.stringify(app))
+		}
+	}//}}}
+	async request(url, params) {//{{{
+		return new Promise((resolve, reject)=>{
+			let headers = {
+				'Content-Type': 'application/json',
+			}
+
+			if(this.sessionID !== null)
+				headers['X-SESSION-ID'] = this.sessionID
+
+			fetch(url, {
+				method: 'POST',
+				headers,
+				body: JSON.stringify(params),
+			})
+			.then(response=>{
+				// A HTTP communication level error occured
+				if(!response.ok || response.status !=  200)
+					return reject({comm: response})
+				return response.json()
+			})
+			.then(json=>{
+				// An application level error occured
+				if(!json.OK)
+					return reject({app: json})
+				return resolve(json)
+			})
+			.catch(err=>reject({comm: err}))
+		})
+	}//}}}
+
 	broadcastHandler(msg) {//{{{
 		switch(msg.Op) {
 			case 'css_reload':
@@ -70,20 +116,44 @@ class App extends Component {
 				break;
 		}
 	}//}}}
+	login(username, password) {//{{{
+		this.request('/session/create', {})
+		.then(res=>{
+			this.setSessionID(res.Session.UUID)
+		})
+		.catch(this.responseError)
+	}//}}}
+
+	getSessionID() {
+		return window.localStorage.getItem("sessionID")
+	}
+	setSessionID(uuid) {
+		console.log('wut')
+		this.sessionID = uuid
+		window.localStorage.setItem('sessionID', uuid)
+	}
 }
 
 class Login extends Component {
-	render() {
+	render() {//{{{
 		return html`
 		<div id="login">
 			<h1>Notes</h1>
-			<div>
-				<input id="username" type="text"     placeholder="Username" />
-				<input id="password" type="password" placeholder="Password" />
-			</div>
+			<input id="username" type="text"     placeholder="Username" onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
+			<input id="password" type="password" placeholder="Password" onkeydown=${evt=>{ if(evt.code == 'Enter') this.login() }} />
+			<button onclick=${()=>this.login()}>Login</button>
 		</div>
 		`
-	}
+	}//}}}
+	componentDidMount() {//{{{
+		document.getElementById('username').focus()
+	}//}}}
+
+	login() {//{{{
+		let username = document.getElementById('username').value
+		let password = document.getElementById('password').value
+		window._app.current.login(username, password)
+	}//}}}
 }
 
 // Init{{{