@openremote/manager 1.8.0-snapshot.20250725120000 → 1.8.0-snapshot.20250725123024

package/lib/pages/page-provisioning.js

@@ -38,165 +38,165 @@ let PageProvisioning = class PageProvisioning extends Page {
         // language=CSS
         return [
             unsafeCSS(tableStyle),
-            css `
-                #wrapper {
-                    height: 100%;
-                    width: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    overflow: auto;
-                }
-
-                #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 {
-                    width: calc(100% - 90px);
-                    max-width: 1310px;
-                    background-color: white;
-                    border: 1px solid #e5e5e5;
-                    border-radius: 5px;
-                    position: relative;
-                    margin: 5px auto;
-                    padding: 24px;
-                }
-
-                .panel-title {
-                    text-transform: uppercase;
-                    font-weight: bolder;
-                    line-height: 1em;
-                    color: var(--internal-or-asset-viewer-title-text-color);
-                    margin-bottom: 20px;
-                    margin-top: 0;
-                    flex: 0 0 auto;
-                    letter-spacing: 0.025em;
-                    color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
-                }
-
-                #table-users,
-                #table-users table {
-                    width: 100%;
-                    white-space: nowrap;
-                }
-
-                .mdc-data-table__row {
-                    cursor: pointer;
-                    border-top-color: #D3D3D3;
-                }
-
-                td, th {
-                    width: 25%
-                }
-                
-                or-mwc-input {
-                    margin-bottom: 20px;
-                    margin-right: 16px;
-                }
-
-                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;
-                    margin: 10px 0;
-                    flex: 1 1 0;
-                }
-
-                .column {
-                    display: flex;
-                    flex-direction: column;
-                    margin: 0px;
-                    flex: 1 1 0;
-                    max-width: 50%;
-                }
-
-                .mdc-data-table__header-cell {
-                    font-weight: bold;
-                    color: ${unsafeCSS(DefaultColor3)};
-                }
-
-                .mdc-data-table__header-cell:first-child {
-                    padding-left: 36px;
-                }
-
-                .item-row td {
-                    padding: 0;
-                }
-
-                .item-row-content {
-                    flex-direction: row;
-                    overflow: hidden;
-                    max-height: 0;
-                    padding-left: 16px;
-                }
-
-                .item-row.expanded .item-row-content {
-                    overflow: visible;
-                    max-height: unset;
-                }
-
-                .button {
-                    cursor: pointer;
-                    display: flex;
-                    flex-direction: row;
-                    align-content: center;
-                    padding: 16px;
-                    align-items: center;
-                    font-size: 14px;
-                    text-transform: uppercase;
-                    color: var(--or-app-color4);
-                }
-
-                .hidden {
-                    display: none;
-                }
-                
-                @media screen and (max-width: 768px) {
-                    #title {
-                        padding: 0;
-                        width: 100%;
-                    }
-
-                    .hide-mobile {
-                        display: none;
-                    }
-
-                    .row {
-                        display: block;
-                        flex-direction: column;
-                    }
-
-                    .panel {
-                        border-radius: 0;
-                        border-left: 0px;
-                        border-right: 0px;
-                        width: calc(100% - 48px);
-                    }
-
-                    td, th {
-                        width: 50%
-                    }
-                }
+            css `
+                #wrapper {
+                    height: 100%;
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    overflow: auto;
+                }
+
+                #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 {
+                    width: calc(100% - 90px);
+                    max-width: 1310px;
+                    background-color: white;
+                    border: 1px solid #e5e5e5;
+                    border-radius: 5px;
+                    position: relative;
+                    margin: 5px auto;
+                    padding: 24px;
+                }
+
+                .panel-title {
+                    text-transform: uppercase;
+                    font-weight: bolder;
+                    line-height: 1em;
+                    color: var(--internal-or-asset-viewer-title-text-color);
+                    margin-bottom: 20px;
+                    margin-top: 0;
+                    flex: 0 0 auto;
+                    letter-spacing: 0.025em;
+                    color: var(--or-app-color3, ${unsafeCSS(DefaultColor3)});
+                }
+
+                #table-users,
+                #table-users table {
+                    width: 100%;
+                    white-space: nowrap;
+                }
+
+                .mdc-data-table__row {
+                    cursor: pointer;
+                    border-top-color: #D3D3D3;
+                }
+
+                td, th {
+                    width: 25%
+                }
+                
+                or-mwc-input {
+                    margin-bottom: 20px;
+                    margin-right: 16px;
+                }
+
+                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;
+                    margin: 10px 0;
+                    flex: 1 1 0;
+                }
+
+                .column {
+                    display: flex;
+                    flex-direction: column;
+                    margin: 0px;
+                    flex: 1 1 0;
+                    max-width: 50%;
+                }
+
+                .mdc-data-table__header-cell {
+                    font-weight: bold;
+                    color: ${unsafeCSS(DefaultColor3)};
+                }
+
+                .mdc-data-table__header-cell:first-child {
+                    padding-left: 36px;
+                }
+
+                .item-row td {
+                    padding: 0;
+                }
+
+                .item-row-content {
+                    flex-direction: row;
+                    overflow: hidden;
+                    max-height: 0;
+                    padding-left: 16px;
+                }
+
+                .item-row.expanded .item-row-content {
+                    overflow: visible;
+                    max-height: unset;
+                }
+
+                .button {
+                    cursor: pointer;
+                    display: flex;
+                    flex-direction: row;
+                    align-content: center;
+                    padding: 16px;
+                    align-items: center;
+                    font-size: 14px;
+                    text-transform: uppercase;
+                    color: var(--or-app-color4);
+                }
+
+                .hidden {
+                    display: none;
+                }
+                
+                @media screen and (max-width: 768px) {
+                    #title {
+                        padding: 0;
+                        width: 100%;
+                    }
+
+                    .hide-mobile {
+                        display: none;
+                    }
+
+                    .row {
+                        display: block;
+                        flex-direction: column;
+                    }
+
+                    .panel {
+                        border-radius: 0;
+                        border-left: 0px;
+                        border-right: 0px;
+                        width: calc(100% - 48px);
+                    }
+
+                    td, th {
+                        width: 50%
+                    }
+                }
             `,
         ];
     }
@@ -211,58 +211,58 @@ let PageProvisioning = class PageProvisioning extends Page {
     }
     render() {
         if (!manager.authenticated) {
-            return html `
-                <or-translate value="notAuthenticated"></or-translate>
+            return html `
+                <or-translate value="notAuthenticated"></or-translate>
             `;
         }
         if (!this._configs) {
             return html ``;
         }
-        return html `
-            <div id="wrapper">
-                <div id="title">
-                    <or-icon icon="cellphone-cog"></or-icon>
-                    ${i18next.t("provisioningConfigs")}
-                </div>
-
-                <div class="panel">
-                    <div id="table-users" class="mdc-data-table">
-                        <table class="mdc-data-table__table" aria-label="attribute list">
-                            <thead>
-                            <tr class="mdc-data-table__header-row">
-                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
-                                    <or-translate value="name"></or-translate>
-                                </th>
-                                <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
-                                    <or-translate value="realm"></or-translate>
-                                </th>
-                                <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
-                                    <or-translate value="type"></or-translate>
-                                </th>
-                                <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
-                                    <or-translate value="enabled"></or-translate>
-                                </th>
-                            </tr>
-                            </thead>
-                            <tbody class="mdc-data-table__content">
+        return html `
+            <div id="wrapper">
+                <div id="title">
+                    <or-icon icon="cellphone-cog"></or-icon>
+                    ${i18next.t("provisioningConfigs")}
+                </div>
+
+                <div class="panel">
+                    <div id="table-users" class="mdc-data-table">
+                        <table class="mdc-data-table__table" aria-label="attribute list">
+                            <thead>
+                            <tr class="mdc-data-table__header-row">
+                                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">
+                                    <or-translate value="name"></or-translate>
+                                </th>
+                                <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
+                                    <or-translate value="realm"></or-translate>
+                                </th>
+                                <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
+                                    <or-translate value="type"></or-translate>
+                                </th>
+                                <th class="mdc-data-table__header-cell hide-mobile" role="columnheader" scope="col">
+                                    <or-translate value="enabled"></or-translate>
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody class="mdc-data-table__content">
                             ${this._configs.map((config, index) => this._getConfigTemplate(() => {
             this._configs.pop();
             this._configs = [...this._configs];
-        }, config))}
-                            ${(this._configs.length === 0 || (this._configs.length > 0 && !!this._configs[this._configs.length - 1].id)) ? html `
+        }, config))}
+                            ${(this._configs.length === 0 || (this._configs.length > 0 && !!this._configs[this._configs.length - 1].id)) ? html `
                                 <tr class="mdc-data-table__row" @click="${() => {
             this._configs = [...this._configs, { type: "x509" }];
-        }}">
-                                    <td colspan="100%">
-                                        <a class="button"><or-icon icon="plus"></or-icon>${i18next.t("add")}</a>
-                                    </td>
-                                </tr>
-                            ` : ``}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
+        }}">
+                                    <td colspan="100%">
+                                        <a class="button"><or-icon icon="plus"></or-icon>${i18next.t("add")}</a>
+                                    </td>
+                                </tr>
+                            ` : ``}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
         `;
     }
     _loadConfigs() {
@@ -345,104 +345,104 @@ let PageProvisioning = class PageProvisioning extends Page {
                 config.data = {};
             }
             const data = config.data;
-            typeColumnContents = html `
-                <or-mwc-input .label="${i18next.t("CACertPem")}" required
-                              .type="${InputType.TEXTAREA}"
-                              .value="${data.CACertPEM}"
-                              resizeVertical
-                              @or-mwc-input-changed="${(e) => data.CACertPEM = e.detail.value}"></or-mwc-input>
-                <or-mwc-input .label="${i18next.t("ignoreExpiryDate")}"
-                              .type="${InputType.CHECKBOX}"
-                              .value="${data.ignoreExpiryDate}"
-                              @or-mwc-input-changed="${(e) => data.ignoreExpiryDate = !e.detail.value}"
-                              style="height: 56px;"></or-mwc-input>
+            typeColumnContents = html `
+                <or-mwc-input .label="${i18next.t("CACertPem")}" required
+                              .type="${InputType.TEXTAREA}"
+                              .value="${data.CACertPEM}"
+                              resizeVertical
+                              @or-mwc-input-changed="${(e) => data.CACertPEM = e.detail.value}"></or-mwc-input>
+                <or-mwc-input .label="${i18next.t("ignoreExpiryDate")}"
+                              .type="${InputType.CHECKBOX}"
+                              .value="${data.ignoreExpiryDate}"
+                              @or-mwc-input-changed="${(e) => data.ignoreExpiryDate = !e.detail.value}"
+                              style="height: 56px;"></or-mwc-input>
             `;
         }
         else {
-            typeColumnContents = html `
-                <or-translate .value="notSupported"></or-translate>
+            typeColumnContents = html `
+                <or-translate .value="notSupported"></or-translate>
             `;
         }
-        return html `
-            <tr class="mdc-data-table__row" @click="${(ev) => this._toggleConfigExpand(ev)}">
-                <td class="padded-cell mdc-data-table__cell">
-                    <or-icon icon="chevron-right"></or-icon>
-                    <span>${!config.id ? "" : config.name}</span>
-                </td>
-                <td class="padded-cell mdc-data-table__cell">
-                    ${!config.id ? "" : config.realm}
-                </td>
-                <td class="padded-cell mdc-data-table__cell">
-                    ${!config.id ? "" : config.type}
-                </td>
-                <td class="padded-cell mdc-data-table__cell">
-                    <or-input .type="${InputType.CHECKBOX}" .value="${!config.id ? "" : !config.disabled}"></or-input>
-                </td>
-            </tr>
-            <tr class="item-row${!config.id ? " expanded" : ""}">
-                <td colspan="4">
-                    <div class="item-row-content">
-                        <div class="row">
-                            <div class="column">
-                                <or-mwc-input .label="${i18next.t("name")}"
-                                              .type="${InputType.TEXT}" min="1" required
-                                              .value="${config.name}"
-                                              @or-mwc-input-changed="${(e) => config.name = e.detail.value}"></or-mwc-input>
-                                <or-mwc-input ?disabled="${!!config.id}" required
-                                              .label="${i18next.t("type")}"
-                                              .type="${InputType.SELECT}"
-                                              .options="${[["x509", "X.509"]]}"
-                                              .value="${!config.type ? "x509" : config.type}"
-                                              @or-mwc-input-changed="${(e) => config.type = e.detail.value}"></or-mwc-input>
-                                <or-mwc-input ?disabled="${!!config.id}" required
-                                              .label="${i18next.t("realm")}"
-                                              .type="${InputType.SELECT}"
-                                              .options="${this._realmOptions}"
-                                              .value="${config.realm}"
-                                              @or-mwc-input-changed="${(e) => config.realm = e.detail.value}"></or-mwc-input>
-                                <or-mwc-input ?disabled="${!!config.id}"
-                                              .value="${config.userRoles}"
-                                              .type="${InputType.SELECT}" multiple
-                                              .options="${this._roleOptions}" 
-                                              .label="${i18next.t("role_plural")}"
-                                              @or-mwc-input-changed="${(e) => config.userRoles = e.detail.value}"></or-mwc-input>
-                                <or-mwc-input .label="${i18next.t("assetTemplate")}"
-                                              .type="${InputType.JSON}"
-                                              .value="${config.assetTemplate ? JSON.stringify(JSON.parse(config.assetTemplate), null, 2) : undefined}"
-                                              resizeVertical
-                                              @or-mwc-input-changed="${(e) => config.assetTemplate = e.detail.value ? JSON.stringify(e.detail.value) : undefined}"></or-mwc-input>
-                                <or-mwc-input .label="${i18next.t("createAsRestrictedUser")}"
-                                              .type="${InputType.CHECKBOX}"
-                                              .value="${config.restrictedUser}"
-                                              @or-mwc-input-changed="${(e) => config.restrictedUser = e.detail.value}"></or-mwc-input>
-                                <or-mwc-input .label="${i18next.t("disabled")}"
-                                              .type="${InputType.CHECKBOX}"
-                                              .value="${config.disabled}"
-                                              @or-mwc-input-changed="${(e) => config.disabled = e.detail.value}"></or-mwc-input>
-                            </div>
-
-                            <div class="column">                                
-                                ${typeColumnContents}
-                            </div>
-                        </div>
-
-                        <div class="row" style="margin-bottom: 0;">
-                            ${config.id ? html `<or-mwc-input label="delete"
-                                          .type="${InputType.BUTTON}"
-                                          @click="${() => this._deleteConfig(config)}"></or-mwc-input>
-                            ` : ``}              
-                            ${!config.id ? html `<or-mwc-input label="cancel"
-                                      .type="${InputType.BUTTON}"
-                                      @click="${() => addCancel()}"></or-mwc-input>
-                            ` : ``}
-                            <or-mwc-input class="savebtn" style="margin-left: auto;"
-                                  label="${config.id ? "save" : "create"}"
-                                  .type="${InputType.BUTTON}"
-                                  @click="${() => this._createUpdateConfig(config)}"></or-mwc-input>
-                        </div>
-                    </div>
-                </td>
-            </tr>
+        return html `
+            <tr class="mdc-data-table__row" @click="${(ev) => this._toggleConfigExpand(ev)}">
+                <td class="padded-cell mdc-data-table__cell">
+                    <or-icon icon="chevron-right"></or-icon>
+                    <span>${!config.id ? "" : config.name}</span>
+                </td>
+                <td class="padded-cell mdc-data-table__cell">
+                    ${!config.id ? "" : config.realm}
+                </td>
+                <td class="padded-cell mdc-data-table__cell">
+                    ${!config.id ? "" : config.type}
+                </td>
+                <td class="padded-cell mdc-data-table__cell">
+                    <or-input .type="${InputType.CHECKBOX}" .value="${!config.id ? "" : !config.disabled}"></or-input>
+                </td>
+            </tr>
+            <tr class="item-row${!config.id ? " expanded" : ""}">
+                <td colspan="4">
+                    <div class="item-row-content">
+                        <div class="row">
+                            <div class="column">
+                                <or-mwc-input .label="${i18next.t("name")}"
+                                              .type="${InputType.TEXT}" min="1" required
+                                              .value="${config.name}"
+                                              @or-mwc-input-changed="${(e) => config.name = e.detail.value}"></or-mwc-input>
+                                <or-mwc-input ?disabled="${!!config.id}" required
+                                              .label="${i18next.t("type")}"
+                                              .type="${InputType.SELECT}"
+                                              .options="${[["x509", "X.509"]]}"
+                                              .value="${!config.type ? "x509" : config.type}"
+                                              @or-mwc-input-changed="${(e) => config.type = e.detail.value}"></or-mwc-input>
+                                <or-mwc-input ?disabled="${!!config.id}" required
+                                              .label="${i18next.t("realm")}"
+                                              .type="${InputType.SELECT}"
+                                              .options="${this._realmOptions}"
+                                              .value="${config.realm}"
+                                              @or-mwc-input-changed="${(e) => config.realm = e.detail.value}"></or-mwc-input>
+                                <or-mwc-input ?disabled="${!!config.id}"
+                                              .value="${config.userRoles}"
+                                              .type="${InputType.SELECT}" multiple
+                                              .options="${this._roleOptions}" 
+                                              .label="${i18next.t("role_plural")}"
+                                              @or-mwc-input-changed="${(e) => config.userRoles = e.detail.value}"></or-mwc-input>
+                                <or-mwc-input .label="${i18next.t("assetTemplate")}"
+                                              .type="${InputType.JSON}"
+                                              .value="${config.assetTemplate ? JSON.stringify(JSON.parse(config.assetTemplate), null, 2) : undefined}"
+                                              resizeVertical
+                                              @or-mwc-input-changed="${(e) => config.assetTemplate = e.detail.value ? JSON.stringify(e.detail.value) : undefined}"></or-mwc-input>
+                                <or-mwc-input .label="${i18next.t("createAsRestrictedUser")}"
+                                              .type="${InputType.CHECKBOX}"
+                                              .value="${config.restrictedUser}"
+                                              @or-mwc-input-changed="${(e) => config.restrictedUser = e.detail.value}"></or-mwc-input>
+                                <or-mwc-input .label="${i18next.t("disabled")}"
+                                              .type="${InputType.CHECKBOX}"
+                                              .value="${config.disabled}"
+                                              @or-mwc-input-changed="${(e) => config.disabled = e.detail.value}"></or-mwc-input>
+                            </div>
+
+                            <div class="column">                                
+                                ${typeColumnContents}
+                            </div>
+                        </div>
+
+                        <div class="row" style="margin-bottom: 0;">
+                            ${config.id ? html `<or-mwc-input label="delete"
+                                          .type="${InputType.BUTTON}"
+                                          @click="${() => this._deleteConfig(config)}"></or-mwc-input>
+                            ` : ``}              
+                            ${!config.id ? html `<or-mwc-input label="cancel"
+                                      .type="${InputType.BUTTON}"
+                                      @click="${() => addCancel()}"></or-mwc-input>
+                            ` : ``}
+                            <or-mwc-input class="savebtn" style="margin-left: auto;"
+                                  label="${config.id ? "save" : "create"}"
+                                  .type="${InputType.BUTTON}"
+                                  @click="${() => this._createUpdateConfig(config)}"></or-mwc-input>
+                        </div>
+                    </div>
+                </td>
+            </tr>
         `;
     }
 };