Acount dashboard initial state

VannaKarenina · May 24, 2023 · e196a75 · e196a75
1 parent 57e59fb
commit e196a75
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 13 deletions.
diff --git a/components/base/NavigationBar.vue b/components/base/NavigationBar.vue
@@ -8,8 +8,10 @@
                     <span class="tw-self-center tw-text-xl tw-font-semibold tw-whitespace-nowrap dark:tw-text-white">Plugin Relay</span>
                 </a>
                 <div class="tw-flex tw-items-center lg:tw-order-2">
-                    <a v-if="!store.isAuthenticated" href="#" @click="openModal" class="tw-text-gray-800 dark:tw-text-white hover:tw-bg-gray-50 tw-font-medium tw-rounded-lg tw-text-sm tw-px-4 lg:tw-px-5 tw-py-2 lg:tw-py-2.5 tw-mr-2 dark:hover:tw-bg-gray-700">Log in</a>
-                    <a href="#" class="tw-text-white tw-bg-violet-800 hover:tw-bg-violet-900 tw-font-medium tw-rounded-lg tw-text-sm tw-px-4 lg:tw-px-5 tw-py-2 lg:tw-py-2.5 tw-mr-2 dark:tw-bg-violet-600 dark:hover:tw-bg-violet-700">Get started</a>
+                  <a v-if="!store.isAuthenticated" href="#" @click="openModal" class="tw-text-gray-800 dark:tw-text-white hover:tw-bg-gray-50 tw-font-medium tw-rounded-lg tw-text-sm tw-px-4 lg:tw-px-5 tw-py-2 lg:tw-py-2.5 tw-mr-2 dark:hover:tw-bg-gray-700">Log in</a>
+                  <NuxtLink v-else-if="!isPanel" to="/user/dashboard" class="tw-text-gray-800 dark:tw-text-white hover:tw-bg-gray-50 tw-font-medium tw-rounded-lg tw-text-sm tw-px-4 lg:tw-px-5 tw-py-2 lg:tw-py-2.5 tw-mr-2 dark:hover:tw-bg-gray-700">Panel</NuxtLink>
+                  <a v-else href="#" @click="logOut" class="tw-text-gray-800 dark:tw-text-white hover:tw-bg-gray-50 tw-font-medium tw-rounded-lg tw-text-sm tw-px-4 lg:tw-px-5 tw-py-2 lg:tw-py-2.5 tw-mr-2 dark:hover:tw-bg-gray-700">Sign Out</a>
+                  <a v-if="!isPanel" href="#" class="tw-text-white tw-bg-violet-800 hover:tw-bg-violet-900 tw-font-medium tw-rounded-lg tw-text-sm tw-px-4 lg:tw-px-5 tw-py-2 lg:tw-py-2.5 tw-mr-2 dark:tw-bg-violet-600 dark:hover:tw-bg-violet-700">Get started</a>
                     <button data-collapse-toggle="mobile-menu-2" type="button" class="tw-inline-flex tw-items-center tw-p-2 tw-ml-1 tw-text-sm tw-text-gray-500 tw-rounded-lg lg:tw-hidden hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-gray-200 dark:tw-text-gray-400 dark:hover:tw-bg-gray-700 dark:focus:tw-ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
                         <span class="tw-sr-only">Open main menu</span>
                         <svg class="tw-w-6 tw-h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
@@ -27,7 +29,7 @@
         </div>
 
       <Modal v-if="showModal" @close="closeModal">
-        <signin v-if="loginModalState == 1" @close="signUpState" @verify="verifyModal"/>
+        <signin v-if="loginModalState == 1" @close="signUpState" @verify="verifyModal" @redirect="redirect"/>
         <signup v-if="loginModalState ==2" @close="signInState" @verify="verifyModal"/>
         <verify :email="verificationEmail" v-if="loginModalState == 3" @close="signInState"/>
       </Modal>
@@ -86,6 +88,16 @@ export default defineComponent({
         }
     },
     methods: {
+      redirect() {
+        this.closeModal()
+      },
+      logOut() {
+        this.store.logout()
+        navigateTo('/');
+      },
+      isPanel() {
+        return this.route.path != '/user/dashboard';
+      },
       signUpState() {
         this.loginModalState = 2
       },

diff --git a/components/base/SideNav.vue b/components/base/SideNav.vue
@@ -0,0 +1,59 @@
+<script lang="ts">
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: "SideNav"
+})
+</script>
+
+<template>
+  <div
+      id="view"
+      class="tw-h-full tw-flex tw-flex-row"
+  >
+    <div
+        id="sidebar"
+        class="tw-bg-slate-700 tw-h-screen md:tw-block tw-shadow-xl tw-px-3 tw-w-30 md:tw-w-60 lg:tw-w-60 tw-overflow-x-hidden tw-transition-transform tw-duration-300 tw-ease-in-out"
+    >
+      <div class="tw-space-y-6 md:tw-space-y-10 tw-mt-10">
+        <div id="profile" class="tw-space-y-3">
+          <img
+              src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
+              alt="Avatar user"
+              class="tw-w-10 md:tw-w-16 tw-rounded-full tw-mx-auto"
+          />
+          <div>
+            <h2
+                class="tw-font-medium tw-text-xs md:tw-text-sm tw-text-center tw-text-white"
+            >
+              Eduard Pantazi
+            </h2>
+            <p class="tw-text-xs tw-text-white tw-text-center">Administrator</p>
+          </div>
+        </div>
+        <div id="menu" class="tw-flex tw-flex-col tw-space-y-2">
+          <a
+              href=""
+              class="tw-text-sm tw-font-medium tw-text-white tw-py-2 tw-px-2 hover:tw-bg-teal-500 hover:tw-text-white hover:tw-text-base tw-rounded-md tw-transition tw-duration-150 tw-ease-in-out"
+          >
+            <svg
+                class="tw-w-6 tw-h-6 tw-fill-current tw-inline-block"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                  d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
+              ></path>
+            </svg>
+            <span class="">Dashboard</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/login/signin.vue b/components/login/signin.vue
@@ -6,7 +6,8 @@ export default defineComponent({
   name: "signin",
   setup() {
     const store = useAuthStore();
-    return {store}
+    const route = useRoute();
+    return {store,route}
   },
   methods: {
     changeToSignUp() {
@@ -21,6 +22,10 @@ export default defineComponent({
       try {
         if (payload.code != 800) {
           this.store.login(payload.access_token);
+          if (this.route.path != '/user/dashboard') {
+            this.$emit('redirect')
+            return navigateTo('/user/dashboard')
+          }
         } else {
           this.$emit('verify', this.loginPayload.loginOrEmail)
         }

diff --git a/components/view/AllGames.vue b/components/view/AllGames.vue
@@ -27,7 +27,7 @@ export default defineComponent({
 </script>
 
 <template>
-    <div>
+    <div class="tw-mb-3">
         <div class="tw-flex tw-justify-center tw-mt-12">
             <h1 class="tw-text-white tw-text-2xl">Explore thousands of mods for your favorite games</h1>
         </div>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -13,7 +13,7 @@ export default defineComponent({
   <div class="tw-flex tw-min-h-screen tw-flex-col tw-bg-slate-950 sm:tw-bg-slate-950 md:tw-bg-slate-950 lg:tw-bg-slate-950">
       <NavigationBar class="tw-z-50"/>
       <slot/>
-      <FooterBar class="tw-mt-5"/>
+      <FooterBar class=""/>
   </div>
 </template>
 

diff --git a/middleware/auth.ts b/middleware/auth.ts
@@ -1,13 +1,10 @@
 import { useAuthStore } from '~/stores/auth';
 
 export default defineNuxtRouteMiddleware(async (to: any, from: any) => {
-
     const store = useAuthStore();
 
-    if(store.isAuthenticated) {
-        return navigateTo(to);
-    } else {
-        return navigateTo('/')
+    if(!store.isAuthenticated) {
+        return navigateTo('/');
     }
 
 })
diff --git a/pages/user/dashboard.vue b/pages/user/dashboard.vue
@@ -1,8 +1,14 @@
 <script lang="ts">
 import {defineComponent} from "vue";
 import {useAuthStore} from "~/stores/auth";
-
+import SideNav from "~/components/base/SideNav.vue";
+definePageMeta({
+  middleware: [
+      "auth"
+  ]
+})
 export default defineComponent({
+  components: {SideNav},
   setup() {
     const store = useAuthStore();
     return {store}
@@ -11,7 +17,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="tw-text-white">{{store.token}}</div>
+  <div class="tw-flex tw-flex-row tw-max-h-screen">
+    <SideNav/>
+    kek
+  </div>
 </template>
 
 <style scoped>