From a247db7e9312372f34867cdc6d589e2f7173c8a0 Mon Sep 17 00:00:00 2001 From: Richard Wei <54336863+WaysonWei@users.noreply.github.com> Date: Fri, 12 Aug 2022 12:03:30 +1200 Subject: [PATCH] feat(ui): added teaser styling for CE EE-3780 (#7323) * added teaser styling for CE --- app/assets/css/app.css | 4 + app/assets/css/theme.css | 2 +- app/assets/ico/lock.svg | 4 + .../BEFeatureIndicator.html | 2 +- app/portainer/feature-flags/feature-flags.css | 51 ++- .../ldap/ad-settings/ad-settings.html | 334 ++++++++-------- .../ldap-settings-openldap.html | 356 +++++++++--------- .../activity-logs-view.html | 97 +++-- .../auth-logs-datatable.html | 2 +- .../auth-logs-view/auth-logs-view.html | 101 ++--- .../BEFeatureIndicator/BEFeatureIndicator.tsx | 10 +- 11 files changed, 529 insertions(+), 434 deletions(-) create mode 100644 app/assets/ico/lock.svg diff --git a/app/assets/css/app.css b/app/assets/css/app.css index a8a7f35d4..4ae31fb5e 100644 --- a/app/assets/css/app.css +++ b/app/assets/css/app.css @@ -886,6 +886,10 @@ json-tree .branch-preview { text-decoration-line: underline; } +reach-portal > div { + z-index: 10; +} + input[style*='background-image: url("data:image/png'] + [data-cy='auth-passwordInputToggle'] { right: 20px; } diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css index f101ff286..15ef50d81 100644 --- a/app/assets/css/theme.css +++ b/app/assets/css/theme.css @@ -86,7 +86,7 @@ --orange-1: #e86925; - --BE-only: var(--orange-1); + --BE-only: var(--ui-warning-7); /* Default Theme */ --bg-card-color: var(--white-color); diff --git a/app/assets/ico/lock.svg b/app/assets/ico/lock.svg new file mode 100644 index 000000000..d28402edd --- /dev/null +++ b/app/assets/ico/lock.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html b/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html index ba53bf81e..ce3114a64 100644 --- a/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html +++ b/app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html @@ -1,5 +1,5 @@ - + Business Edition Feature diff --git a/app/portainer/feature-flags/feature-flags.css b/app/portainer/feature-flags/feature-flags.css index 600296aee..464f680ac 100644 --- a/app/portainer/feature-flags/feature-flags.css +++ b/app/portainer/feature-flags/feature-flags.css @@ -20,14 +20,59 @@ button.limited-be.oauth-save-settings-button { ng-form.limited-be, form.limited-be, div.limited-be { - border: solid 1px var(--BE-only); - box-shadow: var(--shadow-boxselector-color); - padding: 10px; + border: solid 2px var(--BE-only); + border-radius: 8px; pointer-events: none; touch-action: none; display: block; } +.limited-be-content { + background: rgba(247, 144, 9, 0.1); + opacity: 0.5; + padding: 10px; +} + +.limited-be-link { + z-index: 5; + position: relative; + width: 270px; + height: 40px; + top: 0px; + right: 0px; + float: right; + border-top-right-radius: 8px; + border-bottom-left-radius: 8px; + background-color: var(--ui-warning-5); + color: var(--ui-warning-9); + padding: 5px 10px; + touch-action: auto; + cursor: hand; + pointer-events: auto; +} + +.limited-be-link a { + cursor: hand; + pointer-events: auto; + color: var(--ui-warning-9); +} + +.limited-be-link a:hover { + text-decoration: underline; + color: var(--ui-warning-9); +} + +.overlay { + background-image: url(../../assets/ico/lock.svg); + background-repeat: no-repeat; + background-position: center; +} + +.limited-be input, +.limited-be .widget-body { + background: rgba(247, 144, 9, 0.05); +} + .form-control.limited-be[disabled] { background-color: transparent !important; } diff --git a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html index 1c8991d6d..4ca1ed69b 100644 --- a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html +++ b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html @@ -1,170 +1,176 @@ - +
+
+
+ + + With automatic user provisioning enabled, Portainer will create user(s) automatically with standard user role and assign them to team(s) which matches to LDAP group + name(s). If disabled, users must be created in Portainer beforehand. + + - - - With automatic user provisioning enabled, Portainer will create user(s) automatically with standard user role and assign them to team(s) which matches to LDAP group name(s). - If disabled, users must be created in Portainer beforehand. - - - -
-
Information
-
- When using Microsoft AD authentication, Portainer will delegate user authentication to the Domain Controller(s) configured below; if there is no connectivity, Portainer will - fallback to internal authentication. -
-
- -
AD configuration
- -
-
-

- - You can configure multiple AD Controllers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use - the same certificates). -

-
-
- -
- -
-
- - +
+
Information
+
+ When using Microsoft AD authentication, Portainer will delegate user authentication to the Domain Controller(s) configured below; if there is no connectivity, Portainer + will fallback to internal authentication. +
+ +
AD configuration
+ +
+
+

+ + You can configure multiple AD Controllers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all + use the same certificates). +

+
+
+ +
+ +
+
+ + +
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ + + + + + + + + + + + + + +
- -
- -
- -
-
- -
- -
- -
-
- - - - - - - - - - - - - - - diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html index d4e0ab59e..fc57e708f 100644 --- a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html +++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html @@ -1,184 +1,192 @@ - - -
-
Information
-
- When using LDAP authentication, Portainer will delegate user authentication to a LDAP server and fallback to internal authentication if LDAP authentication fails. -
-
- -
LDAP configuration
- -
-
-

- - You can configure multiple LDAP Servers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use the - same certificates). -

-
-
- -
- -
-
- - +
+
+
+
+
Information
+
+ When using LDAP authentication, Portainer will delegate user authentication to a LDAP server and fallback to internal authentication if LDAP authentication fails. +
-
-
- -
- +
LDAP configuration
-
- -
-
- - -
-
- -
- +
+
+

+ + You can configure multiple LDAP Servers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use + the same certificates). +

+
-
-
- -
- +
+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + +
+
+ +
+ +
+
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+
+ + + + + + + + + + + + +
- -
- -
- -
-
- - - - - - - - - - - - - diff --git a/app/portainer/user-activity/activity-logs-view/activity-logs-view.html b/app/portainer/user-activity/activity-logs-view/activity-logs-view.html index 3ad846336..ad38951f8 100644 --- a/app/portainer/user-activity/activity-logs-view/activity-logs-view.html +++ b/app/portainer/user-activity/activity-logs-view/activity-logs-view.html @@ -1,46 +1,61 @@ -
- - -
-
- -
- +
+
+
+
+ + +
+
+ +
+ +
+
-
-
-

- - Portainer user activity logs have a maximum retention of 7 days. -

-
- - -
- - -
- -
-
- +

+ + Portainer user activity logs have a maximum retention of 7 days. +

+
+ +
+ + +
+
+
+ +
+
+
+
+
+ +
+
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html index a6a4778a4..5761ffd65 100644 --- a/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html +++ b/app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html @@ -11,7 +11,7 @@
- +
diff --git a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html index 38f73484a..ab5c9f32a 100644 --- a/app/portainer/user-activity/auth-logs-view/auth-logs-view.html +++ b/app/portainer/user-activity/auth-logs-view/auth-logs-view.html @@ -1,48 +1,63 @@ -
- - -
-
- -
- +
+
+
+
+ + +
+
+ +
+ +
+
-
-
-

- - Portainer user authentication activity logs have a maximum retention of 7 days. -

-
- - -
- - -
- -
-
- +

+ + Portainer user authentication activity logs have a maximum retention of 7 days. +

+
+ +
+ + +
+
+
+ +
+
+
+
+
+ +
+
diff --git a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx index a0a897e8c..f521089ab 100644 --- a/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx +++ b/app/react/components/BEFeatureIndicator/BEFeatureIndicator.tsx @@ -1,5 +1,6 @@ import { PropsWithChildren } from 'react'; import clsx from 'clsx'; +import { Briefcase } from 'react-feather'; import './BEFeatureIndicator.css'; @@ -24,19 +25,16 @@ export function BEFeatureIndicator({ if (!limitedToBE) { return null; } - return ( {children} - {showIcon && ( - - )} - + {showIcon && } + Business Edition Feature