From b1f559f03e3f464c1b8b19a9327158be0ecafe62 Mon Sep 17 00:00:00 2001
From: Sukanya Pandey <sukapan1@in.ibm.com>
Date: Tue, 28 Apr 2020 20:18:28 +0530
Subject: Profile settings page

-To set the profile by setting password.
-This commit adds a profile page which allows the user to change their
password.
In the future, the profile page will also contain user settings like
language and timezone.

The API called to change the user's
password is '/redfish/v1/AccountService/Accounts/<userName>'

Signed-off-by: Sukanya Pandey <sukapan1@in.ibm.com>
Change-Id: Ie54a54beff8c85bc9ac5af21c35edc481b34cf44
---
 src/components/AppHeader/AppHeader.vue | 116 +++++++++++++++++++--------------
 1 file changed, 67 insertions(+), 49 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index a755a628..39d52b83 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -43,11 +43,19 @@
               <icon-renew />
             </b-button>
           </li>
-          <li>
-            <b-button id="app-header-logout" variant="link" @click="logout">
-              {{ $t('appHeader.logOut') }}
-              <icon-avatar />
-            </b-button>
+          <li class="nav-item">
+            <b-dropdown id="app-header-user" variant="link" right>
+              <template v-slot:button-content>
+                <icon-avatar />
+                {{ username }}
+              </template>
+              <b-dropdown-item to="/profile-settings"
+                >{{ $t('appHeader.profileSettings') }}
+              </b-dropdown-item>
+              <b-dropdown-item @click="logout">{{
+                $t('appHeader.logOut')
+              }}</b-dropdown-item>
+            </b-dropdown>
           </li>
         </b-navbar-nav>
       </b-navbar>
@@ -110,6 +118,9 @@ export default {
         default:
           return 'secondary';
       }
+    },
+    username() {
+      return this.$store.getters['global/username'];
     }
   },
   created() {
@@ -142,64 +153,71 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import 'src/assets/styles/helpers';
 
-.link-skip-nav {
-  position: absolute;
-  top: -60px;
-  left: 0.5rem;
-  z-index: $zindex-popover;
-  transition: $duration--moderate-01 $exit-easing--expressive;
-  &:focus {
-    top: 0.5rem;
-    transition-timing-function: $entrance-easing--expressive;
+.app-header {
+  .link-skip-nav {
+    position: absolute;
+    top: -60px;
+    left: 0.5rem;
+    z-index: $zindex-popover;
+    transition: $duration--moderate-01 $exit-easing--expressive;
+    &:focus {
+      top: 0.5rem;
+      transition-timing-function: $entrance-easing--expressive;
+    }
   }
-}
-.navbar-dark {
-  .navbar-text,
-  .nav-link,
-  .btn-link {
-    color: $white !important;
-    fill: currentColor;
+  .navbar-dark {
+    .navbar-text,
+    .nav-link,
+    .btn-link {
+      color: $white !important;
+      fill: currentColor;
+    }
   }
-}
-
-.nav-item {
-  fill: $light;
-}
 
-.navbar {
-  padding: 0;
-  height: $header-height;
-  overflow: hidden;
-
-  .btn-link {
-    padding: $spacer / 2;
+  .nav-item {
+    fill: $light;
   }
-}
 
-.navbar-nav {
-  padding: 0 $spacer;
-}
+  .navbar {
+    padding: 0;
+    height: $header-height;
 
-.nav-trigger {
-  fill: $light;
-  width: $header-height;
-  height: $header-height;
-  transition: none;
+    .btn-link {
+      padding: $spacer / 2;
+    }
+  }
 
-  svg {
-    margin: 0;
+  .navbar-nav {
+    padding: 0 $spacer;
   }
 
-  &:hover {
+  .nav-trigger {
     fill: $light;
-    background-color: $dark;
+    width: $header-height;
+    height: $header-height;
+    transition: none;
+
+    svg {
+      margin: 0;
+    }
+
+    &:hover {
+      fill: $light;
+      background-color: $dark;
+    }
+
+    @include media-breakpoint-up($responsive-layout-bp) {
+      display: none;
+    }
   }
 
-  @include media-breakpoint-up($responsive-layout-bp) {
-    display: none;
+  .dropdown {
+    .dropdown-menu {
+      margin-top: 7px;
+    }
   }
 }
 </style>
-- 
cgit v1.2.3