Update users navigation section

- Changed the section name to be access-control
- Moved LDAP Settings and Certificate Management to access-control navigation
- Changed Manage User Account subsection name to Local User Management

Resolves: openbmc/phosphor-webui#619

Signed-off-by: Mira Murali <miramurali23@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I0d94c80c295b997d94c04330fd87f4fc4d229bf8

3 files changed, 122 insertions, 0 deletions

diff --git a/app/access-control/directives/role-table.html b/app/access-control/directives/role-table.html
new file mode 100644
index 0000000..95b4c31
--- /dev/null
+++ b/app/access-control/directives/role-table.html
@@ -0,0 +1,15 @@
+<div class="role-table">
+  <button class="btn btn-tertiary accordion-trigger"
+          ng-click="roleTableCtrl.onClick()"
+          ng-class="{'accordion-trigger--expanded' : !roleTableCtrl.isCollapsed}">
+    <icon file="icon-chevron-right.svg" aria-hidden="true"></icon>
+    <span ng-if="roleTableCtrl.isCollapsed">View privilege role descriptions</span>
+    <span ng-if="!roleTableCtrl.isCollapsed">Hide privilege role descriptions</span>
+  </button>
+  <div uib-collapse="roleTableCtrl.isCollapsed">
+    <bmc-table  data="roleTableCtrl.tableData"
+                header="roleTableCtrl.tableHeader"
+                size="'small'">
+    </bmc-table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/access-control/directives/role-table.js b/app/access-control/directives/role-table.js
new file mode 100644
index 0000000..0a3169f
--- /dev/null
+++ b/app/access-control/directives/role-table.js
@@ -0,0 +1,68 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   * Role table
+   * Table of privilege role descriptions
+   */
+  angular.module('app.accessControl').directive('roleTable', [
+    '$sce',
+    function($sce) {
+      return {
+        restrict: 'E',
+        template: require('./role-table.html'),
+        controllerAs: 'roleTableCtrl',
+        controller: function() {
+          // TODO: This is a workaround to render the checkmark svg icon
+          // Would eventually like to enhance <bmc-table> component to
+          // compile custom directives as table items
+          const svg = require('../../assets/icons/icon-check.svg');
+          const check =
+              $sce.trustAsHtml(`<span class="icon__check-mark">${svg}<span>`);
+
+          this.tableHeader = [
+            {label: ''}, {label: 'Admin'}, {label: 'Operator'}, {label: 'User'},
+            {label: 'Callback'}
+          ];
+
+          // TODO: When API changed from D-Bus to Redfish, 'Operator' role
+          // should have 'Configure components managed by this service'
+          // privilege checked
+          // TODO: When 'Operator' and 'User' roles have ability to change
+          // own account's passwords, should have 'Update password for
+          // current user account' privilege checked
+          this.tableData = [
+            {
+              uiData: [
+                'Configure components managed by this service', check, '', '',
+                ''
+              ]
+            },
+            {uiData: ['Configure manager resources', check, '', '', '']},
+            {
+              uiData: [
+                'Update password for current user account', check, '', '', ''
+              ]
+            },
+            {uiData: ['Configure users and their accounts', check, '', '', '']},
+            {
+              uiData: [
+                'Log in to the service and read resources', check, check, check,
+                ''
+              ]
+            },
+            {uiData: ['IPMI access point', check, check, check, check]},
+            {uiData: ['Redfish access point', check, check, check, '']},
+            {uiData: ['SSH access point', check, check, check, '']},
+            {uiData: ['WebUI access point', check, check, check, '']},
+          ];
+
+          this.isCollapsed = true;
+          this.onClick = () => {
+            this.isCollapsed = !this.isCollapsed;
+          };
+        }
+      };
+    }
+  ]);
+})(window.angular);
diff --git a/app/access-control/directives/username-validator.js b/app/access-control/directives/username-validator.js
new file mode 100644
index 0000000..395e635
--- /dev/null
+++ b/app/access-control/directives/username-validator.js
@@ -0,0 +1,39 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   * Username validator
+   *
+   * Checks if entered username is a duplicate
+   * Provide existingUsernames scope that should be an array of
+   * existing usernames
+   *
+   * <input username-validator  existing-usernames="[]"/>
+   *
+   */
+  angular.module('app.accessControl')
+      .directive('usernameValidator', function() {
+        return {
+          restrict: 'A', require: 'ngModel', scope: {existingUsernames: '='},
+              link: function(scope, element, attrs, controller) {
+                if (scope.existingUsernames === undefined) {
+                  return;
+                }
+                controller.$validators.duplicateUsername =
+                    (modelValue, viewValue) => {
+                      const enteredUsername = modelValue || viewValue;
+                      const matchedExisting = scope.existingUsernames.find(
+                          (username) => username === enteredUsername);
+                      if (matchedExisting) {
+                        return false;
+                      } else {
+                        return true;
+                      }
+                    };
+                element.on('blur', () => {
+                  controller.$validate();
+                });
+              }
+        }
+      });
+})(window.angular);