diff --git a/services/web/frontend/js/features/ui/components/ol/ol-form-control.tsx b/services/web/frontend/js/features/ui/components/ol/ol-form-control.tsx index 08ebd7e1ad..398d2556b3 100644 --- a/services/web/frontend/js/features/ui/components/ol/ol-form-control.tsx +++ b/services/web/frontend/js/features/ui/components/ol/ol-form-control.tsx @@ -62,6 +62,7 @@ const OLFormControl: BsPrefixRefForwardingComponent< onFocus: rest.onFocus as BS3FormControlProps['onFocus'], onBlur: rest.onBlur as BS3FormControlProps['onBlur'], onInvalid: rest.onInvalid as BS3FormControlProps['onInvalid'], + onPaste: rest.onPaste as BS3FormControlProps['onPaste'], prepend: rest.prepend, size: rest.htmlSize, 'main-field': rest['main-field'], diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss index 09ae8ec60c..fb9c7de0fa 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss @@ -30,3 +30,287 @@ color: var(--yellow-50); } } + +.managed-users-enabled { + color: var(--content-positive); + + .icon { + vertical-align: text-bottom; + } +} + +h3.group-settings-title { + margin-bottom: var(--spacing-03); + + @include heading-sm; +} + +h4.group-settings-title { + margin-bottom: 0; + font-size: var(--font-size-03); + line-height: var(--line-height-04); +} + +h3.group-settings-title, +h4.group-settings-title { + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 0; +} + +.group-settings-sso { + .group-settings-sso-row { + margin-top: var(--spacing-07); + display: flex; + align-items: center; + justify-content: space-between; + + .group-settings-sso-action-col { + margin-left: var(--spacing-06); + } + } +} + +.below-settings-section { + border-top: 1px solid var(--border-disabled); + padding-top: var(--spacing-08); + margin-top: var(--spacing-08); +} + +.sso-config-info { + padding: var(--spacing-05) 0; + border-radius: var(--border-radius-base); + + .sso-config-info-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--spacing-03); + padding: 0 var(--spacing-06) var(--spacing-06) var(--spacing-06); + border-bottom: 1px solid var(--border-disabled); + margin-bottom: var(--spacing-06); + flex-wrap: wrap; + } + + .sso-config-options-buttons { + display: flex; + gap: var(--spacing-04); + } + + .sso-config-info-section { + margin-bottom: var(--spacing-07); + padding: 0 var(--spacing-06); + + &:last-child { + margin-bottom: 0; + } + } + + .sso-config-info-label { + font-size: var(--font-size-02); + font-weight: bold; + + .certificate-status { + font-weight: normal; + + .material-symbols { + vertical-align: top; + } + + &.certificate-valid { + color: var(--content-positive); + } + + &.certificate-expiring-soon { + color: var(--content-warning); + } + + &.certificate-expired { + color: var(--content-danger); + } + } + } + + .sso-config-info-label-optional { + font-weight: normal; + } + + .sso-config-info-content { + color: var(--content-primary); + word-break: break-word; + } + + .sso-config-info-content-empty { + color: var(--neutral-60); + } + + p { + margin-bottom: var(--spacing-03); + } +} + +.sso-config-modal-content { + .sso-config-interstitial-title { + font-size: var(--font-size-05); + font-weight: bold; + text-align: center; + } + + .sso-config-modal-icon-wrapper { + text-align: center; + margin-top: var(--spacing-04); + + .sso-config-interstitial-icon, + .sso-config-test-result-icon, + .sso-config-test-error-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 80px; + height: 80px; + font-size: var(--font-size-08); + border-radius: 50%; + gap: var(--spacing-04); + } + + .sso-config-interstitial-icon { + background-color: var(--bg-light-secondary); + } + + .sso-config-test-result-icon { + background-color: var(--bg-accent-03); + color: var(--content-positive); + } + + .sso-config-test-error-icon { + background-color: var(--bg-danger-03); + color: var(--content-danger); + } + } + + .payload-content { + padding: var( + --spacing-06 + ); // vertical padding added by elements within notification + + width: 100%; + border-radius: $border-radius-base; + color: var(--content-primary); + border: 1px solid var(--border-disabled); + + .saml-response-xml-wrapper { + margin-top: var(--spacing-06); + overflow: hidden; + background-color: var(--bg-light-secondary); + border-radius: var(--border-radius-base); + + .saml-response-header { + display: flex; + justify-content: space-between; + align-items: center; + font-size: var(--font-size-03); + line-height: 56px; + font-weight: bold; + padding: 0 var(--spacing-06); + border-bottom: 1px solid var(--border-disabled); + } + + .saml-response-footer { + text-align: center; + line-height: 56px; + position: sticky; + bottom: 0; + background: linear-gradient( + 360deg, + $neutral-10 0%, + rgb(244 245 246 / 0%) 835.48% + ); + } + + .saml-response-xml { + @include font-mono; + + white-space: pre-wrap; + font-size: var(--font-size-02); + word-break: break-word; + padding: var(--spacing-06) var(--spacing-06) 0 var(--spacing-06); + height: 100px; + min-height: 100px; + + &.view-more { + height: auto; + } + } + + .expand-viewer { + .material-symbols { + font-size: 24px; + } + } + } + + .payload-content-user-info-item { + margin-bottom: var(--spacing-03); + display: inline-block; + width: 100%; + overflow-wrap: break-word; + } + } +} + +.certificate-wrapper { + .certificate-delete { + vertical-align: middle; + } + + .view-more { + vertical-align: middle; + padding: 0; + } +} + +.certificate-truncated { + display: flex; + align-items: center; + + .view-more { + flex-grow: 0; + flex-shrink: 0; + margin-left: var(--spacing-06); + } + + .certificate { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + display: inline-block; + flex-grow: 4; + } +} + +.certificate { + font-family: Courier, monospace; +} + +.certificate-delete { + text-decoration: none; +} + +.certificate-full .certificate { + word-break: break-all; + display: block; +} + +.certificate-form-row { + display: flex; + + .certificate-input { + flex-grow: 11; + } + + .certificate-delete { + flex-grow: 1; + flex-shrink: 0; + } +} diff --git a/services/web/frontend/stylesheets/modules/group-settings.less b/services/web/frontend/stylesheets/modules/group-settings.less index 5800a51dfb..90e5df0832 100644 --- a/services/web/frontend/stylesheets/modules/group-settings.less +++ b/services/web/frontend/stylesheets/modules/group-settings.less @@ -1,15 +1,15 @@ -h2.group-settings-title { +h3.group-settings-title { margin-bottom: 5px; font-size: @font-size-large; } -h3.group-settings-title { +h4.group-settings-title { margin-bottom: 0; font-size: @font-size-base; } -h2.group-settings-title, -h3.group-settings-title { +h3.group-settings-title, +h4.group-settings-title { font-family: Lato, sans-serif; line-height: 28px; font-weight: bold; @@ -124,6 +124,7 @@ h3.group-settings-title { .sso-config-info-header { display: flex; justify-content: space-between; + align-items: center; gap: @margin-xs; padding: 0 @padding-base-horizontal 15px @padding-base-horizontal; border-bottom: 1px solid @neutral-20; @@ -134,7 +135,6 @@ h3.group-settings-title { font-size: @font-size-small; border-radius: 4px; padding: 2px 4px; - margin-top: 4px; flex-shrink: 0; &.status-label-valid { @@ -150,9 +150,8 @@ h3.group-settings-title { } .sso-config-options-buttons { - button:not(:last-child) { - margin-right: 8px; - } + display: flex; + gap: 8px; } .sso-config-info-section { @@ -208,8 +207,8 @@ h3.group-settings-title { } .sso-config-modal-content { - .sso-config-interstitial-title, - .sso-config-test-result-title { + .sso-config-interstitial-title { + margin-top: 25px; font-family: Lato, sans-serif; font-size: 20px; font-weight: bold; @@ -246,13 +245,6 @@ h3.group-settings-title { } } - .sso-config-test-result-title { - font-family: Lato, sans-serif; - font-size: 20px; - font-weight: bold; - text-align: center; - } - .has-feedback { .form-control { padding-right: 0; @@ -389,7 +381,3 @@ h3.group-settings-title { flex-shrink: 0; } } - -.btn-import-metadata { - margin-left: 8px; -}