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

1 files changed, 67 insertions, 49 deletions

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>