Merge pull request #14 from berkmancenter/43-changes-to-the-top-banner

43: Changes to the top banner

src/components/Banner/BannerSection.vue

@@ -21,14 +21,19 @@
       <span v-else class="text-red-500">{{
         getActivePseudonym.pseudonym
       }}</span>
-      ].
+      ]
       <TrashIcon
         v-if="getPseudonyms.length > 1"
         class="h-5 w-5 inline-block cursor-pointer hover:text-red-500"
         title="Delete pseudonym"
         @click="openModal"
       />
-      Would you like to:
+      <RefreshIcon
+        v-if="getGuestStatus"
+        class="h-5 w-5 inline-block cursor-pointer hover:text-red-500"
+        title="Get a new pseudonym"
+        @click="refreshPseudonym"
+      />. Would you like to:
     </div>
     <component
       :is="
@@ -37,13 +42,14 @@
           : defineAsyncComponent(() => import('./GuestBanner.vue'))
       "
       @login="registerOneTime"
+      @create-pseudonym="adjustSelect"
     ></component>
 
-    <Modal :is-open="isModalOpen">
+    <Modal :is-open="isModalOpen" @close-modal="closeModal">
       <template v-slot:title>Delete Pseudonym</template>
       <div class="text-xl">Are you sure you want to delete pseudonym?</div>
       <div class="text-lg mt-3">
-        Please select pseudonym to delete
+        Please select the pseudonym to delete
         <select
           v-model="pseudonymToDelete"
           class="bg-gray-200 text-red-500"
@@ -61,32 +67,32 @@
         </select>
       </div>
       <div class="text-xs mt-4">
-        If you want to delete active pseudonym, please activate other pseudonym
-        and come back here.
+        If you want to delete the active pseudonym, please activate other
+        pseudonym first and come back here.
       </div>
       <div :class="isError ? 'text-red-500' : 'text-green-500'" class="mt-4">
         {{ message }}
       </div>
       <template v-slot:actions>
-        <button class="btn success" @click="processDelete">Yes</button>
-        <button class="btn error" @click="closeModal">No</button>
+        <button class="btn success" @click="processDelete">Delete</button>
       </template>
     </Modal>
   </div>
 </template>
 
 <script setup>
-import { onMounted, watch, ref, computed } from "vue";
+import { onMounted, watch, ref, computed, nextTick } from "vue";
 import useStore from "../../composables/global/useStore";
 import { defineAsyncComponent } from "@vue/runtime-core";
-import { TrashIcon } from "@heroicons/vue/outline";
+import { TrashIcon, RefreshIcon } from "@heroicons/vue/outline";
 import Modal from "../Shared/Modal.vue";
 const {
   getLoggedInStatus,
   getPseudonyms,
   getActivePseudonym,
   registerOnce,
   getGuestStatus,
+  loadNewPseudonym,
   activatePseudonym,
   loadPseudonyms,
   deletePseudonym,
@@ -112,6 +118,12 @@ function openModal() {
   isModalOpen.value = true;
 }
 
+async function refreshPseudonym() {
+  await loadNewPseudonym();
+  await registerOnce();
+  adjustSelect();
+}
+
 function closeModal() {
   document.querySelector("body").classList.remove("modal-open");
   isModalOpen.value = false;
@@ -126,7 +138,7 @@ function closeModal() {
 async function processDelete() {
   isError.value = true;
   if (pseudonymToDelete.value.trim().length === 0) {
-    message.value = "Please select pseudonym.";
+    message.value = "Please select a pseudonym.";
     return;
   }
   message.value = "";
@@ -144,9 +156,23 @@ async function processDelete() {
 
 async function activateToken() {
   await activatePseudonym(activeToken.value);
-  let element = document.getElementById("pseudonymSelect");
-  let text = element.options[element.selectedIndex].text;
-  element.style.width = text.length * 15 + "px";
+  adjustSelect();
+}
+
+function adjustSelect() {
+  // Adject select tag width when select tag is visible on DOM
+  if (!getGuestStatus.value) {
+    let sel = document.getElementById("pseudonymSelect");
+    let tempOption = document.createElement("option");
+    tempOption.textContent = sel.selectedOptions[0].textContent;
+    let tempSelect = document.createElement("select");
+    tempSelect.style.visibility = "hidden";
+    tempSelect.style.position = "fixed";
+    tempSelect.appendChild(tempOption);
+    sel.after(tempSelect);
+    sel.style.width = `${+tempSelect.clientWidth + 4}px`;
+    tempSelect.remove();
+  }
 }
 
 /**
@@ -166,6 +192,9 @@ onMounted(async () => {
     await loadPseudonyms();
   }
   activeToken.value = getActivePseudonym.value?.token;
+  nextTick(() => {
+    adjustSelect();
+  });
 });
 </script>
 

src/components/Banner/LoggedInBanner.vue

@@ -13,7 +13,8 @@
       :disabled="getPseudonyms.length >= 5"
       class="btn"
       v-if="!getGuestStatus"
-      @click="createNewPseudonym"
+      @click="createPseudonym"
+      :title="getNewPseudonymButtonTitle()"
     >
       <RefreshIcon class="ml-1 h6 w-6 inline-block" /> Create a new pseudonym on
       your account
@@ -27,11 +28,12 @@ import { useRouter } from "vue-router";
 import store from "../../composables/global/useStore";
 import { RefreshIcon } from "@heroicons/vue/outline";
 
+const emit = defineEmits(["create-pseudonym"]);
 const router = useRouter();
 const { logout, getGuestStatus, createNewPseudonym, getPseudonyms } = store;
 
 async function signout() {
-  await logout();
+  logout();
   router.push({ name: "home.featured" });
 }
 
@@ -41,16 +43,25 @@ async function signout() {
  * so the after loggin in, app can navigate
  * to same page
  */
-async function loginViaGuest() {
-  await logout();
-  console.log(router.currentRoute.value.path);
+function loginViaGuest() {
   router.push({
     name: "home.login",
     query: {
       to: router.currentRoute.value.path,
     },
   });
 }
+
+async function createPseudonym() {
+  await createNewPseudonym();
+  emit("create-pseudonym");
+}
+
+function getNewPseudonymButtonTitle() {
+  if (getPseudonyms.value.length >= 5)
+    return "Maximum of five pseudonyms reached.";
+  return "";
+}
 </script>
 
 <style scoped>
@@ -59,6 +70,6 @@ async function loginViaGuest() {
 }
 
 .btn:disabled {
-  @apply cursor-not-allowed bg-gray-200;
+  @apply cursor-not-allowed bg-gray-200 text-black;
 }
 </style>

src/components/Shared/Modal.vue

@@ -2,7 +2,14 @@
   <teleport to="body">
     <div v-if="isOpen" class="modal">
       <div class="modal-content">
-        <div class="my-3 text-xl"><slot name="title">Modal Title</slot></div>
+        <div class="my-3 text-xl">
+          <slot name="title">Modal Title</slot>
+          <XIcon
+            class="float-right h-5 w-5 inline-block cursor-pointer hover:text-red-500"
+            title="Close"
+            @click="closeModal"
+          />
+        </div>
         <div class="flex-grow py-3"><slot>Modal Body</slot></div>
         <div class="flex justify-end my-3 gap-4">
           <slot name="actions"><button @click="closeModal"></button></slot>
@@ -13,6 +20,8 @@
 </template>
 
 <script setup>
+import { XIcon } from "@heroicons/vue/outline";
+
 const props = defineProps({
   isOpen: {
     type: Boolean,

src/composables/global/useStore.js

@@ -262,12 +262,8 @@ async function loadPseudonyms() {
 }
 
 async function logout() {
-  ThreadService.setAuth("");
-  VueCookieNext.keys().forEach((cookie) => VueCookieNext.removeCookie(cookie));
-  state.auth = [...[]];
-  state.isLoggedIn = false;
-  state.isGuest = null;
-  return await loadNewPseudonym();
+  await loadNewPseudonym();
+  await registerOnce();
 }
 
 // Getters

src/plugins/navigationGuard.js

@@ -30,9 +30,10 @@ function isLoginSignupPage(to) {
 
 export default async (to, from, next) => {
   const accessToken = VueCookieNext.getCookie("access_token");
+  const isGuest = VueCookieNext.getCookie("is_guest");
 
   // Logged in and login/signup page
-  if (accessToken && isLoginSignupPage(to)) {
+  if (accessToken && !isGuest && isLoginSignupPage(to)) {
     next({
       name: "home.featured",
     });