NavbarTop.vue

<script setup lang="ts">
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
import { useAuthStore } from "@/stores/auth";
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 store = useAuthStore();
const { cookies } = useCookies();
const route = useRoute();

function logout() {
  store.logout();
  cookies.remove("bearer");
}

const activeRoute = ref("");
const objectStorageActive = computed<boolean>(
  () => activeRoute.value == "buckets" || activeRoute.value == "s3_keys"
);
const workflowActive = computed<boolean>(
  () => activeRoute.value == "workflows"
);

watch(
  () => route.name,
  (to) => {
    if (typeof to === "string") {
      if (to.startsWith("bucket")) {
        activeRoute.value = "buckets";
      } else if (to.startsWith("workflow")) {
        activeRoute.value = "workflows";
      } else {
        activeRoute.value = to;
      }
    } else {
      activeRoute.value = "";
    }
  }
);
</script>

<template>
  <header
    class="navbar navbar-expand-lg navbar-dark bd-navbar bg-dark sticky-top border-bottom border-secondary"
  >
    <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap text-light">
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navDropdown"
        aria-controls="navDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
        v-if="store.authenticated"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <router-link class="navbar-brand ms-3" to="/">
        <img
          src="/src/assets/images/denbi.svg"
          alt="Denbi Icon"
          width="24"
          height="24"
          class="d-inline-block align-text-top me-2"
        />
        CloWM
      </router-link>

      <div
        class="collapse navbar-collapse"
        id="navDropdown"
        v-if="store.authenticated"
      >
        <ul id="objectStorageNav" class="navbar-nav">
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              :class="{ active: objectStorageActive }"
              href="#"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Object Storage
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li>
                <router-link class="dropdown-item" :to="{ name: 'buckets' }"
                  >Buckets</router-link
                >
              </li>
              <li>
                <router-link class="dropdown-item" :to="{ name: 's3_keys' }"
                  >S3 Keys</router-link
                >
              </li>
            </ul>
          </li>
        </ul>
        <ul id="workflowNav" class="navbar-nav">
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              :class="{ active: workflowActive }"
              href="#"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Workflows
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li>
                <router-link class="dropdown-item" :to="{ name: 'workflows' }"
                  >Workflows</router-link
                >
              </li>
              <li>
                <a class="dropdown-item" href="#">Executions</a>
              </li>
              <li
                v-if="
                  store.workflowDev || store.workflowReviewer || store.admin
                "
              >
                <hr class="dropdown-divider" />
              </li>
              <li v-if="store.workflowDev || store.admin">
                <router-link
                  class="dropdown-item"
                  :to="{ name: 'workflows-developer' }"
                  >My Workflows</router-link
                >
              </li>
              <li v-if="store.workflowReviewer || store.admin">
                <router-link
                  class="dropdown-item"
                  :to="{ name: 'workflows-reviewer' }"
                  >Reviews</router-link
                >
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="dropdown" v-if="store.authenticated && store.user != null">
        <a
          href="#"
          class="d-flex align-items-center text-white text-decoration-none dropdown-toggle-split"
          id="dropdownUser1"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <strong class="me-2">{{ store.user.display_name }}</strong>
          <font-awesome-icon icon="fa-solid fa-circle-user" class="fs-5" />
        </a>
        <ul
          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>
            <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>