Create profile settings page
Adding a profile settings page so readonly and operator
roles are able to change their own password.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Iee9536255ad47f4df4af8746c1e01da37c407f2b
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index bf4fb8f..ec03874 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -2,7 +2,16 @@
<!-- HEADER -->
<div class="header__info-section">
<span class="header__title">OpenBMC</span>
- <a href="" class="header__logout" ng-click="logout()">Log out</a>
+ <div class="header__actions" uib-dropdown>
+ <button id="user-actions" type="button" uib-dropdown-toggle>
+ <icon class="icon-user" file="icon-avatar.svg"></icon>
+ {{username}}
+ </button>
+ <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="user-actions">
+ <li role="menuitem"><a href="#/profile-settings" class="btn">Profile settings</a></li>
+ <li role="menuitem"><button ng-click="logout()" type="button" class="btn">Log out</button></li>
+ </ul>
+ </div>
</div>
<div class="header__functions-section">
<div class="logo__wrapper">
diff --git a/app/common/directives/app-header.js b/app/common/directives/app-header.js
index 98d210f..df39772 100644
--- a/app/common/directives/app-header.js
+++ b/app/common/directives/app-header.js
@@ -14,6 +14,7 @@
function(
$rootScope, $scope, dataService, userModel, $location, $route) {
$scope.dataService = dataService;
+ $scope.username = '';
try {
// Create a secure websocket with URL as /subscribe
@@ -118,6 +119,7 @@
$scope.loadNetworkInfo();
$scope.loadServerHealth();
$scope.loadSystemName();
+ $scope.username = dataService.getUser();
}
loadData();
diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index c775c48..6699d44 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -1,3 +1,4 @@
+.label,
label,
legend {
margin: 0;
diff --git a/app/common/styles/directives/dropdown.scss b/app/common/styles/directives/dropdown.scss
new file mode 100644
index 0000000..0c0add0
--- /dev/null
+++ b/app/common/styles/directives/dropdown.scss
@@ -0,0 +1,5 @@
+.dropdown.open {
+ .dropdown-menu {
+ display: block;
+ }
+}
\ No newline at end of file
diff --git a/app/common/styles/directives/index.scss b/app/common/styles/directives/index.scss
index 5d9de6f..1fcbb65 100644
--- a/app/common/styles/directives/index.scss
+++ b/app/common/styles/directives/index.scss
@@ -1 +1,2 @@
-@import "./app-navigation.scss";
\ No newline at end of file
+@import "./app-navigation.scss";
+@import "./dropdown.scss";
\ No newline at end of file
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index c034c82..b1665ca 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -21,35 +21,40 @@
z-index: 300;
}
-.header__title {
- margin-left: 1em;
- display: none;
- float: left;
- @include mediaQuery(x-small) {
- display: inline-block;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- }
-}
-
.header__info-section {
position: relative;
background: $primary-dark;
color: $primary-light;
- overflow: hidden;
+ width: 100%;
+ height: 50px;
+ display: flex;
+ justify-content: space-between;
+ .dropdown-menu {
+ left: unset;
+ right: 0;
+ border-radius: 0;
+ font-size: 0.9rem;
+ .btn {
+ color: $primary-dark;
+ }
+ }
+ .dropdown-toggle {
+ color: $primary-light;
+ fill: $primary-light;
+ text-decoration: none;
+ font-weight: 400;
+ margin-right: 0.5rem;
+ height: 50px; //to vertically align in 50px header
+ &::after {
+ display: none; //hiding dropdown caret inserted by bootstrap
+ }
+ }
}
-.header__logout {
- float: right;
- color: $primary-light;
- font-size: 0.9em;
- text-decoration: none;
- padding: 1em;
- font-weight: 400;
- &:visited {
- color: $primary-light;
- }
+.header__title {
+ margin-left: 1rem;
+ display: block;
+ line-height: 50px; //to vertically align in 50px header
}
.header__functions-section {