@things-factory/setting-ui 7.0.1-rc.8 → 7.0.2
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.
- package/client/setting-lets/secure-iplist-setting-let.ts +1 -1
- package/dist-client/setting-lets/secure-iplist-setting-let.js +1 -1
- package/dist-client/setting-lets/secure-iplist-setting-let.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +15 -15
|
@@ -26,7 +26,7 @@ export class SecureIPListSettingLet extends LitElement {
|
|
|
26
26
|
display: grid;
|
|
27
27
|
grid-template-columns: 1fr 1fr;
|
|
28
28
|
margin: 0;
|
|
29
|
-
padding: var(--
|
|
29
|
+
padding: var(--spacing-medium);
|
|
30
30
|
list-style: none;
|
|
31
31
|
border: 1px dashed var(--md-sys-color-outline);
|
|
32
32
|
border-width: 1px 0;
|
|
@@ -156,7 +156,7 @@ SecureIPListSettingLet.styles = [
|
|
|
156
156
|
display: grid;
|
|
157
157
|
grid-template-columns: 1fr 1fr;
|
|
158
158
|
margin: 0;
|
|
159
|
-
padding: var(--
|
|
159
|
+
padding: var(--spacing-medium);
|
|
160
160
|
list-style: none;
|
|
161
161
|
border: 1px dashed var(--md-sys-color-outline);
|
|
162
162
|
border-width: 1px 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"secure-iplist-setting-let.js","sourceRoot":"","sources":["../../client/setting-lets/secure-iplist-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@things-factory/setting-base'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\n\n@customElement('secure-iplist-setting-let')\nexport class SecureIPListSettingLet extends LitElement {\n static styles = [\n css`\n div[slot='content'] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n ul {\n flex: 1;\n background-color: var(--md-sys-color-surface);\n overflow: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n margin: 0;\n padding: var(--padding-default);\n list-style: none;\n border: 1px dashed var(--md-sys-color-outline);\n border-width: 1px 0;\n }\n\n [hidden] {\n display: none;\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 }) value?: {\n blacklist?: string[]\n whitelist?: string[]\n protectedlist?: string[]\n privileges?: any[]\n }\n\n @state() private allPrivileges: {\n privilege: string\n category: string\n description: string\n }[] = []\n\n @query('[name=\"whitelist\"]') whitelist\n @query('[name=\"blacklist\"]') blacklist\n @query('[name=\"protectedlist\"]') protectedlist\n @queryAll('ul[privileges] input[type=checkbox]:checked') protectedPrivileges\n\n render() {\n const { whitelist = [], blacklist = [], protectedlist = [], privileges = [] } = this.value || {}\n\n return html`\n <setting-let>\n <ox-title-with-help slot=\"title\" topic=\"setting/secure-ip-list\" msgid=\"title.secure-ip-list\"\n >secure IP list</ox-title-with-help\n >\n\n <div slot=\"content\" @change=${() => this.onSave()}>\n <md-filled-text-field\n type=\"text\"\n name=\"whitelist\"\n .label=${String(i18next.t('label.whitelist'))}\n icon=\"health_and_safety\"\n value=${whitelist.join(', ')}\n supporting-text=${String(i18next.t('text.supporting text for whitelist'))}\n hidden\n >\n <md-icon slot=\"leading-icon\">health_and_safety</md-icon>\n </md-filled-text-field>\n\n <md-filled-text-field\n type=\"text\"\n name=\"blacklist\"\n .label=${String(i18next.t('label.blacklist'))}\n value=${blacklist.join(', ')}\n supporting-text=${String(i18next.t('text.supporting text for blacklist'))}\n >\n <md-icon slot=\"leading-icon\">block</md-icon>\n </md-filled-text-field>\n\n <md-filled-text-field\n type=\"text\"\n name=\"protectedlist\"\n .label=${String(i18next.t('label.protectedlist'))}\n value=${protectedlist.join(', ')}\n supporting-text=${String(i18next.t('text.supporting text for protected ip-list'))}\n >\n <md-icon slot=\"leading-icon\">security</md-icon>\n </md-filled-text-field>\n\n <div>\n <h3><ox-i18n msgid=\"title.protected-privileges\"></ox-i18n></h3>\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 ${this.allPrivileges.map(privilege => {\n const id = `${privilege.category}-${privilege.privilege}`\n return html`\n <li>\n <input\n type=\"checkbox\"\n id=${id}\n .checked=${!!privileges.find(\n p => p.privilege == privilege.privilege && p.category == privilege.category\n )}\n .data-privilege=${privilege}\n />\n <label for=\"${id}\">${privilege.description}</label>\n </li>\n `\n })}\n </ul>\n </div>\n </div>\n </setting-let>\n `\n }\n\n async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {\n var { data } = await client.query({\n query: gql`\n query {\n privileges {\n items {\n privilege\n category\n description\n }\n total\n }\n }\n `\n })\n\n this.allPrivileges = data?.privileges.items || []\n\n var { data } = await client.query({\n query: gql`\n query {\n secureIPList\n }\n `\n })\n\n this.value = data ? data.secureIPList : {}\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 whitelist = !this.whitelist.value ? [] : this.whitelist.value.split(',').map(ip => ip.trim())\n const blacklist = !this.blacklist.value ? [] : this.blacklist.value.split(',').map(ip => ip.trim())\n const protectedlist = !this.protectedlist.value ? [] : this.protectedlist.value.split(',').map(ip => ip.trim())\n const privileges = Array.from(this.protectedPrivileges)\n .map((e: any) => e['data-privilege'])\n .map((priv: any) => {\n const { description, ...others } = priv\n return others\n })\n\n const iplist = {\n whitelist,\n blacklist,\n protectedlist,\n privileges\n }\n\n const { data } = await client.query({\n query: gql`\n mutation ($iplist: Object!) {\n updateSecureIPList(iplist: $iplist)\n }\n `,\n variables: {\n iplist\n }\n })\n\n this.value = data ? data.updateSecureIPList : {}\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"secure-iplist-setting-let.js","sourceRoot":"","sources":["../../client/setting-lets/secure-iplist-setting-let.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@things-factory/setting-base'\nimport '@operato/i18n/ox-i18n.js'\n\nimport gql from 'graphql-tag'\nimport { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\n\n@customElement('secure-iplist-setting-let')\nexport class SecureIPListSettingLet extends LitElement {\n static styles = [\n css`\n div[slot='content'] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n ul {\n flex: 1;\n background-color: var(--md-sys-color-surface);\n overflow: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n margin: 0;\n padding: var(--spacing-medium);\n list-style: none;\n border: 1px dashed var(--md-sys-color-outline);\n border-width: 1px 0;\n }\n\n [hidden] {\n display: none;\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 }) value?: {\n blacklist?: string[]\n whitelist?: string[]\n protectedlist?: string[]\n privileges?: any[]\n }\n\n @state() private allPrivileges: {\n privilege: string\n category: string\n description: string\n }[] = []\n\n @query('[name=\"whitelist\"]') whitelist\n @query('[name=\"blacklist\"]') blacklist\n @query('[name=\"protectedlist\"]') protectedlist\n @queryAll('ul[privileges] input[type=checkbox]:checked') protectedPrivileges\n\n render() {\n const { whitelist = [], blacklist = [], protectedlist = [], privileges = [] } = this.value || {}\n\n return html`\n <setting-let>\n <ox-title-with-help slot=\"title\" topic=\"setting/secure-ip-list\" msgid=\"title.secure-ip-list\"\n >secure IP list</ox-title-with-help\n >\n\n <div slot=\"content\" @change=${() => this.onSave()}>\n <md-filled-text-field\n type=\"text\"\n name=\"whitelist\"\n .label=${String(i18next.t('label.whitelist'))}\n icon=\"health_and_safety\"\n value=${whitelist.join(', ')}\n supporting-text=${String(i18next.t('text.supporting text for whitelist'))}\n hidden\n >\n <md-icon slot=\"leading-icon\">health_and_safety</md-icon>\n </md-filled-text-field>\n\n <md-filled-text-field\n type=\"text\"\n name=\"blacklist\"\n .label=${String(i18next.t('label.blacklist'))}\n value=${blacklist.join(', ')}\n supporting-text=${String(i18next.t('text.supporting text for blacklist'))}\n >\n <md-icon slot=\"leading-icon\">block</md-icon>\n </md-filled-text-field>\n\n <md-filled-text-field\n type=\"text\"\n name=\"protectedlist\"\n .label=${String(i18next.t('label.protectedlist'))}\n value=${protectedlist.join(', ')}\n supporting-text=${String(i18next.t('text.supporting text for protected ip-list'))}\n >\n <md-icon slot=\"leading-icon\">security</md-icon>\n </md-filled-text-field>\n\n <div>\n <h3><ox-i18n msgid=\"title.protected-privileges\"></ox-i18n></h3>\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 ${this.allPrivileges.map(privilege => {\n const id = `${privilege.category}-${privilege.privilege}`\n return html`\n <li>\n <input\n type=\"checkbox\"\n id=${id}\n .checked=${!!privileges.find(\n p => p.privilege == privilege.privilege && p.category == privilege.category\n )}\n .data-privilege=${privilege}\n />\n <label for=\"${id}\">${privilege.description}</label>\n </li>\n `\n })}\n </ul>\n </div>\n </div>\n </setting-let>\n `\n }\n\n async firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void> {\n var { data } = await client.query({\n query: gql`\n query {\n privileges {\n items {\n privilege\n category\n description\n }\n total\n }\n }\n `\n })\n\n this.allPrivileges = data?.privileges.items || []\n\n var { data } = await client.query({\n query: gql`\n query {\n secureIPList\n }\n `\n })\n\n this.value = data ? data.secureIPList : {}\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 whitelist = !this.whitelist.value ? [] : this.whitelist.value.split(',').map(ip => ip.trim())\n const blacklist = !this.blacklist.value ? [] : this.blacklist.value.split(',').map(ip => ip.trim())\n const protectedlist = !this.protectedlist.value ? [] : this.protectedlist.value.split(',').map(ip => ip.trim())\n const privileges = Array.from(this.protectedPrivileges)\n .map((e: any) => e['data-privilege'])\n .map((priv: any) => {\n const { description, ...others } = priv\n return others\n })\n\n const iplist = {\n whitelist,\n blacklist,\n protectedlist,\n privileges\n }\n\n const { data } = await client.query({\n query: gql`\n mutation ($iplist: Object!) {\n updateSecureIPList(iplist: $iplist)\n }\n `,\n variables: {\n iplist\n }\n })\n\n this.value = data ? data.updateSecureIPList : {}\n }\n}\n"]}
|