npm - @things-factory/auth-ui - Versions diffs - 9.0.0-beta.76 → 9.0.0 - Mend

@things-factory/auth-ui 9.0.0-beta.76 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/dist-client/components/profile-component.js CHANGED Viewed

@@ -19,6 +19,99 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
         this.languages = [];
         this.passwordRule = {};
     }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+        background-color: var(--md-sys-color-background);
+        padding: 15px 0;
+      }
+      .wrap {
+        max-width: var(--profile-wrap-max-width, 400px);
+        margin: auto;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      *:focus {
+        outline: none;
+      }
+      input {
+        margin: var(--spacing-small) 0;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        padding: 9px;
+        border-radius: var(--border-radius);
+        font: var(--auth-input-field-font);
+        width: var(--auth-input-field-width);
+      }
+      input:focus {
+        border: 1px solid var(--focus-background-color);
+      }
+      .user {
+        background: url(/assets/images/icon-profile.png) center top no-repeat;
+        margin: var(--profile-icon-margin);
+        padding: 180px 20px 20px 20px;
+        color: var(--md-sys-color-secondary);
+        font: var(--header-bar-title);
+        text-align: center;
+      }
+      hr {
+        width: 100%;
+        border: dotted 1px rgba(0, 0, 0, 0.1);
+      }
+      .wrap * {
+        grid-column: span 2;
+      }
+      label {
+        font: bold 14px var(--theme-font);
+        color: var(--md-sys-color-primary);
+        text-transform: capitalize;
+        grid-column: 1;
+      }
+      .wrap *.inline {
+        grid-column: unset;
+      }
+      ox-i18n-selector {
+        --i18n-selector-field-width: var(--auth-input-field-width);
+        --i18n-selector-field-margin: var(--change-password-field-margin);
+        --i18n-selector-field-padding: var(--spacing-medium);
+        --i18n-selector-field-border-radius: var(--border-radius);
+        margin: var(--change-password-field-margin);
+      }
+      md-text-button {
+        text-transform: capitalize;
+      }
+      footer {
+        padding: 20px;
+        text-align: center;
+      }
+      footer p {
+        font-size: 14px;
+        margin-bottom: 5px;
+        color: var(--md-sys-color-on-background);
+      }
+      footer a {
+        color: var(--md-sys-color-primary);
+        text-decoration: none;
+        font-weight: bold;
+      }
+    `
+    ]; }
     async connectedCallback() {
         super.connectedCallback();
         const response = await client.query({
@@ -246,105 +339,12 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
         var titleMeta = document.querySelector('meta[name="application-name"]');
         var descriptionMeta = document.querySelector('meta[name="application-description"]');
         return {
-            icon: (iconLink === null || iconLink === void 0 ? void 0 : iconLink.href) || '',
-            title: (titleMeta === null || titleMeta === void 0 ? void 0 : titleMeta.content) || 'Things Factory',
-            description: (descriptionMeta === null || descriptionMeta === void 0 ? void 0 : descriptionMeta.content) || 'Reimagining Software'
+            icon: iconLink?.href || '',
+            title: titleMeta?.content || 'Things Factory',
+            description: descriptionMeta?.content || 'Reimagining Software'
         };
     }
 };
-ProfileComponent.styles = [
-    css `
-      :host {
-        display: block;
-        background-color: var(--md-sys-color-background);
-        padding: 15px 0;
-      }
-      .wrap {
-        max-width: var(--profile-wrap-max-width, 400px);
-        margin: auto;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      *:focus {
-        outline: none;
-      }
-      input {
-        margin: var(--spacing-small) 0;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        padding: 9px;
-        border-radius: var(--border-radius);
-        font: var(--auth-input-field-font);
-        width: var(--auth-input-field-width);
-      }
-      input:focus {
-        border: 1px solid var(--focus-background-color);
-      }
-      .user {
-        background: url(/assets/images/icon-profile.png) center top no-repeat;
-        margin: var(--profile-icon-margin);
-        padding: 180px 20px 20px 20px;
-        color: var(--md-sys-color-secondary);
-        font: var(--header-bar-title);
-        text-align: center;
-      }
-      hr {
-        width: 100%;
-        border: dotted 1px rgba(0, 0, 0, 0.1);
-      }
-      .wrap * {
-        grid-column: span 2;
-      }
-      label {
-        font: bold 14px var(--theme-font);
-        color: var(--md-sys-color-primary);
-        text-transform: capitalize;
-        grid-column: 1;
-      }
-      .wrap *.inline {
-        grid-column: unset;
-      }
-      ox-i18n-selector {
-        --i18n-selector-field-width: var(--auth-input-field-width);
-        --i18n-selector-field-margin: var(--change-password-field-margin);
-        --i18n-selector-field-padding: var(--spacing-medium);
-        --i18n-selector-field-border-radius: var(--border-radius);
-        margin: var(--change-password-field-margin);
-      }
-      md-text-button {
-        text-transform: capitalize;
-      }
-      footer {
-        padding: 20px;
-        text-align: center;
-      }
-      footer p {
-        font-size: 14px;
-        margin-bottom: 5px;
-        color: var(--md-sys-color-on-background);
-      }
-      footer a {
-        color: var(--md-sys-color-primary);
-        text-decoration: none;
-        font-weight: bold;
-      }
-    `
-];
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist-client/components/profile-component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"profile-component.js","sourceRoot":"","sources":["../../client/components/profile-component.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport './change-password.js'\nimport './delete-user-popup.js'\nimport './my-login-history.js'\n\nimport { gql } from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { startRegistration } from '@simplewebauthn/browser'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { auth, getLanguages } from '@things-factory/auth-base/dist-client'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n@customElement('profile-component')\nexport class ProfileComponent extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n background-color: var(--md-sys-color-background);\n padding: 15px 0;\n }\n .wrap {\n max-width: var(--profile-wrap-max-width, 400px);\n margin: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n * {\n box-sizing: border-box;\n }\n\n :focus {\n outline: none;\n }\n\n input {\n margin: var(--spacing-small) 0;\n border: 1px solid rgba(0, 0, 0, 0.2);\n padding: 9px;\n border-radius: var(--border-radius);\n font: var(--auth-input-field-font);\n width: var(--auth-input-field-width);\n }\n input:focus {\n border: 1px solid var(--focus-background-color);\n }\n\n .user {\n background: url(/assets/images/icon-profile.png) center top no-repeat;\n margin: var(--profile-icon-margin);\n padding: 180px 20px 20px 20px;\n color: var(--md-sys-color-secondary);\n font: var(--header-bar-title);\n text-align: center;\n }\n\n hr {\n width: 100%;\n border: dotted 1px rgba(0, 0, 0, 0.1);\n }\n\n .wrap {\n grid-column: span 2;\n }\n\n label {\n font: bold 14px var(--theme-font);\n color: var(--md-sys-color-primary);\n text-transform: capitalize;\n grid-column: 1;\n }\n\n .wrap *.inline {\n grid-column: unset;\n }\n\n ox-i18n-selector {\n --i18n-selector-field-width: var(--auth-input-field-width);\n --i18n-selector-field-margin: var(--change-password-field-margin);\n --i18n-selector-field-padding: var(--spacing-medium);\n --i18n-selector-field-border-radius: var(--border-radius);\n margin: var(--change-password-field-margin);\n }\n\n md-text-button {\n text-transform: capitalize;\n }\n\n footer {\n padding: 20px;\n text-align: center;\n }\n\n footer p {\n font-size: 14px;\n margin-bottom: 5px;\n color: var(--md-sys-color-on-background);\n }\n\n footer a {\n color: var(--md-sys-color-primary);\n text-decoration: none;\n font-weight: bold;\n }\n `\n ]\n\n @property({ type: String }) username?: string\n @property({ type: String }) email?: string\n @property({ type: String }) name?: string\n\n @state() languages: { code: string; display: string }[] = []\n @state() passwordRule: {\n lowerCase?: boolean\n upperCase?: boolean\n digit?: boolean\n specialCharacter?: boolean\n allowRepeat?: boolean\n useTightPattern?: boolean\n useLoosePattern?: boolean\n tightCharacterLength?: number\n looseCharacterLength?: number\n } = {}\n\n @query('#username') usernameEl!: HTMLInputElement\n @query('#name') nameEl!: HTMLInputElement\n @query('#email') emailEl!: HTMLInputElement\n @query('#locale') localeEl!: HTMLInputElement\n\n async connectedCallback(): Promise<void> {\n super.connectedCallback()\n\n const response = await client.query({\n query: gql`\n query {\n passwordRule {\n lowerCase\n upperCase\n digit\n specialCharacter\n allowRepeat\n useTightPattern\n useLoosePattern\n tightCharacterLength\n looseCharacterLength\n }\n }\n `\n })\n\n this.passwordRule = response.data\n }\n\n async firstUpdated() {\n auth.on('profile', ({ credential }) => {\n this.setCredential(credential)\n })\n\n this.setCredential(auth.credential)\n\n this.languages = await getLanguages()\n }\n\n setCredential(credential) {\n if (credential) {\n this.username = credential.username\n this.name = credential.name\n this.email = credential.email\n } else {\n this.username = ''\n this.name = ''\n this.email = ''\n }\n }\n\n render() {\n return html`\n <div class=\"wrap\">\n <div class=\"user\">${this.username \|\| ''}</div>\n\n <label for=\"username\"><ox-i18n slot=\"title\" msgid=\"label.user-id\"></ox-i18n></label>\n <input id=\"username\" @change=${e => this.onUsernameChanged(e.target.value)} .value=${this.username \|\| ''} />\n\n <hr />\n\n <label for=\"name\"><ox-i18n slot=\"title\" msgid=\"label.name\"></ox-i18n></label>\n <input id=\"name\" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name \|\| ''} />\n\n <hr />\n\n <label for=\"email\"><ox-i18n slot=\"title\" msgid=\"label.email\"></ox-i18n></label>\n <input id=\"email\" type=\"email\" @change=${e => this.onEmailChanged(e.target.value)} .value=${this.email \|\| ''} />\n\n <hr />\n\n <label for=\"locale\"><ox-i18n slot=\"title\" msgid=\"label.language\"></ox-i18n></label>\n <ox-i18n-selector\n id=\"locale\"\n @change=${e => this.onLocaleChanged(e.detail)}\n value=${i18next.language \|\| 'en-US'}\n .languages=${this.languages}\n ></ox-i18n-selector>\n\n <hr />\n\n <label for=\"change-password\">\n <ox-i18n msgid=\"label.password\"></ox-i18n>\n </label>\n\n <change-password id=\"change-password\" .passwordRule=${this.passwordRule}></change-password>\n\n ${isAvailableWebauthn\n ? html`\n <md-text-button @click=${() => this.registerUser()}\n >${i18next.t('button.security-key registration')}</md-text-button\n >\n `\n : nothing}\n\n <footer>\n <p>\n ${i18next.t('text.click login history')}\n <a href=\"javascript:void(0);\" @click=${this.openLoginHistory.bind(this)}\n >${i18next.t('label.login_history')}</a\n >\n </p>\n </footer>\n </div>\n `\n }\n\n async onUsernameChanged(username) {\n if (!username) return\n\n var oldUsername = this.username\n\n try {\n const message = await auth.updateProfile({\n username\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.usernameEl.value = oldUsername \|\| ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onNameChanged(name) {\n if (!name) return\n\n var oldName = this.name\n\n try {\n const message = await auth.updateProfile({\n name\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.nameEl.value = oldName \|\| ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onEmailChanged(email) {\n if (!email) return\n\n var oldEmail = this.email\n\n try {\n const message = await auth.updateProfile({\n email\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.emailEl.value = oldEmail \|\| ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onLocaleChanged(value) {\n if (!value) return\n\n var oldLocale = i18next.language\n\n try {\n const message = await auth.updateProfile({\n locale: value\n })\n\n i18next.changeLanguage(value)\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.localeEl.value = oldLocale\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n openLoginHistory() {\n openPopup(html` <my-login-history></my-login-history> `, {\n title: i18next.t('label.login_history')\n })\n }\n\n deleteUser() {\n openPopup(html` <delete-user-popup></delete-user-popup> `, {\n title: i18next.t('label.delete account')\n })\n }\n\n async registerUser() {\n try {\n const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())\n const attResp = await startRegistration(options)\n const verification = await fetch('/auth/verify-registration', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(attResp)\n }).then(res => res.json())\n\n if (verification.verified) {\n notify({\n level: 'info',\n message: i18next.t('text.user credential registered successfully')\n })\n } else {\n console.error(await verification.text())\n\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration not allowed')\n })\n }\n } catch (error) {\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration failed')\n })\n }\n }\n\n get applicationMeta() {\n var iconLink: HTMLLinkElement \| null = document.querySelector('link[rel=\"application-icon\"]')\n var titleMeta: HTMLMetaElement \| null = document.querySelector('meta[name=\"application-name\"]')\n var descriptionMeta: HTMLMetaElement \| null = document.querySelector('meta[name=\"application-description\"]')\n\n return {\n icon: iconLink?.href \|\| '',\n title: titleMeta?.content \|\| 'Things Factory',\n description: descriptionMeta?.content \|\| 'Reimagining Software'\n }\n }\n}\n"]}
1	+ {"version":3,"file":"profile-component.js","sourceRoot":"","sources":["../../client/components/profile-component.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport './change-password.js'\nimport './delete-user-popup.js'\nimport './my-login-history.js'\n\nimport { gql } from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { startRegistration } from '@simplewebauthn/browser'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { auth, getLanguages } from '@things-factory/auth-base/dist-client'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n@customElement('profile-component')\nexport class ProfileComponent extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n background-color: var(--md-sys-color-background);\n padding: 15px 0;\n }\n .wrap {\n max-width: var(--profile-wrap-max-width, 400px);\n margin: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n * {\n box-sizing: border-box;\n }\n\n :focus {\n outline: none;\n }\n\n input {\n margin: var(--spacing-small) 0;\n border: 1px solid rgba(0, 0, 0, 0.2);\n padding: 9px;\n border-radius: var(--border-radius);\n font: var(--auth-input-field-font);\n width: var(--auth-input-field-width);\n }\n input:focus {\n border: 1px solid var(--focus-background-color);\n }\n\n .user {\n background: url(/assets/images/icon-profile.png) center top no-repeat;\n margin: var(--profile-icon-margin);\n padding: 180px 20px 20px 20px;\n color: var(--md-sys-color-secondary);\n font: var(--header-bar-title);\n text-align: center;\n }\n\n hr {\n width: 100%;\n border: dotted 1px rgba(0, 0, 0, 0.1);\n }\n\n .wrap {\n grid-column: span 2;\n }\n\n label {\n font: bold 14px var(--theme-font);\n color: var(--md-sys-color-primary);\n text-transform: capitalize;\n grid-column: 1;\n }\n\n .wrap *.inline {\n grid-column: unset;\n }\n\n ox-i18n-selector {\n --i18n-selector-field-width: var(--auth-input-field-width);\n --i18n-selector-field-margin: var(--change-password-field-margin);\n --i18n-selector-field-padding: var(--spacing-medium);\n --i18n-selector-field-border-radius: var(--border-radius);\n margin: var(--change-password-field-margin);\n }\n\n md-text-button {\n text-transform: capitalize;\n }\n\n footer {\n padding: 20px;\n text-align: center;\n }\n\n footer p {\n font-size: 14px;\n margin-bottom: 5px;\n color: var(--md-sys-color-on-background);\n }\n\n footer a {\n color: var(--md-sys-color-primary);\n text-decoration: none;\n font-weight: bold;\n }\n `\n ]\n\n @property({ type: String }) username?: string\n @property({ type: String }) email?: string\n @property({ type: String }) name?: string\n\n @state() languages: { code: string; display: string }[] = []\n @state() passwordRule: {\n lowerCase?: boolean\n upperCase?: boolean\n digit?: boolean\n specialCharacter?: boolean\n allowRepeat?: boolean\n useTightPattern?: boolean\n useLoosePattern?: boolean\n tightCharacterLength?: number\n looseCharacterLength?: number\n } = {}\n\n @query('#username') usernameEl!: HTMLInputElement\n @query('#name') nameEl!: HTMLInputElement\n @query('#email') emailEl!: HTMLInputElement\n @query('#locale') localeEl!: HTMLInputElement\n\n async connectedCallback(): Promise<void> {\n super.connectedCallback()\n\n const response = await client.query({\n query: gql`\n query {\n passwordRule {\n lowerCase\n upperCase\n digit\n specialCharacter\n allowRepeat\n useTightPattern\n useLoosePattern\n tightCharacterLength\n looseCharacterLength\n }\n }\n `\n })\n\n this.passwordRule = response.data\n }\n\n async firstUpdated() {\n auth.on('profile', ({ credential }) => {\n this.setCredential(credential)\n })\n\n this.setCredential(auth.credential)\n\n this.languages = await getLanguages()\n }\n\n setCredential(credential) {\n if (credential) {\n this.username = credential.username\n this.name = credential.name\n this.email = credential.email\n } else {\n this.username = ''\n this.name = ''\n this.email = ''\n }\n }\n\n render() {\n return html`\n <div class=\"wrap\">\n <div class=\"user\">${this.username \|\| ''}</div>\n\n <label for=\"username\"><ox-i18n slot=\"title\" msgid=\"label.user-id\"></ox-i18n></label>\n <input id=\"username\" @change=${e => this.onUsernameChanged(e.target.value)} .value=${this.username \|\| ''} />\n\n <hr />\n\n <label for=\"name\"><ox-i18n slot=\"title\" msgid=\"label.name\"></ox-i18n></label>\n <input id=\"name\" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name \|\| ''} />\n\n <hr />\n\n <label for=\"email\"><ox-i18n slot=\"title\" msgid=\"label.email\"></ox-i18n></label>\n <input id=\"email\" type=\"email\" @change=${e => this.onEmailChanged(e.target.value)} .value=${this.email \|\| ''} />\n\n <hr />\n\n <label for=\"locale\"><ox-i18n slot=\"title\" msgid=\"label.language\"></ox-i18n></label>\n <ox-i18n-selector\n id=\"locale\"\n @change=${e => this.onLocaleChanged(e.detail)}\n value=${i18next.language \|\| 'en-US'}\n .languages=${this.languages}\n ></ox-i18n-selector>\n\n <hr />\n\n <label for=\"change-password\">\n <ox-i18n msgid=\"label.password\"></ox-i18n>\n </label>\n\n <change-password id=\"change-password\" .passwordRule=${this.passwordRule}></change-password>\n\n ${isAvailableWebauthn\n ? html`\n <md-text-button @click=${() => this.registerUser()}\n >${i18next.t('button.security-key registration')}</md-text-button\n >\n `\n : nothing}\n\n <footer>\n <p>\n ${i18next.t('text.click login history')}\n <a href=\"javascript:void(0);\" @click=${this.openLoginHistory.bind(this)}\n >${i18next.t('label.login_history')}</a\n >\n </p>\n </footer>\n </div>\n `\n }\n\n async onUsernameChanged(username) {\n if (!username) return\n\n var oldUsername = this.username\n\n try {\n const message = await auth.updateProfile({\n username\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.usernameEl.value = oldUsername \|\| ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onNameChanged(name) {\n if (!name) return\n\n var oldName = this.name\n\n try {\n const message = await auth.updateProfile({\n name\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.nameEl.value = oldName \|\| ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onEmailChanged(email) {\n if (!email) return\n\n var oldEmail = this.email\n\n try {\n const message = await auth.updateProfile({\n email\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.emailEl.value = oldEmail \|\| ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onLocaleChanged(value) {\n if (!value) return\n\n var oldLocale = i18next.language\n\n try {\n const message = await auth.updateProfile({\n locale: value\n })\n\n i18next.changeLanguage(value)\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.localeEl.value = oldLocale\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n openLoginHistory() {\n openPopup(html` <my-login-history></my-login-history> `, {\n title: i18next.t('label.login_history')\n })\n }\n\n deleteUser() {\n openPopup(html` <delete-user-popup></delete-user-popup> `, {\n title: i18next.t('label.delete account')\n })\n }\n\n async registerUser() {\n try {\n const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())\n const attResp = await startRegistration(options)\n const verification = await fetch('/auth/verify-registration', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(attResp)\n }).then(res => res.json())\n\n if (verification.verified) {\n notify({\n level: 'info',\n message: i18next.t('text.user credential registered successfully')\n })\n } else {\n console.error(await verification.text())\n\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration not allowed')\n })\n }\n } catch (error) {\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration failed')\n })\n }\n }\n\n get applicationMeta() {\n var iconLink: HTMLLinkElement \| null = document.querySelector('link[rel=\"application-icon\"]')\n var titleMeta: HTMLMetaElement \| null = document.querySelector('meta[name=\"application-name\"]')\n var descriptionMeta: HTMLMetaElement \| null = document.querySelector('meta[name=\"application-description\"]')\n\n return {\n icon: iconLink?.href \|\| '',\n title: titleMeta?.content \|\| 'Things Factory',\n description: descriptionMeta?.content \|\| 'Reimagining Software'\n }\n }\n}\n"]}

package/dist-client/components/role-edit-form.js CHANGED Viewed

@@ -3,6 +3,41 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 let RoleEditForm = class RoleEditForm extends localize(i18next)(LitElement) {
+    static { this.styles = css `
+    [field-2column] {
+      border-radius: var(--border-radius);
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 5px 15px;
+      clear: both;
+      max-width: var(--input-container-max-width);
+    }
+    [field] {
+      display: flex;
+      flex-direction: column;
+      padding-bottom: var(--spacing-medium);
+    }
+    input {
+      border: var(--border-dim-color);
+      border-radius: var(--border-radius);
+      margin: var(--input-margin);
+      padding: var(--input-padding);
+      min-width: 250px;
+      font: var(--input-font);
+    }
+    label {
+      display: flex;
+      flex-direction: column;
+      font: var(--label-font);
+      color: var(--md-sys-color-on-primary);
+      text-transform: var(--label-text-transform);
+    }
+    @media screen and (max-width: 480px) {
+      [field] {
+        grid-column: span 2;
+      }
+    }
+  `; }
     render() {
         const role = this.role || { name: '', description: '' };
         return html `
@@ -40,41 +75,6 @@ let RoleEditForm = class RoleEditForm extends localize(i18next)(LitElement) {
         document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }));
     }
 };
-RoleEditForm.styles = css `
-    [field-2column] {
-      border-radius: var(--border-radius);
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 5px 15px;
-      clear: both;
-      max-width: var(--input-container-max-width);
-    }
-    [field] {
-      display: flex;
-      flex-direction: column;
-      padding-bottom: var(--spacing-medium);
-    }
-    input {
-      border: var(--border-dim-color);
-      border-radius: var(--border-radius);
-      margin: var(--input-margin);
-      padding: var(--input-padding);
-      min-width: 250px;
-      font: var(--input-font);
-    }
-    label {
-      display: flex;
-      flex-direction: column;
-      font: var(--label-font);
-      color: var(--md-sys-color-on-primary);
-      text-transform: var(--label-text-transform);
-    }
-    @media screen and (max-width: 480px) {
-      [field] {
-        grid-column: span 2;
-      }
-    }
-  `;
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/components/role-edit-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"role-edit-form.js","sourceRoot":"","sources":["../../client/components/role-edit-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGjD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;~~IAsCtD~~,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAEvD,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;wCAI/B,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;;;;gDAOtC,IAAI,CAAC,WAAW,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;KAIhG,CAAA;IACH,CAAC;IAKD,OAAO;QACL,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAA;QAE/C,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAA;QAC9F,CAAC;QAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;IAC9B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;SACvB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;;~~AAnFM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkClB,AAlCY,CAkCZ~~;~~AAC2B;~~IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAU;AAwBV;IAA1B,KAAK,CAAC,kBAAkB,CAAC;8BAAa,gBAAgB;+CAAA;AACrB;IAAjC,KAAK,CAAC,yBAAyB,CAAC;8BAAoB,gBAAgB;sDAAA;AA7DjE,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAqFjB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('role-edit-form')\nclass RoleEditForm extends localize(i18next)(LitElement) {\n static styles = css`\n [field-2column] {\n border-radius: var(--border-radius);\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 5px 15px;\n clear: both;\n max-width: var(--input-container-max-width);\n }\n [field] {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--spacing-medium);\n }\n input {\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n min-width: 250px;\n font: var(--input-font);\n }\n label {\n display: flex;\n flex-direction: column;\n font: var(--label-font);\n color: var(--md-sys-color-on-primary);\n text-transform: var(--label-text-transform);\n }\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n @property({ type: Object }) role: any\n\n render() {\n const role = this.role \|\| { name: '', description: '' }\n\n return html`\n <form field-2column @input=\"${this.dispatchRoleChanged.bind(this)}\">\n <div field>\n <label\n >role name\n <input name=\"name\" value=\"${role.name}\" @click=\"${e => e.stopPropagation()}\" />\n </label>\n </div>\n\n <div field>\n <label\n >role description\n <input name=\"description\" .value=\"${role.description}\" @click=\"${e => e.stopPropagation()}\" />\n </label>\n </div>\n </form>\n `\n }\n\n @query('input[name=name]') nameInput!: HTMLInputElement\n @query('input[name=description]') descriptionInput!: HTMLInputElement\n\n getRole() {\n const name = this.nameInput.value\n const description = this.descriptionInput.value\n\n if (!name) {\n return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n }\n\n return { name, description }\n }\n\n dispatchRoleChanged() {\n this.dispatchEvent(\n new CustomEvent('roleChanged', {\n detail: this.getRole()\n })\n )\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}
1	+ {"version":3,"file":"role-edit-form.js","sourceRoot":"","sources":["../../client/components/role-edit-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGjD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC/C,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkClB,AAlCY,CAkCZ;IAGD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAEvD,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;wCAI/B,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;;;;gDAOtC,IAAI,CAAC,WAAW,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;KAIhG,CAAA;IACH,CAAC;IAKD,OAAO;QACL,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAA;QAE/C,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAA;QAC9F,CAAC;QAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;IAC9B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;SACvB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;;AAhD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAU;AAwBV;IAA1B,KAAK,CAAC,kBAAkB,CAAC;8BAAa,gBAAgB;+CAAA;AACrB;IAAjC,KAAK,CAAC,yBAAyB,CAAC;8BAAoB,gBAAgB;sDAAA;AA7DjE,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAqFjB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('role-edit-form')\nclass RoleEditForm extends localize(i18next)(LitElement) {\n static styles = css`\n [field-2column] {\n border-radius: var(--border-radius);\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 5px 15px;\n clear: both;\n max-width: var(--input-container-max-width);\n }\n [field] {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--spacing-medium);\n }\n input {\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n min-width: 250px;\n font: var(--input-font);\n }\n label {\n display: flex;\n flex-direction: column;\n font: var(--label-font);\n color: var(--md-sys-color-on-primary);\n text-transform: var(--label-text-transform);\n }\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n @property({ type: Object }) role: any\n\n render() {\n const role = this.role \|\| { name: '', description: '' }\n\n return html`\n <form field-2column @input=\"${this.dispatchRoleChanged.bind(this)}\">\n <div field>\n <label\n >role name\n <input name=\"name\" value=\"${role.name}\" @click=\"${e => e.stopPropagation()}\" />\n </label>\n </div>\n\n <div field>\n <label\n >role description\n <input name=\"description\" .value=\"${role.description}\" @click=\"${e => e.stopPropagation()}\" />\n </label>\n </div>\n </form>\n `\n }\n\n @query('input[name=name]') nameInput!: HTMLInputElement\n @query('input[name=description]') descriptionInput!: HTMLInputElement\n\n getRole() {\n const name = this.nameInput.value\n const description = this.descriptionInput.value\n\n if (!name) {\n return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n }\n\n return { name, description }\n }\n\n dispatchRoleChanged() {\n this.dispatchEvent(\n new CustomEvent('roleChanged', {\n detail: this.getRole()\n })\n )\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}

package/dist-client/components/role-privilege-editor.js CHANGED Viewed

@@ -13,6 +13,78 @@ let RolePrivilegeEditor = class RolePrivilegeEditor extends localize(i18next)(Li
         this.privileges = [];
         this.users = [];
     }
+    static { this.styles = [
+        ButtonContainerStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--md-sys-color-primary);
+        font: normal 15px var(--theme-font);
+      }
+      div {
+        margin: var(--spacing-medium);
+      }
+      div[users] {
+        margin: 0;
+        background-color: var(--md-sys-color-surface-variant);
+      }
+      div[titler] {
+        color: var(--md-sys-color-secondary);
+        font: bold 1.2em var(--theme-font);
+        text-transform: capitalize;
+      }
+      ul {
+        flex: 1;
+        color: var(--md-sys-color-secondary);
+        background-color: var(--md-sys-color-surface-variant);
+        overflow: auto;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        margin-block-start: 0;
+        margin-block-end: 0;
+        padding: var(--spacing-medium);
+        list-style: none;
+        border: 1px dashed rgba(0, 0, 0, 0.1);
+        border-width: 1px 0;
+      }
+      input[type='checkbox'] {
+        display: inline;
+      }
+      li {
+        padding: var(--spacing-small);
+      }
+      #checkAll,
+      [for='checkAll'] {
+        margin-bottom: var(--spacing-medium);
+        padding-bottom: var(--spacing-small);
+        font-weight: bold;
+      }
+      md-elevated-button {
+        margin: 5px;
+        background-color: var(--md-sys-color-surface-variant);
+      }
+      md-outlined-button {
+        background-color: var(--md-sys-color-surface-variant);
+      }
+      @media screen and (max-width: 480px) {
+        ul {
+          grid-template-columns: 1fr;
+        }
+      }
+    `
+    ]; }
     render() {
         const allPrivileges = this.allPrivileges || [];
         const privileges = this.privileges || [];
@@ -68,7 +140,7 @@ let RolePrivilegeEditor = class RolePrivilegeEditor extends localize(i18next)(Li
     async onSave() {
         const updateRoleObj = this.updateRoleObj;
         const privileges = Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]:checked')).map(e => e['data-privilege']);
-        const patch = Object.assign(Object.assign({}, updateRoleObj), { privileges: privileges });
+        const patch = { ...updateRoleObj, privileges: privileges };
         if (this.role) {
             const response = await client.mutate({
                 mutation: gql `
@@ -138,7 +210,6 @@ let RolePrivilegeEditor = class RolePrivilegeEditor extends localize(i18next)(Li
         return response.data.privileges.items;
     }
     async fetchPrivilegesOnRole(name) {
-        var _a, _b;
         const response = await client.query({
             query: gql `
         query ($name: String!) {
@@ -159,85 +230,13 @@ let RolePrivilegeEditor = class RolePrivilegeEditor extends localize(i18next)(Li
             variables: { name },
             context: gqlContext()
         });
-        this.privileges = (_a = response.data.role) === null || _a === void 0 ? void 0 : _a.privileges;
-        this.users = (_b = response.data.role) === null || _b === void 0 ? void 0 : _b.users;
+        this.privileges = response.data.role?.privileges;
+        this.users = response.data.role?.users;
     }
     showToast(message) {
         document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }));
     }
 };
-RolePrivilegeEditor.styles = [
-    ButtonContainerStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        border: 1px solid var(--md-sys-color-primary);
-        font: normal 15px var(--theme-font);
-      }
-      div {
-        margin: var(--spacing-medium);
-      }
-      div[users] {
-        margin: 0;
-        background-color: var(--md-sys-color-surface-variant);
-      }
-      div[titler] {
-        color: var(--md-sys-color-secondary);
-        font: bold 1.2em var(--theme-font);
-        text-transform: capitalize;
-      }
-      ul {
-        flex: 1;
-        color: var(--md-sys-color-secondary);
-        background-color: var(--md-sys-color-surface-variant);
-        overflow: auto;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        margin-block-start: 0;
-        margin-block-end: 0;
-        padding: var(--spacing-medium);
-        list-style: none;
-        border: 1px dashed rgba(0, 0, 0, 0.1);
-        border-width: 1px 0;
-      }
-      input[type='checkbox'] {
-        display: inline;
-      }
-      li {
-        padding: var(--spacing-small);
-      }
-      #checkAll,
-      [for='checkAll'] {
-        margin-bottom: var(--spacing-medium);
-        padding-bottom: var(--spacing-small);
-        font-weight: bold;
-      }
-      md-elevated-button {
-        margin: 5px;
-        background-color: var(--md-sys-color-surface-variant);
-      }
-      md-outlined-button {
-        background-color: var(--md-sys-color-surface-variant);
-      }
-      @media screen and (max-width: 480px) {
-        ul {
-          grid-template-columns: 1fr;
-        }
-      }
-    `
-];
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/components/role-privilege-editor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"role-privilege-editor.js","sourceRoot":"","sources":["../../client/components/role-privilege-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('role-privilege-editor')\nclass RolePrivilegeEditor extends localize(i18next)(LitElement) {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n border: 1px solid var(--md-sys-color-primary);\n font: normal 15px var(--theme-font);\n }\n\n div {\n margin: var(--spacing-medium);\n }\n\n div[users] {\n margin: 0;\n background-color: var(--md-sys-color-surface-variant);\n }\n\n div[titler] {\n color: var(--md-sys-color-secondary);\n font: bold 1.2em var(--theme-font);\n text-transform: capitalize;\n }\n\n ul {\n flex: 1;\n color: var(--md-sys-color-secondary);\n background-color: var(--md-sys-color-surface-variant);\n overflow: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n margin-block-start: 0;\n margin-block-end: 0;\n padding: var(--spacing-medium);\n list-style: none;\n border: 1px dashed rgba(0, 0, 0, 0.1);\n border-width: 1px 0;\n }\n\n input[type='checkbox'] {\n display: inline;\n }\n\n li {\n padding: var(--spacing-small);\n }\n\n #checkAll,\n [for='checkAll'] {\n margin-bottom: var(--spacing-medium);\n padding-bottom: var(--spacing-small);\n font-weight: bold;\n }\n\n md-elevated-button {\n margin: 5px;\n background-color: var(--md-sys-color-surface-variant);\n }\n\n md-outlined-button {\n background-color: var(--md-sys-color-surface-variant);\n }\n\n @media screen and (max-width: 480px) {\n ul {\n grid-template-columns: 1fr;\n }\n }\n `\n ]\n\n @property({ type: Object }) role: any\n @property({ type: Array }) allPrivileges: any[] = []\n @property({ type: Object }) updateRoleObj: any\n\n @state() privileges: { id: string; description: string }[] = []\n @state() users: { /* id: string; username: string; */ name: string; email: string }[] = []\n\n render() {\n const allPrivileges = this.allPrivileges \|\| []\n const privileges = this.privileges \|\| []\n const users = this.users \|\| []\n\n return html`\n <div titler>${String(i18next.t('label.user'))}</div>\n\n <div users>${users.map(user => html`<div>${user.name} (${user.email})</div>`)}</div>\n\n <div titler>${String(i18next.t('field.privileges'))}</div>\n\n <div>\n <input id=\"checkAll\" type=\"checkbox\" @change=${e => this.oncheckAll(e)} />\n <label for=\"checkAll\">Check all</label>\n </div>\n\n <ul privileges>\n ${allPrivileges.map(\n privilege => html`\n <li>\n <input\n type=\"checkbox\"\n id=\"${privilege.id}\"\n .checked=${privileges.map(p => p.id).indexOf(privilege.id) > -1}\n .data-privilege=${privilege}\n />\n <label for=\"${privilege.id}\">${privilege.description}</label>\n </li>\n `\n )}\n </ul>\n\n <div class=\"button-container\">\n <md-elevated-button @click=${e => this.onSave()}>${String(i18next.t('button.save'))}</md-elevated-button>\n <md-elevated-button @click=${e => this.onDeleteRole()} danger\n >${String(i18next.t('button.delete role'))}</md-elevated-button\n >\n </div>\n `\n }\n\n async firstUpdated() {\n this.allPrivileges = await this.fetchPrivileges()\n }\n\n async updated(changes) {\n if (changes.has('role')) {\n await this.fetchPrivilegesOnRole(this.role.name)\n }\n }\n\n checkAll(checked) {\n Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(\n checkbox => ((checkbox as HTMLInputElement).checked = checked)\n )\n }\n\n oncheckAll(e) {\n this.checkAll(e.target.checked)\n }\n\n async onSave() {\n const updateRoleObj = this.updateRoleObj\n const privileges = Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]:checked')).map(\n e => e['data-privilege']\n )\n\n const patch = { ...updateRoleObj, privileges: privileges }\n\n if (this.role) {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: RolePatch!) {\n updateRole(id: $id, patch: $patch) {\n id\n name\n description\n privileges {\n id\n description\n }\n }\n }\n `,\n variables: { id: this.role.id, patch },\n context: gqlContext()\n })\n\n if (!response.errors) {\n await this.dispatchEvent(new CustomEvent('fetch-roles'))\n this.showToast(i18next.t('text.data_updated_successfully'))\n }\n }\n }\n\n async onDeleteRole() {\n if (\n await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('text.are_you_sure_to_delete_x', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.delete') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteRole(id: $id)\n }\n `,\n variables: { id: this.role.id },\n context: gqlContext()\n })\n\n if (!response.errors) {\n await this.dispatchEvent(new CustomEvent('fetch-roles'))\n\n await OxPrompt.open({\n type: 'success',\n title: i18next.t('text.completed'),\n text: i18next.t('text.x_deleted_successfully', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n }\n }\n }\n\n async fetchPrivileges() {\n const response = await client.query({\n query: gql`\n query privileges {\n privileges {\n items {\n id\n name\n description\n }\n total\n }\n }\n `\n })\n\n return response.data.privileges.items\n }\n\n async fetchPrivilegesOnRole(name) {\n const response = await client.query({\n query: gql`\n query ($name: String!) {\n role(name: $name) {\n id\n name\n privileges {\n id\n description\n }\n users {\n name\n email\n }\n }\n }\n `,\n variables: { name },\n context: gqlContext()\n })\n\n this.privileges = response.data.role?.privileges\n this.users = response.data.role?.users\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}
1	+ {"version":3,"file":"role-privilege-editor.js","sourceRoot":"","sources":["../../client/components/role-privilege-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('role-privilege-editor')\nclass RolePrivilegeEditor extends localize(i18next)(LitElement) {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n border: 1px solid var(--md-sys-color-primary);\n font: normal 15px var(--theme-font);\n }\n\n div {\n margin: var(--spacing-medium);\n }\n\n div[users] {\n margin: 0;\n background-color: var(--md-sys-color-surface-variant);\n }\n\n div[titler] {\n color: var(--md-sys-color-secondary);\n font: bold 1.2em var(--theme-font);\n text-transform: capitalize;\n }\n\n ul {\n flex: 1;\n color: var(--md-sys-color-secondary);\n background-color: var(--md-sys-color-surface-variant);\n overflow: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n margin-block-start: 0;\n margin-block-end: 0;\n padding: var(--spacing-medium);\n list-style: none;\n border: 1px dashed rgba(0, 0, 0, 0.1);\n border-width: 1px 0;\n }\n\n input[type='checkbox'] {\n display: inline;\n }\n\n li {\n padding: var(--spacing-small);\n }\n\n #checkAll,\n [for='checkAll'] {\n margin-bottom: var(--spacing-medium);\n padding-bottom: var(--spacing-small);\n font-weight: bold;\n }\n\n md-elevated-button {\n margin: 5px;\n background-color: var(--md-sys-color-surface-variant);\n }\n\n md-outlined-button {\n background-color: var(--md-sys-color-surface-variant);\n }\n\n @media screen and (max-width: 480px) {\n ul {\n grid-template-columns: 1fr;\n }\n }\n `\n ]\n\n @property({ type: Object }) role: any\n @property({ type: Array }) allPrivileges: any[] = []\n @property({ type: Object }) updateRoleObj: any\n\n @state() privileges: { id: string; description: string }[] = []\n @state() users: { /* id: string; username: string; */ name: string; email: string }[] = []\n\n render() {\n const allPrivileges = this.allPrivileges \|\| []\n const privileges = this.privileges \|\| []\n const users = this.users \|\| []\n\n return html`\n <div titler>${String(i18next.t('label.user'))}</div>\n\n <div users>${users.map(user => html`<div>${user.name} (${user.email})</div>`)}</div>\n\n <div titler>${String(i18next.t('field.privileges'))}</div>\n\n <div>\n <input id=\"checkAll\" type=\"checkbox\" @change=${e => this.oncheckAll(e)} />\n <label for=\"checkAll\">Check all</label>\n </div>\n\n <ul privileges>\n ${allPrivileges.map(\n privilege => html`\n <li>\n <input\n type=\"checkbox\"\n id=\"${privilege.id}\"\n .checked=${privileges.map(p => p.id).indexOf(privilege.id) > -1}\n .data-privilege=${privilege}\n />\n <label for=\"${privilege.id}\">${privilege.description}</label>\n </li>\n `\n )}\n </ul>\n\n <div class=\"button-container\">\n <md-elevated-button @click=${e => this.onSave()}>${String(i18next.t('button.save'))}</md-elevated-button>\n <md-elevated-button @click=${e => this.onDeleteRole()} danger\n >${String(i18next.t('button.delete role'))}</md-elevated-button\n >\n </div>\n `\n }\n\n async firstUpdated() {\n this.allPrivileges = await this.fetchPrivileges()\n }\n\n async updated(changes) {\n if (changes.has('role')) {\n await this.fetchPrivilegesOnRole(this.role.name)\n }\n }\n\n checkAll(checked) {\n Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]')).forEach(\n checkbox => ((checkbox as HTMLInputElement).checked = checked)\n )\n }\n\n oncheckAll(e) {\n this.checkAll(e.target.checked)\n }\n\n async onSave() {\n const updateRoleObj = this.updateRoleObj\n const privileges = Array.from(this.renderRoot.querySelectorAll('ul[privileges] input[type=checkbox]:checked')).map(\n e => e['data-privilege']\n )\n\n const patch = { ...updateRoleObj, privileges: privileges }\n\n if (this.role) {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: RolePatch!) {\n updateRole(id: $id, patch: $patch) {\n id\n name\n description\n privileges {\n id\n description\n }\n }\n }\n `,\n variables: { id: this.role.id, patch },\n context: gqlContext()\n })\n\n if (!response.errors) {\n await this.dispatchEvent(new CustomEvent('fetch-roles'))\n this.showToast(i18next.t('text.data_updated_successfully'))\n }\n }\n }\n\n async onDeleteRole() {\n if (\n await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('text.are_you_sure_to_delete_x', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.delete') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteRole(id: $id)\n }\n `,\n variables: { id: this.role.id },\n context: gqlContext()\n })\n\n if (!response.errors) {\n await this.dispatchEvent(new CustomEvent('fetch-roles'))\n\n await OxPrompt.open({\n type: 'success',\n title: i18next.t('text.completed'),\n text: i18next.t('text.x_deleted_successfully', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n }\n }\n }\n\n async fetchPrivileges() {\n const response = await client.query({\n query: gql`\n query privileges {\n privileges {\n items {\n id\n name\n description\n }\n total\n }\n }\n `\n })\n\n return response.data.privileges.items\n }\n\n async fetchPrivilegesOnRole(name) {\n const response = await client.query({\n query: gql`\n query ($name: String!) {\n role(name: $name) {\n id\n name\n privileges {\n id\n description\n }\n users {\n name\n email\n }\n }\n }\n `,\n variables: { name },\n context: gqlContext()\n })\n\n this.privileges = response.data.role?.privileges\n this.users = response.data.role?.users\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}