added working profile page. set up settings page

src/components/ProfileMenu.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { logout } from "~/composables/logout";
 
-const isAuthenticated = ref(false);
 let isOpened = ref(false);
 const menuRef = ref<HTMLElement>();
 
@@ -51,9 +50,11 @@ onMounted(() => {
         <li role="none">
           <NuxtLink class="menu-link" to="/user/profile"> Profile</NuxtLink>
         </li>
+        <!--
         <li role="none">
           <NuxtLink class="menu-link" to="/user/settings"> Settings</NuxtLink>
         </li>
+        -->
         <li
           id="logout"
           class="menu-link"

src/components/common/navigation/navbar.vue

@@ -2,7 +2,7 @@
   <div
     class="grid grid-rows-2 text-center sm:text-left sm:grid-rows-none sm:grid-cols-2 my-5 navbar w-full"
   >
-    <NuxtLink class="block" to="/admin">
+    <NuxtLink class="block" to="/">
       <h1 class="block site-title bloodseeker">Cinema Corona</h1>
     </NuxtLink>
 
@@ -15,17 +15,17 @@
       <li>
         <NuxtLink class="text-xl header-link" to="/schedule">Schedule</NuxtLink>
       </li>
-      <li>
+      <li v-if="authenticated">
         <ProfileMenu />
       </li>
     </ul>
   </div>
 </template>
 
-<script>
-export default {
-  name: "navbar",
-};
+<script lang="ts" setup>
+import { hasToken } from "~/composables/hasToken";
+
+const authenticated = computed(() => hasToken());
 </script>
 
 <style scoped></style>

src/composables/hasToken.ts

@@ -0,0 +1,6 @@
+import { useCookie } from "#app";
+
+export function hasToken() {
+  const token = useCookie("token").value;
+  return token !== null && token !== undefined && token !== "";
+}

src/composables/logout.ts

@@ -17,10 +17,3 @@ export function logout() {
     })
     .catch((err) => console.log(err));
 }
-
-onMounted(() => {
-  const token = useCookie("token").value;
-  if (!token) {
-    navigateTo("/");
-  }
-});

src/pages/user/profile.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useCookie } from "#app";
-import type { UserProfile } from "~/types/user_profile";
+import type { UserProfile } from "~/types/userProfile";
 
 const config = useRuntimeConfig();
 
@@ -29,12 +29,14 @@ const getProfile = async function () {
 
 const formatDate = function (date_string: string) {
   return new Date(date_string).toLocaleDateString();
-}
+};
 
 onMounted(getProfile);
 </script>
 
 <template>
+  <LoadingIcon v-if="loading" show-quote="true" />
+  <div v-else>
     <h2 class="page-header">Profile</h2>
     <div id="profile-card" class="movie-card neon-border">
       <div id="user-data">
@@ -48,7 +50,7 @@ onMounted(getProfile);
         <ul class="profile-details">
           <li class="user-detail">
             <label for="name">Name</label>
-          <span id="name">{{profile?.name || profile?.username}}</span>
+            <span id="name">{{ profile?.name || profile?.username }}</span>
           </li>
           <li class="user-detail">
             <label for="username">Username</label>
@@ -56,7 +58,9 @@ onMounted(getProfile);
           </li>
           <li class="user-detail">
             <label for="date-joined">Date Joined</label>
-          <span id="date-joined">{{ formatDate(profile?.date_joined || "") }}</span>
+            <span id="date-joined">{{
+              formatDate(profile?.date_joined || "")
+            }}</span>
           </li>
         </ul>
       </div>
@@ -74,6 +78,7 @@ onMounted(getProfile);
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>