Debug

src/App.vue

@@ -23,9 +23,16 @@ import DarkModeToggle from "@/components/DarkmodeToggle.vue";
           >
             login
           </router-link>
+          <router-link
+            v-if="$api.isAuthorized()"
+            to="/me"
+            class="btn btn-outline"
+          >
+            me
+          </router-link>
           <DarkModeToggle class="mx-2" v-slot="{ state }">
-            <i v-if="state" class="bi-moon"></i>
+            <i v-if="state" class="bi-moon"/>
-            <i v-else class="bi-sun"></i>
+            <i v-else class="bi-sun"/>
           </DarkModeToggle>
         </div>
       </nav>
@@ -42,7 +49,6 @@ import DarkModeToggle from "@/components/DarkmodeToggle.vue";
 nav {
   a {
     font-weight: bold;
-
     &.router-link-exact-active {
       text-decoration: underline;
     }

src/router/index.ts

@@ -8,15 +8,6 @@ const routes: Array<RouteRecordRaw> = [
     name: "home",
     component: HomeView,
   },
-  {
-    path: "/connect",
-    name: "connect",
-    component: () =>
-      import(/* webpackChunkName: "connect" */ "../views/ConnectPage.vue"),
-    meta: {
-      requireAuth: true,
-    },
-  },
   {
     path: "/me",
     name: "me",

src/views/AuthCallbackPage.vue

@@ -17,8 +17,8 @@ const route = useRoute();
           <div class="alert alert-success">
             Authorization completed
           </div>
-          <router-link to="/connect" class="btn btn-primary">
+          <router-link to="/me" class="btn btn-primary">
-            Join a Session
+            Go to my Profile
           </router-link>
         </PromiseResolver>
       </div>

src/views/ConnectPage.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import PromiseResolver from "@/components/PromiseResolver.vue";
-import CurrentlyPlaying from "@/components/CurrentlyPlaying.vue";
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-</script>
-
-<template>
-  <div class="about">
-    <h1>Connect</h1>
-    <div class="card">
-      <div class="card-header">
-        test
-      </div>
-      <div class="card-body">
-        <PromiseResolver
-          :promise="$api.testConnection()"
-          v-slot="{ data }"
-        >
-          {{ data }}
-        </PromiseResolver>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header">
-        role
-      </div>
-      <div class="card-body">
-        <PromiseResolver
-          :promise="$api.getRole()"
-          v-slot="{ data }"
-        >
-          {{ data }}
-        </PromiseResolver>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header">
-        currently playing
-      </div>
-      <div class="card-body">
-        <PromiseResolver
-          :promise="$api.getCurrentlyPlaying()"
-          v-slot="{ data, update }"
-          class="col-md-4"
-        >
-          {{ data }}
-          <CurrentlyPlaying v-if="data.currentlyPlaying" :currentlyPlaying="data.currentlyPlaying" />
-          <button @click="update($api.getCurrentlyPlaying())" class="btn btn-secondary">update</button>
-        </PromiseResolver>
-      </div>
-    </div>
-  </div>
-</template>

src/views/HomePage.vue

@@ -4,5 +4,7 @@
     <p>
       listen to music with your friends
     </p>
+    <router-link v-if="!$api.isAuthorized()" to="/auth" class="btn btn-primary">Get started</router-link>
+    <router-link v-else to="/me" class="btn btn-primary">Go to my profile</router-link>
   </div>
 </template>

src/views/MePage.vue

@@ -20,7 +20,7 @@ onBeforeUnmount(() => {
 <template>
   <div>
     <h1>Me</h1>
-    <h2>Currently Listening to</h2>
+    <h2>Currently listening to</h2>
     <PromiseResolver
       :promise="userInfo"
       v-slot="{ data: { currentlyPlaying } }"
@@ -41,25 +41,38 @@ onBeforeUnmount(() => {
           </div>
           <div class="card-body">
             <b>Host</b>
-            <div class="my-2">
+            <div class="row">
-              <img :src="session.host.images[0].url" :alt="session.host.displayName" :title="session.host.displayName" class="rounded-circle userThumbnail">
+              <router-link
+                class="col-auto my-2 btn"
+                :to="`/user/${ session.host.id }`"
+              >
+                <img
+                  v-if="session.host.images[0]?.url"
+                  :src="session.host.images[0]?.url"
+                  :alt="session.host.displayName"
+                  :title="session.host.displayName"
+                  class="rounded-circle userThumbnail"
+                />
+                <i v-else class="bi-person-circle userThumbnail" :title="session.host.displayName" />
+              </router-link>
             </div>
             <b>Clients</b>
             <div class="row">
-              <div
+              <router-link
                 v-for="client in session.clients"
                 :key="client"
-                class="col-auto"
+                class="col-auto btn"
+                :to="`/user/${ client.id }`"
               >
                 <img
-                  v-if="client.images[0]?.src"
+                  v-if="client.images[0]?.url"
-                  :src="client.images[0]?.src"
+                  :src="client.images[0]?.url"
                   :alt="client.displayName"
                   :title="client.displayName"
                   class="userThumbnail rounded-circle"
                 />
-                <i class="bi-person-circle userThumbnail" :title="client.displayName"/>
+                <i v-else class="bi-person-circle userThumbnail" :title="client.displayName" />
-              </div>
+              </router-link>
             </div>
           </div>
           <div class="card-footer">

src/views/UserPage.vue

@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
           <div class="card-body">
             <div class="row">
               <div class="col-4">
-                <img :src="user.images[0].url" alt="user image" class="card-img">
+                <img :src="user.images[0]?.url" alt="user image" class="card-img">
               </div>
               <div class="col">
                 <p>{{ user.totalFollowers }} followers on Spotify</p>