@things-factory/auth-ui 7.0.1-beta.6 → 7.0.1-beta.8
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/auth-style-sign.ts +14 -14
- package/client/components/abstract-auth-page.ts +1 -1
- package/client/components/create-domain-popup.ts +2 -2
- package/client/components/create-role.ts +1 -1
- package/client/components/create-user.ts +7 -8
- package/client/components/domain-switch.ts +5 -5
- package/client/components/invite-customer.ts +6 -3
- package/client/components/invite-user.ts +4 -2
- package/client/components/ownership-transfer-popup.ts +1 -1
- package/client/components/partner-info-card.ts +2 -2
- package/client/components/role-edit-form.ts +2 -2
- package/client/components/role-selector.ts +1 -1
- package/client/entries/auth/activate.ts +6 -6
- package/client/entries/auth/checkin.ts +3 -3
- package/client/entries/auth/result.ts +4 -4
- package/client/entries/oauth2/oauth2-decision-page.ts +2 -2
- package/client/pages/app-binding/app-binding.ts +3 -3
- package/client/pages/appliance/appliance.ts +3 -3
- package/client/pages/appliance/register.ts +2 -2
- package/client/pages/application/application.ts +3 -3
- package/client/pages/application/register.ts +2 -2
- package/client/pages/role/role-management.ts +1 -1
- package/client/themes/auth-theme.css +2 -5
- package/dist-client/auth-style-sign.js +14 -14
- package/dist-client/auth-style-sign.js.map +1 -1
- package/dist-client/components/abstract-auth-page.js +1 -1
- package/dist-client/components/abstract-auth-page.js.map +1 -1
- package/dist-client/components/create-domain-popup.js +2 -2
- package/dist-client/components/create-domain-popup.js.map +1 -1
- package/dist-client/components/create-role.js +1 -1
- package/dist-client/components/create-role.js.map +1 -1
- package/dist-client/components/create-user.d.ts +2 -1
- package/dist-client/components/create-user.js +6 -8
- package/dist-client/components/create-user.js.map +1 -1
- package/dist-client/components/domain-switch.js +5 -5
- package/dist-client/components/domain-switch.js.map +1 -1
- package/dist-client/components/invite-customer.js +1 -1
- package/dist-client/components/invite-customer.js.map +1 -1
- package/dist-client/components/invite-user.js +4 -2
- package/dist-client/components/invite-user.js.map +1 -1
- package/dist-client/components/ownership-transfer-popup.js +1 -1
- package/dist-client/components/ownership-transfer-popup.js.map +1 -1
- package/dist-client/components/partner-info-card.js +2 -2
- package/dist-client/components/partner-info-card.js.map +1 -1
- package/dist-client/components/role-edit-form.js +2 -2
- package/dist-client/components/role-edit-form.js.map +1 -1
- package/dist-client/components/role-selector.js +1 -1
- package/dist-client/components/role-selector.js.map +1 -1
- package/dist-client/entries/auth/activate.js +6 -6
- package/dist-client/entries/auth/activate.js.map +1 -1
- package/dist-client/entries/auth/checkin.js +3 -3
- package/dist-client/entries/auth/checkin.js.map +1 -1
- package/dist-client/entries/auth/result.js +4 -4
- package/dist-client/entries/auth/result.js.map +1 -1
- package/dist-client/entries/oauth2/oauth2-decision-page.js +2 -2
- package/dist-client/entries/oauth2/oauth2-decision-page.js.map +1 -1
- package/dist-client/pages/app-binding/app-binding.js +3 -3
- package/dist-client/pages/app-binding/app-binding.js.map +1 -1
- package/dist-client/pages/appliance/appliance.js +3 -3
- package/dist-client/pages/appliance/appliance.js.map +1 -1
- package/dist-client/pages/appliance/register.js +2 -2
- package/dist-client/pages/appliance/register.js.map +1 -1
- package/dist-client/pages/application/application.js +3 -3
- package/dist-client/pages/application/application.js.map +1 -1
- package/dist-client/pages/application/register.js +2 -2
- package/dist-client/pages/application/register.js.map +1 -1
- package/dist-client/pages/role/role-management.js +1 -1
- package/dist-client/pages/role/role-management.js.map +1 -1
- package/dist-client/themes/auth-theme.css +2 -5
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
|
@@ -139,7 +139,7 @@ AuthActivate.styles = [
|
|
|
139
139
|
width: 100vw;
|
|
140
140
|
height: 100vh;
|
|
141
141
|
height: 100dvh;
|
|
142
|
-
background-color: var(--auth-background);
|
|
142
|
+
background-color: var(--auth-background, var(--md-sys-color-primary));
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
.wrap {
|
|
@@ -157,7 +157,7 @@ AuthActivate.styles = [
|
|
|
157
157
|
.auth-brand img {
|
|
158
158
|
margin: 15% auto 5px auto;
|
|
159
159
|
width: 100px;
|
|
160
|
-
border: 3px solid var(--
|
|
160
|
+
border: 3px solid var(--md-sys-color-on-primary);
|
|
161
161
|
border-radius: 25px;
|
|
162
162
|
box-shadow: var(--box-shadow);
|
|
163
163
|
}
|
|
@@ -172,14 +172,14 @@ AuthActivate.styles = [
|
|
|
172
172
|
margin: 50px 0 0 0;
|
|
173
173
|
padding: 0;
|
|
174
174
|
font-size: 24px;
|
|
175
|
-
color: var(--auth-title-color);
|
|
175
|
+
color: var(--auth-title-color, var(--md-sys-color-on-primary));
|
|
176
176
|
}
|
|
177
177
|
|
|
178
178
|
p {
|
|
179
179
|
margin: 0;
|
|
180
180
|
padding: var(--auth-description-padding);
|
|
181
181
|
font: var(--auth-description-font);
|
|
182
|
-
color: var(--auth-description-color);
|
|
182
|
+
color: var(--auth-description-color, var(--md-sys-color-on-secondary));
|
|
183
183
|
}
|
|
184
184
|
|
|
185
185
|
#button-area {
|
|
@@ -188,9 +188,9 @@ AuthActivate.styles = [
|
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
md-elevated-button {
|
|
191
|
-
--md-theme-primary: var(--
|
|
191
|
+
--md-theme-primary: var(--md-sys-color-on-primary);
|
|
192
192
|
--md-theme-on-primary: var(--md-sys-color-primary);
|
|
193
|
-
--md-button-horizontal-padding: var(--
|
|
193
|
+
--md-button-horizontal-padding: var(--spacing-medium);
|
|
194
194
|
--md-button-ink-color: var(--md-sys-color-primary);
|
|
195
195
|
}
|
|
196
196
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"activate.js","sourceRoot":"","sources":["../../../client/entries/auth/activate.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/layout/ox-snack-bar.js'\nimport '@operato/lottie-player'\nimport '../../components/contact-us'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('auth-activate')\nexport class AuthActivate extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n background-color: var(--auth-background);\n }\n\n .wrap {\n display: block;\n width: 450px;\n min-width: 350px;\n margin: 0 auto;\n text-align: center;\n }\n\n .auth-brand {\n color: #fff;\n }\n\n .auth-brand img {\n margin: 15% auto 5px auto;\n width: 100px;\n border: 3px solid var(--theme-white-color);\n border-radius: 25px;\n box-shadow: var(--box-shadow);\n }\n\n .name {\n display: block;\n font: var(--auth-brand-name);\n text-shadow: var(--auth-brand-name-shadow);\n }\n\n h1 {\n margin: 50px 0 0 0;\n padding: 0;\n font-size: 24px;\n color: var(--auth-title-color);\n }\n\n p {\n margin: 0;\n padding: var(--auth-description-padding);\n font: var(--auth-description-font);\n color: var(--auth-description-color);\n }\n\n #button-area {\n border-top: 1px dashed #ccc;\n padding-top: 10px;\n }\n\n md-elevated-button {\n --md-theme-primary: var(--auth-button-background-color);\n --md-theme-on-primary: var(--md-sys-color-primary);\n --md-button-horizontal-padding: var(--padding-default);\n --md-button-ink-color: var(--md-sys-color-primary);\n }\n\n contact-us {\n display: flex;\n padding: 50px;\n flex-direction: column;\n }\n\n .lottie-container {\n width: 100%;\n height: 300px;\n position: absolute;\n left: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .lottie-container lottie-player {\n position: absolute;\n bottom: -6%;\n width: 100%;\n height: auto;\n }\n\n @media (max-width: 450px) {\n .wrap {\n width: 85%;\n min-width: 320px;\n padding-bottom: 100px;\n }\n\n .auth-form {\n grid-template-columns: 1fr;\n }\n\n .auth-brand img {\n margin: 12% auto 5px auto;\n width: 75px;\n }\n\n .lottie-container {\n overflow: hidden;\n height: 200px;\n pointer-events: none;\n }\n\n .lottie-container lottie-player {\n width: 1200px;\n left: -30%;\n }\n }\n `\n ]\n\n @property({ type: Object }) data: any\n @property({ type: String }) email?: string | null\n\n @query('#form') form!: HTMLFormElement\n\n private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n render() {\n var { icon, title, description } = this.applicationMeta\n\n return html`\n <div class=\"wrap\">\n <div class=\"auth-brand\">\n <img src=${icon} />\n <strong class=\"name\">${title}</strong>\n <span class=\"welcome-msg\">${description}</span>\n </div>\n\n <h1><ox-i18n msgid=\"text.your account is not activated\"></ox-i18n></h1>\n\n <!--description message container-->\n <p></p>\n\n <form\n id=\"form\"\n action=\"/auth/resend-verification-email\"\n method=\"POST\"\n @submit=${e => {\n this.requestResend(e)\n }}\n hidden\n >\n <input name=\"email\" type=\"hidden\" .value=${this.email || ''} required />\n <button id=\"submit-button\" type=\"submit\"><ox-i18n msgid=\"label.change password\"></ox-i18n></button>\n </form>\n\n <div id=\"button-area\">\n <md-elevated-button @click=${e => this.requestResend(e)}>\n <md-icon slot=\"icon\">mail_outline</md-icon>\n ${i18next.t('label.send activation email')}\n </md-elevated-button>\n <md-elevated-button\n @click=${e => {\n window.location.replace('/auth/signin')\n }}\n >\n <md-icon slot=\"icon\">home</md-icon>\n ${i18next.t('button.go to home')}\n </md-elevated-button>\n </div>\n <contact-us></contact-us>\n\n <!--lottie animation begin-->\n <div class=\"lottie-container\">\n <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n </div>\n <!--lottie animation end-->\n </div>\n\n <ox-snack-bar id=\"snackbar\"></ox-snack-bar>\n `\n }\n\n get applicationMeta() {\n if (!this._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 this._applicationMeta = {\n icon: iconLink?.href,\n title: titleMeta ? titleMeta.content : 'Things Factory',\n description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n }\n }\n\n return this._applicationMeta\n }\n\n firstUpdated() {\n var searchParams = new URLSearchParams(window.location.search)\n this.email = searchParams.get('email')\n }\n\n updated(changed) {\n if (changed.has('data')) {\n this.email = this.data?.email\n }\n }\n\n async requestResend(e) {\n var timer\n var formData = new FormData(this.form)\n var button = e.target\n try {\n var controller = new AbortController()\n var signal = controller.signal\n\n button.disabled = true\n timer = setTimeout(() => {\n controller.abort()\n throw new Error('timeout')\n }, 30 * 1000)\n\n var response = await fetch('/auth/resend-verification-email', {\n credentials: 'include',\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(Object.fromEntries(formData.entries())),\n signal\n })\n\n if (response) {\n this.showSnackbar({\n level: response.ok ? 'info' : 'error',\n message: await response.text()\n })\n }\n } catch (e) {\n } finally {\n button.disabled = false\n clearTimeout(timer)\n }\n }\n\n showSnackbar({ level, message, timer = 3000 }: { level: 'info' | 'error'; message: string; timer?: number }) {\n const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n level: 'info' | 'error'\n message: string\n active: boolean\n }\n\n snackbar.level = level\n snackbar.message = message\n snackbar.active = true\n\n if (timer > -1)\n setTimeout(() => {\n snackbar.active = false\n }, timer)\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"activate.js","sourceRoot":"","sources":["../../../client/entries/auth/activate.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/layout/ox-snack-bar.js'\nimport '@operato/lottie-player'\nimport '../../components/contact-us'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('auth-activate')\nexport class AuthActivate extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n background-color: var(--auth-background, var(--md-sys-color-primary));\n }\n\n .wrap {\n display: block;\n width: 450px;\n min-width: 350px;\n margin: 0 auto;\n text-align: center;\n }\n\n .auth-brand {\n color: #fff;\n }\n\n .auth-brand img {\n margin: 15% auto 5px auto;\n width: 100px;\n border: 3px solid var(--md-sys-color-on-primary);\n border-radius: 25px;\n box-shadow: var(--box-shadow);\n }\n\n .name {\n display: block;\n font: var(--auth-brand-name);\n text-shadow: var(--auth-brand-name-shadow);\n }\n\n h1 {\n margin: 50px 0 0 0;\n padding: 0;\n font-size: 24px;\n color: var(--auth-title-color, var(--md-sys-color-on-primary));\n }\n\n p {\n margin: 0;\n padding: var(--auth-description-padding);\n font: var(--auth-description-font);\n color: var(--auth-description-color, var(--md-sys-color-on-secondary));\n }\n\n #button-area {\n border-top: 1px dashed #ccc;\n padding-top: 10px;\n }\n\n md-elevated-button {\n --md-theme-primary: var(--md-sys-color-on-primary);\n --md-theme-on-primary: var(--md-sys-color-primary);\n --md-button-horizontal-padding: var(--spacing-medium);\n --md-button-ink-color: var(--md-sys-color-primary);\n }\n\n contact-us {\n display: flex;\n padding: 50px;\n flex-direction: column;\n }\n\n .lottie-container {\n width: 100%;\n height: 300px;\n position: absolute;\n left: 0;\n bottom: 0;\n pointer-events: none;\n }\n\n .lottie-container lottie-player {\n position: absolute;\n bottom: -6%;\n width: 100%;\n height: auto;\n }\n\n @media (max-width: 450px) {\n .wrap {\n width: 85%;\n min-width: 320px;\n padding-bottom: 100px;\n }\n\n .auth-form {\n grid-template-columns: 1fr;\n }\n\n .auth-brand img {\n margin: 12% auto 5px auto;\n width: 75px;\n }\n\n .lottie-container {\n overflow: hidden;\n height: 200px;\n pointer-events: none;\n }\n\n .lottie-container lottie-player {\n width: 1200px;\n left: -30%;\n }\n }\n `\n ]\n\n @property({ type: Object }) data: any\n @property({ type: String }) email?: string | null\n\n @query('#form') form!: HTMLFormElement\n\n private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n render() {\n var { icon, title, description } = this.applicationMeta\n\n return html`\n <div class=\"wrap\">\n <div class=\"auth-brand\">\n <img src=${icon} />\n <strong class=\"name\">${title}</strong>\n <span class=\"welcome-msg\">${description}</span>\n </div>\n\n <h1><ox-i18n msgid=\"text.your account is not activated\"></ox-i18n></h1>\n\n <!--description message container-->\n <p></p>\n\n <form\n id=\"form\"\n action=\"/auth/resend-verification-email\"\n method=\"POST\"\n @submit=${e => {\n this.requestResend(e)\n }}\n hidden\n >\n <input name=\"email\" type=\"hidden\" .value=${this.email || ''} required />\n <button id=\"submit-button\" type=\"submit\"><ox-i18n msgid=\"label.change password\"></ox-i18n></button>\n </form>\n\n <div id=\"button-area\">\n <md-elevated-button @click=${e => this.requestResend(e)}>\n <md-icon slot=\"icon\">mail_outline</md-icon>\n ${i18next.t('label.send activation email')}\n </md-elevated-button>\n <md-elevated-button\n @click=${e => {\n window.location.replace('/auth/signin')\n }}\n >\n <md-icon slot=\"icon\">home</md-icon>\n ${i18next.t('button.go to home')}\n </md-elevated-button>\n </div>\n <contact-us></contact-us>\n\n <!--lottie animation begin-->\n <div class=\"lottie-container\">\n <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n </div>\n <!--lottie animation end-->\n </div>\n\n <ox-snack-bar id=\"snackbar\"></ox-snack-bar>\n `\n }\n\n get applicationMeta() {\n if (!this._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 this._applicationMeta = {\n icon: iconLink?.href,\n title: titleMeta ? titleMeta.content : 'Things Factory',\n description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n }\n }\n\n return this._applicationMeta\n }\n\n firstUpdated() {\n var searchParams = new URLSearchParams(window.location.search)\n this.email = searchParams.get('email')\n }\n\n updated(changed) {\n if (changed.has('data')) {\n this.email = this.data?.email\n }\n }\n\n async requestResend(e) {\n var timer\n var formData = new FormData(this.form)\n var button = e.target\n try {\n var controller = new AbortController()\n var signal = controller.signal\n\n button.disabled = true\n timer = setTimeout(() => {\n controller.abort()\n throw new Error('timeout')\n }, 30 * 1000)\n\n var response = await fetch('/auth/resend-verification-email', {\n credentials: 'include',\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(Object.fromEntries(formData.entries())),\n signal\n })\n\n if (response) {\n this.showSnackbar({\n level: response.ok ? 'info' : 'error',\n message: await response.text()\n })\n }\n } catch (e) {\n } finally {\n button.disabled = false\n clearTimeout(timer)\n }\n }\n\n showSnackbar({ level, message, timer = 3000 }: { level: 'info' | 'error'; message: string; timer?: number }) {\n const snackbar = this.renderRoot.querySelector('#snackbar') as HTMLElement & {\n level: 'info' | 'error'\n message: string\n active: boolean\n }\n\n snackbar.level = level\n snackbar.message = message\n snackbar.active = true\n\n if (timer > -1)\n setTimeout(() => {\n snackbar.active = false\n }, timer)\n }\n}\n"]}
|
|
@@ -100,7 +100,7 @@ AuthCheckIn.styles = [
|
|
|
100
100
|
display: flex;
|
|
101
101
|
flex-direction: column;
|
|
102
102
|
margin: auto;
|
|
103
|
-
background-color: var(--auth-background);
|
|
103
|
+
background-color: var(--auth-background, var(--md-sys-color-primary));
|
|
104
104
|
height: 100vh;
|
|
105
105
|
height: 100dvh;
|
|
106
106
|
}
|
|
@@ -118,11 +118,11 @@ AuthCheckIn.styles = [
|
|
|
118
118
|
padding: 0;
|
|
119
119
|
background-color: var(--md-sys-color-surface);
|
|
120
120
|
border-radius: var(--border-radius);
|
|
121
|
-
border: var(--border-
|
|
121
|
+
border: var(--border-dim-color);
|
|
122
122
|
list-style: none;
|
|
123
123
|
}
|
|
124
124
|
li {
|
|
125
|
-
border-bottom: var(--border-
|
|
125
|
+
border-bottom: var(--border-dim-color);
|
|
126
126
|
margin-bottom: -1px;
|
|
127
127
|
padding: var(--padding-default) var(--padding-wide);
|
|
128
128
|
font-size: 18px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkin.js","sourceRoot":"","sources":["../../../client/entries/auth/checkin.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../../auth-style-sign'\n\n@customElement('auth-checkin')\nexport class AuthCheckIn extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n margin: auto;\n background-color: var(--auth-background);\n height: 100vh;\n height: 100dvh;\n }\n .header {\n background-color: var(--md-sys-color-primary);\n height: var(--checkin-header-height);\n }\n .content {\n flex: 1;\n overflow: auto;\n }\n\n .domains {\n margin: var(--margin-wide) 0;\n padding: 0;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--border-radius);\n border: var(--border-
|
|
1
|
+
{"version":3,"file":"checkin.js","sourceRoot":"","sources":["../../../client/entries/auth/checkin.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '../../auth-style-sign'\n\n@customElement('auth-checkin')\nexport class AuthCheckIn extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n margin: auto;\n background-color: var(--auth-background, var(--md-sys-color-primary));\n height: 100vh;\n height: 100dvh;\n }\n .header {\n background-color: var(--md-sys-color-primary);\n height: var(--checkin-header-height);\n }\n .content {\n flex: 1;\n overflow: auto;\n }\n\n .domains {\n margin: var(--margin-wide) 0;\n padding: 0;\n background-color: var(--md-sys-color-surface);\n border-radius: var(--border-radius);\n border: var(--border-dim-color);\n list-style: none;\n }\n li {\n border-bottom: var(--border-dim-color);\n margin-bottom: -1px;\n padding: var(--padding-default) var(--padding-wide);\n font-size: 18px;\n color: var(--md-sys-color-secondary);\n text-align: left;\n\n cursor: pointer;\n }\n li:hover {\n background-color: rgba(var(--primary-color-rgb), 0.2);\n }\n li span {\n display: block;\n font: normal var(--fontsize-default) var(--theme-font);\n color: var(--secondary-text-color);\n }\n li md-icon {\n float: right;\n margin: 2px 0 0 0;\n opacity: 0.5;\n }\n .button-container {\n text-align: center;\n }\n .button-container md-elevated-button {\n margin-left: var(--margin-narrow);\n }\n\n @media (max-width: 450px) {\n .button-container md-elevated-button {\n width: 100%;\n margin: var(--margin-default) 0 0 0;\n }\n }\n `,\n AUTH_STYLE_SIGN\n ]\n\n @property({ type: Object }) data: any\n @property({ type: Array }) domains: any[] = []\n @property({ type: String }) domainType?: string\n @property({ type: Object }) user: any\n\n private _applicationMeta?: { icon?: string; title?: string; description?: string }\n private redirectTo?: string\n\n render() {\n var { icon, title, description } = this.applicationMeta\n\n return html`\n <div class=\"content md-typescale-display-medium\">\n <div class=\"wrap\">\n <div class=\"auth-brand\">\n <img src=${icon || ''} />\n <strong class=\"name\">${title}</strong>\n <span class=\"welcome-msg\">${description}</span>\n </div>\n\n <h3>${i18next.t('label.select_domain')}</h3>\n\n ${this.domains?.length\n ? html`\n <ul class=\"domains\">\n ${this.domains.map(\n domain => html`\n <li\n @click=${() =>\n (location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`)}\n >\n <md-icon>keyboard_arrow_right</md-icon>\n <strong>${domain.name}</strong>\n <span>${domain.description}</span>\n </li>\n `\n )}\n </ul>\n `\n : html` <h3>${i18next.t('text.no domain available')}</h3> `}\n\n <div class=\"button-container\">\n <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}\n >${String(i18next.t('button.logout'))}</md-elevated-button\n >\n\n ${this.domainType?.toLowerCase() === 'company'\n ? html`<md-elevated-button\n @click=${e => (location.href = `/public/business-register?email=${this.user?.email}`)}\n >${String(i18next.t('button.register business domain'))}</md-elevated-button\n > `\n : ''}\n </div>\n\n ${isSafari()\n ? html``\n : html`\n <div class=\"lottie-container\">\n <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n </div>\n `}\n </div>\n </div>\n `\n }\n\n updated(changed) {\n if (changed.has('data')) {\n this.domains = this.data.domains\n this.user = this.data.user\n this.domainType = this.data.domainType\n this.redirectTo = this.data.redirectTo\n\n this.requestUpdate()\n }\n }\n\n navigateToUrl(url) {\n location.pathname = url\n }\n\n get applicationMeta() {\n if (!this._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 this._applicationMeta = {\n icon: iconLink?.href,\n title: titleMeta ? titleMeta.content : 'Things Factory',\n description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n }\n }\n\n return this._applicationMeta\n }\n}\n"]}
|
|
@@ -71,7 +71,7 @@ AuthResult.styles = [
|
|
|
71
71
|
width: 100vw;
|
|
72
72
|
height: 100vh;
|
|
73
73
|
height: 100dvh;
|
|
74
|
-
background-color: var(--auth-background);
|
|
74
|
+
background-color: var(--auth-background, var(--md-sys-color-primary));
|
|
75
75
|
}
|
|
76
76
|
.wrap {
|
|
77
77
|
display: block;
|
|
@@ -86,7 +86,7 @@ AuthResult.styles = [
|
|
|
86
86
|
.auth-brand img {
|
|
87
87
|
margin: 15% auto 5px auto;
|
|
88
88
|
width: 100px;
|
|
89
|
-
border: 3px solid var(--
|
|
89
|
+
border: 3px solid var(--md-sys-color-on-primary);
|
|
90
90
|
border-radius: 25px;
|
|
91
91
|
box-shadow: var(--box-shadow);
|
|
92
92
|
}
|
|
@@ -99,13 +99,13 @@ AuthResult.styles = [
|
|
|
99
99
|
margin: 50px 0 0 0;
|
|
100
100
|
padding: 0;
|
|
101
101
|
font-size: 24px;
|
|
102
|
-
color: var(--auth-title-color);
|
|
102
|
+
color: var(--auth-title-color, var(--md-sys-color-on-primary));
|
|
103
103
|
}
|
|
104
104
|
p {
|
|
105
105
|
margin: 0;
|
|
106
106
|
padding: var(--auth-description-padding);
|
|
107
107
|
font: var(--auth-description-font);
|
|
108
|
-
color: var(--auth-description-color);
|
|
108
|
+
color: var(--auth-description-color, var(--md-sys-color-on-secondary));
|
|
109
109
|
}
|
|
110
110
|
:host *:focus {
|
|
111
111
|
outline: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"result.js","sourceRoot":"","sources":["../../../client/entries/auth/result.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAqH3D,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAA;SAC5D;IACH,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,UAAU;;qBAEnB,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;gBAIjC,IAAI,CAAC,OAAO,IAAI,EAAE;;;;;;;qBAOb,CAAC,CAAC,EAAE;YACX,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;;;cAGC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;UAIlC,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;YAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;YAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;YAE5G,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAhLM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAU;AACrC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAoB;AAjHpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkLtB;SAlLY,UAAU","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\nimport '../../components/profile-component'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\n@customElement('auth-result')\nexport class AuthResult extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n background-color: var(--auth-background);\n }\n .wrap {\n display: block;\n width: 450px;\n min-width: 350px;\n margin: 0 auto;\n text-align: center;\n }\n .auth-brand {\n color: #fff;\n }\n .auth-brand img {\n margin: 15% auto 5px auto;\n width: 100px;\n border: 3px solid var(--
|
|
1
|
+
{"version":3,"file":"result.js","sourceRoot":"","sources":["../../../client/entries/auth/result.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAC/B,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAGlC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAqH3D,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,iBAAiB,CAAA;SAC5D;IACH,CAAC;IAED,MAAM;QACJ,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QAEvD,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,UAAU;;qBAEnB,IAAI;iCACQ,KAAK;sCACA,WAAW;;;;gBAIjC,IAAI,CAAC,OAAO,IAAI,EAAE;;;;;;;qBAOb,CAAC,CAAC,EAAE;YACX,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC,CAAA;QACzC,CAAC;;;cAGC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;;;UAIlC,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAA;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;YAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;YAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;YAE5G,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;SACF;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAhLM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wCAAU;AACrC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAiB;AAC5C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAoB;AAjHpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkLtB;SAlLY,UAAU","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\nimport '../../components/profile-component'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { isSafari } from '@operato/utils'\n\n@customElement('auth-result')\nexport class AuthResult extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n width: 100vw;\n height: 100vh;\n height: 100dvh;\n background-color: var(--auth-background, var(--md-sys-color-primary));\n }\n .wrap {\n display: block;\n width: 450px;\n min-width: 350px;\n margin: 0 auto;\n text-align: center;\n }\n .auth-brand {\n color: #fff;\n }\n .auth-brand img {\n margin: 15% auto 5px auto;\n width: 100px;\n border: 3px solid var(--md-sys-color-on-primary);\n border-radius: 25px;\n box-shadow: var(--box-shadow);\n }\n .name {\n display: block;\n font: var(--auth-brand-name);\n text-shadow: var(--auth-brand-name-shadow);\n }\n h1 {\n margin: 50px 0 0 0;\n padding: 0;\n font-size: 24px;\n color: var(--auth-title-color, var(--md-sys-color-on-primary));\n }\n p {\n margin: 0;\n padding: var(--auth-description-padding);\n font: var(--auth-description-font);\n color: var(--auth-description-color, var(--md-sys-color-on-secondary));\n }\n :host *:focus {\n outline: none;\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 label {\n font: bold 14px var(--theme-font);\n color: var(--md-sys-color-primary);\n }\n #button-area {\n border-top: 1px dashed rgba(0, 0, 0, 0.1);\n padding-top: 10px;\n }\n md-elevated-button {\n --md-theme-primary: var(--auth-button-background-color);\n --md-theme-on-primary: var(--md-sys-color-primary);\n --md-button-horizontal-padding: var(--padding-default);\n --md-button-ink-color: var(--md-sys-color-primary);\n }\n .lottie-container {\n width: 100%;\n height: 300px;\n position: absolute;\n left: 0;\n bottom: 0;\n pointer-events: none;\n }\n .lottie-container lottie-player {\n position: absolute;\n bottom: -6%;\n width: 100%;\n height: auto;\n }\n\n @media (max-width: 450px) {\n .wrap {\n width: 85%;\n min-width: 320px;\n padding-bottom: 100px;\n }\n .auth-form {\n grid-template-columns: 1fr;\n }\n .auth-brand img {\n margin: 12% auto 5px auto;\n width: 75px;\n }\n .lottie-container {\n overflow: hidden;\n height: 200px;\n pointer-events: none;\n }\n .lottie-container lottie-player {\n width: 1200px;\n left: -30%;\n }\n }\n `\n ]\n\n @property({ type: Object }) data: any\n @property({ type: String }) message?: string\n @property({ type: String }) resultType?: string\n\n private _applicationMeta?: { icon?: string; title?: string; description?: string }\n\n updated(changed) {\n if (changed.has('data')) {\n this.message = this.data.message\n this.resultType = this.data.resultType || 'congratulations'\n }\n }\n\n render() {\n var { icon, title, description } = this.applicationMeta\n\n return html`\n <div class=\"wrap ${this.resultType}\">\n <div class=\"auth-brand\">\n <img src=${icon} />\n <strong class=\"name\">${title}</strong>\n <span class=\"welcome-msg\">${description}</span>\n </div>\n\n <div id=\"message-area\">\n <h1>${this.message || ''}</h1>\n\n <!--description message container-->\n <p></p>\n </div>\n <div id=\"button-area\">\n <md-elevated-button\n @click=${e => {\n window.location.replace('/auth/signin')\n }}\n >\n <md-icon slot=\"icon\">home</md-icon>\n ${i18next.t('button.go to home')}\n </md-elevated-button>\n </div>\n\n ${isSafari()\n ? html``\n : html`\n <div class=\"lottie-container\">\n <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n </div>\n `}\n </div>\n `\n }\n\n get applicationMeta() {\n if (!this._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 this._applicationMeta = {\n icon: iconLink?.href,\n title: titleMeta ? titleMeta.content : 'Things Factory',\n description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n }\n }\n\n return this._applicationMeta\n }\n}\n"]}
|
|
@@ -161,7 +161,7 @@ OAuth2DecisionPage.styles = [
|
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
input {
|
|
164
|
-
border: var(--border-
|
|
164
|
+
border: var(--border-dim-color);
|
|
165
165
|
border-radius: var(--border-radius);
|
|
166
166
|
margin: var(--input-margin);
|
|
167
167
|
padding: var(--input-padding);
|
|
@@ -173,7 +173,7 @@ OAuth2DecisionPage.styles = [
|
|
|
173
173
|
display: flex;
|
|
174
174
|
flex-direction: column;
|
|
175
175
|
font: var(--label-font);
|
|
176
|
-
color: var(--label-color);
|
|
176
|
+
color: var(--label-color, var(--md-sys-color-on-surface));
|
|
177
177
|
text-transform: var(--label-text-transform);
|
|
178
178
|
}
|
|
179
179
|
|
|
@@ -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/web/button/elevated-button.js'\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 { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends 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 margin: var(--margin-default);\n padding: var(--padding-default);\n font: normal 15px var(--theme-font);\n color: var(--md-sys-color-secondary);\n }\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\n [field] {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--padding-default);\n }\n\n input {\n border: var(--border-
|
|
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/web/button/elevated-button.js'\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 { OxPrompt } from '@operato/popup/ox-prompt.js'\nimport { ButtonContainerStyles } from '@operato/styles'\n\n@customElement('oauth2-decision')\nclass OAuth2DecisionPage extends 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 margin: var(--margin-default);\n padding: var(--padding-default);\n font: normal 15px var(--theme-font);\n color: var(--md-sys-color-secondary);\n }\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\n [field] {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--padding-default);\n }\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\n label {\n display: flex;\n flex-direction: column;\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\n }\n\n md-elevated-button {\n margin-right: var(--padding-narrow);\n }\n\n [danger] {\n --md-theme-primary: var(--md-danger-button-primary-color);\n }\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 class=\"button-container\">\n <md-elevated-button @click=\"${() => this.decision(true)}\" raised label=\"Allow\"></md-elevated-button>\n <md-elevated-button @click=\"${() => this.decision(false)}\" raised danger label=\"Deny\"></md-elevated-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 await OxPrompt.open({\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"]}
|
|
@@ -284,11 +284,11 @@ AppBinding.styles = [
|
|
|
284
284
|
|
|
285
285
|
label {
|
|
286
286
|
font: var(--label-font);
|
|
287
|
-
color: var(--label-color);
|
|
287
|
+
color: var(--label-color, var(--md-sys-color-on-surface));
|
|
288
288
|
text-transform: var(--label-text-transform);
|
|
289
289
|
}
|
|
290
290
|
input {
|
|
291
|
-
border: var(--border-
|
|
291
|
+
border: var(--border-dim-color);
|
|
292
292
|
border-radius: var(--border-radius);
|
|
293
293
|
margin: var(--input-margin);
|
|
294
294
|
padding: var(--input-padding);
|
|
@@ -317,7 +317,7 @@ AppBinding.styles = [
|
|
|
317
317
|
}
|
|
318
318
|
fieldset {
|
|
319
319
|
border-radius: var(--border-radius);
|
|
320
|
-
border: var(--border-
|
|
320
|
+
border: var(--border-dim-color);
|
|
321
321
|
margin: var(--fieldset-margin);
|
|
322
322
|
padding: var(--fieldset-padding);
|
|
323
323
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-binding.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } 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('app-binding-page')\nclass AppBinding extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n position: relative;\n\n background-color: var(--md-sys-color-background);\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 [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\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(--md-sys-color-surface);\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: 12px;\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 }) appbinding: any\n @property({ type: String }) accessToken?: string\n\n @state() _refreshTokenInfo: any\n @state() _accessTokenInfo: any\n\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'link',\n text: this.appbinding.name\n }\n }\n }\n\n render() {\n var binding = this.appbinding || {}\n var app = this.appbinding?.application || {}\n var refreshTokenExp = this._refreshTokenInfo?.exp\n var accessTokenExp = this._accessTokenInfo?.exp\n\n return html`\n <div>\n <h2><md-icon>link</md-icon> ${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n ${app.icon\n ? html`\n <div icon>\n <img src=${app.icon} />\n </div>\n `\n : html``}\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>application</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"app-name\">app name</label>\n <input id=\"app-name\" type=\"text\" .value=${app.name} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"app-description\">description</label>\n <input id=\"app-description\" type=\"text\" .value=${app.description} readonly />\n </div>\n\n <div field>\n <label for=\"contact-email\">contact email</label>\n <input id=\"contact-email\" type=\"text\" .value=${app.email} readonly />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>binding</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"id\">id</label>\n <input id=\"id\" type=\"text\" .value=${binding.id} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" .value=${binding.email} readonly />\n </div>\n\n <div field>\n <label for=\"status\">status</label>\n <input id=\"status\" type=\"text\" .value=${binding.status} readonly />\n </div>\n\n <div field>\n <label for=\"scope\">scope</label>\n <input id=\"scope\" type=\"text\" .value=${binding.scope} readonly />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>binding credential</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=${this.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\n <div field grid-span>\n <label for=\"refresh-token\">refresh token</label>\n <input id=\"refresh-token\" type=\"text\" .value=${binding.refreshToken || ''} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n ${refreshTokenExp\n ? html`<div input-hint>\n expired in ${new Date(refreshTokenExp).toLocaleString()} :\n ${asyncReplace(this.expTimer(refreshTokenExp))}\n </div>`\n : html``}\n </div>\n </div>\n </fieldset>\n </div>\n\n <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>\n <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>\n </form>\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 firstUpdated() {\n const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n this.clipboard = new Clipboard(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('appbinding')) {\n const { refreshToken } = this.appbinding || {}\n this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}\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 /*\n * this page is activated\n */\n await this.fetchAppBinding()\n } else {\n /* this page is deactivated */\n }\n }\n\n async fetchAppBinding() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n appBinding(id: $id) {\n id\n name\n description\n email\n scope\n status\n application {\n id\n name\n description\n email\n icon\n }\n refreshToken\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.appbinding = response.data.appBinding\n }\n\n async deleteAppBinding(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 deleteAppBinding(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n const result = response.data.deleteAppBinding\n if (result) {\n console.log('delete sucess')\n navigate(`app-bindings`)\n } else {\n console.error('delete fail')\n }\n }\n\n async renewApplicationAccessToken(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 renewApplicationAccessToken(id: $id) {\n accessToken\n refreshToken\n }\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('renew application access token fail')\n } else {\n const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n this.accessToken = accessToken\n this.appbinding = {\n ...this.appbinding,\n refreshToken\n }\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"app-binding.js","sourceRoot":"","sources":["../../../client/pages/app-binding/app-binding.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport Clipboard from 'clipboard'\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } 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('app-binding-page')\nclass AppBinding extends connect(store)(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n position: relative;\n\n background-color: var(--md-sys-color-background);\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 [icon] {\n position: absolute;\n top: 10px;\n right: 10px;\n\n max-width: 80px;\n }\n [icon] img {\n max-width: 100%;\n max-height: 100%;\n }\n\n label {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\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 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(--md-sys-color-surface);\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-dim-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: 12px;\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 }) appbinding: any\n @property({ type: String }) accessToken?: string\n\n @state() _refreshTokenInfo: any\n @state() _accessTokenInfo: any\n\n private clipboard?: Clipboard\n\n get context() {\n return {\n title: {\n icon: 'link',\n text: this.appbinding.name\n }\n }\n }\n\n render() {\n var binding = this.appbinding || {}\n var app = this.appbinding?.application || {}\n var refreshTokenExp = this._refreshTokenInfo?.exp\n var accessTokenExp = this._accessTokenInfo?.exp\n\n return html`\n <div>\n <h2><md-icon>link</md-icon> ${app.name}</h2>\n <p page-description>${app.description}</p>\n </div>\n\n ${app.icon\n ? html`\n <div icon>\n <img src=${app.icon} />\n </div>\n `\n : html``}\n\n <form>\n <div fieldset-container>\n <fieldset>\n <legend>application</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"app-name\">app name</label>\n <input id=\"app-name\" type=\"text\" .value=${app.name} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"app-description\">description</label>\n <input id=\"app-description\" type=\"text\" .value=${app.description} readonly />\n </div>\n\n <div field>\n <label for=\"contact-email\">contact email</label>\n <input id=\"contact-email\" type=\"text\" .value=${app.email} readonly />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>binding</legend>\n <div field-2column>\n <div field grid-span>\n <label for=\"id\">id</label>\n <input id=\"id\" type=\"text\" .value=${binding.id} readonly />\n </div>\n\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" .value=${binding.email} readonly />\n </div>\n\n <div field>\n <label for=\"status\">status</label>\n <input id=\"status\" type=\"text\" .value=${binding.status} readonly />\n </div>\n\n <div field>\n <label for=\"scope\">scope</label>\n <input id=\"scope\" type=\"text\" .value=${binding.scope} readonly />\n </div>\n </div>\n </fieldset>\n </div>\n\n <div fieldset-container>\n <fieldset>\n <legend>binding credential</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=${this.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\n <div field grid-span>\n <label for=\"refresh-token\">refresh token</label>\n <input id=\"refresh-token\" type=\"text\" .value=${binding.refreshToken || ''} readonly />\n <button button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>\n ${refreshTokenExp\n ? html`<div input-hint>\n expired in ${new Date(refreshTokenExp).toLocaleString()} :\n ${asyncReplace(this.expTimer(refreshTokenExp))}\n </div>`\n : html``}\n </div>\n </div>\n </fieldset>\n </div>\n\n <button @click=${this.deleteAppBinding.bind(this)}>delete this application binding</button>\n <button @click=${this.renewApplicationAccessToken.bind(this)}>renew access token</button>\n </form>\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 firstUpdated() {\n const copybuttons = this.renderRoot.querySelectorAll('[clipboard-copy]')\n\n this.clipboard = new Clipboard(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('appbinding')) {\n const { refreshToken } = this.appbinding || {}\n this._refreshTokenInfo = refreshToken ? parseJwt(refreshToken) : {}\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 /*\n * this page is activated\n */\n await this.fetchAppBinding()\n } else {\n /* this page is deactivated */\n }\n }\n\n async fetchAppBinding() {\n const response = await client.query({\n query: gql`\n query ($id: String!) {\n appBinding(id: $id) {\n id\n name\n description\n email\n scope\n status\n application {\n id\n name\n description\n email\n icon\n }\n refreshToken\n }\n }\n `,\n variables: {\n id: this.lifecycle.resourceId\n }\n })\n\n this.appbinding = response.data.appBinding\n }\n\n async deleteAppBinding(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 deleteAppBinding(id: $id)\n }\n `,\n variables: {\n id\n }\n })\n\n const result = response.data.deleteAppBinding\n if (result) {\n console.log('delete sucess')\n navigate(`app-bindings`)\n } else {\n console.error('delete fail')\n }\n }\n\n async renewApplicationAccessToken(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 renewApplicationAccessToken(id: $id) {\n accessToken\n refreshToken\n }\n }\n `,\n variables: {\n id\n }\n })\n\n if (response.errors) {\n console.error('renew application access token fail')\n } else {\n const { accessToken, refreshToken } = response.data.renewApplicationAccessToken\n this.accessToken = accessToken\n this.appbinding = {\n ...this.appbinding,\n refreshToken\n }\n }\n }\n}\n"]}
|
|
@@ -270,11 +270,11 @@ Appliance.styles = [
|
|
|
270
270
|
|
|
271
271
|
label {
|
|
272
272
|
font: var(--label-font);
|
|
273
|
-
color: var(--label-color);
|
|
273
|
+
color: var(--label-color, var(--md-sys-color-on-surface));
|
|
274
274
|
text-transform: var(--label-text-transform);
|
|
275
275
|
}
|
|
276
276
|
input {
|
|
277
|
-
border: var(--border-
|
|
277
|
+
border: var(--border-dim-color);
|
|
278
278
|
border-radius: var(--border-radius);
|
|
279
279
|
margin: var(--input-margin);
|
|
280
280
|
padding: var(--input-padding);
|
|
@@ -303,7 +303,7 @@ Appliance.styles = [
|
|
|
303
303
|
}
|
|
304
304
|
fieldset {
|
|
305
305
|
border-radius: var(--border-radius);
|
|
306
|
-
border: var(--border-
|
|
306
|
+
border: var(--border-dim-color);
|
|
307
307
|
margin: var(--fieldset-margin);
|
|
308
308
|
padding: var(--fieldset-padding);
|
|
309
309
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appliance.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport 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(--md-sys-color-background);\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(--md-sys-color-surface);\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: 12px;\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><md-icon>devices</md-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"]}
|
|
1
|
+
{"version":3,"file":"appliance.js","sourceRoot":"","sources":["../../../client/pages/appliance/appliance.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport 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(--md-sys-color-background);\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, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\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 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(--md-sys-color-surface);\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-dim-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: 12px;\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><md-icon>devices</md-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"]}
|
|
@@ -43,11 +43,11 @@ let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView)
|
|
|
43
43
|
}
|
|
44
44
|
label {
|
|
45
45
|
font: var(--label-font);
|
|
46
|
-
color: var(--label-color);
|
|
46
|
+
color: var(--label-color, var(--md-sys-color-on-surface));
|
|
47
47
|
text-transform: var(--label-text-transform);
|
|
48
48
|
}
|
|
49
49
|
input {
|
|
50
|
-
border: var(--border-
|
|
50
|
+
border: var(--border-dim-color);
|
|
51
51
|
border-radius: var(--border-radius);
|
|
52
52
|
margin: var(--input-margin);
|
|
53
53
|
padding: var(--input-padding);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/appliance/register.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IACtD,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyEF;SACF,CAAA;IACH,CAAC;IAMD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,wBAAwB;YAC/B,IAAI,EAAE,gBAAgB;SACvB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAqCoC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI7E,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,CAAC;QACrB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACrE,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAClF,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACtB,OAAO,SAAS,CAAA;QAClB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,SAAS;aACV;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE;YACnB,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;SAC9B;aAAM;YACL,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAA;YAC3C,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;SAC5B;IACH,CAAC;IAED,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QACpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;SAClB;IACH,CAAC;CACF,CAAA;AA7FC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAE1C;IAAC,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;+CAAA;AAlFjC,iBAAiB;IADtB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,iBAAiB,CA6KtB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('appliance-register')\nclass ApplianceRegister extends connect(store)(PageView) {\n static get styles() {\n return [\n css`\n :host {\n background-color: var(--md-sys-color-background);\n padding: var(--padding-wide);\n\n display: flex;\n flex-direction: column;\n\n align-items: center;\n\n overflow: auto;\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 [form-container] {\n background-color: var(--md-sys-color-surface);\n padding: var(--padding-wide);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n min-width: 60%;\n max-width: var(--input-container-max-width);\n position: relative;\n clear: both;\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-
|
|
1
|
+
{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../client/pages/appliance/register.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAG1D,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IACtD,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyEF;SACF,CAAA;IACH,CAAC;IAMD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,wBAAwB;YAC/B,IAAI,EAAE,gBAAgB;SACvB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAqCoC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI7E,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,CAAC;QACrB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAA;QACrE,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAClF,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;YACtB,OAAO,SAAS,CAAA;QAClB,CAAC,EAAE,EAAE,CAAC,CAAA;QAEN,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;OAMZ;YACD,SAAS,EAAE;gBACT,SAAS;aACV;SACF,CAAC,CAAA;QAEF,IAAI,QAAQ,CAAC,MAAM,EAAE;YACnB,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;SAC9B;aAAM;YACL,MAAM,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAA;YAC3C,QAAQ,CAAC,aAAa,EAAE,EAAE,CAAC,CAAA;SAC5B;IACH,CAAC;IAED,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM;QACpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;SAClB;IACH,CAAC;CACF,CAAA;AA7FC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAAe;AAE1C;IAAC,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;+CAAA;AAlFjC,iBAAiB;IADtB,aAAa,CAAC,oBAAoB,CAAC;GAC9B,iBAAiB,CA6KtB","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { client } from '@operato/graphql'\nimport { navigate, PageView, store } from '@operato/shell'\n\n@customElement('appliance-register')\nclass ApplianceRegister extends connect(store)(PageView) {\n static get styles() {\n return [\n css`\n :host {\n background-color: var(--md-sys-color-background);\n padding: var(--padding-wide);\n\n display: flex;\n flex-direction: column;\n\n align-items: center;\n\n overflow: auto;\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 [form-container] {\n background-color: var(--md-sys-color-surface);\n padding: var(--padding-wide);\n border-radius: var(--border-radius);\n box-shadow: var(--box-shadow);\n min-width: 60%;\n max-width: var(--input-container-max-width);\n position: relative;\n clear: both;\n }\n label {\n font: var(--label-font);\n color: var(--label-color, var(--md-sys-color-on-surface));\n text-transform: var(--label-text-transform);\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 font: var(--input-font);\n\n flex: 1;\n }\n select:focus,\n input:focus {\n outline: none;\n }\n [field-2column] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 15px;\n max-width: var(--content-container-max-width);\n }\n [field] {\n display: flex;\n flex-direction: column;\n }\n [grid-span] {\n grid-column: span 2;\n }\n @media screen and (max-width: 480px) {\n [form-container] {\n position: initial;\n width: 100%;\n }\n [field] {\n grid-column: span 2;\n }\n }\n `\n ]\n }\n\n @property({ type: Object }) appliance: any\n\n @query('form') form!: HTMLFormElement\n\n get context() {\n return {\n title: `appliance registration`,\n help: 'auth/appliance'\n }\n }\n\n render() {\n return html`\n <h2>Register new appliance</h2>\n <p page-description>You can register new appliance here</p>\n\n <div form-container>\n <form>\n <div field-2column>\n <div field grid-span>\n <label for=\"name\">name</label>\n <input id=\"name\" type=\"text\" name=\"name\" />\n </div>\n\n <div field grid-span>\n <label for=\"description\">description</label>\n <input id=\"description\" type=\"text\" name=\"description\" />\n </div>\n\n <div field>\n <label for=\"brand\">brand</label>\n <input id=\"brand\" type=\"text\" name=\"brand\" />\n </div>\n\n <div field>\n <label for=\"serial-no\">serial #</label>\n <input id=\"serial-no\" type=\"text\" name=\"serialNo\" />\n </div>\n\n <div field>\n <label for=\"model\">model</label>\n <input id=\"model\" type=\"text\" name=\"model\" />\n </div>\n\n <div field>\n <label for=\"netmask\">netmask</label>\n <input id=\"netmask\" type=\"text\" name=\"netmask\" />\n </div>\n\n <md-elevated-button grid-span @click=${this.createAppliance.bind(this)}>register</md-elevated-button>\n </div>\n </form>\n </div>\n `\n }\n\n async createAppliance(e) {\n e.preventDefault()\n\n const form = this.renderRoot.querySelector('form') as HTMLFormElement\n const formData = new FormData(form)\n\n const appliance = Array.from(formData.entries()).reduce((appliance, [key, value]) => {\n appliance[key] = value\n return appliance\n }, {})\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($appliance: NewAppliance!) {\n createAppliance(appliance: $appliance) {\n id\n }\n }\n `,\n variables: {\n appliance\n }\n })\n\n if (response.errors) {\n console.log('creation fail.')\n } else {\n const id = response.data.createAppliance.id\n navigate(`appliance/${id}`)\n }\n }\n\n pageUpdated(changes, lifecycle, before) {\n if (this.active) {\n this.form.reset()\n }\n }\n}\n"]}
|