@things-factory/auth-ui 6.1.156 → 6.1.160
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/components/change-password.ts +1 -1
- package/client/components/my-login-history.ts +1 -1
- package/client/entries/oauth2/oauth2-decision-page.ts +1 -1
- package/client/pages/appliance/appliance.ts +20 -15
- package/dist-client/components/change-password.js +1 -1
- package/dist-client/components/change-password.js.map +1 -1
- package/dist-client/components/my-login-history.js +1 -1
- package/dist-client/components/my-login-history.js.map +1 -1
- package/dist-client/entries/oauth2/oauth2-decision-page.js +1 -1
- package/dist-client/entries/oauth2/oauth2-decision-page.js.map +1 -1
- package/dist-client/pages/appliance/appliance.js +20 -15
- package/dist-client/pages/appliance/appliance.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/translations/en.json +11 -3
- package/translations/ja.json +11 -3
- package/translations/ko.json +11 -3
- package/translations/ms.json +11 -3
- package/translations/zh.json +11 -3
|
@@ -95,7 +95,7 @@ export class ChangePassword extends localize(i18next)(LitElement) {
|
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
if (params['new_pass'] !== params['confirm_pass']) {
|
|
98
|
-
return this.showToast(i18next.t('error.
|
|
98
|
+
return this.showToast(i18next.t('error.new-password-and-confirm-password-do-not-match'))
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
auth.changePassword(params)
|
|
@@ -8,6 +8,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
|
|
|
8
8
|
import { client } from '@operato/graphql'
|
|
9
9
|
import { navigate, PageView, store } from '@operato/shell'
|
|
10
10
|
import { parseJwt, sleep } from '@operato/utils'
|
|
11
|
+
import { i18next } from '@operato/i18n'
|
|
11
12
|
|
|
12
13
|
@customElement('appliance-page')
|
|
13
14
|
class Appliance extends connect(store)(PageView) {
|
|
@@ -156,35 +157,35 @@ class Appliance extends connect(store)(PageView) {
|
|
|
156
157
|
<form>
|
|
157
158
|
<div fieldset-container>
|
|
158
159
|
<fieldset>
|
|
159
|
-
<legend
|
|
160
|
+
<legend>${i18next.t('text.appliance')}</legend>
|
|
160
161
|
<div field-2column>
|
|
161
162
|
<div field grid-span>
|
|
162
|
-
<label for="name"
|
|
163
|
+
<label for="name">${i18next.t('field.name')}</label>
|
|
163
164
|
<input id="name" type="text" name="name" .value=${appliance.name} />
|
|
164
165
|
</div>
|
|
165
166
|
|
|
166
167
|
<div field grid-span>
|
|
167
|
-
<label for="description"
|
|
168
|
+
<label for="description">${i18next.t('field.description')}</label>
|
|
168
169
|
<input id="description" type="text" name="description" .value=${appliance.description} />
|
|
169
170
|
</div>
|
|
170
171
|
|
|
171
172
|
<div field>
|
|
172
|
-
<label for="brand"
|
|
173
|
+
<label for="brand">${i18next.t('field.brand')}</label>
|
|
173
174
|
<input id="brand" type="text" name="brand" .value=${appliance.brand} />
|
|
174
175
|
</div>
|
|
175
176
|
|
|
176
177
|
<div field>
|
|
177
|
-
<label for="serial-no"
|
|
178
|
+
<label for="serial-no">${i18next.t('field.serial-no')}</label>
|
|
178
179
|
<input id="serial-no" type="text" name="serialNo" .value=${appliance.serialNo} />
|
|
179
180
|
</div>
|
|
180
181
|
|
|
181
182
|
<div field>
|
|
182
|
-
<label for="model"
|
|
183
|
+
<label for="model">${i18next.t('field.model')}</label>
|
|
183
184
|
<input id="model" type="text" name="model" .value=${appliance.model} />
|
|
184
185
|
</div>
|
|
185
186
|
|
|
186
187
|
<div field>
|
|
187
|
-
<label for="netmask"
|
|
188
|
+
<label for="netmask">${i18next.t('field.netmask')}</label>
|
|
188
189
|
<input id="netmask" type="text" name="netmask" .value=${appliance.netmask} />
|
|
189
190
|
</div>
|
|
190
191
|
</div>
|
|
@@ -193,15 +194,17 @@ class Appliance extends connect(store)(PageView) {
|
|
|
193
194
|
|
|
194
195
|
<div fieldset-container>
|
|
195
196
|
<fieldset>
|
|
196
|
-
<legend
|
|
197
|
+
<legend>${i18next.t('text.appliance credential')}</legend>
|
|
197
198
|
<div field-2column>
|
|
198
199
|
<div field grid-span>
|
|
199
|
-
<label for="access-token"
|
|
200
|
+
<label for="access-token">${i18next.t('label.access token')}</label>
|
|
200
201
|
<input id="access-token" type="text" .value=${appliance.accessToken} readonly />
|
|
201
|
-
<button button-in-field clipboard-copy @click=${e => e.preventDefault()}>
|
|
202
|
+
<button button-in-field clipboard-copy @click=${e => e.preventDefault()}>
|
|
203
|
+
${i18next.t('button.copy')}
|
|
204
|
+
</button>
|
|
202
205
|
${accessTokenExp
|
|
203
206
|
? html`<div input-hint>
|
|
204
|
-
|
|
207
|
+
${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :
|
|
205
208
|
${asyncReplace(this.expTimer(accessTokenExp))}
|
|
206
209
|
</div>`
|
|
207
210
|
: html``}
|
|
@@ -210,9 +213,11 @@ class Appliance extends connect(store)(PageView) {
|
|
|
210
213
|
</fieldset>
|
|
211
214
|
</div>
|
|
212
215
|
|
|
213
|
-
<button @click=${this.deleteAppliance.bind(this)}
|
|
214
|
-
<button @click=${this.generateApplianceSecret.bind(this)}>
|
|
215
|
-
|
|
216
|
+
<button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>
|
|
217
|
+
<button @click=${this.generateApplianceSecret.bind(this)}>
|
|
218
|
+
${i18next.t('button.generate new access token')}
|
|
219
|
+
</button>
|
|
220
|
+
<button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>
|
|
216
221
|
</form>
|
|
217
222
|
`
|
|
218
223
|
}
|
|
@@ -380,7 +385,7 @@ class Appliance extends connect(store)(PageView) {
|
|
|
380
385
|
const mins = Math.floor(remain / MIN)
|
|
381
386
|
const secs = remain - mins * MIN
|
|
382
387
|
|
|
383
|
-
yield
|
|
388
|
+
yield i18next.t('text.remaining time', { days, hours, mins, secs })
|
|
384
389
|
|
|
385
390
|
await sleep(1000)
|
|
386
391
|
}
|
|
@@ -33,7 +33,7 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
|
|
|
33
33
|
params[key] = value;
|
|
34
34
|
}
|
|
35
35
|
if (params['new_pass'] !== params['confirm_pass']) {
|
|
36
|
-
return this.showToast(i18next.t('error.
|
|
36
|
+
return this.showToast(i18next.t('error.new-password-and-confirm-password-do-not-match'));
|
|
37
37
|
}
|
|
38
38
|
auth.changePassword(params);
|
|
39
39
|
this.form.reset();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"change-password.js","sourceRoot":"","sources":["../../client/components/change-password.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAGrD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA4D/D,MAAM;QACJ,OAAO,IAAI,CAAA;;;mEAGoD,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;+DAGtC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;mEAG1B,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;oCAGjE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,YAAY,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;;KAElG,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM;;QACV,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,OAAO,EAAE,EAAE;YAC7C,IAAI,CAAC,KAAK,EAAE;gBACV,MAAM,WAAW,GAAG,MAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,GAAG,CAAsB,0CAAE,WAAW,CAAA;gBAC/F,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,CAAC,CAAC,CAAA;aACxF;YACD,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;SACpB;QAED,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,MAAM,CAAC,cAAc,CAAC,EAAE;YACjD,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAA;SACzF;QAED,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;IAC5E,CAAC;;AAlGM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;CACF,CAAA;AAED;IAAC,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;4CAAA;AA1D1B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoG1B;SApGY,cAAc","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { auth } from '@things-factory/auth-base/dist-client'\n\n@customElement('change-password')\nexport class ChangePassword extends localize(i18next)(LitElement) {\n static styles = [\n css`\n * {\n box-sizing: border-box;\n }\n\n *:focus {\n outline: none;\n }\n\n form {\n display: flex;\n flex-direction: column;\n }\n\n input {\n border: var(--change-password-field-border);\n border-radius: var(--change-password-field-border-radius);\n margin: var(--change-password-field-margin);\n padding: var(--change-password-field-padding);\n\n font: var(--change-password-field-font);\n width: var(--change-password-field-width);\n }\n\n input:focus {\n border: 1px solid var(--focus-background-color);\n }\n\n ::placeholder {\n font-size: 0.8rem;\n text-transform: capitalize;\n }\n\n mwc-button {\n margin: var(--margin-narrow) auto var(--margin-default) auto;\n }\n\n button {\n background-color: var(--secondary-color, #394e64);\n margin: 2px 2px 10px 2px;\n height: var(--button-height, 28px);\n color: var(--button-color, #fff);\n font: var(--button-font);\n border-radius: var(--button-radius, 5px);\n border: var(--button-border, 1px solid transparent);\n line-height: 1.5;\n }\n\n button:hover,\n button:active {\n background-color: var(--button-active-background-color, #22a6a7);\n border: var(--button-active-border);\n }\n `\n ]\n\n @query('form') form!: HTMLFormElement\n\n render() {\n return html`\n <form>\n <div class=\"field\">\n <input type=\"password\" name=\"current_pass\" placeholder=${i18next.t('text.current password')} required />\n </div>\n <div class=\"field\">\n <input type=\"password\" name=\"new_pass\" placeholder=${i18next.t('text.new password')} required />\n </div>\n <div class=\"field\">\n <input type=\"password\" name=\"confirm_pass\" placeholder=${i18next.t('text.confirm password')} required />\n </div>\n\n <mwc-button raised label=\"${i18next.t('text.change password')}\" @click=${this.submit.bind(this)}></mwc-button>\n </form>\n `\n }\n\n async submit() {\n const formData = new FormData(this.form)\n let params = {}\n for (const [key, value] of formData.entries()) {\n if (!value) {\n const placeholder = (this.form.querySelector(`[name=${key}]`) as HTMLInputElement)?.placeholder\n return this.showToast(i18next.t('error.value is empty', { value: placeholder || key }))\n }\n params[key] = value\n }\n\n if (params['new_pass'] !== params['confirm_pass']) {\n return this.showToast(i18next.t('error.
|
|
1
|
+
{"version":3,"file":"change-password.js","sourceRoot":"","sources":["../../client/components/change-password.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAGrD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA4D/D,MAAM;QACJ,OAAO,IAAI,CAAA;;;mEAGoD,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;+DAGtC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;mEAG1B,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;oCAGjE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,YAAY,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;;KAElG,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM;;QACV,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,OAAO,EAAE,EAAE;YAC7C,IAAI,CAAC,KAAK,EAAE;gBACV,MAAM,WAAW,GAAG,MAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,GAAG,CAAsB,0CAAE,WAAW,CAAA;gBAC/F,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,CAAC,CAAC,CAAA;aACxF;YACD,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;SACpB;QAED,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,MAAM,CAAC,cAAc,CAAC,EAAE;YACjD,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAA;SACzF;QAED,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;IAC5E,CAAC;;AAlGM,qBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;CACF,CAAA;AAED;IAAC,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;4CAAA;AA1D1B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoG1B;SApGY,cAAc","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { auth } from '@things-factory/auth-base/dist-client'\n\n@customElement('change-password')\nexport class ChangePassword extends localize(i18next)(LitElement) {\n static styles = [\n css`\n * {\n box-sizing: border-box;\n }\n\n *:focus {\n outline: none;\n }\n\n form {\n display: flex;\n flex-direction: column;\n }\n\n input {\n border: var(--change-password-field-border);\n border-radius: var(--change-password-field-border-radius);\n margin: var(--change-password-field-margin);\n padding: var(--change-password-field-padding);\n\n font: var(--change-password-field-font);\n width: var(--change-password-field-width);\n }\n\n input:focus {\n border: 1px solid var(--focus-background-color);\n }\n\n ::placeholder {\n font-size: 0.8rem;\n text-transform: capitalize;\n }\n\n mwc-button {\n margin: var(--margin-narrow) auto var(--margin-default) auto;\n }\n\n button {\n background-color: var(--secondary-color, #394e64);\n margin: 2px 2px 10px 2px;\n height: var(--button-height, 28px);\n color: var(--button-color, #fff);\n font: var(--button-font);\n border-radius: var(--button-radius, 5px);\n border: var(--button-border, 1px solid transparent);\n line-height: 1.5;\n }\n\n button:hover,\n button:active {\n background-color: var(--button-active-background-color, #22a6a7);\n border: var(--button-active-border);\n }\n `\n ]\n\n @query('form') form!: HTMLFormElement\n\n render() {\n return html`\n <form>\n <div class=\"field\">\n <input type=\"password\" name=\"current_pass\" placeholder=${i18next.t('text.current password')} required />\n </div>\n <div class=\"field\">\n <input type=\"password\" name=\"new_pass\" placeholder=${i18next.t('text.new password')} required />\n </div>\n <div class=\"field\">\n <input type=\"password\" name=\"confirm_pass\" placeholder=${i18next.t('text.confirm password')} required />\n </div>\n\n <mwc-button raised label=\"${i18next.t('text.change password')}\" @click=${this.submit.bind(this)}></mwc-button>\n </form>\n `\n }\n\n async submit() {\n const formData = new FormData(this.form)\n let params = {}\n for (const [key, value] of formData.entries()) {\n if (!value) {\n const placeholder = (this.form.querySelector(`[name=${key}]`) as HTMLInputElement)?.placeholder\n return this.showToast(i18next.t('error.value is empty', { value: placeholder || key }))\n }\n params[key] = value\n }\n\n if (params['new_pass'] !== params['confirm_pass']) {\n return this.showToast(i18next.t('error.new-password-and-confirm-password-do-not-match'))\n }\n\n auth.changePassword(params)\n this.form.reset()\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"my-login-history.js","sourceRoot":"","sources":["../../client/components/my-login-history.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('my-login-history')\nclass MyLoginHistory extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\n padding: var(--padding-wide);\n overflow: auto;\n }\n ox-grist {\n flex: 1;\n }\n `\n\n @property({ type: Array }) histories: any[] = []\n @property({ type: Number }) limit?: number\n\n render() {\n if (!this.histories?.length) return html``\n\n const config = {\n rows: { appendable: false },\n pagination: { infinite: true },\n columns: [\n { type: 'gutter', gutterName: 'sequence' },\n {\n type: 'object',\n name: 'accessDomain',\n header: i18next.t('field.domain'),\n record: { editable: false },\n width: 200\n },\n {\n type: 'datetime',\n name: 'accessedAt',\n header: i18next.t('field.
|
|
1
|
+
{"version":3,"file":"my-login-history.js","sourceRoot":"","sources":["../../client/components/my-login-history.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\n\n@customElement('my-login-history')\nclass MyLoginHistory extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--main-section-background-color);\n padding: var(--padding-wide);\n overflow: auto;\n }\n ox-grist {\n flex: 1;\n }\n `\n\n @property({ type: Array }) histories: any[] = []\n @property({ type: Number }) limit?: number\n\n render() {\n if (!this.histories?.length) return html``\n\n const config = {\n rows: { appendable: false },\n pagination: { infinite: true },\n columns: [\n { type: 'gutter', gutterName: 'sequence' },\n {\n type: 'object',\n name: 'accessDomain',\n header: i18next.t('field.domain'),\n record: { editable: false },\n width: 200\n },\n {\n type: 'datetime',\n name: 'accessedAt',\n header: i18next.t('field.accessed-at'),\n record: { editable: false },\n width: 200\n },\n {\n type: 'string',\n name: 'accessorIp',\n header: i18next.t('field.ip_address'),\n record: { editable: false },\n width: 200\n }\n ]\n }\n\n return html`\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${config}\n .data=\"${{ records: this.histories }}\"\n ></ox-grist>\n `\n }\n\n firstUpdated() {\n this.fetchLoginHistories()\n }\n\n async fetchLoginHistories() {\n try {\n const response = await client.query({\n query: gql`\n query myLoginHistories($limit: Float!) {\n myLoginHistories(limit: $limit) {\n accessDomain {\n name\n }\n accessorIp\n accessedAt\n }\n }\n `,\n variables: { limit: this.limit || 10 }\n })\n\n if (response.errors?.length) return\n this.histories = response.data.myLoginHistories.map(loginHistory => ({\n ...loginHistory,\n accessedAt: loginHistory.accessedAt - new Date().getTimezoneOffset() * 60 * 1000\n }))\n } catch (e: any) {\n this.showToast('message' in e ? e.message : e)\n }\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oauth2-decision-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\nimport '../../components/role-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { CustomAlert } from '@things-factory/shell/client'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n border: 1px solid var(--primary-color);\n margin: var(--margin-default);\n padding: var(--padding-default);\n font: normal 15px var(--theme-font);\n color: var(--secondary-color);\n }\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(--padding-default);\n }\n input {\n border: var(--border-dark-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(--label-color);\n text-transform: var(--label-text-transform);\n }\n [buttons] {\n margin: 0;\n padding: var(--padding-default);\n background-color: rgba(var(--primary-color-rgb), 0.2);\n }\n mwc-button {\n margin-right: var(--padding-narrow);\n }\n [danger] {\n --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n }\n `\n\n @property({ type: Object }) data: any = {}\n @property({ type: Object }) user: any = {}\n @property({ type: Object }) client: any = {}\n @property({ type: Object }) domain: any = {}\n @property({ type: Object }) req: any = {}\n @property({ type: String }) redirectURI: string = ''\n @property({ type: String }) transactionID: string = ''\n @property({ type: Array }) roles: any[] = []\n\n @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }\n\n render() {\n return html`\n <h2>Application Binding</h2>\n <p>Hi ${this.user.name}!</p>\n <p><b> ${this.client.name} </b> is requesting access to your account.</p>\n <p>Do you approve?</p>\n\n <form field-2column>\n <div field>\n <label\n >${i18next.t('label.company')}\n <input readonly value=\"${this.domain.subdomain}\" />\n </label>\n\n <label\n >${i18next.t('label.
|
|
1
|
+
{"version":3,"file":"oauth2-decision-page.js","sourceRoot":"","sources":["../../../client/entries/oauth2/oauth2-decision-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-button'\nimport '../../components/role-selector'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { CustomAlert } from '@things-factory/shell/client'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends LitElement {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n\n border: 1px solid var(--primary-color);\n margin: var(--margin-default);\n padding: var(--padding-default);\n font: normal 15px var(--theme-font);\n color: var(--secondary-color);\n }\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(--padding-default);\n }\n input {\n border: var(--border-dark-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(--label-color);\n text-transform: var(--label-text-transform);\n }\n [buttons] {\n margin: 0;\n padding: var(--padding-default);\n background-color: rgba(var(--primary-color-rgb), 0.2);\n }\n mwc-button {\n margin-right: var(--padding-narrow);\n }\n [danger] {\n --mdc-theme-primary: var(--mdc-danger-button-primary-color);\n }\n `\n\n @property({ type: Object }) data: any = {}\n @property({ type: Object }) user: any = {}\n @property({ type: Object }) client: any = {}\n @property({ type: Object }) domain: any = {}\n @property({ type: Object }) req: any = {}\n @property({ type: String }) redirectURI: string = ''\n @property({ type: String }) transactionID: string = ''\n @property({ type: Array }) roles: any[] = []\n\n @query('role-selector') roleSelector!: HTMLElement & { selectedRoles: () => any[] }\n\n render() {\n return html`\n <h2>Application Binding</h2>\n <p>Hi ${this.user.name}!</p>\n <p><b> ${this.client.name} </b> is requesting access to your account.</p>\n <p>Do you approve?</p>\n\n <form field-2column>\n <div field>\n <label\n >${i18next.t('label.company')}\n <input readonly value=\"${this.domain.subdomain}\" />\n </label>\n\n <label\n >${i18next.t('label.client-id')}\n <input readonly value=\"${this.req.clientID}\" />\n </label>\n </div>\n\n <div field>\n <label\n >${i18next.t('label.redirect_uri')}\n <input readonly value=\"${this.redirectURI}\" />\n </label>\n\n <label\n >${i18next.t('label.state')}\n <input readonly value=\"${this.req.state}\" />\n </label>\n </div>\n </form>\n\n <role-selector .roleCategory=\"${this.domain.name}\" .roles=\"${this.roles}\"></role-selector>\n\n <div buttons>\n <mwc-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></mwc-button>\n <mwc-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></mwc-button>\n </div>\n `\n }\n\n async firstUpdated() {\n this.fetchMyRoles()\n }\n\n updated(changedProps) {\n if (changedProps.has('data')) {\n this.user = this.data?.oauth2?.user || this.user\n this.client = this.data?.oauth2?.client || this.client\n this.domain = this.data?.domain || this.domain\n this.req = this.data?.oauth2?.req || this.req\n this.redirectURI = this.data?.oauth2?.redirectURI || this.redirectURI\n this.transactionID = this.data?.oauth2?.transactionID || this.transactionID\n }\n }\n\n async fetchMyRoles() {\n const response = await client.query({\n query: gql`\n query myRoles {\n myRoles {\n id\n name\n description\n }\n }\n `\n })\n\n if (!response.errors?.length) {\n this.roles = response.data.myRoles\n }\n }\n\n async decision(allowOrCancel) {\n const selectedRoles = this.selectedRoles()\n if (allowOrCancel && !selectedRoles?.length) {\n CustomAlert({\n title: i18next.t('title.nothing selected'),\n text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n return\n }\n\n let data: any = {\n transaction_id: this.transactionID,\n subdomain: this.domain.subdomain,\n appKey: this.req.clientID,\n state: this.req.state,\n email: this.user.email,\n scopes: selectedRoles\n }\n if (!allowOrCancel) {\n data.cancel = 'Deny'\n }\n\n const response = await fetch('/oauth/decision', {\n method: 'POST',\n mode: 'cors',\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json'\n },\n redirect: 'follow',\n body: JSON.stringify(data)\n })\n\n if (response.redirected) {\n location.href = response.url\n }\n }\n\n selectedRoles() {\n return this.roleSelector.selectedRoles()\n }\n}\n"]}
|
|
@@ -8,6 +8,7 @@ import { connect } from 'pwa-helpers/connect-mixin.js';
|
|
|
8
8
|
import { client } from '@operato/graphql';
|
|
9
9
|
import { navigate, PageView, store } from '@operato/shell';
|
|
10
10
|
import { parseJwt, sleep } from '@operato/utils';
|
|
11
|
+
import { i18next } from '@operato/i18n';
|
|
11
12
|
let Appliance = class Appliance extends connect(store)(PageView) {
|
|
12
13
|
get context() {
|
|
13
14
|
return {
|
|
@@ -30,35 +31,35 @@ let Appliance = class Appliance extends connect(store)(PageView) {
|
|
|
30
31
|
<form>
|
|
31
32
|
<div fieldset-container>
|
|
32
33
|
<fieldset>
|
|
33
|
-
<legend
|
|
34
|
+
<legend>${i18next.t('text.appliance')}</legend>
|
|
34
35
|
<div field-2column>
|
|
35
36
|
<div field grid-span>
|
|
36
|
-
<label for="name"
|
|
37
|
+
<label for="name">${i18next.t('field.name')}</label>
|
|
37
38
|
<input id="name" type="text" name="name" .value=${appliance.name} />
|
|
38
39
|
</div>
|
|
39
40
|
|
|
40
41
|
<div field grid-span>
|
|
41
|
-
<label for="description"
|
|
42
|
+
<label for="description">${i18next.t('field.description')}</label>
|
|
42
43
|
<input id="description" type="text" name="description" .value=${appliance.description} />
|
|
43
44
|
</div>
|
|
44
45
|
|
|
45
46
|
<div field>
|
|
46
|
-
<label for="brand"
|
|
47
|
+
<label for="brand">${i18next.t('field.brand')}</label>
|
|
47
48
|
<input id="brand" type="text" name="brand" .value=${appliance.brand} />
|
|
48
49
|
</div>
|
|
49
50
|
|
|
50
51
|
<div field>
|
|
51
|
-
<label for="serial-no"
|
|
52
|
+
<label for="serial-no">${i18next.t('field.serial-no')}</label>
|
|
52
53
|
<input id="serial-no" type="text" name="serialNo" .value=${appliance.serialNo} />
|
|
53
54
|
</div>
|
|
54
55
|
|
|
55
56
|
<div field>
|
|
56
|
-
<label for="model"
|
|
57
|
+
<label for="model">${i18next.t('field.model')}</label>
|
|
57
58
|
<input id="model" type="text" name="model" .value=${appliance.model} />
|
|
58
59
|
</div>
|
|
59
60
|
|
|
60
61
|
<div field>
|
|
61
|
-
<label for="netmask"
|
|
62
|
+
<label for="netmask">${i18next.t('field.netmask')}</label>
|
|
62
63
|
<input id="netmask" type="text" name="netmask" .value=${appliance.netmask} />
|
|
63
64
|
</div>
|
|
64
65
|
</div>
|
|
@@ -67,15 +68,17 @@ let Appliance = class Appliance extends connect(store)(PageView) {
|
|
|
67
68
|
|
|
68
69
|
<div fieldset-container>
|
|
69
70
|
<fieldset>
|
|
70
|
-
<legend
|
|
71
|
+
<legend>${i18next.t('text.appliance credential')}</legend>
|
|
71
72
|
<div field-2column>
|
|
72
73
|
<div field grid-span>
|
|
73
|
-
<label for="access-token"
|
|
74
|
+
<label for="access-token">${i18next.t('label.access token')}</label>
|
|
74
75
|
<input id="access-token" type="text" .value=${appliance.accessToken} readonly />
|
|
75
|
-
<button button-in-field clipboard-copy @click=${e => e.preventDefault()}>
|
|
76
|
+
<button button-in-field clipboard-copy @click=${e => e.preventDefault()}>
|
|
77
|
+
${i18next.t('button.copy')}
|
|
78
|
+
</button>
|
|
76
79
|
${accessTokenExp
|
|
77
80
|
? html `<div input-hint>
|
|
78
|
-
|
|
81
|
+
${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :
|
|
79
82
|
${asyncReplace(this.expTimer(accessTokenExp))}
|
|
80
83
|
</div>`
|
|
81
84
|
: html ``}
|
|
@@ -84,9 +87,11 @@ let Appliance = class Appliance extends connect(store)(PageView) {
|
|
|
84
87
|
</fieldset>
|
|
85
88
|
</div>
|
|
86
89
|
|
|
87
|
-
<button @click=${this.deleteAppliance.bind(this)}
|
|
88
|
-
<button @click=${this.generateApplianceSecret.bind(this)}>
|
|
89
|
-
|
|
90
|
+
<button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>
|
|
91
|
+
<button @click=${this.generateApplianceSecret.bind(this)}>
|
|
92
|
+
${i18next.t('button.generate new access token')}
|
|
93
|
+
</button>
|
|
94
|
+
<button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>
|
|
90
95
|
</form>
|
|
91
96
|
`;
|
|
92
97
|
}
|
|
@@ -235,7 +240,7 @@ let Appliance = class Appliance extends connect(store)(PageView) {
|
|
|
235
240
|
remain -= hours * HOUR;
|
|
236
241
|
const mins = Math.floor(remain / MIN);
|
|
237
242
|
const secs = remain - mins * MIN;
|
|
238
|
-
yield yield __await(
|
|
243
|
+
yield yield __await(i18next.t('text.remaining time', { days, hours, mins, secs }));
|
|
239
244
|
yield __await(sleep(1000));
|
|
240
245
|
}
|
|
241
246
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appliance.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance.ts"],"names":[],"mappings":"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","sourcesContent":["import Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\n\n@customElement('appliance-page')\nclass Appliance extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n background-color: var(--main-section-background-color);\n padding: var(--padding-wide);\n }\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n input {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n select:focus,\n input:focus,\n button {\n outline: none;\n }\n form {\n max-width: var(--content-container-max-width);\n }\n [fieldset-container] {\n background-color: var(--theme-white-color);\n margin: var(--margin-wide) 0 var(--margin-default) 0;\n padding: var(--padding-default);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n }\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dark-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n [grid-span] {\n grid-column: span 2;\n }\n button,\n [button-in-field] {\n background-color: var(--button-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n color: var(--button-color);\n font: var(--button-font);\n text-transform: var(--button-text-transform);\n\n margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);\n float: right;\n text-decoration: none;\n }\n button:hover {\n border: var(--button-activ-border);\n box-shadow: var(--button-active-box-shadow);\n }\n [button-in-field] {\n border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n position: absolute;\n top: 11px;\n right: 0;\n max-height: 36px;\n }\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) appliance: any\n @property({ type: String }) accessToken?: string\n @property({ type: Object }) _accessTokenInfo: any\n\n @queryAll('[clipboard-copy]') copybuttons\n\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'devices',\n text: this.appliance.name\n }\n }\n }\n\n render() {\n var appliance = this.appliance || {}\n var accessTokenExp = this._accessTokenInfo?.exp\n\n return html`\n <div>\n <h2><mwc-icon>devices</mwc-icon> ${appliance.name}</h2>\n <p page-description>${appliance.description}</p>\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>appliance</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">appliance name</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${appliance.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${appliance.description} />\n </div>\n\n <div field>\n <label for=\"brand\">brand</label>\n <input id=\"brand\" type=\"text\" name=\"brand\" .value=${appliance.brand} />\n </div>\n\n <div field>\n <label for=\"serial-no\">serial #</label>\n <input id=\"serial-no\" type=\"text\" name=\"serialNo\" .value=${appliance.serialNo} />\n </div>\n\n <div field>\n <label for=\"model\">model</label>\n <input id=\"model\" type=\"text\" name=\"model\" .value=${appliance.model} />\n </div>\n\n <div field>\n <label for=\"netmask\">netmask</label>\n <input id=\"netmask\" type=\"text\" name=\"netmask\" .value=${appliance.netmask} />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>appliance credentials</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"access-token\">access token</label>\n <input id=\"access-token\" type=\"text\" .value=${appliance.accessToken} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n ${accessTokenExp\n ? html`<div input-hint>\n expired in ${new Date(accessTokenExp).toLocaleString()} :\n ${asyncReplace(this.expTimer(accessTokenExp))}\n </div>`\n : html``}\n </div>\n </div>\n </fieldset>\n </div>\n\n <button @click=${this.deleteAppliance.bind(this)}>delete this appliance</button>\n <button @click=${this.generateApplianceSecret.bind(this)}>generate new access token</button>\n <button @click=${this.updateAppliance.bind(this)}>update</button>\n </form>\n `\n }\n\n firstUpdated() {\n this.clipboard = new Clipboard(this.copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n updated(changes) {\n /*\n * If this page properties are changed, this callback will be invoked.\n * This callback will be called back only when this page is activated.\n */\n if (changes.has('appliance')) {\n const { accessToken } = this.appliance || {}\n this.accessToken = accessToken\n }\n\n if (changes.has('accessToken')) {\n this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n await this.fetchAppliance()\n }\n }\n\n async fetchAppliance() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n appliance(id: $id) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.appliance = response.data.appliance\n }\n\n async updateAppliance(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: AppliancePatch!) {\n updateAppliance(id: $id, patch: $patch) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id,\n patch\n }\n })\n\n if (response.errors) {\n console.error('update fail')\n } else {\n this.appliance = response.data.updateAppliance\n console.log('update sucess')\n }\n }\n\n async deleteAppliance(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteAppliance(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('delete fail')\n } else {\n navigate('appliance-home')\n }\n }\n\n async generateApplianceSecret(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n generateApplianceSecret(id: $id) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('generate-appliance-secret fail')\n } else {\n this.appliance = response.data.generateApplianceSecret\n console.log('generate-appliance-secret sucess')\n }\n }\n\n async *expTimer(exp) {\n const DAY = 24 * 60 * 60\n const HOUR = 60 * 60\n const MIN = 60\n\n while (this.active) {\n var remain = Math.floor(Number(exp) - Date.now() / 1000)\n const days = Math.floor(remain / DAY)\n remain -= days * DAY\n const hours = Math.floor(remain / HOUR)\n remain -= hours * HOUR\n const mins = Math.floor(remain / MIN)\n const secs = remain - mins * MIN\n\n yield `${days} days ${hours} hours ${mins} mins ${secs} seconds remain`\n\n await sleep(1000)\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"appliance.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance.ts"],"names":[],"mappings":"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","sourcesContent":["import Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\nimport { asyncReplace } from 'lit/directives/async-replace.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { parseJwt, sleep } from '@operato/utils'\nimport { i18next } from '@operato/i18n'\n\n@customElement('appliance-page')\nclass Appliance extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n background-color: var(--main-section-background-color);\n padding: var(--padding-wide);\n }\n h2 {\n margin: var(--title-margin);\n font: var(--title-font);\n color: var(--title-text-color);\n }\n [page-description] {\n margin: var(--page-description-margin);\n font: var(--page-description-font);\n color: var(--page-description-color);\n }\n\n label {\n font: var(--label-font);\n color: var(--label-color);\n text-transform: var(--label-text-transform);\n }\n input {\n border: var(--border-dark-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n font: var(--input-font);\n\n flex: 1;\n }\n select:focus,\n input:focus,\n button {\n outline: none;\n }\n form {\n max-width: var(--content-container-max-width);\n }\n [fieldset-container] {\n background-color: var(--theme-white-color);\n margin: var(--margin-wide) 0 var(--margin-default) 0;\n padding: var(--padding-default);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n }\n [fieldset-container] fieldset {\n margin: 0;\n margin-top: -15px;\n }\n fieldset {\n border-radius: var(--border-radius);\n border: var(--border-dark-color);\n margin: var(--fieldset-margin);\n padding: var(--fieldset-padding);\n }\n legend {\n padding: var(--legend-padding);\n font-weight: bold;\n color: var(--legend-color);\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n }\n [field] {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n [grid-span] {\n grid-column: span 2;\n }\n button,\n [button-in-field] {\n background-color: var(--button-background-color);\n border: var(--button-border);\n border-radius: var(--button-border-radius);\n padding: var(--button-padding);\n color: var(--button-color);\n font: var(--button-font);\n text-transform: var(--button-text-transform);\n\n margin: var(--margin-default) 0 var(--margin-default) var(--margin-default);\n float: right;\n text-decoration: none;\n }\n button:hover {\n border: var(--button-activ-border);\n box-shadow: var(--button-active-box-shadow);\n }\n [button-in-field] {\n border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;\n position: absolute;\n top: 11px;\n right: 0;\n max-height: 36px;\n }\n [input-hint] {\n font: var(--input-hint-font);\n color: var(--input-hint-color);\n }\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n\n @property({ type: Object }) appliance: any\n @property({ type: String }) accessToken?: string\n @property({ type: Object }) _accessTokenInfo: any\n\n @queryAll('[clipboard-copy]') copybuttons\n\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'devices',\n text: this.appliance.name\n }\n }\n }\n\n render() {\n var appliance = this.appliance || {}\n var accessTokenExp = this._accessTokenInfo?.exp\n\n return html`\n <div>\n <h2><mwc-icon>devices</mwc-icon> ${appliance.name}</h2>\n <p page-description>${appliance.description}</p>\n </div>\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>${i18next.t('text.appliance')}</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">${i18next.t('field.name')}</label>\n <input id=\"name\" type=\"text\" name=\"name\" .value=${appliance.name} />\n </div>\n\n <div field grid-span>\n <label for=\"description\">${i18next.t('field.description')}</label>\n <input id=\"description\" type=\"text\" name=\"description\" .value=${appliance.description} />\n </div>\n\n <div field>\n <label for=\"brand\">${i18next.t('field.brand')}</label>\n <input id=\"brand\" type=\"text\" name=\"brand\" .value=${appliance.brand} />\n </div>\n\n <div field>\n <label for=\"serial-no\">${i18next.t('field.serial-no')}</label>\n <input id=\"serial-no\" type=\"text\" name=\"serialNo\" .value=${appliance.serialNo} />\n </div>\n\n <div field>\n <label for=\"model\">${i18next.t('field.model')}</label>\n <input id=\"model\" type=\"text\" name=\"model\" .value=${appliance.model} />\n </div>\n\n <div field>\n <label for=\"netmask\">${i18next.t('field.netmask')}</label>\n <input id=\"netmask\" type=\"text\" name=\"netmask\" .value=${appliance.netmask} />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>${i18next.t('text.appliance credential')}</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"access-token\">${i18next.t('label.access token')}</label>\n <input id=\"access-token\" type=\"text\" .value=${appliance.accessToken} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>\n ${i18next.t('button.copy')}\n </button>\n ${accessTokenExp\n ? html`<div input-hint>\n ${i18next.t('text.token expiry time')} ${new Date(accessTokenExp * 1000).toLocaleString()} :\n ${asyncReplace(this.expTimer(accessTokenExp))}\n </div>`\n : html``}\n </div>\n </div>\n </fieldset>\n </div>\n\n <button @click=${this.deleteAppliance.bind(this)}>${i18next.t('button.delete this appliance')}</button>\n <button @click=${this.generateApplianceSecret.bind(this)}>\n ${i18next.t('button.generate new access token')}\n </button>\n <button @click=${this.updateAppliance.bind(this)}>${i18next.t('button.update')}</button>\n </form>\n `\n }\n\n firstUpdated() {\n this.clipboard = new Clipboard(this.copybuttons, {\n target: (trigger => trigger.parentElement.querySelector('input')) as any\n })\n }\n\n updated(changes) {\n /*\n * If this page properties are changed, this callback will be invoked.\n * This callback will be called back only when this page is activated.\n */\n if (changes.has('appliance')) {\n const { accessToken } = this.appliance || {}\n this.accessToken = accessToken\n }\n\n if (changes.has('accessToken')) {\n this._accessTokenInfo = this.accessToken ? parseJwt(this.accessToken) : {}\n }\n }\n\n async pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n await this.fetchAppliance()\n }\n }\n\n async fetchAppliance() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n appliance(id: $id) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.appliance = response.data.appliance\n }\n\n async updateAppliance(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {\n patch[key] = value\n return patch\n }, {})\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!, $patch: AppliancePatch!) {\n updateAppliance(id: $id, patch: $patch) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id,\n patch\n }\n })\n\n if (response.errors) {\n console.error('update fail')\n } else {\n this.appliance = response.data.updateAppliance\n console.log('update sucess')\n }\n }\n\n async deleteAppliance(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteAppliance(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('delete fail')\n } else {\n navigate('appliance-home')\n }\n }\n\n async generateApplianceSecret(e) {\n e.preventDefault()\n\n const id = this.lifecycle.resourceId\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n generateApplianceSecret(id: $id) {\n id\n name\n description\n serialNo\n brand\n model\n netmask\n accessToken\n }\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('generate-appliance-secret fail')\n } else {\n this.appliance = response.data.generateApplianceSecret\n console.log('generate-appliance-secret sucess')\n }\n }\n\n async *expTimer(exp) {\n const DAY = 24 * 60 * 60\n const HOUR = 60 * 60\n const MIN = 60\n\n while (this.active) {\n var remain = Math.floor(Number(exp) - Date.now() / 1000)\n const days = Math.floor(remain / DAY)\n remain -= days * DAY\n const hours = Math.floor(remain / HOUR)\n remain -= hours * HOUR\n const mins = Math.floor(remain / MIN)\n const secs = remain - mins * MIN\n\n yield i18next.t('text.remaining time', { days, hours, mins, secs })\n\n await sleep(1000)\n }\n }\n}\n"]}
|