First hash at a login modal that enables login via GitHub or ORCID

webapp/src/components/LoginModal.vue

@@ -0,0 +1,117 @@
+<template>
+  <div id="dummyDivForModalBackground" :class="{ overlay: modalOpaque }"></div>
+
+  <div
+    class="modal fade"
+    tabindex="-1"
+    role="dialog"
+    :style="{ display: modalDisplayed ? 'block' : 'none' }"
+    :class="{ show: modalOpaque }"
+  >
+    <div class="modal-dialog" :class="{ 'modal-lg': isLarge }" role="document">
+      <div class="modal-content">
+        <div class="modal-body ml-auto mr-auto p-8">
+          <div>
+            <button
+              type="button"
+              class="login btn-link btn btn-default"
+              data-dismiss="modal"
+              aria-label="Login with GitHub"
+              @click="this.apiUrl + '/login/github'"
+            >
+              <span aria-hidden="true">
+                <font-awesome-icon :icon="['fab', 'github']" /> Login with GitHub</span
+              >
+            </button>
+          </div>
+          <div>
+            <button
+              type="button"
+              class="login btn-link btn btn-default orcid-hover"
+              data-dismiss="modal"
+              aria-label="Login with ORCID"
+              @click="this.apiUrl + '/login/orcid'"
+            >
+              <span aria-hidden="true">
+                <font-awesome-icon :icon="['fab', 'orcid']" /> Login with ORCID</span
+              >
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { API_URL } from "@/resources.js";
+export default {
+  data() {
+    return {
+      modalDisplayed: false,
+      modalOpaque: false,
+      apiUrl: API_URL,
+    };
+  },
+  props: {
+    modelValue: Boolean,
+  },
+  watch: {
+    modelValue(newValue) {
+      if (newValue) {
+        this.openModal();
+      }
+      if (!newValue) {
+        this.closeModal();
+      }
+    },
+  },
+  methods: {
+    async openModal() {
+      this.modalDisplayed = true;
+      await new Promise((resolve) => setTimeout(resolve, 20)); //hacky...
+      this.$nextTick(() => {
+        this.modalOpaque = true;
+      });
+    },
+    async closeModal() {
+      this.modalOpaque = false;
+      await new Promise((resolve) => setTimeout(resolve, 200)); // super hacky
+      this.modalDisplayed = false;
+      this.$emit("update:modelValue", false);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.fade {
+  opacity: 0;
+  transition: opacity 0.15s linear;
+}
+.fade.show {
+  opacity: 1;
+}
+
+/* css selector for a font-awesome-icon svg inside a class called orcid-hover that only changes color of the icon */
+
+.orcid-hover:hover > {
+  color: #a6ce39;
+}
+
+#dummyDivForModalBackground.overlay:after {
+  content: "";
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+}
+</style>

webapp/src/components/Navbar.vue

@@ -5,7 +5,7 @@
     </a>
     <img v-else class="logo-banner" :src="this.logo_url" />
   </div>
-  <div class="row justify-content-center">
+  <div class="row justify-content-center pt-3">
     <div v-if="currentUser != null">
       <b>{{ currentUser }}&nbsp;&nbsp;</b>
       <UserBubble :creator="this.currentUserInfo" :size="36" />
@@ -14,9 +14,9 @@
       >
     </div>
     <div v-else>
-      <a :href="this.apiUrl + '/login/github'" class="btn btn-default btn-link"
-        ><font-awesome-icon icon="sign-in-alt" />&nbsp;Login</a
-      >
+      <button class="btn btn-default" @click="loginModalIsOpen = true">
+        <font-awesome-icon icon="sign-in-alt" />&nbsp;Login
+      </button>
     </div>
   </div>
   <div id="nav">
@@ -28,12 +28,14 @@
       ><font-awesome-icon icon="project-diagram" />&nbsp;Graph View</router-link
     >
   </div>
+  <LoginModal v-model="loginModalIsOpen" />
 </template>
 
 <script>
 import { API_URL, LOGO_URL, HOMEPAGE_URL } from "@/resources.js";
 import { getUserInfo } from "@/server_fetch_utils.js";
 import UserBubble from "@/components/UserBubble.vue";
+import LoginModal from "@/components/LoginModal.vue";
 
 export default {
   name: "Navbar",
@@ -63,6 +65,7 @@ export default {
   },
   components: {
     UserBubble,
+    LoginModal,
   },
   mounted() {
     this.getUser();

webapp/src/main.js

@@ -37,7 +37,7 @@ import {
   faEllipsisH,
 } from "@fortawesome/free-solid-svg-icons";
 import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faOrcid } from "@fortawesome/free-brands-svg-icons";
 // import { faHdd } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 library.add(
@@ -55,6 +55,7 @@ library.add(
   faQuestionCircle,
   faVial,
   faGithub,
+  faOrcid,
   faVials,
   faSync,
   faFolder,