@openremote/manager 1.8.0-snapshot.20250725120002 → 1.8.0-snapshot.20250728102340

package/lib/pages/page-account.js

@@ -43,105 +43,105 @@ let PageAccount = class PageAccount extends Page {
         this._passwordPolicy = [];
     }
     static _getStyle() {
-        return css `
-            #wrapper {
-                height: 100%;
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-            }
-
-            #title {
-                padding: 0 20px;
-                font-size: 18px;
-                font-weight: bold;
-                width: calc(100% - 40px);
-                max-width: 1360px;
-                margin: 20px auto;
-                align-items: center;
-                display: flex;
-                color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
-            }
-
-            #title or-icon {
-                margin-right: 10px;
-                margin-left: 14px;
-            }
-
-            .panel {
-                flex: 0;
-                width: 100%;
-                box-sizing: border-box;
-                max-width: 1360px;
-                background-color: white;
-                border: 1px solid #e5e5e5;
-                border-radius: 5px;
-                position: relative;
-                margin: 0 auto 10px;
-                padding: 12px 24px 24px;
-                display: flex;
-                flex-direction: column;
-            }
-
-            .panel-title {
-                display: flex;
-                text-transform: uppercase;
-                font-weight: bolder;
-                color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
-                line-height: 1em;
-                margin-bottom: 10px;
-                margin-top: 0;
-                flex: 0 0 auto;
-                letter-spacing: 0.025em;
-                align-items: center;
-                min-height: 36px;
-            }
-
-            or-icon {
-                vertical-align: middle;
-                --or-icon-width: 20px;
-                --or-icon-height: 20px;
-                margin-right: 2px;
-                margin-left: -5px;
-            }
-
-            .row {
-                display: flex;
-                flex-direction: row;
-                flex: 1 1 0;
-                gap: 24px;
-            }
-
-            .column {
-                display: flex;
-                flex-direction: column;
-                margin: 0px;
-                flex: 1 1 0;
-                gap: 20px;
-            }
-
-            h5 {
-                margin-bottom: 0;
-            }
-
-            @media screen and (max-width: 768px) {
-                #title {
-                    padding: 0;
-                    width: 100%;
-                }
-
-                .row {
-                    display: block;
-                    flex-direction: column;
-                    gap: 0;
-                }
-
-                .panel {
-                    border-radius: 0;
-                    border-left: 0px;
-                    border-right: 0px;
-                }
-            }
+        return css `
+            #wrapper {
+                height: 100%;
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+            }
+
+            #title {
+                padding: 0 20px;
+                font-size: 18px;
+                font-weight: bold;
+                width: calc(100% - 40px);
+                max-width: 1360px;
+                margin: 20px auto;
+                align-items: center;
+                display: flex;
+                color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+            }
+
+            #title or-icon {
+                margin-right: 10px;
+                margin-left: 14px;
+            }
+
+            .panel {
+                flex: 0;
+                width: 100%;
+                box-sizing: border-box;
+                max-width: 1360px;
+                background-color: white;
+                border: 1px solid #e5e5e5;
+                border-radius: 5px;
+                position: relative;
+                margin: 0 auto 10px;
+                padding: 12px 24px 24px;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .panel-title {
+                display: flex;
+                text-transform: uppercase;
+                font-weight: bolder;
+                color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+                line-height: 1em;
+                margin-bottom: 10px;
+                margin-top: 0;
+                flex: 0 0 auto;
+                letter-spacing: 0.025em;
+                align-items: center;
+                min-height: 36px;
+            }
+
+            or-icon {
+                vertical-align: middle;
+                --or-icon-width: 20px;
+                --or-icon-height: 20px;
+                margin-right: 2px;
+                margin-left: -5px;
+            }
+
+            .row {
+                display: flex;
+                flex-direction: row;
+                flex: 1 1 0;
+                gap: 24px;
+            }
+
+            .column {
+                display: flex;
+                flex-direction: column;
+                margin: 0px;
+                flex: 1 1 0;
+                gap: 20px;
+            }
+
+            h5 {
+                margin-bottom: 0;
+            }
+
+            @media screen and (max-width: 768px) {
+                #title {
+                    padding: 0;
+                    width: 100%;
+                }
+
+                .row {
+                    display: block;
+                    flex-direction: column;
+                    gap: 0;
+                }
+
+                .panel {
+                    border-radius: 0;
+                    border-left: 0px;
+                    border-right: 0px;
+                }
+            }
         `;
     }
     static get styles() {
@@ -158,53 +158,53 @@ let PageAccount = class PageAccount extends Page {
     }
     render() {
         if (!manager.authenticated) {
-            return html `
-                <or-translate value="notAuthenticated"></or-translate>
+            return html `
+                <or-translate value="notAuthenticated"></or-translate>
             `;
         }
         if (!manager.isKeycloak()) {
-            return html `
-                <or-translate value="notSupported"></or-translate>
+            return html `
+                <or-translate value="notSupported"></or-translate>
             `;
         }
         const readonly = !manager.hasRole("write:user" /* ClientRole.WRITE_USER */);
-        return html `
-            <div id="wrapper">
-                <div id="title">
-                    <or-icon icon="account"></or-icon>
-                    <or-translate value="account">
-                </div>
-                <div id="content" class="panel">
-
-                    <p class="panel-title">${i18next.t("user")} ${i18next.t("settings")}</p>
-
-                    <!-- Account settings row -->
+        return html `
+            <div id="wrapper">
+                <div id="title">
+                    <or-icon icon="account"></or-icon>
+                    <or-translate value="account">
+                </div>
+                <div id="content" class="panel">
+
+                    <p class="panel-title">${i18next.t("user")} ${i18next.t("settings")}</p>
+
+                    <!-- Account settings row -->
                     ${guard([this._user], () => until(this._getAccountRowTemplate(this._user, readonly, (_user, dirty, invalid) => {
             this._dirty = dirty;
             this._invalid = invalid;
-        })))}
-
-                    <!-- Actions row (such as the save button) -->
-                    ${when(this._user, () => until(this._getActionsRowTemplate(this._user)))}
-
-                </div>
-
-                ${when(manager.isKeycloak(), () => html `
-                    <div class="panel">
-                        <p class="panel-title">
-                            <or-translate value="twoFactorAuth"></or-translate>
-                        </p>
-                        <div class="row">
-                            <div class="column">
-                                <or-mwc-input .type="${InputType.BUTTON}" label="${i18next.t('twoFactorConfigure')}"
-                                              outlined
-                                              @or-mwc-input-changed="${() => manager.login({ action: "CONFIGURE_TOTP" })}"
-                                ></or-mwc-input>
-                            </div>
-                        </div>
-                    </div>
-                `)}
-            </div>
+        })))}
+
+                    <!-- Actions row (such as the save button) -->
+                    ${when(this._user, () => until(this._getActionsRowTemplate(this._user)))}
+
+                </div>
+
+                ${when(manager.isKeycloak(), () => html `
+                    <div class="panel">
+                        <p class="panel-title">
+                            <or-translate value="twoFactorAuth"></or-translate>
+                        </p>
+                        <div class="row">
+                            <div class="column">
+                                <or-mwc-input .type="${InputType.BUTTON}" label="${i18next.t('twoFactorConfigure')}"
+                                              outlined
+                                              @or-mwc-input-changed="${() => manager.login({ action: "CONFIGURE_TOTP" })}"
+                                ></or-mwc-input>
+                            </div>
+                        </div>
+                    </div>
+                `)}
+            </div>
         `;
     }
     /**
@@ -218,104 +218,104 @@ let PageAccount = class PageAccount extends Page {
             if (!user) {
                 user = yield this._getUser();
             }
-            return html `
-            <div class="row">
-                <div class="column">
-                    <!-- user details -->
-                    <h5>${i18next.t("details")}</h5>
-                    <or-mwc-input id="new-username" class="validate"
-                                  .label="${i18next.t("username")}"
-                                  .type="${InputType.TEXT}"
-                                  ?required="${!registrationEmailAsUsername}"
-                                  .disabled="${true}"
-                                  minLength="3" maxLength="255" pattern="[A-Za-z0-9\\-_+@\\.ßçʊÇʊ]+"
-                                  .validationMessage="${i18next.t("invalidUsername")}"
-                                  .value="${user === null || user === void 0 ? void 0 : user.username}" autocomplete="false"
+            return html `
+            <div class="row">
+                <div class="column">
+                    <!-- user details -->
+                    <h5>${i18next.t("details")}</h5>
+                    <or-mwc-input id="new-username" class="validate"
+                                  .label="${i18next.t("username")}"
+                                  .type="${InputType.TEXT}"
+                                  ?required="${!registrationEmailAsUsername}"
+                                  .disabled="${true}"
+                                  minLength="3" maxLength="255" pattern="[A-Za-z0-9\\-_+@\\.ßçʊÇʊ]+"
+                                  .validationMessage="${i18next.t("invalidUsername")}"
+                                  .value="${user === null || user === void 0 ? void 0 : user.username}" autocomplete="false"
                                   @or-mwc-input-changed="${(e) => {
                 user.username = e.detail.value;
                 onchange === null || onchange === void 0 ? void 0 : onchange(user, true, this._isInvalid());
-            }}"
-                    ></or-mwc-input>
-                    <!-- if identity provider is set to use email as username, make it required -->
-                    <or-mwc-input id="new-email" class="validate"
-                                  .label="${i18next.t("email")}"
-                                  .type="${InputType.EMAIL}"
-                                  ?required="${registrationEmailAsUsername}"
-                                  ?readonly="${(!!(user === null || user === void 0 ? void 0 : user.id) && registrationEmailAsUsername) || readonly}"
-                                  .disabled="${!user || (!!(user === null || user === void 0 ? void 0 : user.id) && registrationEmailAsUsername)}"
-                                  pattern="^[\\w\\.\\-]+@([\\w\\-]+\\.)+[\\w]{2,4}$"
-                                  .validationMessage="${i18next.t("invalidEmail")}"
-                                  .value="${user === null || user === void 0 ? void 0 : user.email}" autocomplete="false"
+            }}"
+                    ></or-mwc-input>
+                    <!-- if identity provider is set to use email as username, make it required -->
+                    <or-mwc-input id="new-email" class="validate"
+                                  .label="${i18next.t("email")}"
+                                  .type="${InputType.EMAIL}"
+                                  ?required="${registrationEmailAsUsername}"
+                                  ?readonly="${(!!(user === null || user === void 0 ? void 0 : user.id) && registrationEmailAsUsername) || readonly}"
+                                  .disabled="${!user || (!!(user === null || user === void 0 ? void 0 : user.id) && registrationEmailAsUsername)}"
+                                  pattern="^[\\w\\.\\-]+@([\\w\\-]+\\.)+[\\w]{2,4}$"
+                                  .validationMessage="${i18next.t("invalidEmail")}"
+                                  .value="${user === null || user === void 0 ? void 0 : user.email}" autocomplete="false"
                                   @or-mwc-input-changed="${(e) => {
                 user.email = e.detail.value;
                 onchange === null || onchange === void 0 ? void 0 : onchange(user, true, this._isInvalid());
-            }}"
-                    ></or-mwc-input>
-                    <or-mwc-input id="new-firstName" class="validate"
-                                  .label="${i18next.t("firstName")}"
-                                  .type="${InputType.TEXT}"
-                                  ?readonly="${readonly}"
-                                  .disabled="${!user}"
-                                  minLength="5" autocomplete="false"
-                                  .value="${user === null || user === void 0 ? void 0 : user.firstName}"
+            }}"
+                    ></or-mwc-input>
+                    <or-mwc-input id="new-firstName" class="validate"
+                                  .label="${i18next.t("firstName")}"
+                                  .type="${InputType.TEXT}"
+                                  ?readonly="${readonly}"
+                                  .disabled="${!user}"
+                                  minLength="5" autocomplete="false"
+                                  .value="${user === null || user === void 0 ? void 0 : user.firstName}"
                                   @or-mwc-input-changed="${(e) => {
                 user.firstName = e.detail.value;
                 onchange === null || onchange === void 0 ? void 0 : onchange(user, true, this._isInvalid());
-            }}"
-                    ></or-mwc-input>
-                    <or-mwc-input id="new-surname" class="validate"
-                                  .label="${i18next.t("surname")}"
-                                  .type="${InputType.TEXT}"
-                                  ?readonly="${readonly}"
-                                  .disabled="${!user}"
-                                  minLength="1" autocomplete="false"
-                                  .value="${user === null || user === void 0 ? void 0 : user.lastName}"
+            }}"
+                    ></or-mwc-input>
+                    <or-mwc-input id="new-surname" class="validate"
+                                  .label="${i18next.t("surname")}"
+                                  .type="${InputType.TEXT}"
+                                  ?readonly="${readonly}"
+                                  .disabled="${!user}"
+                                  minLength="1" autocomplete="false"
+                                  .value="${user === null || user === void 0 ? void 0 : user.lastName}"
                                   @or-mwc-input-changed="${(e) => {
                 user.lastName = e.detail.value;
                 onchange === null || onchange === void 0 ? void 0 : onchange(user, true, this._isInvalid());
-            }}">
-                    </or-mwc-input>
-                </div>
-                <div class="column">
-                    <h5>${i18next.t("password")}</h5>
-                    ${registrationEmailAsUsername ? html `
-                        <!-- Reset password button when email as username is configured -->
-                        <or-mwc-input id="reset-password" raised
-                                      .label="${i18next.t("resetPassword")}"
-                                      .type="${InputType.BUTTON}"
-                                      .disabled="${!user.email}"
-                                      @or-mwc-input-changed="${(e) => this._onResetPasswordBtnClick(e)}"
-                        ></or-mwc-input>
-                    ` : html `
-                        <!-- Direct password input fields when email as username not configured -->
-                        <or-mwc-input id="new-password" class="validate"
-                                      .label="${i18next.t("password")}"
-                                      .type="${InputType.PASSWORD}"
-                                      ?readonly="${readonly}"
-                                      .disabled="${!user}"
-                                      min="1" autocomplete="false"
+            }}">
+                    </or-mwc-input>
+                </div>
+                <div class="column">
+                    <h5>${i18next.t("password")}</h5>
+                    ${registrationEmailAsUsername ? html `
+                        <!-- Reset password button when email as username is configured -->
+                        <or-mwc-input id="reset-password" raised
+                                      .label="${i18next.t("resetPassword")}"
+                                      .type="${InputType.BUTTON}"
+                                      .disabled="${!user.email}"
+                                      @or-mwc-input-changed="${(e) => this._onResetPasswordBtnClick(e)}"
+                        ></or-mwc-input>
+                    ` : html `
+                        <!-- Direct password input fields when email as username not configured -->
+                        <or-mwc-input id="new-password" class="validate"
+                                      .label="${i18next.t("password")}"
+                                      .type="${InputType.PASSWORD}"
+                                      ?readonly="${readonly}"
+                                      .disabled="${!user}"
+                                      min="1" autocomplete="false"
                                       @or-mwc-input-changed="${(_e) => {
                 const changed = this._onPasswordChanged(user);
                 onchange === null || onchange === void 0 ? void 0 : onchange(user, changed, this._isInvalid());
-            }}"
-                        ></or-mwc-input>
-                        <or-mwc-input id="new-repeatPassword"
-                                      .label="${i18next.t("repeatPassword")}"
-                                      .type="${InputType.PASSWORD}"
-                                      helperPersistent
-                                      ?readonly="${readonly}"
-                                      .disabled="${!user}"
-                                      min="1" autocomplete="false"
+            }}"
+                        ></or-mwc-input>
+                        <or-mwc-input id="new-repeatPassword"
+                                      .label="${i18next.t("repeatPassword")}"
+                                      .type="${InputType.PASSWORD}"
+                                      helperPersistent
+                                      ?readonly="${readonly}"
+                                      .disabled="${!user}"
+                                      min="1" autocomplete="false"
                                       @or-mwc-input-changed="${(_e) => {
                 const changed = this._onPasswordChanged(user);
                 onchange === null || onchange === void 0 ? void 0 : onchange(user, changed, this._isInvalid());
-            }}"
-                        ></or-mwc-input>
-                        ${when(this._passwordPolicy, () => until(this._getPasswordPolicyTemplate(user, this._passwordPolicy)))}
-                    `}
-                </div>
-            </div>
-
+            }}"
+                        ></or-mwc-input>
+                        ${when(this._passwordPolicy, () => until(this._getPasswordPolicyTemplate(user, this._passwordPolicy)))}
+                    `}
+                </div>
+            </div>
+
         `;
         });
     }
@@ -326,15 +326,15 @@ let PageAccount = class PageAccount extends Page {
         return __awaiter(this, void 0, void 0, function* () {
             const invalid = this._isInvalid();
             const dirty = this._isDirty();
-            return html `
-            <div class="row" style="justify-content: end; margin-top: 20px;">
-                <or-mwc-input id="savebtn" style="margin: 0;" raised
-                              .label="${i18next.t(user.id ? "save" : "create")}"
-                              .type="${InputType.BUTTON}"
-                              .disabled="${invalid || !dirty}"
-                              @or-mwc-input-changed="${(e) => this._onSaveBtnClick(e)}"
-                ></or-mwc-input>
-            </div>
+            return html `
+            <div class="row" style="justify-content: end; margin-top: 20px;">
+                <or-mwc-input id="savebtn" style="margin: 0;" raised
+                              .label="${i18next.t(user.id ? "save" : "create")}"
+                              .type="${InputType.BUTTON}"
+                              .disabled="${invalid || !dirty}"
+                              @or-mwc-input-changed="${(e) => this._onSaveBtnClick(e)}"
+                ></or-mwc-input>
+            </div>
         `;
         });
     }
@@ -486,66 +486,66 @@ let PageAccount = class PageAccount extends Page {
             const policyTexts = [];
             // Minimum / maximum length warning
             if (policies.includes("length") && policies.includes("maxLength")) {
-                policyTexts.push(html `
+                policyTexts.push(html `
                 <or-translate value="password-policy-invalid-length" .options="${{
                     0: policyMap.get("length"),
                     1: policyMap.get("maxLength")
                 }}"></or-translate>`);
             }
             else if (policies.includes("length")) {
-                policyTexts.push(html `
-                <or-translate value="password-policy-invalid-length-too-short"
+                policyTexts.push(html `
+                <or-translate value="password-policy-invalid-length-too-short"
                               .options="${{ 0: policyMap.get("length") }}"></or-translate>`);
             }
             else if (policies.includes("maxLength")) {
-                policyTexts.push(html `
-                <or-translate value="password-policy-invalid-length-too-long"
+                policyTexts.push(html `
+                <or-translate value="password-policy-invalid-length-too-long"
                               .options="${{ 0: policyMap.get("maxLength") }}"></or-translate>`);
             }
             // Special characters
             if (policies.includes("specialChars")) {
                 const value = policyMap.get("specialChars");
                 const translation = value === "1" ? "password-policy-special-chars-single" : "password-policy-special-chars";
-                policyTexts.push(html `
+                policyTexts.push(html `
                 <or-translate value="${translation}" .options="${{ 0: value }}"></or-translate>`);
             }
             // Digits/numbers
             if (policies.includes("digits")) {
                 const value = policyMap.get("digits");
                 const translation = value === "1" ? "password-policy-digits-single" : "password-policy-digits";
-                policyTexts.push(html `
+                policyTexts.push(html `
                 <or-translate value="${translation}" .options="${{ 0: value }}"></or-translate>`);
             }
             // Uppercase / lowercase letters
             if (policies.includes("upperCase")) {
                 const value = policyMap.get("upperCase");
                 const translation = value === "1" ? "password-policy-uppercase-single" : "password-policy-uppercase";
-                policyTexts.push(html `
+                policyTexts.push(html `
                 <or-translate value="${translation}" .options="${{ 0: value }}"></or-translate>`);
             }
             // Warn for recently used passwords
             if (policies.includes("passwordHistory")) {
-                policyTexts.push(html `
+                policyTexts.push(html `
                 <or-translate value="password-policy-recently-used"></or-translate>`);
             }
             // Cannot be username and/or email
             if (policies.includes("notUsername") && policies.includes("notEmail")) {
-                policyTexts.push(html `
+                policyTexts.push(html `
                 <or-translate value="password-policy-not-email-username"></or-translate>`);
             }
             else if (policies.includes("notUsername")) {
-                policyTexts.push(html `
+                policyTexts.push(html `
                 <or-translate value="password-policy-not-username"></or-translate>`);
             }
             else if (policies.includes("notEmail")) {
-                policyTexts.push(html `
+                policyTexts.push(html `
                 <or-translate value="password-policy-not-email"></or-translate>`);
             }
-            return html `
-            <ul>
-                ${map(policyTexts, text => html `
-                    <li>${text}</li>`)}
-            </ul>
+            return html `
+            <ul>
+                ${map(policyTexts, text => html `
+                    <li>${text}</li>`)}
+            </ul>
         `;
         });
     }