init

2022-07-31 12:33:10 -06:00
commit 3eaefbf02a
58 changed files with 7540 additions and 0 deletions
@@ -0,0 +1,84 @@
+<template>
+  <span class="navbar-text">
+    <button
+      class="btn selectable text-success lighten-30 text-uppercase my-2 my-lg-0"
+      @click="login"
+      v-if="!user.isAuthenticated"
+    >
+      Login
+    </button>
+
+    <div class="dropdown my-2 my-lg-0" v-else>
+      <div
+        class="dropdown-toggle selectable"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+        id="authDropdown"
+      >
+        <div v-if="account.picture">
+          <img
+            :src="account.picture"
+            alt="account photo"
+            height="40"
+            class="rounded"
+          />
+          <span class="mx-3 text-success lighten-30">{{ account.name }}</span>
+        </div>
+      </div>
+      <div
+        class="dropdown-menu p-0 list-group w-100"
+        aria-labelledby="authDropdown"
+      >
+        <router-link :to="{ name: 'Account' }">
+          <div class="list-group-item list-group-item-action hoverable">
+            Manage Account
+          </div>
+        </router-link>
+        <div
+          class="list-group-item list-group-item-action hoverable text-danger"
+          @click="logout"
+        >
+          <i class="mdi mdi-logout"></i>
+          logout
+        </div>
+      </div>
+    </div>
+  </span>
+</template>
+
+
+<script>
+import { computed } from "@vue/reactivity";
+import { AppState } from "../AppState";
+import { AuthService } from "../services/AuthService";
+export default {
+  setup() {
+    return {
+      user: computed(() => AppState.user),
+      account: computed(() => AppState.account),
+      async login() {
+        AuthService.loginWithPopup();
+      },
+      async logout() {
+        AuthService.logout({ returnTo: window.location.origin });
+      },
+    };
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+.dropdown-menu {
+  user-select: none;
+  display: block;
+  transform: scale(0);
+  transition: all 0.15s linear;
+}
+.dropdown-menu.show {
+  transform: scale(1);
+}
+.hoverable {
+  cursor: pointer;
+}
+</style>
@@ -0,0 +1,56 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark px-3">
+    <router-link class="navbar-brand d-flex" :to="{ name: 'Home' }">
+      <div class="d-flex flex-column align-items-center">
+        <img alt="logo" src="../assets/img/cw-logo.png" height="45" />
+      </div>
+    </router-link>
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarText"
+      aria-controls="navbarText"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon" />
+    </button>
+    <div class="collapse navbar-collapse" id="navbarText">
+      <ul class="navbar-nav me-auto">
+        <li>
+          <router-link
+            :to="{ name: 'About' }"
+            class="btn text-success lighten-30 selectable text-uppercase"
+          >
+            About
+          </router-link>
+        </li>
+      </ul>
+      <!-- LOGIN COMPONENT HERE -->
+      <Login />
+    </div>
+  </nav>
+</template>
+
+<script>
+export default {
+  setup() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+a:hover {
+  text-decoration: none;
+}
+.nav-link {
+  text-transform: uppercase;
+}
+.navbar-nav .router-link-exact-active {
+  border-bottom: 2px solid var(--bs-success);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+</style>