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

package/lib/pages/page-users.js

@@ -59,139 +59,139 @@ let PageUsers = class PageUsers extends Page {
         // language=CSS
         return [
             unsafeCSS(tableStyle),
-            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 16px;
-                    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-mwc-input {
-                    margin-bottom: 20px;
-                }
-
-                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;
-                }
-
-                .hidden {
-                    display: none;
-                }
-
-                .breadcrumb-container {
-                    padding: 0 20px;
-                    width: calc(100% - 40px);
-                    max-width: 1360px;
-                    margin: 12px auto 0;
-                    display: flex;
-                    align-items: center;
-                }
-
-                .breadcrumb-clickable {
-                    cursor: pointer;
-                    color: var(--or-app-color4, ${unsafeCSS(DefaultColor4)});
-                }
-
-                .breadcrumb-arrow {
-                    margin: 0 5px -3px 5px;
-                    --or-icon-width: 16px;
-                    --or-icon-height: 16px;
-                }
-                
-                #session-table {
-                    --or-mwc-table-column-width-3: 0;
-                }
-                
-                .button-row {
-                    display: flex !important;
-                    flex-direction: row !important;
-                    margin-bottom: 0;
-                    justify-content: space-between;
-                }
-
-                @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;
-                    }
-                }
+            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 16px;
+                    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-mwc-input {
+                    margin-bottom: 20px;
+                }
+
+                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;
+                }
+
+                .hidden {
+                    display: none;
+                }
+
+                .breadcrumb-container {
+                    padding: 0 20px;
+                    width: calc(100% - 40px);
+                    max-width: 1360px;
+                    margin: 12px auto 0;
+                    display: flex;
+                    align-items: center;
+                }
+
+                .breadcrumb-clickable {
+                    cursor: pointer;
+                    color: var(--or-app-color4, ${unsafeCSS(DefaultColor4)});
+                }
+
+                .breadcrumb-arrow {
+                    margin: 0 5px -3px 5px;
+                    --or-icon-width: 16px;
+                    --or-icon-height: 16px;
+                }
+                
+                #session-table {
+                    --or-mwc-table-column-width-3: 0;
+                }
+                
+                .button-row {
+                    display: flex !important;
+                    flex-direction: row !important;
+                    margin-bottom: 0;
+                    justify-content: space-between;
+                }
+
+                @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;
+                    }
+                }
             `,
         ];
     }
@@ -406,8 +406,8 @@ let PageUsers = class PageUsers extends Page {
     render() {
         var _a;
         if (!manager.authenticated) {
-            return html `
-                <or-translate value="notAuthenticated"></or-translate>
+            return html `
+                <or-translate value="notAuthenticated"></or-translate>
             `;
         }
         // Apply filter (such as search input)
@@ -451,82 +451,82 @@ let PageUsers = class PageUsers extends Page {
         };
         const mergedUserList = [...users, ...serviceUsers];
         const index = (this.userId ? mergedUserList.findIndex((user) => user.id === this.userId) : undefined);
-        return html `
-            <div id="wrapper">
-
-                <!-- Breadcrumb on top of the page-->
+        return html `
+            <div id="wrapper">
+
+                <!-- Breadcrumb on top of the page-->
                 ${when((this.userId && index !== undefined) || this.creationState, () => {
             var _a;
-            return html `
-                    <div class="breadcrumb-container">
-                        <span class="breadcrumb-clickable"
-                              @click="${() => this.reset()}">${i18next.t("user_plural")}</span>
-                        <or-icon class="breadcrumb-arrow" icon="chevron-right"></or-icon>
-                        <span style="margin-left: 2px;">${index !== undefined ? (_a = mergedUserList[index]) === null || _a === void 0 ? void 0 : _a.username : (this.creationState.userModel.serviceAccount ? i18next.t('creating_serviceUser') : i18next.t('creating_regularUser'))}</span>
-                    </div>
+            return html `
+                    <div class="breadcrumb-container">
+                        <span class="breadcrumb-clickable"
+                              @click="${() => this.reset()}">${i18next.t("user_plural")}</span>
+                        <or-icon class="breadcrumb-arrow" icon="chevron-right"></or-icon>
+                        <span style="margin-left: 2px;">${index !== undefined ? (_a = mergedUserList[index]) === null || _a === void 0 ? void 0 : _a.username : (this.creationState.userModel.serviceAccount ? i18next.t('creating_serviceUser') : i18next.t('creating_regularUser'))}</span>
+                    </div>
                 `;
-        })}
-
-                <div id="title">
-                    <or-icon icon="account-group"></or-icon>
-                    <span>${this.userId && index !== undefined ? (_a = mergedUserList[index]) === null || _a === void 0 ? void 0 : _a.username : i18next.t('user_plural')}</span>
-                </div>
-
-                <!-- User Specific page -->
-                ${when((this.userId && index !== undefined) || this.creationState, () => html `
+        })}
+
+                <div id="title">
+                    <or-icon icon="account-group"></or-icon>
+                    <span>${this.userId && index !== undefined ? (_a = mergedUserList[index]) === null || _a === void 0 ? void 0 : _a.username : i18next.t('user_plural')}</span>
+                </div>
+
+                <!-- User Specific page -->
+                ${when((this.userId && index !== undefined) || this.creationState, () => html `
                     ${when(mergedUserList[index] !== undefined || this.creationState, () => {
             const user = (index !== undefined ? mergedUserList[index] : this.creationState.userModel);
             const showMqttSessions = user.serviceAccount && this.userId;
-            return html `
-                            <div id="content" class="panel">
-                                <p class="panel-title">
-                                    ${user.serviceAccount ? i18next.t('serviceUser') : i18next.t('user')}
-                                    ${i18next.t('settings')}</p>
-                                ${this.getSingleUserView(user, compositeRoleOptions, realmRoleOptions, ("user" + index), (readonly || this._saveUserPromise != undefined))}
-                            </div>
-                            
-                            ${when(showMqttSessions, () => this.getMQTTSessionTemplate(user))}
+            return html `
+                            <div id="content" class="panel">
+                                <p class="panel-title">
+                                    ${user.serviceAccount ? i18next.t('serviceUser') : i18next.t('user')}
+                                    ${i18next.t('settings')}</p>
+                                ${this.getSingleUserView(user, compositeRoleOptions, realmRoleOptions, ("user" + index), (readonly || this._saveUserPromise != undefined))}
+                            </div>
+                            
+                            ${when(showMqttSessions, () => this.getMQTTSessionTemplate(user))}
                         `;
-        })}
-
-                    <!-- List of Users page -->
-                `, () => html `
-                    <div id="content" class="panel">
-                        <div class="panel-title" style="justify-content: space-between;">
-                            <p>${i18next.t("regularUser_plural")}</p>
-                            <div style="display: flex; align-items: center; gap: 12px;">
-                                <or-mwc-input type="${InputType.TEXT}" placeholder="${i18next.t('search')}" 
-                                              style="margin: 0; text-transform: none;" iconTrailing="magnify" compact outlined
-                                              @input="${(ev) => this.onRegularUserSearch(ev)}"
-                                ></or-mwc-input>
-                                <or-mwc-input style="margin: 0;" type="${InputType.BUTTON}" icon="plus" label="${i18next.t('add')} ${i18next.t("user")}"
-                                              @or-mwc-input-changed="${() => this.creationState = { userModel: this.getNewUserModel(false) }}"
-                                ></or-mwc-input>
-                            </div>
-                        </div>
+        })}
+
+                    <!-- List of Users page -->
+                `, () => html `
+                    <div id="content" class="panel">
+                        <div class="panel-title" style="justify-content: space-between;">
+                            <p>${i18next.t("regularUser_plural")}</p>
+                            <div style="display: flex; align-items: center; gap: 12px;">
+                                <or-mwc-input type="${InputType.TEXT}" placeholder="${i18next.t('search')}" 
+                                              style="margin: 0; text-transform: none;" iconTrailing="magnify" compact outlined
+                                              @input="${(ev) => this.onRegularUserSearch(ev)}"
+                                ></or-mwc-input>
+                                <or-mwc-input style="margin: 0;" type="${InputType.BUTTON}" icon="plus" label="${i18next.t('add')} ${i18next.t("user")}"
+                                              @or-mwc-input-changed="${() => this.creationState = { userModel: this.getNewUserModel(false) }}"
+                                ></or-mwc-input>
+                            </div>
+                        </div>
                         ${until(this.getUsersTable(userTableColumns, userTableRows, tableConfig, (ev) => {
             this.userId = users[ev.detail.index].id;
-        }), html `${i18next.t('loading')}`)}
-                    </div>
-
-                    <div id="content" class="panel">
-                        <div class="panel-title" style="justify-content: space-between;">
-                            <p>${i18next.t("serviceUser_plural")}</p>
-                            <div style="display: flex; align-items: center; gap: 12px;">
-                                <or-mwc-input style="margin: 0; text-transform: none;" type="${InputType.TEXT}" iconTrailing="magnify" placeholder="${i18next.t('search')}" compact outlined
-                                              @input="${(ev) => this.onServiceUserSearch(ev)}"
-                                ></or-mwc-input>
-                                <or-mwc-input style="margin: 0;" type="${InputType.BUTTON}" icon="plus" label="${i18next.t('add')} ${i18next.t("user")}"
-                                              @or-mwc-input-changed="${() => this.creationState = { userModel: this.getNewUserModel(true) }}"
-                                ></or-mwc-input>
-                            </div>
-                        </div>
+        }), html `${i18next.t('loading')}`)}
+                    </div>
+
+                    <div id="content" class="panel">
+                        <div class="panel-title" style="justify-content: space-between;">
+                            <p>${i18next.t("serviceUser_plural")}</p>
+                            <div style="display: flex; align-items: center; gap: 12px;">
+                                <or-mwc-input style="margin: 0; text-transform: none;" type="${InputType.TEXT}" iconTrailing="magnify" placeholder="${i18next.t('search')}" compact outlined
+                                              @input="${(ev) => this.onServiceUserSearch(ev)}"
+                                ></or-mwc-input>
+                                <or-mwc-input style="margin: 0;" type="${InputType.BUTTON}" icon="plus" label="${i18next.t('add')} ${i18next.t("user")}"
+                                              @or-mwc-input-changed="${() => this.creationState = { userModel: this.getNewUserModel(true) }}"
+                                ></or-mwc-input>
+                            </div>
+                        </div>
                         ${until(this.getUsersTable(serviceUserTableColumns, serviceUserTableRows, tableConfig, (ev) => {
             this.userId = serviceUsers[ev.detail.index].id;
-        }), html `${i18next.t('loading')}`)}
-                    </div>
-                `)}
-            </div>
+        }), html `${i18next.t('loading')}`)}
+                    </div>
+                `)}
+            </div>
         `;
     }
     getUsersTable(columns, rows, config, onRowClick) {
@@ -534,14 +534,14 @@ let PageUsers = class PageUsers extends Page {
             if (this._loadDataPromise) {
                 yield this._loadDataPromise;
             }
-            return html `
-            <or-mwc-table .columns="${columns instanceof Array ? columns : undefined}"
-                          .columnsTemplate="${!(columns instanceof Array) ? columns : undefined}"
-                          .rows="${rows instanceof Array ? rows : undefined}"
-                          .rowsTemplate="${!(rows instanceof Array) ? rows : undefined}"
-                          .config="${config}"
-                          @or-mwc-table-row-click="${rows instanceof Array ? onRowClick : undefined}"
-            ></or-mwc-table>
+            return html `
+            <or-mwc-table .columns="${columns instanceof Array ? columns : undefined}"
+                          .columnsTemplate="${!(columns instanceof Array) ? columns : undefined}"
+                          .rows="${rows instanceof Array ? rows : undefined}"
+                          .rowsTemplate="${!(rows instanceof Array) ? rows : undefined}"
+                          .config="${config}"
+                          @or-mwc-table-row-click="${rows instanceof Array ? onRowClick : undefined}"
+            ></or-mwc-table>
         `;
         });
     }
@@ -641,20 +641,20 @@ let PageUsers = class PageUsers extends Page {
         };
         const dialog = showDialog(new OrMwcDialog()
             .setHeading(i18next.t("linkedAssets"))
-            .setContent(html `
-                <or-asset-tree
-                        id="chart-asset-tree" readonly .selectedIds="${user.userAssetLinks.map(ual => ual.id.assetId)}"
-                        .showSortBtn="${false}" expandNodes checkboxes
+            .setContent(html `
+                <or-asset-tree
+                        id="chart-asset-tree" readonly .selectedIds="${user.userAssetLinks.map(ual => ual.id.assetId)}"
+                        .showSortBtn="${false}" expandNodes checkboxes
                         @or-asset-tree-request-selection="${(e) => {
             if (readonly) {
                 e.detail.allow = false;
             }
-        }}"
+        }}"
                         @or-asset-tree-selection="${(e) => {
             if (!readonly) {
                 onAssetSelectionChanged(e);
             }
-        }}"></or-asset-tree>
+        }}"></or-asset-tree>
             `)
             .setActions([
             {
@@ -738,7 +738,7 @@ let PageUsers = class PageUsers extends Page {
         return this._compositeRoles.filter((role) => user.roles.some(ur => ur === role.name)).flatMap((role) => role.compositeRoleIds).map(id => this._roles.find(r => r.id === id).name);
     }
     getSingleUserView(user, compositeRoleOptions, realmRoleOptions, suffix, readonly = true) {
-        return html `
+        return html `
             ${when((user.loaded || (user.roles && user.realmRoles)), () => {
             return this.getSingleUserTemplate(user, compositeRoleOptions, realmRoleOptions, suffix, readonly);
         }, () => {
@@ -747,21 +747,21 @@ let PageUsers = class PageUsers extends Page {
                 return this.getSingleUserTemplate(user, compositeRoleOptions, realmRoleOptions, suffix, readonly);
             });
             const content = getTemplate();
-            return html `
-                    ${until(content, html `${i18next.t('loading')}`)}
+            return html `
+                    ${until(content, html `${i18next.t('loading')}`)}
                 `;
-        })}
+        })}
         `;
     }
     getMQTTSessionTemplate(user) {
         if (!this._sessionLoader) {
             this._sessionLoader = this.getSessionLoader(user);
         }
-        return html `
-            <div id="content" class="panel">
-                <p class="panel-title">${i18next.t('mqttSessions')}</p>
-                ${until(this._sessionLoader, html `${i18next.t('loading')}`)}
-            </div>
+        return html `
+            <div id="content" class="panel">
+                <p class="panel-title">${i18next.t('mqttSessions')}</p>
+                ${until(this._sessionLoader, html `${i18next.t('loading')}`)}
+            </div>
         `;
     }
     getSessionLoader(user) {
@@ -786,33 +786,33 @@ let PageUsers = class PageUsers extends Page {
         const isSameUser = user.username === manager.username;
         const isGatewayServiceUser = isServiceUser && ((_a = user.username) === null || _a === void 0 ? void 0 : _a.startsWith("gateway-"));
         const implicitRoleNames = user.loaded ? this.getImplicitUserRoles(user) : [];
-        return html `
-            <div class="row">
-                <div class="column">
-                    <h5>${i18next.t("details")}</h5>
-                    <!-- user details -->
-                    <or-mwc-input id="new-username-${suffix}" ?readonly="${!!user.id || readonly}" .disabled="${!!user.id || (!isServiceUser && this._registrationEmailAsUsername)}"
-                                  class = "validate"
-                                  .label="${i18next.t("username")}"
-                                  .type="${InputType.TEXT}" minLength="3" maxLength="255" 
-                                  ?required="${isServiceUser || !this._registrationEmailAsUsername}"
-                                  pattern="[A-Za-z0-9_+@\\.\\-ßçʊÇʊ]+"
-                                  .value="${user.username}" autocomplete="false"
-                                  .validationMessage="${i18next.t("invalidUsername")}"
+        return html `
+            <div class="row">
+                <div class="column">
+                    <h5>${i18next.t("details")}</h5>
+                    <!-- user details -->
+                    <or-mwc-input id="new-username-${suffix}" ?readonly="${!!user.id || readonly}" .disabled="${!!user.id || (!isServiceUser && this._registrationEmailAsUsername)}"
+                                  class = "validate"
+                                  .label="${i18next.t("username")}"
+                                  .type="${InputType.TEXT}" minLength="3" maxLength="255" 
+                                  ?required="${isServiceUser || !this._registrationEmailAsUsername}"
+                                  pattern="[A-Za-z0-9_+@\\.\\-ßçʊÇʊ]+"
+                                  .value="${user.username}" autocomplete="false"
+                                  .validationMessage="${i18next.t("invalidUsername")}"
                                   @or-mwc-input-changed="${(e) => {
             user.username = e.detail.value;
             this.onUserChanged(suffix);
-        }}"></or-mwc-input>
-                    <!-- if identity provider is set to use email as username, make it required -->
-                    <or-mwc-input id="new-email" ?readonly="${(!!user.id && this._registrationEmailAsUsername) || readonly}"
-                                  .disabled="${!!user.id && this._registrationEmailAsUsername}"
-                                  class="${isServiceUser ? "hidden" : "validate"}"
-                                  .label="${i18next.t("email")}"
-                                  .type="${InputType.EMAIL}"
-                                  .value="${user.email}" autocomplete="false"
-                                  ?required="${!isServiceUser && this._registrationEmailAsUsername}"
-                                  pattern="^[\\w\\.\\-\\+\\%]+@([\\w\\-]+\\.)+[\\w]{2,}$"
-                                  .validationMessage="${i18next.t("invalidEmail")}"
+        }}"></or-mwc-input>
+                    <!-- if identity provider is set to use email as username, make it required -->
+                    <or-mwc-input id="new-email" ?readonly="${(!!user.id && this._registrationEmailAsUsername) || readonly}"
+                                  .disabled="${!!user.id && this._registrationEmailAsUsername}"
+                                  class="${isServiceUser ? "hidden" : "validate"}"
+                                  .label="${i18next.t("email")}"
+                                  .type="${InputType.EMAIL}"
+                                  .value="${user.email}" autocomplete="false"
+                                  ?required="${!isServiceUser && this._registrationEmailAsUsername}"
+                                  pattern="^[\\w\\.\\-\\+\\%]+@([\\w\\-]+\\.)+[\\w]{2,}$"
+                                  .validationMessage="${i18next.t("invalidEmail")}"
                                   @or-mwc-input-changed="${(e) => {
             if (this._registrationEmailAsUsername) {
                 user.username = e.detail.value;
@@ -820,129 +820,129 @@ let PageUsers = class PageUsers extends Page {
             user.email = e.detail.value;
             this.onUserChanged(suffix);
             this.requestUpdate(); // in case of username update, we trigger a state change
-        }}"></or-mwc-input>
-                    <or-mwc-input id="new-firstName" ?readonly="${readonly}"
-                                  class="${isServiceUser ? "hidden" : "validate"}"
-                                  .label="${i18next.t("firstName")}"
-                                  .type="${InputType.TEXT}" minLength="1"
-                                  .value="${user.firstName}" autocomplete="false"
+        }}"></or-mwc-input>
+                    <or-mwc-input id="new-firstName" ?readonly="${readonly}"
+                                  class="${isServiceUser ? "hidden" : "validate"}"
+                                  .label="${i18next.t("firstName")}"
+                                  .type="${InputType.TEXT}" minLength="1"
+                                  .value="${user.firstName}" autocomplete="false"
                                   @or-mwc-input-changed="${(e) => {
             user.firstName = e.detail.value;
             this.onUserChanged(suffix);
-        }}"></or-mwc-input>
-                    <or-mwc-input id="new-surname" ?readonly="${readonly}"
-                                  class="${isServiceUser ? "hidden" : "validate"}"
-                                  .label="${i18next.t("surname")}"
-                                  .type="${InputType.TEXT}" minLength="1"
-                                  .value="${user.lastName}" autocomplete="false"
+        }}"></or-mwc-input>
+                    <or-mwc-input id="new-surname" ?readonly="${readonly}"
+                                  class="${isServiceUser ? "hidden" : "validate"}"
+                                  .label="${i18next.t("surname")}"
+                                  .type="${InputType.TEXT}" minLength="1"
+                                  .value="${user.lastName}" autocomplete="false"
                                   @or-mwc-input-changed="${(e) => {
             user.lastName = e.detail.value;
             this.onUserChanged(suffix);
-        }}"></or-mwc-input>
-
-                    <!-- password -->
-                    <h5>${i18next.t("password")}</h5>
-                    ${isServiceUser ? html `
-                        ${when(user.secret, () => html `
-                            <or-mwc-input id="new-password-${suffix}" readonly
-                                          class = "validate"
-                                          .label="${i18next.t("secret")}"
-                                          .value="${user.secret}"
-                                          .type="${InputType.TEXT}"></or-mwc-input>
-                            <or-mwc-input ?readonly="${!user.id || readonly}"
-                                          ?disabled="${isGatewayServiceUser}"
-                                          .label="${i18next.t("regenerateSecret")}"
-                                          .type="${InputType.BUTTON}"
+        }}"></or-mwc-input>
+
+                    <!-- password -->
+                    <h5>${i18next.t("password")}</h5>
+                    ${isServiceUser ? html `
+                        ${when(user.secret, () => html `
+                            <or-mwc-input id="new-password-${suffix}" readonly
+                                          class = "validate"
+                                          .label="${i18next.t("secret")}"
+                                          .value="${user.secret}"
+                                          .type="${InputType.TEXT}"></or-mwc-input>
+                            <or-mwc-input ?readonly="${!user.id || readonly}"
+                                          ?disabled="${isGatewayServiceUser}"
+                                          .label="${i18next.t("regenerateSecret")}"
+                                          .type="${InputType.BUTTON}"
                                           @or-mwc-input-changed="${(ev) => {
             this._regenerateSecret(ev, user, "new-password-" + suffix).catch(() => showSnackbar(undefined, 'errorOccurred'));
             this.onUserChanged(suffix);
-        }}"></or-mwc-input>
-                        `, () => html `
-                            <span>${i18next.t("generateSecretInfo")}</span>
-                        `)}
-                    ` : html `
-                        <or-mwc-input id="new-password-${suffix}"
-                                      ?readonly="${readonly}"
-                                      class = "validate"
-                                      .label="${i18next.t("password")}"
-                                      .type="${InputType.PASSWORD}" min="1" autocomplete="false"
+        }}"></or-mwc-input>
+                        `, () => html `
+                            <span>${i18next.t("generateSecretInfo")}</span>
+                        `)}
+                    ` : html `
+                        <or-mwc-input id="new-password-${suffix}"
+                                      ?readonly="${readonly}"
+                                      class = "validate"
+                                      .label="${i18next.t("password")}"
+                                      .type="${InputType.PASSWORD}" min="1" autocomplete="false"
                                       @or-mwc-input-changed="${(e) => {
             this._onPasswordChanged(user, suffix);
             this.onUserChanged(suffix);
-        }}"
-                        ></or-mwc-input>
-                        <or-mwc-input id="new-repeatPassword-${suffix}"
-                                      helperPersistent ?readonly="${readonly}"
-                                      .label="${i18next.t("repeatPassword")}"
-                                      .type="${InputType.PASSWORD}" min="1" autocomplete="false"
-                                      style="${this._passwordPolicy ? 'margin-bottom: 0' : undefined}"
+        }}"
+                        ></or-mwc-input>
+                        <or-mwc-input id="new-repeatPassword-${suffix}"
+                                      helperPersistent ?readonly="${readonly}"
+                                      .label="${i18next.t("repeatPassword")}"
+                                      .type="${InputType.PASSWORD}" min="1" autocomplete="false"
+                                      style="${this._passwordPolicy ? 'margin-bottom: 0' : undefined}"
                                       @or-mwc-input-changed="${(e) => {
             this._onPasswordChanged(user, suffix);
             this.onUserChanged(suffix);
-        }}"
-                        ></or-mwc-input>
-                        ${when(this._passwordPolicy, () => until(this._getPasswordPolicyTemplate(user, this._passwordPolicy)))}
-                    `}
-                </div>
-
-                <div class="column">
-                    <h5>${i18next.t("settings")}</h5>
-                    <!-- enabled -->
-                    <or-mwc-input ?readonly="${readonly}"
-                                  class="validate"
-                                  .label="${i18next.t("active")}"
-                                  .type="${InputType.CHECKBOX}"
-                                  .value="${user.enabled}"
+        }}"
+                        ></or-mwc-input>
+                        ${when(this._passwordPolicy, () => until(this._getPasswordPolicyTemplate(user, this._passwordPolicy)))}
+                    `}
+                </div>
+
+                <div class="column">
+                    <h5>${i18next.t("settings")}</h5>
+                    <!-- enabled -->
+                    <or-mwc-input ?readonly="${readonly}"
+                                  class="validate"
+                                  .label="${i18next.t("active")}"
+                                  .type="${InputType.CHECKBOX}"
+                                  .value="${user.enabled}"
                                   @or-mwc-input-changed="${(e) => {
             user.enabled = e.detail.value;
             this.onUserChanged(suffix);
-        }}"
-                                  style="height: 56px;"
-                    ></or-mwc-input>
-
-                    <!-- realm roles -->
-                    <or-mwc-input
-                            ?readonly="${readonly}"
-                            ?disabled="${isSameUser || isGatewayServiceUser}"
-                            class = "validate"
-                            .value="${user.realmRoles}"
-                            .type="${InputType.SELECT}" multiple
-                            .options="${realmRoleOptions}"
-                            .label="${i18next.t("realm_role_plural")}"
+        }}"
+                                  style="height: 56px;"
+                    ></or-mwc-input>
+
+                    <!-- realm roles -->
+                    <or-mwc-input
+                            ?readonly="${readonly}"
+                            ?disabled="${isSameUser || isGatewayServiceUser}"
+                            class = "validate"
+                            .value="${user.realmRoles}"
+                            .type="${InputType.SELECT}" multiple
+                            .options="${realmRoleOptions}"
+                            .label="${i18next.t("realm_role_plural")}"
                             @or-mwc-input-changed="${(e) => {
             this.onUserChanged(suffix);
             user.realmRoles = e.detail.value;
-        }}"></or-mwc-input>
-
-                    <!-- composite client roles -->
-                    <or-mwc-input
-                            ?readonly="${readonly}"
-                            ?disabled="${isSameUser || isGatewayServiceUser}"
-                            class = "validate"
-                            .value="${user.roles && user.roles.length > 0 ? user.roles.filter(r => this._compositeRoles.some(cr => cr.name === r)) : undefined}"
-                            .type="${InputType.SELECT}" multiple
-                            .options="${compositeRoleOptions}"
-                            .label="${i18next.t("manager_role_plural")}"
+        }}"></or-mwc-input>
+
+                    <!-- composite client roles -->
+                    <or-mwc-input
+                            ?readonly="${readonly}"
+                            ?disabled="${isSameUser || isGatewayServiceUser}"
+                            class = "validate"
+                            .value="${user.roles && user.roles.length > 0 ? user.roles.filter(r => this._compositeRoles.some(cr => cr.name === r)) : undefined}"
+                            .type="${InputType.SELECT}" multiple
+                            .options="${compositeRoleOptions}"
+                            .label="${i18next.t("manager_role_plural")}"
                             @or-mwc-input-changed="${(e) => {
             user.roles = e.detail.value;
             this._updateUserSelectedRoles(user, suffix);
             this.onUserChanged(suffix);
-        }}"></or-mwc-input>
-
-                    <!-- roles -->
-                    <div style="display:flex;flex-wrap:wrap;margin-bottom: 20px;"
-                         id="role-list-${suffix}">
+        }}"></or-mwc-input>
+
+                    <!-- roles -->
+                    <div style="display:flex;flex-wrap:wrap;margin-bottom: 20px;"
+                         id="role-list-${suffix}">
                         ${this._roles.map(r => {
-            return html `
-                                <or-mwc-input
-                                        ?readonly="${readonly}"
-                                        ?disabled="${implicitRoleNames.find(name => r.name === name) || isGatewayServiceUser}"
-                                        class = "validate"
-                                        .value="${!!user.roles.find(userRole => userRole === r.name) || implicitRoleNames.some(implicitRoleName => implicitRoleName === r.name)}"
-                                        .type="${InputType.CHECKBOX}"
-                                        .label="${r.name}"
-                                        title="${r.description}"
-                                        style="flex: 0 1 160px; margin: 0; overflow: hidden;"
+            return html `
+                                <or-mwc-input
+                                        ?readonly="${readonly}"
+                                        ?disabled="${implicitRoleNames.find(name => r.name === name) || isGatewayServiceUser}"
+                                        class = "validate"
+                                        .value="${!!user.roles.find(userRole => userRole === r.name) || implicitRoleNames.some(implicitRoleName => implicitRoleName === r.name)}"
+                                        .type="${InputType.CHECKBOX}"
+                                        .label="${r.name}"
+                                        title="${r.description}"
+                                        style="flex: 0 1 160px; margin: 0; overflow: hidden;"
                                         @or-mwc-input-changed="${(e) => {
                 if (!!e.detail.value) {
                     user.roles.push(r.name);
@@ -951,37 +951,37 @@ let PageUsers = class PageUsers extends Page {
                     user.roles = user.roles.filter(ur => ur !== r.name);
                 }
                 this.onUserChanged(suffix);
-            }}"></or-mwc-input>
+            }}"></or-mwc-input>
                             `;
-        })}
-                    </div>
-
-                    <!-- Asset-User links -->
-                    <div>
-                        <span>${i18next.t("linkedAssets")}:</span>
-                        <or-mwc-input outlined ?disabled="${readonly || isGatewayServiceUser}" style="margin-left: 4px;"
-                                      .type="${InputType.BUTTON}"
-                                      .label="${i18next.t("selectRestrictedAssets", { number: user.userAssetLinks.length })}"
-                                      @or-mwc-input-changed="${(ev) => this._openAssetSelector(ev, user, readonly, suffix)}"></or-mwc-input>
-                    </div>
-                </div>
-            </div>
-            <!-- Bottom controls (save/update and delete button) -->
-            ${when(!(readonly && !this._saveUserPromise), () => html `
-                <div class="row button-row">
-
-                    ${when((!isSameUser && !isGatewayServiceUser && user.id), () => html `
-                        <or-mwc-input style="margin: 0;" outlined ?disabled="${readonly}"
-                                      .label="${i18next.t("delete")}"
-                                      .type="${InputType.BUTTON}"
-                                      @click="${() => this._deleteUser(user)}"
-                        ></or-mwc-input>
-                    `)}
-                    <div style="display: flex; align-items: center; gap: 16px; margin: 0 0 0 auto;">
-                        <!-- Button disabled until an input has input, and by that a valid check is done -->
-                        <or-mwc-input id="savebtn-${suffix}" style="margin: 0;" raised disabled
-                                      .label="${i18next.t(user.id ? "save" : "create")}"
-                                      .type="${InputType.BUTTON}"
+        })}
+                    </div>
+
+                    <!-- Asset-User links -->
+                    <div>
+                        <span>${i18next.t("linkedAssets")}:</span>
+                        <or-mwc-input outlined ?disabled="${readonly || isGatewayServiceUser}" style="margin-left: 4px;"
+                                      .type="${InputType.BUTTON}"
+                                      .label="${i18next.t("selectRestrictedAssets", { number: user.userAssetLinks.length })}"
+                                      @or-mwc-input-changed="${(ev) => this._openAssetSelector(ev, user, readonly, suffix)}"></or-mwc-input>
+                    </div>
+                </div>
+            </div>
+            <!-- Bottom controls (save/update and delete button) -->
+            ${when(!(readonly && !this._saveUserPromise), () => html `
+                <div class="row button-row">
+
+                    ${when((!isSameUser && !isGatewayServiceUser && user.id), () => html `
+                        <or-mwc-input style="margin: 0;" outlined ?disabled="${readonly}"
+                                      .label="${i18next.t("delete")}"
+                                      .type="${InputType.BUTTON}"
+                                      @click="${() => this._deleteUser(user)}"
+                        ></or-mwc-input>
+                    `)}
+                    <div style="display: flex; align-items: center; gap: 16px; margin: 0 0 0 auto;">
+                        <!-- Button disabled until an input has input, and by that a valid check is done -->
+                        <or-mwc-input id="savebtn-${suffix}" style="margin: 0;" raised disabled
+                                      .label="${i18next.t(user.id ? "save" : "create")}"
+                                      .type="${InputType.BUTTON}"
                                       @or-mwc-input-changed="${(e) => {
             let error;
             this._saveUserPromise = this._createUpdateUser(user, user.id ? 'update' : 'create').then((result) => {
@@ -1012,11 +1012,11 @@ let PageUsers = class PageUsers extends Page {
                     });
                 }
             });
-        }}">
-                        </or-mwc-input>
-                    </div>
-                </div>
-            `)}
+        }}">
+                        </or-mwc-input>
+                    </div>
+                </div>
+            `)}
         `;
     }
     _getPasswordPolicyTemplate(user_1) {
@@ -1070,10 +1070,10 @@ let PageUsers = class PageUsers extends Page {
             else if (policies.includes("notEmail")) {
                 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>
         `;
         });
     }