From 5ed5bbf6fef0a6da9f49100cd65b00052ea06fe4 Mon Sep 17 00:00:00 2001
From: David Ludwig <davidludwigii@gmail.com>
Date: Tue, 20 Apr 2021 19:56:28 -0500
Subject: [PATCH] Added side nav and admin routes

---
 src/app/App.vue                        | 12 +++--
 src/app/components/SideNav.vue         | 71 ++++++++++++++++++++++++++
 src/app/routes/index.ts                | 38 ++++++++++++--
 src/app/store/getters.ts               | 20 +++++++-
 src/app/store/mutations.ts             |  2 +-
 src/app/views/Dashboard.vue            | 16 ++++++
 src/app/views/admin/Admin.vue          |  3 ++
 src/app/views/admin/AdminDashboard.vue |  3 ++
 8 files changed, 153 insertions(+), 12 deletions(-)
 create mode 100644 src/app/components/SideNav.vue
 create mode 100644 src/app/views/Dashboard.vue
 create mode 100644 src/app/views/admin/Admin.vue
 create mode 100644 src/app/views/admin/AdminDashboard.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index dba0e1b..1f40cfc 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,19 +1,23 @@
 <template>
-	<div class="min-h-full p-4 flex flex-col">
-		<router-view/>
+	<div class="min-h-full flex">
+		<side-nav class="flex-shrink-0"/>
+		<div class="min-h-full p-4 flex flex-col flex-grow">
+			<router-view/>
+		</div>
 	</div>
-	<!-- <app-modal/> -->
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { Action, useStore } from "./store";
 import AppModal from "./components/AppModals.vue";
+import SideNav from "./components/SideNav.vue";
 
 export default defineComponent({
 	name: "App",
 	components: {
-		AppModal
+		AppModal,
+		SideNav
 	},
 	setup() {
 		const store = useStore();
diff --git a/src/app/components/SideNav.vue b/src/app/components/SideNav.vue
new file mode 100644
index 0000000..122b5eb
--- /dev/null
+++ b/src/app/components/SideNav.vue
@@ -0,0 +1,71 @@
+<template>
+	<nav v-if="$store.getters.isAuthenticated" class="w-72 flex flex-col bg-white shadow-lg">
+		<div class="brand">AUTOPLEX</div>
+		<div class="mt-4 text-center">
+			<div class="user"><i class="fas opacity-40" :class="{'fa-user': !isAdmin, 'fa-user-tie': isAdmin}"></i></div>
+			<div class="font-black text-lg opacity-80">{{ userName }}</div>
+			<div class="text-xs opacity-60">{{ isAdmin ? "Admin" : "Plex Member" }}</div>
+		</div>
+		<ul class="mt-4 text-gray-800 links">
+			<li v-if="isAdmin">
+				<router-link :to="{ name: 'Admin' }">
+					<span><i class="fas fa-cog"></i></span>
+					<div>Admin</div>
+				</router-link>
+			</li>
+			<li>
+				<router-link :to="{ name: 'Dashboard' }">
+					<span><i class="fas fa-chart-pie"></i></span>
+					<div>Dashboard</div>
+				</router-link>
+			</li>
+			<li>
+				<router-link :to="{ name: 'Search' }">
+					<span><i class="fas fa-search"></i></span>
+					<div>Search</div>
+				</router-link>
+			</li>
+		</ul>
+		<div class="mt-auto p-4">
+			<router-link class="block p-2 text-center  rounded-full shadow-md text-white bg-indigo-500"
+				:to="{ name: 'Logout' }">
+				Logout
+			</router-link>
+		</div>
+	</nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { mapGetters } from "vuex";
+
+export default defineComponent({
+	computed: {
+		...mapGetters([
+			"userName",
+			"isAdmin"
+		])
+	}
+});
+</script>
+
+<style lang="postcss">
+nav > .brand {
+	@apply mt-4 h-12 flex justify-center items-center text-4xl font-thin;
+}
+nav .user {
+	@apply w-20 h-20 mx-auto rounded-full flex justify-center items-end bg-gray-200 text-6xl overflow-hidden shadow-sm;
+}
+nav .user > i {
+	line-height: 3.7rem;
+}
+nav > .links a {
+	@apply py-3 px-8 flex space-x-4 hover:bg-gray-100;
+}
+nav > .links .router-link-active {
+	@apply bg-indigo-500 text-white shadow-md hover:bg-indigo-500 cursor-default;
+}
+nav > .links span {
+	@apply w-5
+}
+</style>
diff --git a/src/app/routes/index.ts b/src/app/routes/index.ts
index b2f27ce..d51e82e 100644
--- a/src/app/routes/index.ts
+++ b/src/app/routes/index.ts
@@ -25,6 +25,17 @@ function requiresAuth(to: RouteLocationNormalized, from: RouteLocationNormalized
     next();
 }
 
+/**
+ * Check if the user is an authenticated admin, redirect otherwise
+ */
+function requiresAdmin(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {
+    if (store.getters.isAuthenticated && !store.getters.isAdmin) {
+        next({ name: "Home" });
+        return;
+    }
+    next();
+}
+
 /**
  * Fetch request providing authentication and logout upon unauthorized requests
  */
@@ -55,11 +66,13 @@ const routes: RouteRecordRaw[] = [
     {
         path: "/",
         name: "Home",
-        component: {
-            beforeRouteEnter(to, from, next) {
-                next({ name: "Search" });
-            }
-        }
+        redirect: to => ({ name: "Dashboard" })
+    },
+    {
+        path: "/dashboard",
+        name: "Dashboard",
+        component: () => import("../views/Dashboard.vue"),
+        beforeEnter: requiresAuth
     },
     {
         path: "/search",
@@ -75,6 +88,21 @@ const routes: RouteRecordRaw[] = [
             }
         ]
     },
+    {
+        path: "/admin",
+        name: "Admin",
+        redirect: to => ({ name: "AdminDashboard" }),
+        component: () => import("../views/admin/Admin.vue"),
+        beforeEnter: requiresAdmin,
+        children: [
+            {
+                path: "dashboard",
+                name: "AdminDashboard",
+                component: () => import("../views/admin/AdminDashboard.vue"),
+                props: true
+            }
+        ]
+    },
     {
         path: "/login",
         name: "Login",
diff --git a/src/app/store/getters.ts b/src/app/store/getters.ts
index 10dc9ce..0751bfc 100644
--- a/src/app/store/getters.ts
+++ b/src/app/store/getters.ts
@@ -2,9 +2,11 @@ import { GetterTree } from "vuex";
 import { IState } from "./state";
 
 export type GettersTypes = {
+	isAdmin        (state: IState): boolean,
 	isAuthenticated(state: IState): boolean,
-	storedToken(): string | null,
-	token(state: IState): string | null
+	storedToken    ()             : string | null,
+	token          (state: IState): string | null,
+	userName       (state: IState): string | null
 }
 
 export const getters: GettersTypes & GetterTree<IState, IState> = {
@@ -15,6 +17,13 @@ export const getters: GettersTypes & GetterTree<IState, IState> = {
 		return state.user != null;
 	},
 
+	/**
+	 * Determine if the user is an admin
+	 */
+	isAdmin(state: IState) {
+		return state.user?.isAdmin ?? false;
+	},
+
 	/**
 	 * Retrieve the stored token
 	 */
@@ -27,5 +36,12 @@ export const getters: GettersTypes & GetterTree<IState, IState> = {
 	 */
 	token(state: IState) {
 		return state.user?.token ?? null;
+	},
+
+	/**
+	 * Get the user's name (assumes authenticated)
+	 */
+	userName(state: IState) {
+		return state.user?.name.split(" ")[0] ?? null;
 	}
 };
diff --git a/src/app/store/mutations.ts b/src/app/store/mutations.ts
index cd91026..ed4a5cc 100644
--- a/src/app/store/mutations.ts
+++ b/src/app/store/mutations.ts
@@ -65,7 +65,7 @@ export const mutations: MutationsTypes & MutationTree<IState> = {
 			state.user = {
 				id     : user.id,
 				name   : user.name,
-				isAdmin: false,
+				isAdmin: user.isAdmin,
 				token  : token
 			}
 		} catch(e) {
diff --git a/src/app/views/Dashboard.vue b/src/app/views/Dashboard.vue
new file mode 100644
index 0000000..11cb409
--- /dev/null
+++ b/src/app/views/Dashboard.vue
@@ -0,0 +1,16 @@
+<template>
+	<div class="w-full sm:max-w-sm sm:mx-auto sm:my-auto p-6 space-y-4 bg-white rounded-lg shadow-md">
+		<movie-poster src=""/>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import MoviePoster from "../components/MoviePoster.vue";
+
+export default defineComponent({
+	components: {
+		MoviePoster
+	}
+});
+</script>
diff --git a/src/app/views/admin/Admin.vue b/src/app/views/admin/Admin.vue
new file mode 100644
index 0000000..233d571
--- /dev/null
+++ b/src/app/views/admin/Admin.vue
@@ -0,0 +1,3 @@
+<template>
+	<router-view/>
+</template>
diff --git a/src/app/views/admin/AdminDashboard.vue b/src/app/views/admin/AdminDashboard.vue
new file mode 100644
index 0000000..53236e4
--- /dev/null
+++ b/src/app/views/admin/AdminDashboard.vue
@@ -0,0 +1,3 @@
+<template>
+	<div>Admin dashboard</div>
+</template>