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>
+<script lang="ts" setup>
-export default {
+import { hasToken } from "~/composables/hasToken";
-  name: "navbar",
+
-};
+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,49 +29,54 @@ const getProfile = async function () {
 
 const formatDate = function (date_string: string) {
   return new Date(date_string).toLocaleDateString();
-}
+};
 
 onMounted(getProfile);
 </script>
 
 <template>
-  <h2 class="page-header">Profile</h2>
+  <LoadingIcon v-if="loading" show-quote="true" />
-  <div id="profile-card" class="movie-card neon-border">
+  <div v-else>
-    <div id="user-data">
+    <h2 class="page-header">Profile</h2>
-      <div id="profile-picture">
+    <div id="profile-card" class="movie-card neon-border">
-        <img
+      <div id="user-data">
-          alt="profile image"
+        <div id="profile-picture">
-          class="user-icon neon-border"
+          <img
-          src="https://placecage.lucidinternets.com/g/200/200"
+            alt="profile image"
-        />
+            class="user-icon neon-border"
-      </div>
+            src="https://placecage.lucidinternets.com/g/200/200"
-      <ul class="profile-details">
+          />
-        <li class="user-detail">
+        </div>
-          <label for="name">Name</label>
+        <ul class="profile-details">
-          <span id="name">{{profile?.name || profile?.username}}</span>
+          <li class="user-detail">
-        </li>
+            <label for="name">Name</label>
-        <li class="user-detail">
+            <span id="name">{{ profile?.name || profile?.username }}</span>
-          <label for="username">Username</label>
+          </li>
-          <span id="username">{{ profile?.username }}@movienight.social</span>
+          <li class="user-detail">
-        </li>
+            <label for="username">Username</label>
-        <li class="user-detail">
+            <span id="username">{{ profile?.username }}@movienight.social</span>
-          <label for="date-joined">Date Joined</label>
+          </li>
-          <span id="date-joined">{{ formatDate(profile?.date_joined || "") }}</span>
+          <li class="user-detail">
-        </li>
+            <label for="date-joined">Date Joined</label>
-      </ul>
+            <span id="date-joined">{{
-    </div>
+              formatDate(profile?.date_joined || "")
-
+            }}</span>
-    <hr class="neon-border my-5" />
-
-    <div id="extra-fields">
-      <div id="movielists">
-        <h3 class="section-header">Lists</h3>
-        <ul id="movielist-list">
-          <li v-for="list in profile?.lists">
-            <NuxtLink :to="`/lists/${list.id}`">{{ list.name }}</NuxtLink>
           </li>
         </ul>
       </div>
+
+      <hr class="neon-border my-5" />
+
+      <div id="extra-fields">
+        <div id="movielists">
+          <h3 class="section-header">Lists</h3>
+          <ul id="movielist-list">
+            <li v-for="list in profile?.lists">
+              <NuxtLink :to="`/lists/${list.id}`">{{ list.name }}</NuxtLink>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>