Create advanced usage modal with service urls and JWT

#47

package.json

@@ -36,8 +36,8 @@
     "@types/bootstrap": "^5.2.6",
     "@types/dompurify": "^2.4.0",
     "@types/node": "^16.11.45",
-    "@types/showdown": "^2.0.0",
     "@types/semver": "^7.3.13",
+    "@types/showdown": "^2.0.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",

src/components/CopyToClipboardIcon.vue

+<script setup lang="ts">
+import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
+import { onMounted } from "vue";
+import { Toast, Tooltip } from "bootstrap";
+
+const props = defineProps<{
+  text: string;
+}>();
+
+let successToast: Toast | null = null;
+let failToast: Toast | null = null;
+const randomIDSuffix = Math.random().toString(16).substr(2, 8);
+
+function copyToClipboard() {
+  if (!navigator.clipboard) {
+    failToast?.show();
+  }
+  navigator.clipboard
+    .writeText(props.text)
+    .then(() => {
+      successToast?.show();
+    })
+    .catch(() => {
+      failToast?.show();
+    });
+}
+
+onMounted(() => {
+  new Tooltip("#tooltip-" + randomIDSuffix);
+  successToast = new Toast("#successToast-" + randomIDSuffix);
+  failToast = new Toast("#failToast-" + randomIDSuffix);
+});
+</script>
+
+<template>
+  <div class="toast-container position-fixed top-toast end-0 p-3">
+    <div
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      class="toast text-bg-success align-items-center border-0"
+      data-bs-autohide="true"
+      :id="'successToast-' + randomIDSuffix"
+    >
+      <div class="d-flex">
+        <div class="toast-body">Successfully copied to clipboard</div>
+        <button
+          type="button"
+          class="btn-close btn-close-white me-2 m-auto"
+          data-bs-dismiss="toast"
+          aria-label="Close"
+        ></button>
+      </div>
+    </div>
+    <div
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      class="toast text-bg-danger align-items-center border-0"
+      data-bs-autohide="true"
+      :id="'failToast-' + randomIDSuffix"
+    >
+      <div class="d-flex">
+        <div class="toast-body">Can't copy to clipboard</div>
+        <button
+          type="button"
+          class="btn-close btn-close-white me-2 m-auto"
+          data-bs-dismiss="toast"
+          aria-label="Close"
+        ></button>
+      </div>
+    </div>
+  </div>
+  <span
+    class="hover-info cursor-pointer"
+    data-bs-toggle="tooltip"
+    data-bs-title="Copy to Clipboard"
+    :id="'tooltip-' + randomIDSuffix"
+  >
+    <font-awesome-icon icon="fa-solid fa-clipboard" @click="copyToClipboard" />
+  </span>
+</template>
+
+<style scoped>
+.hover-info:hover {
+  color: var(--bs-info) !important;
+}
+</style>

src/components/NavbarTop.vue

 <script setup lang="ts">
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 import { useAuthStore } from "@/stores/auth";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import { useCookies } from "vue3-cookies";
 import { watch, ref, computed } from "vue";
+import BootstrapModal from "@/components/modals/BootstrapModal.vue";
+import { OpenAPI as S3ProxyOpenAPI } from "@/client/s3proxy";
+import { OpenAPI as AuthOpenAPI } from "@/client/auth";
+import { OpenAPI as WorkflowOpenAPI } from "@/client/workflow";
+import CopyToClipboardIcon from "@/components/CopyToClipboardIcon.vue";
 
-const router = useRouter();
 const store = useAuthStore();
 const { cookies } = useCookies();
 const route = useRoute();
@@ -13,7 +17,6 @@ const route = useRoute();
 function logout() {
   store.logout();
   cookies.remove("bearer");
-  router.push({ name: "login" });
 }
 
 const activeRoute = ref("");
@@ -162,14 +165,98 @@ watch(
           class="dropdown-menu dropdown-menu-dark text-small shadow"
           aria-labelledby="dropdownUser1"
         >
+          <li>
+            <a
+              href="#"
+              class="dropdown-item"
+              data-bs-toggle="modal"
+              data-bs-target="#advancedUsageModal"
+              >Advanced Usage</a
+            >
+          </li>
           <li><hr class="dropdown-divider" /></li>
           <li>
-            <a class="dropdown-item cursor-pointer" @click="logout">Sign out</a>
+            <router-link
+              :to="{ name: 'login' }"
+              class="dropdown-item"
+              @click="logout"
+            >
+              Sign out
+            </router-link>
           </li>
         </ul>
       </div>
     </nav>
   </header>
+  <bootstrap-modal
+    static-backdrop
+    modal-i-d="advancedUsageModal"
+    modal-label="Advanced Usage Modal"
+  >
+    <template v-slot:header>
+      <h3>Advanced Usage</h3>
+    </template>
+    <template v-slot:body>
+      <table class="table table-borderless table-sm">
+        <tbody>
+          <tr>
+            <td class="text-end">Auth Service:</td>
+            <td>
+              <a :href="AuthOpenAPI.BASE + '/docs'" target="_blank"
+                ><font-awesome-icon
+                  class="me-1"
+                  icon="fa-solid fa-arrow-up-right-from-square"
+                />{{ AuthOpenAPI.BASE }}</a
+              >
+            </td>
+          </tr>
+          <tr>
+            <td class="text-end">S3Proxy Service:</td>
+            <td>
+              <a :href="S3ProxyOpenAPI.BASE + '/docs'" target="_blank"
+                ><font-awesome-icon
+                  class="me-1"
+                  icon="fa-solid fa-arrow-up-right-from-square"
+                />{{ S3ProxyOpenAPI.BASE }}</a
+              >
+            </td>
+          </tr>
+          <tr>
+            <td class="text-end">Workflow Service:</td>
+            <td>
+              <a :href="WorkflowOpenAPI.BASE + '/docs'" target="_blank"
+                ><font-awesome-icon
+                  class="me-1"
+                  icon="fa-solid fa-arrow-up-right-from-square"
+                />{{ WorkflowOpenAPI.BASE }}</a
+              >
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="mt-4">
+        <label for="clowm-jwt" class="form-label">JWT for Services</label>
+        <div class="input-group">
+          <input
+            type="text"
+            readonly
+            class="form-control"
+            id="clowm-jwt"
+            :value="store.token"
+            aria-describedby="clowm-jwt-copy"
+          />
+          <span class="input-group-text" id="clowm-jwt-copy"
+            ><copy-to-clipboard-icon :text="store.token ?? ''"
+          /></span>
+        </div>
+      </div>
+    </template>
+    <template v-slot:footer>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+        Close
+      </button>
+    </template>
+  </bootstrap-modal>
 </template>
 
 <style scoped></style>