Updates

src/App.vue

@@ -13,7 +13,7 @@
     <b-spinner v-if="loading" class="spinner-centered mt-5" />
 
     <template v-else>
-      <page-header />
+      <page-header v-if="showPageHeader" />
       <router-view class="viewport" />
       <keyboard-shortcuts-modal />
       <markdown-cheatsheet />
@@ -57,6 +57,12 @@ export default {
     ...mapState(['user', 'settings', 'sessionExpired', 'platforms', 'games']),
     ...mapGetters(['darkTheme', 'isVerticalNav', 'navPosition']),
 
+    showPageHeader() {
+      if (['auth', 'home'].includes(this.$route.name) && !this.user) return false;
+      
+      return Boolean(this.user) || this.isPublicRoute;
+    },
+
     style() {
       const backgroundImage = ['game', 'board', 'profile'].includes(this.$route?.name) && this.backgroundImageUrl
         ? `background-image: url('${this.backgroundImageUrl}');`

src/components/Dock/PageDock.vue

@@ -4,13 +4,14 @@
 <template>
   <div class="main-menu h-100 w-100 d-flex" :class="{ 'd-flex flex-column': isVerticalNav }">
     <b-button
+      v-if="!user"
       v-b-tooltip.hover.auto="{ delay: { show: 500, hide: 50 } }"
       v-bind="dockDropdownProps"
       title="Home"
       class="position-relative"
       :to="{ name: 'home' }"
     >
-      <div
+      <!-- <div
         v-if="status"
         class="position-absolute w-100 h-100 rounded d-flex align-items-center justify-content-center"
         :class="statusClass"
@@ -31,7 +32,7 @@
           v-else-if="status === 'ERROR'"
           class="fa-solid fa-fw fa-times"
         />
-      </div>
+      </div> -->
       
       <img
         src="/logo.png"

src/components/Dock/ProfileDockDropdown.vue

@@ -16,10 +16,11 @@
             rounded
           />
 
-          <i
+          <b-img
             v-else
-            class="fa fa-solid fa-user fa-fw"
-            aria-hidden
+            src="/img/dock-icons/profile.png"
+            alt="wikipedia"
+            width="24"
           />
         </template>
       </template>

src/components/Dock/TagsDockDropdown.vue

@@ -1,3 +1,5 @@
+<!-- TODO: fix tag buttons -->
+<!-- TODO: add watcher for tag id to reload toag -->
 <template>
   <b-dropdown
     v-if="user"
@@ -8,12 +10,11 @@
     <template #button-content>
       <img
         src="/img/dock-icons/tags.png"
-        alt="wikipedia"
         width="24"
       />
     </template>
 
-    <b-dropdown-text
+    <!-- <b-dropdown-text
         v-for="({ textColor, bgColor, name }, index) in tags"
         :key="name"
         block
@@ -22,7 +23,7 @@
         @click="$router.push({ name: 'tag.edit', params: { id: index } })"
       >
       <span :style="`color: ${textColor}`">{{ name }}</span>
-    </b-dropdown-text>
+    </b-dropdown-text> -->
 
     <!-- <b-dropdown-item
       :to="{ name: 'tags' }"
@@ -31,6 +32,17 @@
       <span class="ml-2">My tags</span>
     </b-dropdown-item> -->
 
+    <b-dropdown-item
+      v-if="user"
+      :to="{ name: 'tags' }"
+    >
+      <img
+        src="/img/dock-icons/tags.png"
+        width="16"
+      />
+      <span class="ml-2">My Tags</span>
+    </b-dropdown-item>
+    
     <b-dropdown-item
       v-if="user"
       :to="{ name: 'tag.create' }"
@@ -38,6 +50,13 @@
       <i class="fa-regular fa-plus fa-fw" />
       <span class="ml-2">Add tag</span>
     </b-dropdown-item>
+
+    <b-dropdown-item
+      v-if="user"
+    >
+      <i class="fa-regular fa-plus fa-fw" />
+      <span class="ml-2">Tag game</span>
+    </b-dropdown-item>
   </b-dropdown>
 </template>
 

src/components/Lists/KanbanList.vue

@@ -3,9 +3,11 @@
     :class="['list rounded pr-2', listView, { dragging, 'unique': singleList, 'pr-3': isLastList && isPublicBoard }]"
     :id="listIndex"
   >
+    <!-- :bg-variant="darkTheme ? 'dark' : 'light'" -->
     <b-card
       no-body
-      :bg-variant="darkTheme ? 'dark' : 'light'"
+      bg-variant="transparent"
+      content-class="bg-danger"
       :text-variant="darkTheme ? 'light' : 'dark'"
     >
       <b-dropdown
@@ -319,6 +321,7 @@ export default {
   // max-height: calc(100vh - 200px);
   // min-height: 200px;
   width: calc(300px + 1rem);
+
   // overflow-y: auto;
 
   @media(max-width: 400px) {

src/components/PageHeader.vue

@@ -64,7 +64,7 @@ export default {
 nav {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--light);
+  // border-bottom: 1px solid var(--light);
   border-radius: .5rem;
   margin: .5rem;
   width: calc(100% - 2rem);
@@ -87,16 +87,16 @@ nav {
   }
 
   &.nav-bottom {
-    border-bottom: 0;
+    // border-bottom: 0;
     bottom: 0;
     margin: .5rem 1rem;
-    border-top: 1px solid var(--light);
+    // border-top: 1px solid var(--light);
   }
 
   &.nav-left {
     border: 0;
     left: 0;
-    border-right: 1px solid var(--light);
+    // border-right: 1px solid var(--light);
   }
 
   &.nav-right {

src/pages/AuthPage.vue

@@ -4,7 +4,6 @@
 
     <p class="small">
       {{ authDescription }}
-      <br />
       <b-link @click="newUser = !newUser">{{ authAction }}</b-link>
     </p>
 
@@ -22,6 +21,7 @@
       id="email"
       type="email"
       class="mb-3"
+      autocomplete="email"
       placeholder="Email"
     />
 
@@ -30,6 +30,7 @@
       class="mb-3"
       id="password"
       type="password"
+      autocomplete="new-password"
       placeholder="Password"
     />
 
@@ -52,13 +53,9 @@
     >
       <img
         :src="`img/google-sign-${newUser ? 'up' : 'in'}-button-light.svg`"
-        alt="Sign up with Google"
+        alt="Sign in with Google"
       />
     </b-button>
-
-
-
-    <section v-show="!loading" id="auth" class="py-2" />
   </div>
 </template>
 
@@ -94,13 +91,13 @@ export default {
 
     authDescription() {
       return this.newUser
-        ? 'Create an account below. Already have an account?'
-        : 'Please login below. Need an account?';
+        ? 'Already have an account?'
+        : 'Need an account?';
     },
 
     authAction() {
       return this.newUser
-        ? 'Login to your account'
+        ? 'Login'
         : 'Create account';
     },
   },
@@ -138,18 +135,20 @@ export default {
         });
     },
 
-    loginWithEmail() {
-      this.loading = true;
-      const auth = getAuth(app);
+    async loginWithEmail() {
+      try {
+        this.loading = true;
+        const auth = getAuth(app);
 
-      signInWithEmailAndPassword(auth, this.email, this.password)
-        .then(({ user }) => {
-          this.signInSuccess(user)
-        })
-        .catch((error) => {
-          this.handleError(error.code)
-          this.loading = false;
-        });
+        const data = await signInWithEmailAndPassword(auth, this.email, this.password)
+
+        console.log('login with email data', data);
+
+        this.signInSuccess(data.user);
+      } catch (error) {
+        this.handleError(error.code)
+        this.loading = false;
+      }
     },
 
     loginWithGoogle() {
@@ -191,7 +190,10 @@ export default {
 
       getRedirectResult(auth)
         .then((result) => {
-          // console.log('getRedirectResult', result);
+          if (!result) return;
+
+          console.log('result', result);
+
           // This gives you a Google Access Token. You can use it to access Google APIs.
           const credential = GoogleAuthProvider.credentialFromResult(result);
           // console.log('credential', credential);
@@ -206,6 +208,7 @@ export default {
           // IdP data available using getAdditionalUserInfo(result)
           // ...
         }).catch((error) => {
+          console.log('error getRedirectResult', error);
           // Handle Errors here.
           const errorCode = error.code;
           const errorMessage = error.message;

src/pages/EditTagPage.vue

@@ -1,19 +1,17 @@
 <template lang="html">
   <section>
     <b-container>
-      <portal to="pageTitle">
-        <b-button
-          v-if="tag.name"
-          rounded
-          class="float-right"
-          variant="transparent"
-          :style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
-        >
-          {{ tag.name }}
-        </b-button>
+      <b-button
+        v-if="tag.name"
+        rounded
+        class="float-right"
+        variant="transparent"
+        :style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
+      >
+        {{ tag.name }}
+      </b-button>
 
-        <h3 v-else-if="!loading">Edit tag</h3>
-      </portal>
+      <h3 v-else-if="!loading">Edit tag</h3>
 
       <game-selector
         :filter="tag.games"
@@ -154,6 +152,12 @@ export default {
     },
   },
 
+  watch: {
+    tagIndex(oldId, newId) {
+      this.load();
+    },
+  },
+
   async mounted() {
     this.load();
   },
@@ -175,12 +179,18 @@ export default {
     },
 
     async load() {
+      try {
+
+      } catch (error) {
+
+      }
+
       this.loading = true;
       await this.$store.dispatch('LOAD_TAGS');
 
       const { tags, tagIndex } = this;
 
-      this.tag = JSON.parse(JSON.stringify(tags[tagIndex]));
+      this.tag = JSON.parse(JSON.stringify(tags?.[tagIndex]));
 
       if (this.tag?.games?.length > 0) {
         await this.$store.dispatch('LOAD_IGDB_GAMES', this.tag.games);

src/pages/HomePage.vue

@@ -1,7 +1,15 @@
 <template lang="html">
   <div class="text-center">
-    <h1 class="mt-5 mb-2">Gamebrary</h1>
-    <h2 class="mb-5">Elevate Your Play, Organize Your Way!</h2>
+    <h1 class="mb-2">Gamebrary</h1>
+    <h2 class="mb-3">Elevate Your Play, Organize Your Way.</h2>
+
+    <b-button
+        variant="danger"
+        class="mb-5"
+        :to="{ name: 'auth' }"
+      >
+        Join the community!
+    </b-button>
 
     <div class="board-grid">
       <mini-board

src/pages/ProfilePage.vue

@@ -14,18 +14,30 @@
       <b-spinner v-if="uploading" />
 
       <!-- TODO: add v-else -->
-
       <div class="text-center mb-5">
         <b-avatar
+          v-if="avatarImage"
           :src="avatarImage"
-          class="mx-auto d-block mt-5 mb-3 cursor-pointer"
+          class="mx-auto d-block mt-5 mb-2 cursor-pointer"
           size="200"
           @click.native="triggerFileUpload"
         />
 
+        <b-img
+          src="/img/dock-icons/profile.png"
+          alt="wikipedia"
+          width="120"
+          @click="triggerFileUpload"
+        />
+        <!-- TODO: improve UI when uploading and replacing image -->
+
+        <br />
+
         <strong>@{{ profile.userName }}</strong>
       </div>
 
+      <pre>{{ file  }}</pre>
+
       <b-form-file
         class="d-none file-input"
         v-model="file"

src/store/getters.js

@@ -37,7 +37,7 @@ export default {
       dropright: settings?.navPosition === 'left',
       dropleft: settings?.navPosition === 'right',
       noCaret: true,
-      toggleClass: 'py-0 px-2',
+      toggleClass: 'p-2',
     };
   },