Improve login/logout UI to support multiple authentication mechanisms (…

…#384)

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

* Add email login option to login modal UI

* Refactor login component to also handle displaying current user info

webapp/src/App.vue

@@ -108,6 +108,10 @@ body {
   border: 2px solid transparent;
 }
 
+.fa-orcid {
+  color: #a6ce39;
+}
+
 .badge.clickable:hover {
   cursor: pointer;
   border: 2px solid #000000;

webapp/src/components/LoginDetails.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="row justify-content-center pt-3">
+    <template v-if="currentUser != null">
+      <div class="dropdown">
+        <button
+          class="btn btn-default dropdown-toggle"
+          type="button"
+          id="userDropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          data-toggle="dropdown"
+          @click="isUserDropdownVisible = !isUserDropdownVisible"
+        >
+          <UserBubble :creator="this.currentUserInfo" :size="24" />&nbsp;
+          <span class="user-display-name">{{ currentUser }}</span
+          >&nbsp;
+        </button>
+        <div
+          class="dropdown-menu"
+          style="display: block"
+          aria-labelledby="UserDropdown"
+          v-show="isUserDropdownVisible"
+        >
+          <a
+            type="button"
+            class="disabled dropdown-item btn login btn-link btn-default"
+            aria-label="Account settings"
+            ><font-awesome-icon icon="cog" /> Account settings</a
+          >
+          <a
+            type="button"
+            class="dropdown-item btn login btn-link btn-default"
+            aria-label="Logout"
+            :href="this.apiUrl + '/logout'"
+            ><font-awesome-icon icon="sign-out-alt" /> Logout</a
+          >
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="dropdown">
+        <button
+          class="btn btn-default dropdown-toggle"
+          type="button"
+          id="loginDropdown"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          @click="isLoginDropdownVisible = !isLoginDropdownVisible"
+        >
+          <font-awesome-icon icon="sign-in-alt" />&nbsp;Login
+        </button>
+        <div
+          class="dropdown-menu"
+          style="display: block"
+          aria-labelledby="loginButton"
+          v-show="isLoginDropdownVisible"
+        >
+          <a
+            type="button"
+            class="dropdown-item btn login btn-link btn-default"
+            aria-label="Login via GitHub"
+            :href="this.apiUrl + '/login/github'"
+            ><font-awesome-icon :icon="['fab', 'github']" /> Login via GitHub</a
+          >
+          <a
+            type="button"
+            class="dropdown-item btn login btn-link btn-default"
+            aria-label="Login via ORCID"
+            :href="this.apiUrl + '/login/orcid'"
+            ><font-awesome-icon :icon="['fab', 'orcid']" /> Login via ORCID</a
+          >
+          <a
+            type="button"
+            class="disabled dropdown-item btn login btn-link btn-default"
+            aria-label="Login via email"
+            :href="this.apiUrl + '/login/email'"
+            ><font-awesome-icon :icon="['fa', 'envelope']" /> Login via email</a
+          >
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { API_URL } from "@/resources.js";
+import UserBubble from "@/components/UserBubble.vue";
+import { getUserInfo } from "@/server_fetch_utils.js";
+export default {
+  data() {
+    return {
+      isLoginDropdownVisible: false,
+      isUserDropdownVisible: false,
+      apiUrl: API_URL,
+      currentUser: null,
+      currentUserInfo: {},
+    };
+  },
+  components: {
+    UserBubble,
+  },
+  props: {
+    modelValue: Boolean,
+  },
+  watch: {
+    modelValue(newValue) {
+      if (newValue) {
+        this.openModal();
+      }
+      if (!newValue) {
+        this.closeModal();
+      }
+    },
+  },
+  methods: {
+    async getUser() {
+      let user = await getUserInfo();
+      if (user != null) {
+        this.currentUser = user.display_name;
+        this.currentUserInfo = {
+          display_name: user.display_name || "",
+          immutable_id: user.immutable_id,
+          contact_email: user.contact_email || "",
+        };
+        console.log(this.currentUser, this.currentUserInfo);
+      }
+    },
+  },
+  mounted() {
+    this.getUser();
+  },
+};
+</script>
+
+<style scoped>
+.btn:disabled {
+  cursor: not-allowed;
+}
+
+.user-display-name {
+  font-weight: bold;
+}
+</style>

webapp/src/components/Navbar.vue

@@ -5,20 +5,9 @@
     </a>
     <img v-else class="logo-banner" :src="this.logo_url" />
   </div>
-  <div class="row justify-content-center">
-    <div v-if="currentUser != null">
-      <b>{{ currentUser }}&nbsp;&nbsp;</b>
-      <UserBubble :creator="this.currentUserInfo" :size="36" />
-      &nbsp;&nbsp;<a :href="this.apiUrl + '/logout'" class="btn btn-default btn-link"
-        ><font-awesome-icon icon="sign-out-alt" />&nbsp;Logout</a
-      >
-    </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
-      >
-    </div>
-  </div>
+
+  <LoginDetails></LoginDetails>
+
   <div id="nav">
     <router-link to="/about">About</router-link> |
     <router-link to="/samples">Samples</router-link> |
@@ -32,8 +21,7 @@
 
 <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 LoginDetails from "@/components/LoginDetails.vue";
 
 export default {
   name: "Navbar",
@@ -42,30 +30,10 @@ export default {
       apiUrl: API_URL,
       logo_url: LOGO_URL,
       homepage_url: HOMEPAGE_URL,
-      loginModalIsOpen: false,
-      currentUser: null,
-      currentUserInfo: {},
     };
   },
-  methods: {
-    async getUser() {
-      let user = await getUserInfo();
-      if (user != null) {
-        this.currentUser = user.display_name;
-        this.currentUserInfo = {
-          display_name: user.display_name || "",
-          immutable_id: user.immutable_id,
-          contact_email: user.contact_email || "",
-        };
-        console.log(this.currentUser, this.currentUserInfo);
-      }
-    },
-  },
   components: {
-    UserBubble,
-  },
-  mounted() {
-    this.getUser();
+    LoginDetails,
   },
 };
 </script>

webapp/src/main.js

@@ -12,6 +12,8 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import {
   faSave,
   faCode,
+  faEnvelope,
+  faCog,
   faChevronRight,
   faArrowUp,
   faArrowDown,
@@ -37,12 +39,14 @@ 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(
   faSave,
   faCode,
+  faEnvelope,
+  faCog,
   faChevronRight,
   faProjectDiagram,
   faArrowUp,
@@ -55,6 +59,7 @@ library.add(
   faQuestionCircle,
   faVial,
   faGithub,
+  faOrcid,
   faVials,
   faSync,
   faFolder,