adding loggedIn to auth

nginx/vue/public/css/styles.css

@@ -1,7 +1,12 @@
 /* PRINTING */
 @media print {
-    .no-print {
+    .no-print,
+    .no-print * {
         display: none !important;
+        margin: 0px;
+        padding: 0px;
+        width: 0x;
+        height: 0px;
     }
 }
 /* END OF PRINTING */
@@ -82,6 +87,7 @@ button {
 /* END OF ELEMENTS */
 
 /* CLASSES */
+
 .img-stamp {
     width: 99px;
     height: 55px;

nginx/vue/src/App.vue

@@ -5,7 +5,7 @@ import Footer from "@/components/Footer.vue";
 </script>
 
 <template>
-    <Navbar style="height: 5vh" />
+    <Navbar style="height: 5vh" class="no-print" />
 
     <RouterView />
 

nginx/vue/src/components/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
     <nav class="no-print flex-row">
-        <RouterLink to="/"><h1>HOME</h1></RouterLink>
+        <RouterLink to="/"><p>HOME</p></RouterLink>
         <!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> -->
     </nav>
 </template>
@@ -9,4 +9,7 @@
 nav {
     height: 10vh;
 }
+h1 {
+    height: 100%;
+}
 </style>

nginx/vue/src/components/admin/CreateUser.vue

@@ -5,7 +5,6 @@ import { useAuthStore } from "@/stores/auth";
 const auth = useAuthStore();
 const username = ref("");
 const password = ref("");
-const loggedIn = computed(() => !!auth.user.username);
 
 function handleLogin() {
     auth.createUser(username.value, password.value);
@@ -13,7 +12,7 @@ function handleLogin() {
 </script>
 
 <template>
-    <div v-if="loggedIn">
+    <div v-if="auth.loggedIn">
         <h1>Logged in</h1>
         <p>{{ auth.user.ID }}</p>
         <p>{{ auth.user.username }}</p>

nginx/vue/src/components/admin/Login.vue

@@ -5,7 +5,6 @@ import { useAuthStore } from "@/stores/auth";
 const auth = useAuthStore();
 const username = ref("");
 const password = ref("");
-const loggedIn = computed(() => !!auth.user.username);
 
 function handleLogin() {
     auth.logIn(username.value, password.value);
@@ -17,7 +16,7 @@ function handleLogout() {
 </script>
 
 <template>
-    <div v-if="loggedIn">
+    <div v-if="auth.loggedIn">
         <h1>Logged in</h1>
         <p>{{ auth.user.ID }}</p>
         <p>{{ auth.user.username }}</p>

nginx/vue/src/stores/auth.js

@@ -6,6 +6,8 @@ export const useAuthStore = defineStore("auth", () => {
   const user = ref({});
   checkToken();
 
+  const loggedIn = computed(() => !!auth.user.username);
+
   async function logOut() {
     try {
       const res = await axios.post("/api/auth/logout");
@@ -57,5 +59,13 @@ export const useAuthStore = defineStore("auth", () => {
     }
   }
 
-  return { user, checkToken, logIn, refreshToken, logOut, createUser };
+  return {
+    user,
+    checkToken,
+    logIn,
+    refreshToken,
+    logOut,
+    createUser,
+    loggedIn,
+  };
 });

nginx/vue/src/views/Home.vue

@@ -11,7 +11,7 @@ import Watching from "@/components/home/Watching.vue";
 </script>
 
 <template>
-    <main class="center-content flex-col">
+    <main class="center-content flex-col bg-tile">
         <div class="a4page-portrait bdr-1 grid">
             <Intro class="intro bdr-primary bg-primary" />
             <Listening class="listening bdr-primary bg-primary" />