web: app icons v2 (#6410)

* fix more icons stuff Signed-off-by: Jens Langhammer <jens@goauthentik.io> * refactor app icon into separate component Signed-off-by: Jens Langhammer <jens@goauthentik.io> * update locale Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make app icon work correctly in admin list and app view page Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2023-07-28 14:25:56 +02:00 · 2023-07-28 14:25:56 +02:00 · 782d95b4a3
parent 5803c39e91
commit 782d95b4a3
17 changed files with 301 additions and 207 deletions
--- a/locale/en/LC_MESSAGES/django.po
+++ b/locale/en/LC_MESSAGES/django.po
@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-07-21 13:04+0000\n"
+"POT-Creation-Date: 2023-07-28 11:50+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@ -427,7 +427,7 @@ msgstr ""
 msgid "Webhook Mappings"
 msgstr ""

-#: authentik/events/monitored_tasks.py:198
+#: authentik/events/monitored_tasks.py:205
 msgid "Task has not been run yet."
 msgstr ""

@ -585,65 +585,65 @@ msgstr ""
 msgid "Invalid kubeconfig"
 msgstr ""

-#: authentik/outposts/models.py:121
+#: authentik/outposts/models.py:122
 msgid ""
 "If enabled, use the local connection. Required Docker socket/Kubernetes "
 "Integration"
 msgstr ""

-#: authentik/outposts/models.py:151
+#: authentik/outposts/models.py:152
 msgid "Outpost Service-Connection"
 msgstr ""

-#: authentik/outposts/models.py:152
+#: authentik/outposts/models.py:153
 msgid "Outpost Service-Connections"
 msgstr ""

-#: authentik/outposts/models.py:160
+#: authentik/outposts/models.py:161
 msgid ""
 "Can be in the format of 'unix://<path>' when connecting to a local docker "
 "daemon, or 'https://<hostname>:2376' when connecting to a remote system."
 msgstr ""

-#: authentik/outposts/models.py:172
+#: authentik/outposts/models.py:173
 msgid ""
 "CA which the endpoint's Certificate is verified against. Can be left empty "
 "for no validation."
 msgstr ""

-#: authentik/outposts/models.py:184
+#: authentik/outposts/models.py:185
 msgid ""
 "Certificate/Key used for authentication. Can be left empty for no "
 "authentication."
 msgstr ""

-#: authentik/outposts/models.py:202
+#: authentik/outposts/models.py:203
 msgid "Docker Service-Connection"
 msgstr ""

-#: authentik/outposts/models.py:203
+#: authentik/outposts/models.py:204
 msgid "Docker Service-Connections"
 msgstr ""

-#: authentik/outposts/models.py:211
+#: authentik/outposts/models.py:212
 msgid ""
 "Paste your kubeconfig here. authentik will automatically use the currently "
 "selected context."
 msgstr ""

-#: authentik/outposts/models.py:217
+#: authentik/outposts/models.py:218
 msgid "Verify SSL Certificates of the Kubernetes API endpoint"
 msgstr ""

-#: authentik/outposts/models.py:234
+#: authentik/outposts/models.py:235
 msgid "Kubernetes Service-Connection"
 msgstr ""

-#: authentik/outposts/models.py:235
+#: authentik/outposts/models.py:236
 msgid "Kubernetes Service-Connections"
 msgstr ""

-#: authentik/outposts/models.py:251
+#: authentik/outposts/models.py:252
 msgid ""
 "Select Service-Connection authentik should use to manage this outpost. Leave "
 "empty if authentik should not handle the deployment."
--- a/web/src/admin/applications/ApplicationListPage.ts
+++ b/web/src/admin/applications/ApplicationListPage.ts
@ -1,5 +1,6 @@
 import "@goauthentik/admin/applications/ApplicationForm";
 import "@goauthentik/admin/applications/wizard/ApplicationWizard";
+import { PFSize } from "@goauthentik/app/elements/Spinner";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import MDApplication from "@goauthentik/docs/core/applications.md";
@ -11,13 +12,12 @@ import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
+import "@goauthentik/user/LibraryApplication/AppIcon";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";

-import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";

 import { Application, CoreApi } from "@goauthentik/api";
@ -56,13 +56,8 @@ export class ApplicationListPage extends TablePage<Application> {

    static get styles(): CSSResult[] {
        return super.styles.concat(
-            PFAvatar,
            PFCard,
            css`
-                :host {
-                    --icon-height: 2rem;
-                    --icon-border: 0.25rem;
-                }
                /* Fix alignment issues with images in tables */
                .pf-c-table tbody > tr > * {
                    vertical-align: middle;
@ -76,14 +71,6 @@ export class ApplicationListPage extends TablePage<Application> {
                .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
                    margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2);
                }
-                .icon {
-                    font-size: var(--icon-height);
-                    color: var(--ak-global--Color--100);
-                    padding: var(--icon-border);
-                    max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
-                    line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
-                    filter: drop-shadow(5px 5px 5px rgba(128, 128, 128, 0.25));
-                }
            `,
        );
    }
@ -137,24 +124,9 @@ export class ApplicationListPage extends TablePage<Application> {
        </ak-forms-delete-bulk>`;
    }

-    renderIcon(item: Application): TemplateResult {
-        if (item?.metaIcon) {
-            if (item.metaIcon.startsWith("fa://")) {
-                const icon = item.metaIcon.replaceAll("fa://", "");
-                return html`<i class="icon fas ${icon}"></i>`;
-            }
-            return html`<img
-                class="icon pf-c-avatar"
-                src="${ifDefined(item.metaIcon)}"
-                alt="${msg("Application Icon")}"
-            />`;
-        }
-        return html`<span class="icon">${item?.name.charAt(0).toUpperCase()}</span>`;
-    }
-
    row(item: Application): TemplateResult[] {
        return [
-            this.renderIcon(item),
+            html`<ak-app-icon size=${PFSize.Medium} .app=${item}></ak-app-icon>`,
            html`<a href="#/core/applications/${item.slug}">
                <div>${item.name}</div>
                ${item.metaPublisher ? html`<small>${item.metaPublisher}</small>` : html``}
--- a/web/src/admin/applications/ApplicationViewPage.ts
+++ b/web/src/admin/applications/ApplicationViewPage.ts
@ -2,6 +2,7 @@ import "@goauthentik/admin/applications/ApplicationAuthorizeChart";
 import "@goauthentik/admin/applications/ApplicationCheckAccessForm";
 import "@goauthentik/admin/applications/ApplicationForm";
 import "@goauthentik/admin/policies/BoundPoliciesList";
+import { PFSize } from "@goauthentik/app/elements/Spinner";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/EmptyState";
@ -9,6 +10,7 @@ import "@goauthentik/elements/PageHeader";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import "@goauthentik/elements/events/ObjectChangelog";
+import "@goauthentik/user/LibraryApplication/AppIcon";

 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@ -80,11 +82,15 @@ export class ApplicationViewPage extends AKElement {

    render(): TemplateResult {
        return html`<ak-page-header
-                icon=${this.application?.metaIcon || ""}
                header=${this.application?.name || msg("Loading")}
                description=${ifDefined(this.application?.metaPublisher)}
                .iconImage=${true}
            >
+                <ak-app-icon
+                    size=${PFSize.Small}
+                    slot="icon"
+                    .app=${this.application}
+                ></ak-app-icon>
            </ak-page-header>
            ${this.renderApp()}`;
    }
--- a/web/src/elements/Expand.ts
+++ b/web/src/elements/Expand.ts
@ -1,7 +1,7 @@
 import { AKElement } from "@goauthentik/elements/Base";

 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";

 import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";
@ -19,7 +19,15 @@ export class Expand extends AKElement {
    textClosed = msg("Show more");

    static get styles(): CSSResult[] {
-        return [PFBase, PFExpandableSection];
+        return [
+            PFBase,
+            PFExpandableSection,
+            css`
+                .pf-c-expandable-section.pf-m-display-lg {
+                    background-color: var(--pf-global--BackgroundColor--100);
+                }
+            `,
+        ];
    }

    render(): TemplateResult {
--- a/web/src/elements/PageHeader.ts
+++ b/web/src/elements/PageHeader.ts
@ -91,6 +91,11 @@ export class PageHeader extends AKElement {
                .notification-trigger.has-notifications {
                    color: var(--pf-global--active-color--100);
                }
+                h1 {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center !important;
+                }
            `,
        ];
    }
@ -120,10 +125,10 @@ export class PageHeader extends AKElement {
    renderIcon(): TemplateResult {
        if (this.icon) {
            if (this.iconImage && !this.icon.startsWith("fa://")) {
-                return html`<img class="pf-icon" src="${this.icon}" alt="page icon" />&nbsp;`;
+                return html`<img class="pf-icon" src="${this.icon}" alt="page icon" />`;
            }
            const icon = this.icon.replaceAll("fa://", "fa ");
-            return html`<i class=${icon}></i>&nbsp;`;
+            return html`<i class=${icon}></i>`;
        }
        return html``;
    }
@ -147,8 +152,8 @@ export class PageHeader extends AKElement {
                <section class="pf-c-page__main-section pf-m-light">
                    <div class="pf-c-content">
                        <h1>
-                            ${this.renderIcon()}
-                            <slot name="header"> ${this.header} </slot>
+                            <slot name="icon">${this.renderIcon()}</slot>&nbsp;
+                            <slot name="header">${this.header}</slot>
                        </h1>
                        ${this.description ? html`<p>${this.description}</p>` : html``}
                    </div>
--- a/web/src/user/LibraryApplication/AppIcon.ts
+++ b/web/src/user/LibraryApplication/AppIcon.ts
@ -0,0 +1,80 @@
+import { AKElement } from "@goauthentik/app/elements/Base";
+import { PFSize } from "@goauthentik/app/elements/Spinner";
+
+import { msg } from "@lit/localize";
+import { CSSResult, TemplateResult, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import PFFAIcons from "@patternfly/patternfly/base/patternfly-fa-icons.css";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
+
+import { Application } from "@goauthentik/api";
+
+@customElement("ak-app-icon")
+export class AppIcon extends AKElement {
+    @property({ attribute: false })
+    app?: Application;
+
+    @property()
+    size: PFSize = PFSize.Large;
+
+    static get styles(): CSSResult[] {
+        return [
+            PFFAIcons,
+            PFAvatar,
+            css`
+                :host([size="pf-m-lg"]) {
+                    --icon-height: 4rem;
+                    --icon-border: 0.25rem;
+                }
+                :host([size="pf-m-md"]) {
+                    --icon-height: 2rem;
+                    --icon-border: 0.125rem;
+                }
+                :host([size="pf-m-sm"]) {
+                    --icon-height: 1rem;
+                    --icon-border: 0.125rem;
+                }
+                .pf-c-avatar {
+                    --pf-c-avatar--BorderRadius: 0;
+                    --pf-c-avatar--Height: calc(
+                        var(--icon-height) + var(--icon-border) + var(--icon-border)
+                    );
+                    --pf-c-avatar--Width: calc(
+                        var(--icon-height) + var(--icon-border) + var(--icon-border)
+                    );
+                }
+                .icon {
+                    font-size: var(--icon-height);
+                    color: var(--ak-global--Color--100);
+                    padding: var(--icon-border);
+                    max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                    line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                    filter: drop-shadow(5px 5px 5px rgba(128, 128, 128, 0.25));
+                }
+                div {
+                    height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                }
+            `,
+        ];
+    }
+
+    render(): TemplateResult {
+        if (!this.app) {
+            return html`<div><i class="icon fas fa-question-circle"></i></div>`;
+        }
+        if (this.app?.metaIcon) {
+            if (this.app.metaIcon.startsWith("fa://")) {
+                const icon = this.app.metaIcon.replaceAll("fa://", "");
+                return html`<div><i class="icon fas ${icon}"></i></div>`;
+            }
+            return html`<img
+                class="icon pf-c-avatar"
+                src="${ifDefined(this.app.metaIcon)}"
+                alt="${msg("Application Icon")}"
+            />`;
+        }
+        return html`<span class="icon">${this.app?.name.charAt(0).toUpperCase()}</span>`;
+    }
+}
--- a/web/src/user/LibraryApplication/index.ts
+++ b/web/src/user/LibraryApplication/index.ts
@ -1,6 +1,7 @@
 import { truncateWords } from "@goauthentik/common/utils";
 import { AKElement, rootInterface } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/Expand";
+import "@goauthentik/user/LibraryApplication/AppIcon";
 import { UserInterface } from "@goauthentik/user/UserInterface";

 import { msg } from "@lit/localize";
@ -8,7 +9,6 @@ import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";

-import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -31,24 +31,10 @@ export class LibraryApplication extends AKElement {
            PFBase,
            PFCard,
            PFButton,
-            PFAvatar,
            css`
-                :host {
-                    --icon-height: 4rem;
-                    --icon-border: 0.25rem;
-                }
                .pf-c-card {
                    --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
                }
-                .pf-c-avatar {
-                    --pf-c-avatar--BorderRadius: 0;
-                    --pf-c-avatar--Height: calc(
-                        var(--icon-height) + var(--icon-border) + var(--icon-border)
-                    );
-                    --pf-c-avatar--Width: calc(
-                        var(--icon-height) + var(--icon-border) + var(--icon-border)
-                    );
-                }
                .pf-c-card__header {
                    justify-content: space-between;
                    flex-direction: column;
@ -58,13 +44,8 @@ export class LibraryApplication extends AKElement {
                    flex-direction: column;
                    justify-content: center;
                }
-                .icon {
-                    font-size: var(--icon-height);
-                    color: var(--ak-global--Color--100);
-                    padding: var(--icon-border);
-                    max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
-                    line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
-                    filter: drop-shadow(5px 5px 5px rgba(128, 128, 128, 0.25));
+                a:hover {
+                    text-decoration: none;
                }
                .expander {
                    flex-grow: 1;
@ -80,21 +61,6 @@ export class LibraryApplication extends AKElement {
        ];
    }

-    renderIcon(): TemplateResult {
-        if (this.application?.metaIcon) {
-            if (this.application.metaIcon.startsWith("fa://")) {
-                const icon = this.application.metaIcon.replaceAll("fa://", "");
-                return html`<i class="icon fas ${icon}"></i>`;
-            }
-            return html`<img
-                class="icon pf-c-avatar"
-                src="${ifDefined(this.application.metaIcon)}"
-                alt="${msg("Application Icon")}"
-            />`;
-        }
-        return html`<span class="icon">${this.application?.name.charAt(0).toUpperCase()}</span>`;
-    }
-
    render(): TemplateResult {
        if (!this.application) {
            return html`<ak-spinner></ak-spinner>`;
@ -111,7 +77,7 @@ export class LibraryApplication extends AKElement {
                    href="${ifDefined(this.application.launchUrl ?? "")}"
                    target="${ifDefined(this.application.openInNewTab ? "_blank" : undefined)}"
                >
-                    ${this.renderIcon()}
+                    <ak-app-icon .app=${this.application}></ak-app-icon>
                </a>
            </div>
            <div class="pf-c-card__title">
--- a/web/xliff/de.xlf
+++ b/web/xliff/de.xlf
@ -5751,15 +5751,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -5828,6 +5819,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/en.xlf
+++ b/web/xliff/en.xlf
@ -6067,15 +6067,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -6144,6 +6135,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/es.xlf
+++ b/web/xliff/es.xlf
@ -5659,15 +5659,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -5736,6 +5727,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/fr_FR.xlf
+++ b/web/xliff/fr_FR.xlf
@ -5766,15 +5766,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -5843,6 +5834,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/pl.xlf
+++ b/web/xliff/pl.xlf
@ -5898,15 +5898,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -5975,6 +5966,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/pseudo-LOCALE.xlf
+++ b/web/xliff/pseudo-LOCALE.xlf
@ -6002,15 +6002,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -6079,6 +6070,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/tr.xlf
+++ b/web/xliff/tr.xlf
@ -5649,15 +5649,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -5726,6 +5717,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/zh-Hans.xlf
+++ b/web/xliff/zh-Hans.xlf
@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
+<?xml version="1.0"?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
  <file target-language="zh-Hans" source-language="en" original="lit-localize-inputs" datatype="plaintext">
    <body>
      <trans-unit id="s4caed5b7a7e5d89b">
@ -618,9 +618,9 @@
        
      </trans-unit>
      <trans-unit id="saa0e2675da69651b">
-        <source>The URL &quot;<x id="0" equiv-text="${this.url}"/>&quot; was not found.</source>
-        <target>未找到 URL &quot; 
-        <x id="0" equiv-text="${this.url}"/>&quot;。</target>
+        <source>The URL "<x id="0" equiv-text="${this.url}"/>" was not found.</source>
+        <target>未找到 URL " 
+        <x id="0" equiv-text="${this.url}"/>"。</target>
        
      </trans-unit>
      <trans-unit id="s58cd9c2fe836d9c6">
@ -1072,8 +1072,8 @@
        
      </trans-unit>
      <trans-unit id="sa8384c9c26731f83">
-        <source>To allow any redirect URI, set this value to &quot;.*&quot;. Be aware of the possible security implications this can have.</source>
-        <target>要允许任何重定向 URI，请将此值设置为 &quot;.*&quot;。请注意这可能带来的安全影响。</target>
+        <source>To allow any redirect URI, set this value to ".*". Be aware of the possible security implications this can have.</source>
+        <target>要允许任何重定向 URI，请将此值设置为 ".*"。请注意这可能带来的安全影响。</target>
        
      </trans-unit>
      <trans-unit id="s55787f4dfcdce52b">
@ -1819,8 +1819,8 @@
        
      </trans-unit>
      <trans-unit id="sa90b7809586c35ce">
-        <source>Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon &quot;fa-test&quot;.</source>
-        <target>输入完整 URL、相对路径，或者使用 'fa://fa-test' 来使用 Font Awesome 图标 &quot;fa-test&quot;。</target>
+        <source>Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon "fa-test".</source>
+        <target>输入完整 URL、相对路径，或者使用 'fa://fa-test' 来使用 Font Awesome 图标 "fa-test"。</target>
        
      </trans-unit>
      <trans-unit id="s0410779cb47de312">
@ -3248,8 +3248,8 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s76768bebabb7d543">
-        <source>Field which contains members of a group. Note that if using the &quot;memberUid&quot; field, the value is assumed to contain a relative distinguished name. e.g. 'memberUid=some-user' instead of 'memberUid=cn=some-user,ou=groups,...'</source>
-        <target>包含组成员的字段。请注意，如果使用 &quot;memberUid&quot; 字段，则假定该值包含相对可分辨名称。例如，'memberUid=some-user' 而不是 'memberUid=cn=some-user,ou=groups,...'</target>
+        <source>Field which contains members of a group. Note that if using the "memberUid" field, the value is assumed to contain a relative distinguished name. e.g. 'memberUid=some-user' instead of 'memberUid=cn=some-user,ou=groups,...'</source>
+        <target>包含组成员的字段。请注意，如果使用 "memberUid" 字段，则假定该值包含相对可分辨名称。例如，'memberUid=some-user' 而不是 'memberUid=cn=some-user,ou=groups,...'</target>
        
      </trans-unit>
      <trans-unit id="s026555347e589f0e">
@ -4046,8 +4046,8 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s7b1fba26d245cb1c">
-        <source>When using an external logging solution for archiving, this can be set to &quot;minutes=5&quot;.</source>
-        <target>使用外部日志记录解决方案进行存档时，可以将其设置为 &quot;minutes=5&quot;。</target>
+        <source>When using an external logging solution for archiving, this can be set to "minutes=5".</source>
+        <target>使用外部日志记录解决方案进行存档时，可以将其设置为 "minutes=5"。</target>
        
      </trans-unit>
      <trans-unit id="s44536d20bb5c8257">
@ -4056,8 +4056,8 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s3bb51cabb02b997e">
-        <source>Format: &quot;weeks=3;days=2;hours=3,seconds=2&quot;.</source>
-        <target>格式：&quot;weeks=3;days=2;hours=3,seconds=2&quot;。</target>
+        <source>Format: "weeks=3;days=2;hours=3,seconds=2".</source>
+        <target>格式："weeks=3;days=2;hours=3,seconds=2"。</target>
        
      </trans-unit>
      <trans-unit id="s04bfd02201db5ab8">
@ -4253,10 +4253,10 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="sa95a538bfbb86111">
-        <source>Are you sure you want to update <x id="0" equiv-text="${this.objectLabel}"/> &quot;<x id="1" equiv-text="${this.obj?.name}"/>&quot;?</source>
+        <source>Are you sure you want to update <x id="0" equiv-text="${this.objectLabel}"/> "<x id="1" equiv-text="${this.obj?.name}"/>"?</source>
        <target>您确定要更新 
-        <x id="0" equiv-text="${this.objectLabel}"/>&quot; 
-        <x id="1" equiv-text="${this.obj?.name}"/>&quot; 吗？</target>
+        <x id="0" equiv-text="${this.objectLabel}"/>" 
+        <x id="1" equiv-text="${this.obj?.name}"/>" 吗？</target>
        
      </trans-unit>
      <trans-unit id="sc92d7cfb6ee1fec6">
@ -5372,7 +5372,7 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="sdf1d8edef27236f0">
-        <source>A &quot;roaming&quot; authenticator, like a YubiKey</source>
+        <source>A "roaming" authenticator, like a YubiKey</source>
        <target>像 YubiKey 这样的“漫游”身份验证器</target>
        
      </trans-unit>
@ -5712,10 +5712,10 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s2d5f69929bb7221d">
-        <source><x id="0" equiv-text="${prompt.name}"/> (&quot;<x id="1" equiv-text="${prompt.fieldKey}"/>&quot;, of type <x id="2" equiv-text="${prompt.type}"/>)</source>
+        <source><x id="0" equiv-text="${prompt.name}"/> ("<x id="1" equiv-text="${prompt.fieldKey}"/>", of type <x id="2" equiv-text="${prompt.type}"/>)</source>
        <target>
-        <x id="0" equiv-text="${prompt.name}"/>（&quot; 
-        <x id="1" equiv-text="${prompt.fieldKey}"/>&quot;，类型为 
+        <x id="0" equiv-text="${prompt.name}"/>（" 
+        <x id="1" equiv-text="${prompt.fieldKey}"/>"，类型为 
        <x id="2" equiv-text="${prompt.type}"/>）</target>
        
      </trans-unit>
@ -5764,7 +5764,7 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s1608b2f94fa0dbd4">
-        <source>If set to a duration above 0, the user will have the option to choose to &quot;stay signed in&quot;, which will extend their session by the time specified here.</source>
+        <source>If set to a duration above 0, the user will have the option to choose to "stay signed in", which will extend their session by the time specified here.</source>
        <target>如果设置时长大于 0，用户可以选择“保持登录”选项，这将使用户的会话延长此处设置的时间。</target>
        
      </trans-unit>
@ -7585,18 +7585,6 @@ Bindings to groups/users are checked against the user of the event.</source>
  <source>User type</source>
  <target>用户类型</target>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-  <target>默认用户</target>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-  <target>外部用户</target>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-  <target>服务账户</target>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
  <target>已成功更新许可证。</target>
@ -7688,7 +7676,22 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
  <target>安装许可证</target>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
-</xliff>
+</xliff>
--- a/web/xliff/zh-Hant.xlf
+++ b/web/xliff/zh-Hant.xlf
@ -5704,15 +5704,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -5781,6 +5772,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>
--- a/web/xliff/zh_TW.xlf
+++ b/web/xliff/zh_TW.xlf
@ -5703,15 +5703,6 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="s9f9492d30a96b9c6">
  <source>User type</source>
 </trans-unit>
-<trans-unit id="s0b9a40b7b2853c7d">
-  <source>Default user</source>
-</trans-unit>
-<trans-unit id="s35b9fa270f45b391">
-  <source>External user</source>
-</trans-unit>
-<trans-unit id="s1a635369edaf4dc3">
-  <source>Service account</source>
-</trans-unit>
 <trans-unit id="s0e427111d750cc02">
  <source>Successfully updated license.</source>
 </trans-unit>
@ -5780,6 +5771,21 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="s0285b4bd69130fa3">
  <source>Install License</source>
+</trans-unit>
+<trans-unit id="scef2eb6a2bfe3110">
+  <source>Internal users might be users such as company employees, which will get access to the full Enterprise feature set.</source>
+</trans-unit>
+<trans-unit id="sf66389b04fcc219c">
+  <source>External users might be external consultants or B2C customers. These users don't get access to enterprise features.</source>
+</trans-unit>
+<trans-unit id="s77e8668a27dbc402">
+  <source>Service accounts should be used for machine-to-machine authentication or other automations.</source>
+</trans-unit>
+<trans-unit id="s28cbd874ba450b4e">
+  <source>Less details</source>
+</trans-unit>
+<trans-unit id="s8fa26f65aed77c96">
+  <source>More details</source>
 </trans-unit>
    </body>
  </file>