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

4 files changed, 577 insertions, 0 deletions

diff --git a/app/access-control/styles/certificate.scss b/app/access-control/styles/certificate.scss
new file mode 100644
index 0000000..a7c57f2
--- /dev/null
+++ b/app/access-control/styles/certificate.scss
@@ -0,0 +1,250 @@
+.certificate__table {
+  border-left: 1px solid $border-color-01;
+  border-right: 1px solid $border-color-01;
+  margin-top: 0.5em;
+  .table__row-header {
+    width: 100%;
+    border-bottom: 1px solid $border-color-01;
+    background-color: $primary-dark;
+    color: $primary-light;
+    font-weight: 700;
+  }
+  .table__row-value {
+    width: 100%;
+    border-bottom: 1px solid $border-color-01;
+  }
+  .certificate__type-header {
+    @include mediaQuery(small) {
+      width: 20%;
+      background: transparent;
+    }
+    width: 100%;
+    padding: 0.8em;
+    padding-left: 1.5em;
+  }
+  .certificate__issue-header {
+    display: none;
+    padding: 0.8em;
+    @include mediaQuery(small) {
+      width: 20%;
+      display: block;
+    }
+  }
+  .certificate__date-header {
+    padding: 0.8em;
+    @include mediaQuery(small) {
+      width: 12%;
+      display: block;
+    }
+    display: none;
+  }
+  .certificate__status-header {
+    padding: 0.8em;
+    @include mediaQuery(small) {
+      width: 5%;
+      display: block;
+    }
+    display: none;
+  }
+  .certificate__type-cell {
+    width: 100%;
+    padding: 0.8em 0.8em 0.8em 1.5em;
+    word-wrap: break-word;
+    background: $background-02;
+    @include mediaQuery(small) {
+      width: 20%;
+      background: transparent;
+    }
+  }
+  .certificate__issue-cell {
+    padding: 0.8em;
+    word-wrap: break-word;
+    @include mediaQuery(small) {
+      width: 20%;
+    }
+    width: 70%;
+  }
+  .certificate__date-cell {
+    width: 70%;
+    padding: 0.8em;
+    word-wrap: break-word;
+    @include mediaQuery(small) {
+      width: 12%;
+    }
+  }
+  .certificate__status-cell {
+    padding: 0.8em;
+    @include mediaQuery(small) {
+      display: block;
+      width: 5%;
+    }
+    display: none;
+  }
+  .certificate__status-icon {
+    width: 1.2em;
+    svg {
+      margin-bottom: .2em;
+    }
+  }
+  .certificate__buttons-cell {
+    @include mediaQuery(small) {
+      width: 10%;
+      padding-top: 0.5em;
+    }
+    width: 100%;
+    text-align: right;
+    padding: 0 1.5em 0 0;
+  }
+  .certificate__title-inline {
+    @include mediaQuery(small) {
+      display: none;
+    }
+    width: 30%;
+    display: block;
+    padding: 0.8em 0.8em 0.8em 1.5em;
+  }
+  .upload__certificate {
+    border-top: 1px solid $border-color-01;
+    width: 100%;
+    background: $background-02;
+    padding: 0.8em;
+  }
+}
+.certificate__upload-chooser {
+  background: $background-02;
+}
+
+
+.certificate__close-modal {
+  float: right;
+  position: relative;
+  bottom: 1rem;
+  left: 2rem;
+}
+.certificate__table__icon {
+  margin-left: 1.5em;
+  margin-bottom: .4em;
+}
+
+.add__certificate__modal {
+  select {
+    margin-bottom: 0;
+  }
+  .file__upload {
+    margin-bottom: 2em;
+  }
+  .select__new-label {
+    margin-bottom: 1em;
+  }
+  .select__new-button {
+    font-size: 1.2em;
+  }
+  .file__name {
+    background-color: $background-02;
+    padding: 0.5em;
+  }
+}
+
+.add-certificate__section {
+  padding-left: 0;
+}
+
+// Combinator needed to match specificity
+// of default modal settings
+.modal.add-csr__modal {
+  width: 100%;
+  max-height: 100vh;
+  overflow-y: auto;
+  z-index: 1001;
+}
+
+.add-csr__section:first-of-type {
+  padding-left: 0;
+}
+
+.add-csr__section:last-of-type {
+  margin-top: 2rem;
+  padding-right: 0;
+
+  @media (min-width: 640px) {
+    margin-top: 0;
+  }
+}
+
+.add-csr__section-title {
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+.add-csr__section--border {
+  @media (min-width: 640px) {
+    padding-left: 2rem;
+    border-left: 1px solid $base-02--04;
+  }
+}
+
+.add-csr__label {
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.add-csr__text-helper {
+  color: $base-02--02;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.2;
+  margin-bottom: .5em;
+}
+
+input.add-csr__input,
+select.add-csr__select {
+  width: 100%;
+  margin-bottom: 0;
+  max-height: none;
+  height: auto;
+}
+
+.select.add-csr__select  {
+  line-height: 1.15;
+}
+
+input.add-csr__input-no-validation {
+  margin-bottom: 1.7rem;
+}
+
+.add-csr__additional-alt-names {
+  display: flex;
+}
+
+.add-csr__alt-name-add-btn {
+  padding: 0;
+  @media (min-width: 640px) {
+    margin: 1.9rem 0;
+  }
+}
+
+.add-csr__alt-name-delete-btn {
+  width: 20px;
+  height: 30px;
+  padding: 0;
+
+  icon {
+    margin-right: 0;
+  }
+}
+
+.add-csr-code__header {
+  margin-top: 1em;
+}
+
+.add-csr__container-csr-code {
+  white-space: pre-wrap;
+}
+
+.add-csr__text-download {
+  color: $base-02--08;
+}
+
+select.add-csr__multiselect {
+  height: 14rem;
+}
diff --git a/app/access-control/styles/index.scss b/app/access-control/styles/index.scss
new file mode 100644
index 0000000..dff0b5d
--- /dev/null
+++ b/app/access-control/styles/index.scss
@@ -0,0 +1,3 @@
+@import "./user-accounts.scss";
+@import "./certificate.scss";
+@import "./ldap.scss";
diff --git a/app/access-control/styles/ldap.scss b/app/access-control/styles/ldap.scss
new file mode 100644
index 0000000..a18ac70
--- /dev/null
+++ b/app/access-control/styles/ldap.scss
@@ -0,0 +1,269 @@
+// LDAP SCSS
+
+.ldap__optional-field {
+  margin-bottom: 1.7em;
+}
+
+.ldap__configure-settings {
+  background-color: $base-02--06;
+  padding-top: 1.5em;
+  padding-bottom: 1.5em;
+  margin-top: 1em;
+  margin-bottom: 3em;
+}
+
+.ldap__server-info {
+  @media (min-width: 1024px) {
+    border-left: 1px solid $border-color-01;
+  }
+
+  .control-radio {
+    margin-bottom: 6px;
+    display: block;
+  }
+
+  .service-type-column {
+    margin-bottom: 1.2em;
+  }
+}
+
+.ldap__ssl-column {
+  padding-left: 1.5em;
+  .control__label {
+    text-transform: none;
+    font-weight: 400;
+    font-size: 16px;
+    color: $primary-dark;
+  }
+  .control__indicator {
+    top: 5px;
+  }
+}
+
+.ldap__configuration-buttons {
+  margin-top: 1rem;
+
+  @media (min-width: 1024px) {
+    margin-top: 0;
+  }
+
+  .btn {
+    float: right;
+    margin-left: 0.5em;
+    margin-top: 0.5em;
+  }
+
+  .btn-secondary {
+    background-color: $primary-light;
+  }
+
+  .btn-secondary:disabled {
+    color: $base-02--03;
+    border-color: $border-color-02;
+  }
+}
+
+.ldap__server-info-service-type {
+  .content-label {
+    margin-bottom: 1rem;
+  }
+}
+
+.ldap__certificate-info {
+  padding-top: 0.5em;
+  small {
+    font-size: 14px;
+  }
+  p {
+    color: $base-02--02;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 0.75em;
+    margin-bottom: 0;
+  }
+}
+
+.control__radio__label {
+  padding: 0.2em 1em 0 2em;
+  text-transform: none;
+  font-weight: 400;
+  font-size: 16px;
+  color: $primary-dark;
+}
+
+.ldap__control-check {
+  text-transform: none;
+  font-weight: 400;
+  font-size: 16px;
+  color: $primary-dark;
+
+  .control__indicator {
+    top: 11px;
+  }
+
+  .control__label {
+    margin-left: 30px;
+  }
+}
+
+.control-radio .control__indicator-service-type {
+  width: 20px;
+  height: 20px;
+}
+
+.control-radio .control__indicator-service-type:after {
+  top: 3px;
+  left: 3px;
+  width: 10px;
+  height: 10px;
+}
+
+.control-radio input:disabled ~ .control__indicator-service-type:after {
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.password-toggle {
+  color: $base-01--03;
+  font-size: 0.8em;
+  float: right;
+  position: relative;
+  z-index: 2;
+  padding: 6px 0 0 0;
+}
+
+.password-toggle.disabled {
+  background: transparent;
+  color: $base-02--03;
+  border: none;
+}
+
+.ldap-groups {
+  .ldap__table {
+    border-left: 1px solid $border-color-01;
+    border-right: 1px solid $border-color-01;
+
+    .empty__logs {
+      margin-top: 0;
+    }
+
+    .table__row-header {
+      width: 100%;
+      border-bottom: 1px solid $border-color-01;
+      background-color: $primary-dark;
+      color: $primary-light;
+      font-weight: 700;
+      padding: 0;
+    }
+
+    .table__row-header.disabled {
+      opacity: 0.8;
+    }
+
+    .table__row-value {
+      width: 100%;
+      border-bottom: 1px solid $border-color-01;
+    }
+
+    .table__cell-ldap {
+      width: 30%;
+      padding: 1.3em 1.5em 0.8em 1.5em;
+    }
+
+    .table__cell-select {
+      width: 8%;
+      padding: 1.3em 1.5em 0.8em 1.5em;
+      .select-header {
+        padding-top: 1em;
+      }
+    }
+
+    .table__cell-sort {
+      padding: 0.4em 1em 0 0;
+      margin: 0 -25px 0 -13px;
+    }
+
+    .table__cell-ldap-group {
+      width: 29%;
+      padding: 1.2em 0.5em 0.8em 0.75em;
+    }
+
+    .table__cell-ldap-role {
+      width: 30%;
+      padding: 1.2em 0.5em 0.8em 0.75em;
+    }
+
+    .table__cell-buttons {
+      width: 32%;
+      text-align: right;
+      padding: 0.8em;
+      .btn {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
+
+  .btn-add-group,
+  .btn-remove-group {
+    color: $base-01--03;
+    padding: 0.75em 0;
+  }
+
+  .modal__content-ldap {
+    margin-bottom: 2em;
+    margin-top: 2em;
+    input[type="text"] {
+      max-height: 2.4em;
+    }
+    select {
+      margin: 0 0 0;
+    }
+  }
+
+  .edit-group-name {
+    padding-bottom: 1em;
+  }
+
+  .form-actions {
+    width: 100%;
+    padding-top: 2em;
+    margin-top: 1.5em;
+    border-top: 1px solid $border-color-01;
+    button {
+      display: block;
+      float: right;
+      margin: 0 0 0 1em;
+    }
+  }
+
+  .sort-ascending,
+  .sort-descending {
+    display: block;
+    padding: 0;
+    color: $primary-light;
+    font-size: 1em;
+    transform: rotate(-90deg);
+
+    &:hover {
+      color: $primary-accent;
+    }
+
+    &:after {
+      content: "\276F";
+    }
+
+    &:focus {
+      outline: 0;
+      color: $primary-accent;
+    }
+  }
+
+  .sort-descending {
+    &:after {
+      content: "\276e";
+    }
+  }
+}
diff --git a/app/access-control/styles/user-accounts.scss b/app/access-control/styles/user-accounts.scss
new file mode 100644
index 0000000..fa0c5d7
--- /dev/null
+++ b/app/access-control/styles/user-accounts.scss
@@ -0,0 +1,55 @@
+.local-users {
+  margin-bottom: 50px;
+}
+
+.local-users__actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.modal__local-users,
+.modal__local-users-settings {
+  .modal-body {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.modal__local-users {
+  input[type="password"] {
+    &::placeholder {
+      color: $primary-dark;
+      font-weight: bold;
+    }
+    &::-ms-placeholder {
+      color: $primary-dark;
+      font-weight: bold;
+    }
+  }
+}
+
+.role-table {
+  margin-top: 30px;
+  .bmc-table__cell:not(:first-of-type) {
+    text-align: center;
+  }
+  .bmc-table__column-header {
+    text-align: center;
+  }
+
+  // Bootstrap collapse directive override
+  // The expanded element gets 'in' class instead of 'show' class
+  // Bootstrap changes the display property for 'show' but not 'in'
+  .collapse.in {
+      display: block!important;
+  }
+}
+
+.icon__check-mark {
+  display: inline-block;
+  svg {
+    width: 16px;
+    fill: $primary-dark;
+  }
+}
\ No newline at end of file