Added Overlay

public/core.js

@@ -37,3 +37,26 @@ export function onlineStatus() {
 		return false
 	}
 }
+
+export function showMessage(message) {
+	console.log(message)
+	document.querySelector('aside p').innerText = message
+	document.querySelector('aside').classList.remove('hidden')
+	setTimeout( () => document.querySelector('aside').classList.add('hidden'), 2000)
+}
+
+export function getLocation() {
+	return new Promise( (resolve, reject) => {
+		console.log('getting location')
+		if (!navigator.geolocation) return reject('geolocation not supported')
+		console.log('location supported')
+		navigator.geolocation.getCurrentPosition( position => {
+			// if(err) return reject(err)
+			console.log(typeof position)
+			const locString = `lat: ${position.coords.latitude}, lon: ${position.coords.longitude}`
+			console.log(locString)
+			document.getElementById('location').innerHTML = `${locString}<br />&nbsp;`
+			resolve({lat: position.coords.latitude, lon: position.coords.longitude})
+		})
+	})
+}

public/index.html

@@ -7,6 +7,7 @@
 	<title>Simple SPA</title>
 	<meta name="description" content="Simple SPA">
 	<meta name="author" content="Mark J Tyers">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="style.css">
 	<script type="module" src="script.js"></script>
 </head>
@@ -24,12 +25,16 @@
 			<li><a href="#home">View Lists</a></li>
 		</ul>
 	</nav>
-	<p class="message hidden"></p>
+	<aside class="hidden">
+		<p>XXX</p>
+	</aside>
 	<main>
 
 	</main>
 	<footer>
-		<p>Shared footer.</p>
+		<p id="device"></p>
+		<p id="resolution"></p>
+		<p id="location"></p>
 	</footer>
 </body>
 </html>

public/modules/home.js

@@ -1,12 +1,16 @@
 
-import { getCookie, login } from '../core.js'
+import { getCookie, login, showMessage } from '../core.js'
 
 export async function setup() {
 	try {
 		await login()
 		document.querySelector('h1').innerText = 'Home Page'
+		document.querySelector('main > button').addEventListener('click', event => {
+			console.log('adding a new note')
+			document.querySelector('main section').classList.remove('hidden')
+		})
 	} catch(err) {
-		console.log(err.message)
+		showMessage(err.message)
 		window.location.href = '/#login'
 	}
 }

public/modules/login.js

@@ -1,5 +1,5 @@
 
-import { generateToken, getCookie, setCookie } from '../core.js'
+import { generateToken, getCookie, setCookie, showMessage, getLocation } from '../core.js'
 
 export function setup() {
 	const cookie = getCookie('authorization')
@@ -30,9 +30,11 @@ async function login() {
 		if(response.status === 401) throw new Error(json.msg)
 		if(response.status === 200) {
 			setCookie('authorization', token, 1)
+			setCookie('geoID', await navigator.geolocation.watchPosition(getLocation))
+			await getLocation()
 			window.location.href = '#home'
 		}
 	} catch(err) {
-		console.log(err.message)
+		showMessage(err.message)
 	}
 }

public/modules/logout.js

@@ -1,7 +1,9 @@
 
-import { deleteCookie } from '../core.js'
+import { deleteCookie, getCookie } from '../core.js'
 
 export async function setup() {
-  deleteCookie('authorization')
-  window.location.href = '/#login'
+	navigator.geolocation.clearWatch(getCookie('geoID'))
+	deleteCookie('authorization')
+	deleteCookie('geoID')
+	window.location.href = '/#login'
 }

public/modules/register.js

@@ -1,4 +1,6 @@
 
+import { showMessage } from '../core.js'
+
 export async function setup() {
 	document.querySelector('h1').innerText = 'Register a New Account'
 	document.querySelector('form').addEventListener('submit', await registerAccount)
@@ -17,6 +19,6 @@ async function registerAccount(event) {
 		if(response.status === 422) throw new Error(`422 Unprocessable Entity: ${json.msg}`)
 		window.location.href = '/#login'
 	} catch(err) {
-		console.log(err.message)
+		showMessage(err.message)
 	}
 }

public/style.css

@@ -46,7 +46,7 @@ footer {
 	bottom: 0;
 	background-color: #DDD;
 	width: 100%;
-	padding: 1em;
+	padding: 0;
 }
 
 input {
@@ -93,12 +93,13 @@ li:hover {
 	background-color: grey;
 }
 
-.message {
-	border: 0.5em solid red;
+aside {
+	border: 0.1em solid red;
 	padding: 1em;
 	margin: 1em;
 	color: red;
 	font-size: 1em;
+	border-radius: 0.5em;
 }
 
 .hidden {
@@ -128,4 +129,95 @@ input[type="text"], input[type="email"], input[type="password"], textarea, selec
 	border: 1px solid #CCC;
 	padding: 0.5em;
 	margin-top: 0.3em;
-}
+}
+main > button {
+	position: absolute;
+	bottom: 5.5em;
+	right: 1em;
+}
+
+main > section {
+	display: absolute;
+	top: 15em;
+	width: 315px;
+	border: 2px solid #CCC;
+	padding: 1em;
+	padding-bottom: 3em;
+	margin: auto;
+}
+
+main > section h2 {
+	margin-bottom: 0.5em;
+	color: #555;
+}
+
+main > section button {
+	float: right;
+}
+
+footer {
+	position: absolute;
+	bottom: 0;
+	background-color: #DDD;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+}
+
+footer > p#device, footer > p#resolution {
+	display: inline-block;
+	height: 2em;
+	width: 2em;
+	margin: 0.3em;
+}
+
+footer > p#location {
+	display: inline-block;
+	margin: 0;
+	height: 0.7em;
+}
+
+/* ==================== DETECTS IF SCREEN SUPPORTS TOUCH ==================== */
+
+/* Detects a touch-screen device */
+@media (hover: none) and (pointer: coarse) {
+	footer > p#device {
+		background-image: url(images/tablet.png);
+		background-size: contain;
+	}
+
+}
+
+/* Detects a non-touch screen with a mouse or trackpad */
+@media (hover: hover) and (pointer: fine) {
+	footer > p#device {
+		background-image: url(images/desktop.png);
+		background-size: contain;
+	}
+}
+
+/* ======================== DETECTS THE SCREEN WIDTH ======================== */
+
+/* Narrow screen */
+@media (max-width: 400px) {
+	footer > p#resolution {
+		background-image: url(images/red.png);
+		background-size: contain;
+	}
+}
+
+/* Medium width screen */
+@media (min-width: 401px) and (max-width: 800px) {
+	footer > p#resolution {
+		background-image: url(images/amber.png);
+		background-size: contain;
+	}
+}
+
+/* Wide screen */
+@media (min-width: 801px) {
+	footer > p#resolution {
+		background-image: url(images/green.png);
+		background-size: contain;
+	}
+}

public/views/home.html

@@ -1,2 +1,12 @@
 
 <p>Home Page</p>
+<button>Add list</button>
+
+<section class="hidden">
+	<form name="note">
+		<h2>Add Note</h2>
+		<p><label for="name">Name</label><br /><input type="text" name="name" placeholder="name of note" /></p>
+		<p><label for="pass">Description</label><br /><textarea></textarea></p>
+		<p><button type="submit">Add</button></p>
+	</form>
+</section>