From cead0f26b03999dd356d3dc1d04aafcc148b51db Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Sat, 22 May 2021 09:51:34 -0400
Subject: [PATCH] Fix token delay error during login

---
 resources/js/main.js           | 14 +++++++-------
 resources/js/panel/panel.vue   |  5 +++++
 resources/js/panel/sidebar.vue |  5 +++++
 resources/scss/main.scss       |  6 ++++++
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/resources/js/main.js b/resources/js/main.js
index d67a15e..83def40 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -20,17 +20,17 @@ function getCookie(name) {
   return (value != null) ? unescape(value[1]) : null
 }
 
-function getToken(app) {
-	fetch("/sanctum/csrf-cookie", {
+function getToken() {
+	return fetch("/sanctum/csrf-cookie", {
 		method: 'GET'
 	}).then( () => {
 		token = getCookie('XSRF-TOKEN')
+		return token
 	})
-	app.token = token
 }
 
 function login(event) {
-	fetch("/login", {
+	getToken().then(fetch("/login", {
 		method: 'POST',
 		headers: {'Content-Type': 'application/json',
 			'Accept': 'application/json',
@@ -45,9 +45,9 @@ function login(event) {
 			document.querySelector("#login_form .error").innerText =
 				"Invalid credentials."
 		}
-	})
+	}))
 	event.preventDefault()
-	event.stopPropogation()
+	// event.stopPropogation()
 }
 
 function getUser(app) {
@@ -111,7 +111,7 @@ if (window.location.pathname == '/') {
 	document.querySelector('#login_form button').addEventListener('click', login)
 	const app = createApp(RegisterArea).mount('#app')
 	// app.token = token
-	if (!token) {getToken(app)}
+	if (!token) {app.token = getToken()}
 
 	//Triggers for registration menu
 	for (let i = 0; i < registerToggles.length; i++) {
diff --git a/resources/js/panel/panel.vue b/resources/js/panel/panel.vue
index b34bfd4..0f3176e 100644
--- a/resources/js/panel/panel.vue
+++ b/resources/js/panel/panel.vue
@@ -59,8 +59,13 @@
 		</tr>
 		</tbody>
 	</table>
+	<img class="nav-btn" src="../../images/arrow-left-circle-fill.svg" alt="">
+	<img class="nav-btn" src="../../images/arrow-right-circle-fill.svg" alt="">
 	</section>
 </div>
+<div d="main" v-else-if="active === '#exit'">
+	<div class="actions"><a class="new-order" href="#orders/new">New</a></div>
+</div>
 </transition>
 </template>
 
diff --git a/resources/js/panel/sidebar.vue b/resources/js/panel/sidebar.vue
index cef6589..f5af5f6 100644
--- a/resources/js/panel/sidebar.vue
+++ b/resources/js/panel/sidebar.vue
@@ -18,6 +18,11 @@
   <path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
 </svg>
 </a>
+<a :class="{selected: active == '#exit'}" href="/panel#exit">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-door-open-fill" viewBox="0 0 16 16">
+  <path d="M1.5 15a.5.5 0 0 0 0 1h13a.5.5 0 0 0 0-1H13V2.5A1.5 1.5 0 0 0 11.5 1H11V.5a.5.5 0 0 0-.57-.495l-7 1A.5.5 0 0 0 3 1.5V15H1.5zM11 2h.5a.5.5 0 0 1 .5.5V15h-1V2zm-2.5 8c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
+</svg>
+</a>
 </nav>
 </template>
 
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index c98a514..919488f 100644
--- a/resources/scss/main.scss
+++ b/resources/scss/main.scss
@@ -821,6 +821,7 @@ main.panel {
 		color: grey;
 		height: 0;
 		overflow: hidden;
+		transition: all 0.2s;
 	}
 
 	.selected .pending-content {
@@ -843,6 +844,11 @@ main.panel {
 		margin-bottom: 3px;
 		margin-left: 2px;
 		position: absolute;
+		transition: all 0.2s;
+	}
+
+	.selected img {
+		transform: rotate(180deg);
 	}
 }