Add functionality to tokens

Style more elements

server/static/gen/scripts.js

@@ -0,0 +1,6 @@
+function addFlashMessage(message,type='success'){let flask=document.createElement('p');flask.onclick=()=>flask.remove();flask.classList.add(type);flask.innerHTML=message;let close=document.createElement('span');close.innerHTML='<i class="ph-bold ph-x"></i>';flask.appendChild(close);document.querySelector('.flash').appendChild(flask);}
+function ajax(url,form,callback,method='POST'){console.log(form)
+fetch(url,{method:method,body:form,}).then(response=>response.json()).then(data=>callback(data)).catch(error=>addFlashMessage(error.error,'error'));}
+function deleteToken(id){let form=new FormData();form.append('token_id',id);ajax('/api/tokens',form,(data)=>{if(data.success){addFlashMessage(data.success,'success');document.querySelector(`#token-${id}`).remove();}else{addFlashMessage(data.error,'error');}},'DELETE');}
+function addToken(){ajax('/api/tokens',null,(data)=>{if(data.success){window.location.reload();}else{addFlashMessage(data.error,'error');}});}
+function viewToken(id){let token=document.querySelector(`#token-${id}`);let hidden=token.children[2];hidden.classList.toggle('hidden');}

server/static/js/main.js

@@ -0,0 +1,106 @@
+function addFlashMessage(message, type='success') {
+    /**
+     * Add a flash message to the page
+     *
+     * @param {string} message
+     * @return {void}
+     *
+     * @example
+     * addFlashMessage('Hello World!', 'success')
+     *
+     * @example
+     * addFlashMessage('Oopsie!', 'error')
+     */
+    let flask = document.createElement('p');
+    flask.onclick = () => flask.remove();
+    flask.classList.add(type);
+    flask.innerHTML = message;
+
+    let close = document.createElement('span');
+    close.innerHTML = '<i class="ph-bold ph-x"></i>';
+
+    flask.appendChild(close);
+    document.querySelector('.flash').appendChild(flask);
+}
+
+function ajax(url, form, callback, method='POST') {
+    /**
+     * Send a request to the server and get a response
+     * Mostly a wrapper for fetch(), since most of the
+     * requests are made with FormData and POST method
+     *
+     * @param {string} url
+     * @param {FormData} form
+     * @param {function} callback
+     * @param {string} method
+     * @return {void}
+     *
+     * @example
+     * ajax('/api', formData, callback = (data) => { console.log(data) }, 'POST')
+     */
+    console.log(form)
+    fetch(url, {
+        method: method,
+        body: form,
+    })
+        .then(response => response.json())
+        .then(data => callback(data))
+        .catch(error => addFlashMessage(error.error, 'error'));
+}
+
+function deleteToken(id) {
+    /**
+     * Delete user token
+     *
+     * @return {void}
+     * @{integer} id
+     *
+     * @example
+     * deleteToken(id)
+     */
+    let form = new FormData();
+    form.append('token_id', id);
+
+    ajax('/api/tokens', form, (data) => {
+        if (data.success) {
+            addFlashMessage(data.success, 'success');
+            document.querySelector(`#token-${id}`).remove();
+        } else {
+            addFlashMessage(data.error, 'error');
+        }
+    }, 'DELETE');
+}
+
+function addToken() {
+    /**
+     * Add a new token
+     *
+     * @return {void}
+     *
+     * @example
+     * addToken()
+     */
+    ajax('/api/tokens', null, (data) => {
+        if (data.success) {
+            window.location.reload();
+        } else {
+            addFlashMessage(data.error, 'error');
+        }
+    });
+}
+
+function viewToken(id) {
+    /**
+     * View a token
+     *
+     * @return {void}
+     * @{integer} id
+     *
+     * @example
+     * viewToken(id)
+     */
+    let token = document.querySelector(`#token-${id}`);
+    let hidden = token.children[2];
+
+    hidden.classList.toggle('hidden');
+}

server/static/sass/style.sass

@@ -12,6 +12,7 @@ $darkBlue: var(--darkBlue)
 	background-color: RGBA($color, 0.02)
 	color: RGB($color)
 	border-radius: 2px
+	border: 0 solid transparent
 	transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out
 
 	&:hover
@@ -23,7 +24,7 @@ $darkBlue: var(--darkBlue)
 \:root
 	--black: 21, 21, 21
 	--white: 232, 227, 227
-	--primary: 213, 214, 130
+	--primary: 210, 206, 97
 	--secondary: 185, 77, 77
 	--gold: 255, 222, 70
 	--silver: 229, 220, 206
@@ -66,6 +67,7 @@ body
 	flex-direction: column
 
 	background-color: rgba($darkBlue, 0.7)
+	backdrop-filter: blur(5px)
 	z-index: 2
 
 	> table
@@ -95,7 +97,7 @@ nav
 
 	> a
 		margin: auto 0.15rem
-		padding: 0.5rem 1rem
+		padding: 0.5rem 0.7rem
 
 		text-decoration: none
 		white-space: nowrap
@@ -123,15 +125,63 @@ nav
 	align-items: center
 
 	> p
-		margin: 0.4rem 0 0
+		margin: 0
 		padding: 0.75rem 1rem
 
 		width: 100%
 		position: relative
 
-		border-left: RGB($secondary) 0.25rem solid
 		background-color: RGB($darkBlue)
-		color: RGB($secondary)
+		color: RGB($primary)
+
+		transition: background-color 0.2s ease-in-out, padding 0.2s ease-in-out
+
+		> span
+			position: absolute
+			top: 0
+			left: 0
+			bottom: 0
+			width: 0.25rem
+
+			display: flex
+			justify-content: center
+			align-items: center
+
+			background-color: RGB($primary)
+			color: transparent
+
+			overflow: hidden
+			transition: width 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out
+
+			> i
+				font-size: 1.25em
+
+		&:hover
+			padding: 0.75rem 1rem 0.75rem 4rem
+			background-color: RGBA($primary, 0.1)
+			cursor: pointer
+
+			> span
+				width: 3rem
+				color: RGB($black)
+
+		&.success
+			color: RGB($primary)
+
+			> span
+				background-color: RGB($primary)
+
+			&:hover
+				background-color: RGBA($primary, 0.1)
+
+		&.error
+			color: RGB($secondary)
+
+			> span
+				background-color: RGB($secondary)
+
+			&:hover
+				background-color: RGBA($secondary, 0.1)
 
 main
 	padding: 1rem
@@ -140,6 +190,11 @@ main
 	display: flex
 	flex-direction: column
 
+	> h2
+		margin: 0 0 1rem 0
+		font-size: 1.5em
+		color: RGB($white)
+
 	.center-text
 		height: 100%
 
@@ -160,7 +215,13 @@ main
 			font-size: 1em
 			color: RGB($white)
 
-	.auth
+		> img
+			margin: 1rem auto 0
+			max-width: 100%
+			max-height: 15rem
+			border-radius: 2px
+
+	.block
 		margin-bottom: 1rem
 		padding: 1rem
 
@@ -171,17 +232,68 @@ main
 		border-radius: 2px
 
 		> h2
-			margin: 0 0 1rem 0
+			margin: 0 0 0.2rem 0
 			font-size: 1.3em
 			color: RGB($white)
 
+		> p
+			margin: 0 0 1rem 0
+			font-size: 1em
+
+		.button
+			margin: 0
+			padding: 0.5rem 0.7rem
+
+			text-decoration: none
+			white-space: nowrap
+			font-size: 0.9em
+
+			color: RGB($primary)
+
+			> i
+				font-size: 1.25em
+				display: block
+
+			@include button($white)
+
+			&.primary
+				@include button($primary)
+
+			&.secondary
+				@include button($secondary)
+
+		> table
+			width: 100%
+			border-collapse: collapse
+			> tbody > tr > td
+				padding: 0 0.5rem 0.5rem 0
+
+				text-align: left
+				font-size: 0.9em
+
+				color: RGB($white)
+
+				transition: filter 0.2s ease-in-out
+
+				&:last-child
+					width: 100%
+
+				&.hidden
+					filter: blur(5px)
+
+		&.secondary
+			border: 1px solid RGB($secondary)
+
+			> h2
+				color: RGB($secondary)
+
 	form
 		display: flex
 		flex-direction: column
 
 		> input
 			margin: 0 0 1rem 0
-			padding: 0.75rem 1rem
+			padding: 0.7rem 1rem
 
 			border: 1px solid RGB($white)
 			border-radius: 2px