Merge pull request #171 from BBMRI-ERIC/feat/profile_settings_with_av…

…atar

Feat/profile settings with avatar

src/assets/scss/theme-canserv.scss

@@ -32,11 +32,6 @@ $theme-colors: (
     "info": #7c7c7c,
     "light": #e7e7e7,
     "dark": #1c1d1b,
-
-    // BBMRI-ERIC Color palette
-    "example-1": #003674,
-    "example-2": #e95713,
-    "example-3": #3c3c3d,
 );
 
 $body-color: #3c3c3d;

src/components/NavigationBar.vue

@@ -10,16 +10,7 @@
         class="me-2"
         alt="nav-bar-logo"
       >
-      <button
-        class="navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#menu-navbar"
-        aria-controls="menu-navbar"
-        aria-expanded="false"
-      >
-        <span class="navbar-toggler-icon" />
-      </button>
+
       <div
         id="menu-navbar"
         class="collapse navbar-collapse"
@@ -66,33 +57,29 @@
               Your biobank
             </router-link>
           </li>
-          <li
-            v-if="featureFlagsFAQ"
-            class="nav-item"
-          >
-            <router-link
-              class="nav-link active nav-option"
-              :class="$route.path === '/FAQ' ? 'text-navbar-active-text' : 'text-navbar-text'"
-              to="/FAQ"
-            >
-              <i class="bi bi-question-square" />
-              FAQ
-            </router-link>
-          </li>
         </ul>
         <span
           v-if="oidcIsAuthenticated"
           class="navbar-text me-2 text-navbar-welcome-text"
         >
-          Welcome back {{ oidcUser.name }}
+          {{ oidcUser.preferred_username }}
         </span>
+      </div>
+      <div>
+        <ProfileSettings
+          :user="oidcUser"
+          :is-representative="isRepresentative"
+          class="me-3"
+        />
         <button
-          v-if="oidcIsAuthenticated"
-          class="btn btn-outline-navbar-button-outline me-2"
-          aria-current="page"
-          @click.stop.prevent="signOutOidc"
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#menu-navbar"
+          aria-controls="menu-navbar"
+          aria-expanded="false"
         >
-          Logout
+          <span class="navbar-toggler-icon" />
         </button>
       </div>
     </div>
@@ -102,19 +89,21 @@
 <script>
 import { mapActions, mapGetters } from "vuex"
 import { ROLES } from "@/config/consts"
+import ProfileSettings from "../components/ProfileSettings.vue"
 import activeTheme from "../config/theme.js"
-import allFeatureFlags from "@/config/featureFlags.js"
-import bbmriLogo from "../assets/images/bbmri/nav-bar-bbmri.svg"
+import bbmriLogo from "../assets/images/bbmri/nav-bar-bbmri.png"
 import eucaimLogo from "../assets/images/eucaim/nav-bar-eucaim.png"
 import canservLogo from "../assets/images/canserv/nav-bar-canserv.png"
 
 export default {
   name: "NavigationBar",
+  components: {
+    ProfileSettings
+  },
   data () {
     return {
       roles: [],
-      logoSrc: activeTheme.activeLogosFiles === "eucaim" ? eucaimLogo : (activeTheme.activeLogosFiles === "canserv" ? canservLogo : bbmriLogo),
-      featureFlagsFAQ: allFeatureFlags.faqPage
+      logoSrc: activeTheme.activeLogosFiles === "eucaim" ? eucaimLogo : (activeTheme.activeLogosFiles === "canserv" ? canservLogo : bbmriLogo)
     }
   },
   computed: {

src/components/ProfileSettings.vue

@@ -0,0 +1,138 @@
+<template>
+  <!-- Example single danger button -->
+  <div class="btn-group">
+    <b-avatar
+      type="button"
+      variant="primary"
+      :text="returnAcronymOfName"
+      class="mr-3"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+    />
+
+    <ul class="dropdown-menu dropdown-menu-end mt-1">
+      <li class="container mb-3 mt-2">
+        <div class="d-flex flex-row">
+          <b-avatar
+            type="button"
+            variant="primary"
+            :text="returnAcronymOfName"
+            class="me-3 mt-1"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+          />
+          <div>
+            <div>{{ user.email }}</div>
+            <div class="text-muted">
+              {{ user.name }}
+            </div>
+          </div>
+          <i class="bi bi-x ms-2 h4" />
+        </div>
+      </li>
+      <li><hr class="dropdown-divider"></li>
+      <li>
+        <a
+          href="https://profile.aai.lifescience-ri.eu/profile"
+          class="dropdown-item text-primary-text"
+        >  <i class="bi bi-gear" />
+          Profile Settings
+        </a>
+      </li>
+      <li v-if="isRepresentative">
+        <a
+          href=" https://perun.aai.lifescience-ri.eu/organizations/3353/groups/24879/subgroups"
+          class="dropdown-item text-primary-text"
+        >  <i class="bi bi-person-gear" />
+          Authorization Settings
+        </a>
+      </li>
+      <li><hr class="dropdown-divider"></li>
+      <li>
+        <a
+          href="https://www.bbmri-eric.eu/wp-content/uploads/AoM_10_8_Access-Policy_FINAL_EU.pdfl"
+          class="dropdown-item text-primary-text"
+        > <i class="bi bi-shield-lock" />
+          Privacy Policy
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://www.bbmri-eric.eu/services/access-policies/"
+          class="dropdown-item text-primary-text"
+        > <i class="bi bi-clipboard-check" />
+          Access Policy
+        </a>
+      </li>
+      <li v-if="featureFlagsFAQ">
+        <router-link
+          class="dropdown-item text-primary-text"
+          to="/FAQ"
+        >
+          <i class="bi bi-people" />
+          Support
+        </router-link>
+      </li>
+      <li><hr class="dropdown-divider"></li>
+      <li class="text-center sign-out">
+        <button
+          class="btn me-2 "
+          aria-current="page"
+          @click.stop.prevent="signOutOidc"
+        >
+          <i class="bi bi-box-arrow-right" /> Sign Out
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapActions } from "vuex"
+import allFeatureFlags from "@/config/featureFlags.js"
+
+export default {
+  name: "ProfileSettings",
+  props: {
+    user: {
+      type: Object,
+      default: {}
+    },
+    isRepresentative: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      featureFlagsFAQ: allFeatureFlags.faqPage
+    }
+  },
+  computed: {
+    returnAcronymOfName () {
+      const str = this.user?.name
+      const matches = str.match(/\b(\w)/g)
+      const acronym = matches.join(" ")
+      return acronym
+    }
+  },
+  methods: {
+    ...mapActions([
+      "signOutOidc"
+    ])
+  }
+
+}
+</script>
+
+  <style>
+.avatar {
+  vertical-align: middle;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+.sign-out:hover {
+  color: #dc3545;
+}
+</style>

src/config/externalLinks.js

@@ -3,7 +3,7 @@ const devSettings = {
 }
 
 const prodSettings = {
-  directory: "https://directory.bbmri-eric.eu"
+  directory: "EXTERNAL_LINK_DIRECTORY_PLACEHOLDER"
 }
 
 let allExternalLinks

src/config/featureFlags.js

@@ -1,11 +1,11 @@
 const devSettings = {
-  faqPage: false,
+  faqPage: true,
   vueTour: false
 }
 
 const prodSettings = {
-  faqPage: false,
-  vueTour: false
+  faqPage: Boolean("FEATURE_FLAG_FAQPAGE_PLACEHOLDER"),
+  vueTour: Boolean("FEATURE_FLAG_VUETOUR_PLACEHOLDER")
 }
 
 let allFeatureFlags

src/views/HomePage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="container-fluid d-flex justify-content-center align-items-center vh-100"
+    class="container-fluid d-flex justify-content-center align-items-center vh-100  mt-5"
   >
     <div class="row">
       <div class="col-1" />

start.sh

@@ -15,6 +15,9 @@ do
   sed -i 's|ACTIVE_THEME_PLACEHOLDER|'${ACTIVE_THEME:-bbmri}'|g' $file
   sed -i 's|ACTIVE_LOGOS_PLACEHOLDER|'${ACTIVE_LOGOS:-bbmri}'|g' $file
   sed -i 's|FOLLOW_US_VISIBLE_PLACEHOLDER|'${FOLLOW_US_VISIBLE:-true}'|g' $file
+  sed -i 's|FEATURE_FLAG_FAQPAGE_PLACEHOLDER|'${FEATURE_FLAG_FAQPAGE:-false}'|g' $file
+  sed -i 's|FEATURE_FLAG_VUETOUR_PLACEHOLDER|'${FEATURE_FLAG_VUETOUR:-false}'|g' $file
+  sed -i 's|EXTERNAL_LINK_DIRECTORY_PLACEHOLDER|'${EXTERNAL_LINK_DIRECTORY:-https://directory.bbmri-eric.eu}'|g' $file
 
 done