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
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