@things-factory/auth-ui 10.0.4 → 10.0.6
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/dist-client/components/change-password.js +23 -17
- package/dist-client/components/change-password.js.map +1 -1
- package/dist-client/components/delete-user-popup.js +2 -0
- package/dist-client/components/delete-user-popup.js.map +1 -1
- package/dist-client/components/domain-switch.js +2 -0
- package/dist-client/components/domain-switch.js.map +1 -1
- package/dist-client/components/invite-customer.js +2 -0
- package/dist-client/components/invite-customer.js.map +1 -1
- package/dist-client/components/invite-user.js +2 -0
- package/dist-client/components/invite-user.js.map +1 -1
- package/dist-client/components/ownership-transfer-popup.js +2 -0
- package/dist-client/components/ownership-transfer-popup.js.map +1 -1
- package/dist-client/components/profile-component.js +26 -12
- package/dist-client/components/profile-component.js.map +1 -1
- package/dist-client/components/role-edit-form.js +2 -0
- package/dist-client/components/role-edit-form.js.map +1 -1
- package/dist-client/entries/oauth2/oauth2-decision-page.js +2 -0
- package/dist-client/entries/oauth2/oauth2-decision-page.js.map +1 -1
- package/dist-client/entries/public/home.js +2 -0
- package/dist-client/entries/public/home.js.map +1 -1
- package/dist-client/pages/app-binding/app-binding.js +4 -1
- package/dist-client/pages/app-binding/app-binding.js.map +1 -1
- package/dist-client/pages/appliance/appliance.js +4 -1
- package/dist-client/pages/appliance/appliance.js.map +1 -1
- package/dist-client/pages/appliance/register.js +4 -1
- package/dist-client/pages/appliance/register.js.map +1 -1
- package/dist-client/pages/application/application.js +4 -1
- package/dist-client/pages/application/application.js.map +1 -1
- package/dist-client/pages/application/register.js +4 -1
- package/dist-client/pages/application/register.js.map +1 -1
- package/dist-client/pages/role/role-management.js +4 -1
- package/dist-client/pages/role/role-management.js.map +1 -1
- package/dist-client/themes/auth-theme.css +4 -2
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -4
|
@@ -2,6 +2,7 @@ import { __decorate, __metadata } from "tslib";
|
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
4
4
|
import { i18next, localize } from '@operato/i18n';
|
|
5
|
+
import { FormFieldStyles } from '@operato/styles';
|
|
5
6
|
import { auth } from '@things-factory/auth-base/dist-client/auth.js';
|
|
6
7
|
import { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule.js';
|
|
7
8
|
let ChangePassword = class ChangePassword extends localize(i18next)(LitElement) {
|
|
@@ -12,6 +13,7 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
|
|
|
12
13
|
this.passwordHelp = '';
|
|
13
14
|
}
|
|
14
15
|
static { this.styles = [
|
|
16
|
+
FormFieldStyles,
|
|
15
17
|
css `
|
|
16
18
|
* {
|
|
17
19
|
box-sizing: border-box;
|
|
@@ -26,22 +28,24 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
|
|
|
26
28
|
flex-direction: column;
|
|
27
29
|
}
|
|
28
30
|
|
|
31
|
+
/*
|
|
32
|
+
* 색·테두리·모서리·포커스·placeholder 색은 FormFieldStyles 가 담당한다.
|
|
33
|
+
* 여기서는 이 화면의 치수만 둔다 — 같은 프로필 화면의 위쪽 인풋(profile-component)과
|
|
34
|
+
* 같은 값을 써서 한 화면에 두 가지 인상이 생기지 않게 한다.
|
|
35
|
+
*/
|
|
29
36
|
input {
|
|
30
|
-
border: var(--change-password-field-border);
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
font: var(--change-password-field-font);
|
|
36
|
-
width: var(--change-password-field-width);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
input:focus {
|
|
40
|
-
border: 1px solid var(--focus-background-color);
|
|
37
|
+
border-radius: var(--change-password-field-border-radius, var(--border-radius));
|
|
38
|
+
margin: var(--change-password-field-margin, var(--spacing-small) 0);
|
|
39
|
+
padding: var(--change-password-field-padding, 9px);
|
|
40
|
+
font: var(--change-password-field-font, var(--auth-input-field-font));
|
|
41
|
+
width: var(--change-password-field-width, var(--auth-input-field-width));
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
::placeholder {
|
|
44
|
-
|
|
45
|
+
/*
|
|
46
|
+
* 크기를 줄이지 않는다. 이전에는 0.8rem 이라 위쪽 인풋의 값(16px)보다 작게 보여
|
|
47
|
+
* 같은 화면에서 패스워드 칸만 다른 스타일처럼 느껴졌다.
|
|
48
|
+
*/
|
|
45
49
|
text-transform: capitalize;
|
|
46
50
|
}
|
|
47
51
|
|
|
@@ -51,25 +55,27 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
|
|
|
51
55
|
}
|
|
52
56
|
|
|
53
57
|
button {
|
|
54
|
-
|
|
58
|
+
/* fallback 도 테마 토큰으로 — 하드코딩 색은 다크에서 어긋난다 */
|
|
59
|
+
background-color: var(--secondary-color, var(--md-sys-color-secondary));
|
|
55
60
|
margin: 2px 2px 10px 2px;
|
|
56
61
|
height: var(--button-height, 28px);
|
|
57
|
-
color: var(--button-color,
|
|
62
|
+
color: var(--button-color, var(--md-sys-color-on-secondary));
|
|
58
63
|
font: var(--button-font);
|
|
59
|
-
border-radius: var(--button-radius, 5px);
|
|
64
|
+
border-radius: var(--button-radius, var(--md-sys-shape-corner-small, 5px));
|
|
60
65
|
border: var(--button-border, 1px solid transparent);
|
|
61
66
|
line-height: 1.5;
|
|
62
67
|
}
|
|
63
68
|
|
|
64
69
|
button:hover,
|
|
65
70
|
button:active {
|
|
66
|
-
background-color: var(--button-active-background-color,
|
|
71
|
+
background-color: var(--button-active-background-color, var(--md-sys-color-primary));
|
|
67
72
|
border: var(--button-active-border);
|
|
68
73
|
}
|
|
69
74
|
|
|
75
|
+
/* 비밀번호 규칙 안내문 — 본문보다 낮은 강조. 라이트/다크 모두 읽히도록 토큰 파생. */
|
|
70
76
|
.helper-text {
|
|
71
77
|
font-size: 12px;
|
|
72
|
-
color: var(--md-sys-color-)
|
|
78
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
73
79
|
margin-top: 4px;
|
|
74
80
|
display: block; /* 텍스트를 입력 필드 아래에 배치 */
|
|
75
81
|
line-height: 1.5; /* 텍스트 줄 간격 조절 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"change-password.js","sourceRoot":"","sources":["../../client/components/change-password.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AACpE,OAAO,EAAE,2BAA2B,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAA;AAG/F,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA1D;;
|
|
1
|
+
{"version":3,"file":"change-password.js","sourceRoot":"","sources":["../../client/components/change-password.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FormFieldStyles } from '@operato/styles'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\nimport { generatePasswordPatternHelp, generatePasswordPatternRegExp } from '../utils/password-rule.js'\n\n@customElement('change-password')\nexport class ChangePassword extends localize(i18next)(LitElement) {\n static styles = [\n FormFieldStyles,\n css`\n * {\n box-sizing: border-box;\n }\n\n *:focus {\n outline: none;\n }\n\n form {\n display: flex;\n flex-direction: column;\n }\n\n /*\n * 색·테두리·모서리·포커스·placeholder 색은 FormFieldStyles 가 담당한다.\n * 여기서는 이 화면의 치수만 둔다 — 같은 프로필 화면의 위쪽 인풋(profile-component)과\n * 같은 값을 써서 한 화면에 두 가지 인상이 생기지 않게 한다.\n */\n input {\n border-radius: var(--change-password-field-border-radius, var(--border-radius));\n margin: var(--change-password-field-margin, var(--spacing-small) 0);\n padding: var(--change-password-field-padding, 9px);\n font: var(--change-password-field-font, var(--auth-input-field-font));\n width: var(--change-password-field-width, var(--auth-input-field-width));\n }\n\n ::placeholder {\n /*\n * 크기를 줄이지 않는다. 이전에는 0.8rem 이라 위쪽 인풋의 값(16px)보다 작게 보여\n * 같은 화면에서 패스워드 칸만 다른 스타일처럼 느껴졌다.\n */\n text-transform: capitalize;\n }\n\n md-elevated-button {\n margin: var(--spacing-small) auto var(--spacing-medium) auto;\n text-transform: capitalize;\n }\n\n button {\n /* fallback 도 테마 토큰으로 — 하드코딩 색은 다크에서 어긋난다 */\n background-color: var(--secondary-color, var(--md-sys-color-secondary));\n margin: 2px 2px 10px 2px;\n height: var(--button-height, 28px);\n color: var(--button-color, var(--md-sys-color-on-secondary));\n font: var(--button-font);\n border-radius: var(--button-radius, var(--md-sys-shape-corner-small, 5px));\n border: var(--button-border, 1px solid transparent);\n line-height: 1.5;\n }\n\n button:hover,\n button:active {\n background-color: var(--button-active-background-color, var(--md-sys-color-primary));\n border: var(--button-active-border);\n }\n\n /* 비밀번호 규칙 안내문 — 본문보다 낮은 강조. 라이트/다크 모두 읽히도록 토큰 파생. */\n .helper-text {\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant);\n margin-top: 4px;\n display: block; /* 텍스트를 입력 필드 아래에 배치 */\n line-height: 1.5; /* 텍스트 줄 간격 조절 */\n }\n `\n ]\n\n @property({ type: Object }) passwordRule: {\n lowerCase?: boolean\n upperCase?: boolean\n digit?: boolean\n specialCharacter?: boolean\n allowRepeat?: boolean\n useTightPattern?: boolean\n useLoosePattern?: boolean\n tightCharacterLength?: number\n looseCharacterLength?: number\n } = {}\n\n @query('form') form!: HTMLFormElement\n\n private passwordPattern: string = ''\n private passwordHelp: string = ''\n\n render() {\n return html`\n <form>\n <div class=\"field\">\n <input type=\"password\" name=\"current_pass\" placeholder=${i18next.t('text.current password')} required />\n </div>\n <span id=\"password-helper\" class=\"helper-text\">${this.passwordHelp}</span>\n <div class=\"field\">\n <input\n type=\"password\"\n name=\"new_pass\"\n placeholder=${i18next.t('text.new password')}\n required\n pattern=${this.passwordPattern}\n aria-describedby=\"password-helper\"\n />\n </div>\n <div class=\"field\">\n <input type=\"password\" name=\"confirm_pass\" placeholder=${i18next.t('text.confirm password')} required />\n </div>\n\n <md-elevated-button @click=${this.submit.bind(this)}>${i18next.t('text.change password')}</md-elevated-button>\n </form>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('passwordRule')) {\n this.passwordPattern = generatePasswordPatternRegExp(this.passwordRule).source\n this.passwordHelp = generatePasswordPatternHelp(this.passwordRule)\n }\n }\n\n languageUpdated() {\n this.passwordPattern = generatePasswordPatternRegExp(this.passwordRule).source\n this.passwordHelp = generatePasswordPatternHelp(this.passwordRule)\n }\n\n async submit() {\n const formData = new FormData(this.form)\n let params = {}\n for (const [key, value] of formData.entries()) {\n if (!value) {\n const placeholder = (this.form.querySelector(`[name=${key}]`) as HTMLInputElement)?.placeholder\n return this.showToast(i18next.t('error.value is empty', { value: placeholder || key }))\n }\n params[key] = value\n }\n\n if (params['new_pass'] !== params['confirm_pass']) {\n return this.showToast(i18next.t('error.new-password-and-confirm-password-do-not-match'))\n }\n\n auth.changePassword(params)\n this.form.reset()\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n }\n}\n"]}
|
|
@@ -29,6 +29,8 @@ let DeleteUserPopup = class DeleteUserPopup extends localize(i18next)(LitElement
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
input {
|
|
32
|
+
background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
|
|
33
|
+
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
32
34
|
border: var(--change-password-field-border);
|
|
33
35
|
border-radius: var(--change-password-field-border-radius);
|
|
34
36
|
padding: var(--change-password-field-padding);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"delete-user-popup.js","sourceRoot":"","sources":["../../client/components/delete-user-popup.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AAG7D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACzD,WAAM,GAAG;QACd,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"delete-user-popup.js","sourceRoot":"","sources":["../../client/components/delete-user-popup.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,+CAA+C,CAAA;AAG7D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACzD,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;KACF,AA7DY,CA6DZ;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;;;;;;;;;;KAUpC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,MAAM,CAAC,CAAQ;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;QAExC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YACxC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAA;YAC7C,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;YAEF,IAAI,CAAC,OAAO,EAAE,CAAA;QAChB,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,EAAE,CAAA;YAEZ,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;;AA3GU,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA4G3B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { auth } from '@things-factory/auth-base/dist-client/auth.js'\n\n@customElement('delete-user-popup')\nexport class DeleteUserPopup extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n color: var(--popup-content-color);\n background-color: var(--popup-content-background-color);\n padding: var(--popup-content-padding);\n }\n\n * {\n box-sizing: border-box;\n }\n *:focus {\n outline: none;\n }\n\n label {\n font: bold 14px var(--theme-font);\n color: var(--md-sys-color-primary);\n }\n\n input {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n border: var(--change-password-field-border);\n border-radius: var(--change-password-field-border-radius);\n padding: var(--change-password-field-padding);\n\n font: var(--change-password-field-font);\n width: var(--change-password-field-width);\n }\n input:focus {\n border: 1px solid var(--focus-background-color);\n }\n\n div.field {\n padding-bottom: 10px;\n }\n\n ::placeholder {\n font-size: 0.8rem;\n text-transform: capitalize;\n }\n\n button {\n background-color: var(--status-danger-color, #d14946);\n margin: 2px 2px 10px 2px;\n height: var(--button-height, 28px);\n color: var(--button-color, #fff);\n font: var(--button-font);\n border-radius: var(--button-radius, 5px);\n border: var(--button-border, 1px solid transparent);\n line-height: 1.5;\n }\n button:hover,\n button:active {\n background-color: var(--button-active-background-color, #22a6a7);\n border: var(--button-active-border);\n }\n `\n ]\n\n render() {\n return html`\n <h1><ox-i18n msgid=\"label.delete account\"></ox-i18n></h1>\n <span><ox-i18n msgid=\"text.delete account warning message\"></ox-i18n></span>\n <form @submit=${e => this.submit(e)}>\n <div class=\"field\">\n <label for=\"email\"><ox-i18n msgid=\"label.email\"></ox-i18n></label>\n <input id=\"email\" type=\"email\" name=\"email\" autocapitalize=\"off\" required />\n <label for=\"password\"><ox-i18n msgid=\"label.password\"></ox-i18n></label>\n <input id=\"password\" type=\"password\" name=\"password\" required />\n </div>\n\n <button class=\"ui button\" type=\"submit\"><ox-i18n msgid=\"label.delete account\"></ox-i18n></button>\n </form>\n `\n }\n\n async submit(e: Event) {\n e.preventDefault()\n\n const form = e.target as HTMLFormElement\n\n var params = {}\n new FormData(form).forEach((value, key) => {\n params[key] = value\n })\n\n try {\n const message = await auth.deleteUser(params)\n notify({\n level: 'info',\n message\n })\n\n auth.signout()\n } catch (e: any) {\n form.reset()\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n}\n"]}
|
|
@@ -41,6 +41,8 @@ let DomainSwitch = class DomainSwitch extends LitElement {
|
|
|
41
41
|
}
|
|
42
42
|
span,
|
|
43
43
|
select {
|
|
44
|
+
background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
|
|
45
|
+
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
44
46
|
flex: 1;
|
|
45
47
|
color: var(--md-sys-color-on-primary-container, rgb(50 66 82));
|
|
46
48
|
font: bold 14px/20px var(--theme-font);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"domain-switch.js","sourceRoot":"","sources":["../../client/components/domain-switch.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;
|
|
1
|
+
{"version":3,"file":"domain-switch.js","sourceRoot":"","sources":["../../client/components/domain-switch.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAG1C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAmFG,aAAQ,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,CAAA;QAEG,aAAQ,GAAW,MAAM,CAAA;IA6BxE,CAAC;aAjHQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6EF;KACF,AAhFY,CAgFZ;IAOD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,CAAA;QAC3C,MAAM,MAAM,GAAQ,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,EAAE,CAAA;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAA;QAExC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,OAAO;UAC3D,OAAO,CAAC,MAAM,IAAI,CAAC;YACnB,CAAC,CAAC,IAAI,CAAA,UAAU,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,IAAI,UAAU;YAC/D,CAAC,CAAC,IAAI,CAAA;;yBAES,MAAM,CAAC,SAAS;0BACf,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,GAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;;kBAE3E,OAAO,CAAC,GAAG,CACX,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;qCACU,CAAC,CAAC,SAAS,cAAc,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC;mBACzF,CACF;;aAEJ;;KAER,CAAA;IACH,CAAC;;AA3B4C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;8CAA0B;AACzB;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;0CAAc;AAtF/C,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAkHxB","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { AppController } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('domain-switch')\nexport class DomainSwitch extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n max-width: 100%;\n background-color: var(--md-sys-color-primary-container, rgb(215 231 241));\n border-bottom: var(--border-dim-color);\n }\n\n :host * {\n vertical-align: middle;\n }\n\n div {\n flex: 1;\n display: flex;\n flex-direction: row;\n padding: var(--spacing-small);\n }\n\n md-icon {\n background-color: var(--md-sys-color-primary, rgb(46 121 190));\n margin-right: var(--spacing-small);\n padding: 2px;\n border-radius: 50%;\n font-size: var(--fontsize-large);\n color: var(--md-sys-color-on-primary, rgba(255,255,255,.9));\n }\n span,\n select {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n flex: 1;\n color: var(--md-sys-color-on-primary-container, rgb(50 66 82));\n font: bold 14px/20px var(--theme-font);\n }\n\n select {\n border: none;\n background-color: transparent;\n }\n\n select:focus {\n outline: 0;\n }\n :host([dark]) {\n background-color: rgba(0, 0, 0, 0.2);\n padding: 0 !important;\n border-bottom: none;\n }\n :host([dark]) md-icon {\n background-color: var(--secondary-text-color);\n margin: 1px 4px 0px 0px;\n padding: 1px 2px;\n border-radius: 50%;\n line-height: 19px;\n }\n :host([dark]) span,\n :host([dark]) select {\n color: var(--md-sys-color-on-primary);\n font: bold 13px/13px var(--theme-font);\n }\n :host([dark]) option {\n background-color: var(--primary-color, #585858);\n color: var(--md-sys-color-on-primary, #fff);\n }\n :host([dark]) span {\n line-height: 23px;\n }\n\n :host([rounded-corner]) {\n height: 30px;\n border-radius: 20px;\n border: var(--border-dim-color);\n }\n :host([rounded-corner]) div {\n padding: var(--spacing-small) var(--spacing-medium);\n }\n `\n ]\n\n private _appCtrl = new AppController(this)\n\n @property({ type: String, attribute: true }) attrname: string = 'name'\n @property({ type: String, attribute: true }) icon?: string\n\n render() {\n const domains = this._appCtrl.domains || []\n const domain: any = this._appCtrl.domain || {}\n const attrname = this.attrname || 'name'\n\n return html`\n <div>\n ${this.icon ? html`<md-icon>${this.icon}</md-icon>` : nothing}\n ${domains.length <= 1\n ? html` <span>${domains[0]?.[attrname] || domain.name}</span> `\n : html`\n <select\n .value=${domain.subdomain}\n @change=${e => (window.location.pathname = `/auth/checkin/${e.target.value}`)}\n >\n ${domains.map(\n d => html`\n <option .value=${d.subdomain} ?selected=${d.subdomain == domain.subdomain}>${d[attrname]}</option>\n `\n )}\n </select>\n `}\n </div>\n `\n }\n\n}\n"]}
|
|
@@ -13,6 +13,8 @@ let InviteCustomer = class InviteCustomer extends localize(i18next)(LitElement)
|
|
|
13
13
|
static { this.styles = [
|
|
14
14
|
css `
|
|
15
15
|
input {
|
|
16
|
+
background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
|
|
17
|
+
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
16
18
|
border: var(--border-dim-color);
|
|
17
19
|
border-radius: var(--border-radius);
|
|
18
20
|
margin: var(--input-margin);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"invite-customer.js","sourceRoot":"","sources":["../../client/components/invite-customer.ts"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGtD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA1D;;
|
|
1
|
+
{"version":3,"file":"invite-customer.js","sourceRoot":"","sources":["../../client/components/invite-customer.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('invite-customer')\nclass InviteCustomer extends localize(i18next)(LitElement) {\n static styles = [\n css`\n input {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\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 md-outlined-button {\n margin: var(--input-margin);\n }\n @media screen and (max-width: 480px) {\n div {\n display: grid;\n }\n }\n `\n ]\n\n @property({ type: Array }) customers: any[] = []\n\n @query('input#customer-name') customerNameInput!: HTMLInputElement\n\n render() {\n return html`\n <div>\n <input id=\"customer-name\" required />\n <md-outlined-button @click=${this.invite.bind(this)}>\n <md-icon slot=\"icon\">group_add</md-icon>\n ${String(i18next.t('label.invite customer'))}\n </md-outlined-button>\n </div>\n `\n }\n\n async invite() {\n try {\n if (!this.customerNameInput.value)\n throw new Error(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n\n if (this.customers.find(c => c.name?.toLowerCase() === this.customerNameInput.value.toLowerCase())) {\n throw new Error(\n i18next.t('error.x already exists in y', { x: this.customerNameInput.value, y: i18next.t('field.customer') })\n )\n }\n\n if (\n await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.partner`) }),\n confirmButton: { text: i18next.t('button.confirm') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n const customerDomainName = this.customerNameInput.value\n\n const response = await client.mutate({\n mutation: gql`\n mutation inviteCustomer($customerDomainName: String!) {\n inviteCustomer(customerDomainName: $customerDomainName)\n }\n `,\n variables: { customerDomainName },\n context: gqlContext()\n })\n\n if (!response.errors) {\n const answer = this.dispatchEvent(new CustomEvent('invitationCompleted'))\n\n if (answer) {\n await OxPrompt.open({\n type: 'success',\n title: i18next.t('text.completed'),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n }\n\n this.customerNameInput.value = ''\n }\n }\n } catch (e: any) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: 'message' in e ? e.message : e\n }\n })\n )\n }\n }\n}\n"]}
|
|
@@ -13,6 +13,8 @@ let InviteUser = class InviteUser extends localize(i18next)(LitElement) {
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
input {
|
|
16
|
+
background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
|
|
17
|
+
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
16
18
|
flex: 1;
|
|
17
19
|
|
|
18
20
|
border: var(--border-dim-color);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"invite-user.js","sourceRoot":"","sources":["../../client/components/invite-user.ts"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAA;AAE9B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGtD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC7C,WAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"invite-user.js","sourceRoot":"","sources":["../../client/components/invite-user.ts"],"names":[],"mappings":"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","sourcesContent":["import './user-role-editor.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('invite-user')\nclass InviteUser extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n display: grid;\n }\n\n input {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n flex: 1;\n\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 md-outlined-button {\n margin: var(--input-margin);\n text-transform: capitalize;\n }\n `\n\n @query('input[name=username]') userIdInput!: HTMLInputElement\n\n render() {\n return html`\n <input\n name=\"username\"\n type=\"text\"\n required\n autocapitalize=\"off\"\n placeholder=${String(i18next.t('text.user invitation prompt'))}\n pattern=\"^(?:[A-Za-z0-9]*|[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,})$\"\n />\n <md-outlined-button @click=${this.invite.bind(this)}>\n <md-icon slot=\"icon\">group_add</md-icon>${String(i18next.t('label.invite user'))}\n </md-outlined-button>\n `\n }\n\n async invite() {\n try {\n if (!this.userIdInput.checkValidity()) {\n throw new Error(i18next.t('error.not valid pattern of type', { type: 'user-id or email' }))\n }\n\n if (\n await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('text.do_you_want_to_invite_x', { x: i18next.t(`label.user`) }),\n confirmButton: { text: i18next.t('button.confirm') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n await this.inviteUser(this.userIdInput.value)\n\n this.dispatchEvent(new CustomEvent('invitationCompleted'))\n }\n } catch (e: any) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n level: 'error',\n message: 'message' in e ? e.message : e\n }\n })\n )\n }\n }\n\n async inviteUser(username) {\n const response = await client.mutate({\n mutation: gql`\n mutation inviteUser($username: String!) {\n inviteUser(username: $username)\n }\n `,\n variables: { username },\n context: gqlContext()\n })\n\n if (!response.errors) {\n await OxPrompt.open({\n title: i18next.t('text.completed'),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n this.userIdInput.value = ''\n }\n }\n}\n"]}
|
|
@@ -22,6 +22,8 @@ let OwnershipTransferPopup = class OwnershipTransferPopup extends localize(i18ne
|
|
|
22
22
|
flex: 1;
|
|
23
23
|
}
|
|
24
24
|
input {
|
|
25
|
+
background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
|
|
26
|
+
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
25
27
|
border: var(--border-dim-color);
|
|
26
28
|
border-radius: var(--border-radius);
|
|
27
29
|
margin: var(--input-margin);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ownership-transfer-popup.js","sourceRoot":"","sources":["../../client/components/ownership-transfer-popup.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGtD,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACzD,WAAM,GAAG;QACd,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ownership-transfer-popup.js","sourceRoot":"","sources":["../../client/components/ownership-transfer-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { OxPrompt } from '@operato/popup/ox-prompt.js'\n\n@customElement('ownership-transfer-popup')\nclass OwnershipTransferPopup extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-background);\n padding: var(--spacing-large);\n overflow: auto;\n }\n .container {\n display: flex;\n flex-direction: column;\n flex: 1;\n }\n input {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\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 .input-container {\n margin: auto;\n display: flex;\n }\n .input-container md-elevated-button {\n margin: auto 0px auto var(--spacing-large);\n }\n `\n ]\n\n @property({ type: Object }) user: any\n\n @query('input[name=email]') emailInput!: HTMLInputElement\n\n render() {\n return html`\n <div class=\"container\">\n <div>${i18next.t('text.please enter the email of the user you want to transfer owner')}</div>\n <div class=\"input-container\">\n <input name=\"email\" />\n <md-elevated-button @click=${this.transferOwnership}>${i18next.t('button.confirm')}</md-elevated-button>\n </div>\n </div>\n `\n }\n\n async transferOwnership() {\n if (!this.doubleCheckEmail()) {\n this.showToast(i18next.t('text.email is not matched'))\n\n return\n }\n\n if (\n await OxPrompt.open({\n title: i18next.t('text.are_you_sure'),\n text: i18next.t('text.are_you_sure_to_transfer_owner'),\n confirmButton: { text: i18next.t('button.confirm') },\n cancelButton: { text: i18next.t('button.cancel') }\n })\n ) {\n const response = await client.mutate({\n mutation: gql`\n mutation transferOwner($username: String!) {\n transferOwner(username: $username)\n }\n `,\n variables: { username: this.user.username || this.user.email },\n context: gqlContext()\n })\n\n if (!response.errors?.length) {\n await OxPrompt.open({\n type: 'success',\n title: i18next.t('text.completed'),\n text: i18next.t('text.owner_transfer_completed'),\n confirmButton: { text: i18next.t('button.confirm') }\n })\n\n history.back()\n\n this.dispatchEvent(new CustomEvent('ownershipTransferred', { bubbles: true, composed: true }))\n }\n } else {\n history.back()\n }\n }\n\n doubleCheckEmail() {\n return this.emailInput.value === this.user.email\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}
|
|
@@ -11,6 +11,7 @@ import { startRegistration } from '@simplewebauthn/browser';
|
|
|
11
11
|
import { client } from '@operato/graphql';
|
|
12
12
|
import { i18next, localize } from '@operato/i18n';
|
|
13
13
|
import { notify, openPopup } from '@operato/layout';
|
|
14
|
+
import { FormFieldStyles } from '@operato/styles';
|
|
14
15
|
import { auth, getLanguages } from '@things-factory/auth-base/dist-client';
|
|
15
16
|
const isAvailableWebauthn = 'PublicKeyCredential' in window;
|
|
16
17
|
let ProfileComponent = class ProfileComponent extends localize(i18next)(LitElement) {
|
|
@@ -20,6 +21,7 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
|
|
|
20
21
|
this.passwordRule = {};
|
|
21
22
|
}
|
|
22
23
|
static { this.styles = [
|
|
24
|
+
FormFieldStyles,
|
|
23
25
|
css `
|
|
24
26
|
:host {
|
|
25
27
|
display: block;
|
|
@@ -41,17 +43,14 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
|
|
|
41
43
|
outline: none;
|
|
42
44
|
}
|
|
43
45
|
|
|
46
|
+
/* 색·테두리·모서리·포커스·placeholder 는 FormFieldStyles 가 담당하고, 여기서는 치수만 둔다 */
|
|
44
47
|
input {
|
|
45
48
|
margin: var(--spacing-small) 0;
|
|
46
|
-
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
47
49
|
padding: 9px;
|
|
48
50
|
border-radius: var(--border-radius);
|
|
49
51
|
font: var(--auth-input-field-font);
|
|
50
52
|
width: var(--auth-input-field-width);
|
|
51
53
|
}
|
|
52
|
-
input:focus {
|
|
53
|
-
border: 1px solid var(--focus-background-color);
|
|
54
|
-
}
|
|
55
54
|
|
|
56
55
|
.user {
|
|
57
56
|
background: url(/assets/images/icon-profile.png) center top no-repeat;
|
|
@@ -64,7 +63,8 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
|
|
|
64
63
|
|
|
65
64
|
hr {
|
|
66
65
|
width: 100%;
|
|
67
|
-
|
|
66
|
+
/* rgba(0,0,0,.1) 은 다크 배경에서 보이지 않는다 */
|
|
67
|
+
border: dotted 1px var(--md-sys-color-outline-variant);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.wrap * {
|
|
@@ -82,12 +82,26 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
|
|
|
82
82
|
grid-column: unset;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
+
/*
|
|
86
|
+
* 언어 select 는 ox-i18n-selector 의 shadow root 안에 있어 위 input 규칙이 닿지 않는다.
|
|
87
|
+
* 높이가 어긋나지 않도록 인풋과 **같은 값**을 토큰으로 넘긴다(padding 9px, 16px 글자).
|
|
88
|
+
*/
|
|
85
89
|
ox-i18n-selector {
|
|
86
90
|
--i18n-selector-field-width: var(--auth-input-field-width);
|
|
87
|
-
|
|
88
|
-
--i18n-selector-field-
|
|
91
|
+
/* 여백은 호스트에만 준다 — 내부에도 주면 두 번 더해져 인풋보다 벌어진다 */
|
|
92
|
+
--i18n-selector-field-margin: 0;
|
|
93
|
+
--i18n-selector-field-padding: 9px;
|
|
89
94
|
--i18n-selector-field-border-radius: var(--border-radius);
|
|
90
|
-
|
|
95
|
+
--i18n-selector-field-font: var(--auth-input-field-font);
|
|
96
|
+
/* ox-i18n-selector 가 font 뒤에 font-size(기본 15px)를 다시 선언하므로 크기도 넘겨야 한다 */
|
|
97
|
+
--i18n-selector-field-font-size: 16px;
|
|
98
|
+
--i18n-selector-field-border: var(--input-field-border, 1px solid var(--md-sys-color-outline));
|
|
99
|
+
--i18n-selector-field-background-color: var(
|
|
100
|
+
--input-field-background,
|
|
101
|
+
var(--md-sys-color-surface-container-highest)
|
|
102
|
+
);
|
|
103
|
+
--i18n-selector-field-color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
104
|
+
margin: var(--spacing-small) 0;
|
|
91
105
|
}
|
|
92
106
|
|
|
93
107
|
md-text-button {
|
|
@@ -190,10 +204,10 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
|
|
|
190
204
|
|
|
191
205
|
${isAvailableWebauthn
|
|
192
206
|
? html `
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
207
|
+
<md-text-button @click=${() => this.registerUser()}
|
|
208
|
+
>${i18next.t('button.security-key registration')}</md-text-button
|
|
209
|
+
>
|
|
210
|
+
`
|
|
197
211
|
: nothing}
|
|
198
212
|
|
|
199
213
|
<footer>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-component.js","sourceRoot":"","sources":["../../client/components/profile-component.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport './change-password.js'\nimport './delete-user-popup.js'\nimport './my-login-history.js'\n\nimport { gql } from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { startRegistration } from '@simplewebauthn/browser'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { auth, getLanguages } from '@things-factory/auth-base/dist-client'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n@customElement('profile-component')\nexport class ProfileComponent extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n background-color: var(--md-sys-color-background);\n padding: 15px 0;\n }\n .wrap {\n max-width: var(--profile-wrap-max-width, 400px);\n margin: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n * {\n box-sizing: border-box;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n margin: var(--spacing-small) 0;\n border: 1px solid rgba(0, 0, 0, 0.2);\n padding: 9px;\n border-radius: var(--border-radius);\n font: var(--auth-input-field-font);\n width: var(--auth-input-field-width);\n }\n input:focus {\n border: 1px solid var(--focus-background-color);\n }\n\n .user {\n background: url(/assets/images/icon-profile.png) center top no-repeat;\n margin: var(--profile-icon-margin);\n padding: 180px 20px 20px 20px;\n color: var(--md-sys-color-secondary);\n font: var(--header-bar-title);\n text-align: center;\n }\n\n hr {\n width: 100%;\n border: dotted 1px rgba(0, 0, 0, 0.1);\n }\n\n .wrap * {\n grid-column: span 2;\n }\n\n label {\n font: bold 14px var(--theme-font);\n color: var(--md-sys-color-primary);\n text-transform: capitalize;\n grid-column: 1;\n }\n\n .wrap *.inline {\n grid-column: unset;\n }\n\n ox-i18n-selector {\n --i18n-selector-field-width: var(--auth-input-field-width);\n --i18n-selector-field-margin: var(--change-password-field-margin);\n --i18n-selector-field-padding: var(--spacing-medium);\n --i18n-selector-field-border-radius: var(--border-radius);\n margin: var(--change-password-field-margin);\n }\n\n md-text-button {\n text-transform: capitalize;\n }\n\n footer {\n padding: 20px;\n text-align: center;\n }\n\n footer p {\n font-size: 14px;\n margin-bottom: 5px;\n color: var(--md-sys-color-on-background);\n }\n\n footer a {\n color: var(--md-sys-color-primary);\n text-decoration: none;\n font-weight: bold;\n }\n `\n ]\n\n @property({ type: String }) username?: string\n @property({ type: String }) email?: string\n @property({ type: String }) name?: string\n\n @state() languages: { code: string; display: string }[] = []\n @state() passwordRule: {\n lowerCase?: boolean\n upperCase?: boolean\n digit?: boolean\n specialCharacter?: boolean\n allowRepeat?: boolean\n useTightPattern?: boolean\n useLoosePattern?: boolean\n tightCharacterLength?: number\n looseCharacterLength?: number\n } = {}\n\n @query('#username') usernameEl!: HTMLInputElement\n @query('#name') nameEl!: HTMLInputElement\n @query('#email') emailEl!: HTMLInputElement\n @query('#locale') localeEl!: HTMLInputElement\n\n async connectedCallback(): Promise<void> {\n super.connectedCallback()\n\n const response = await client.query({\n query: gql`\n query {\n passwordRule {\n lowerCase\n upperCase\n digit\n specialCharacter\n allowRepeat\n useTightPattern\n useLoosePattern\n tightCharacterLength\n looseCharacterLength\n }\n }\n `\n })\n\n this.passwordRule = response.data\n }\n\n async firstUpdated() {\n auth.on('profile', ({ credential }) => {\n this.setCredential(credential)\n })\n\n this.setCredential(auth.credential)\n\n this.languages = await getLanguages()\n }\n\n setCredential(credential) {\n if (credential) {\n this.username = credential.username\n this.name = credential.name\n this.email = credential.email\n } else {\n this.username = ''\n this.name = ''\n this.email = ''\n }\n }\n\n render() {\n return html`\n <div class=\"wrap\">\n <div class=\"user\">${this.username || ''}</div>\n\n <label for=\"username\"><ox-i18n slot=\"title\" msgid=\"label.user-id\"></ox-i18n></label>\n <input id=\"username\" @change=${e => this.onUsernameChanged(e.target.value)} .value=${this.username || ''} />\n\n <hr />\n\n <label for=\"name\"><ox-i18n slot=\"title\" msgid=\"label.name\"></ox-i18n></label>\n <input id=\"name\" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name || ''} />\n\n <hr />\n\n <label for=\"email\"><ox-i18n slot=\"title\" msgid=\"label.email\"></ox-i18n></label>\n <input id=\"email\" type=\"email\" @change=${e => this.onEmailChanged(e.target.value)} .value=${this.email || ''} />\n\n <hr />\n\n <label for=\"locale\"><ox-i18n slot=\"title\" msgid=\"label.language\"></ox-i18n></label>\n <ox-i18n-selector\n id=\"locale\"\n @change=${e => this.onLocaleChanged(e.detail)}\n value=${i18next.language || 'en-US'}\n .languages=${this.languages}\n ></ox-i18n-selector>\n\n <hr />\n\n <label for=\"change-password\">\n <ox-i18n msgid=\"label.password\"></ox-i18n>\n </label>\n\n <change-password id=\"change-password\" .passwordRule=${this.passwordRule}></change-password>\n\n ${isAvailableWebauthn\n ? html`\n <md-text-button @click=${() => this.registerUser()}\n >${i18next.t('button.security-key registration')}</md-text-button\n >\n `\n : nothing}\n\n <footer>\n <p>\n ${i18next.t('text.click login history')}\n <a href=\"javascript:void(0);\" @click=${this.openLoginHistory.bind(this)}\n >${i18next.t('label.login_history')}</a\n >\n </p>\n </footer>\n </div>\n `\n }\n\n async onUsernameChanged(username) {\n if (!username) return\n\n var oldUsername = this.username\n\n try {\n const message = await auth.updateProfile({\n username\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.usernameEl.value = oldUsername || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onNameChanged(name) {\n if (!name) return\n\n var oldName = this.name\n\n try {\n const message = await auth.updateProfile({\n name\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.nameEl.value = oldName || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onEmailChanged(email) {\n if (!email) return\n\n var oldEmail = this.email\n\n try {\n const message = await auth.updateProfile({\n email\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.emailEl.value = oldEmail || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onLocaleChanged(value) {\n if (!value) return\n\n var oldLocale = i18next.language\n\n try {\n const message = await auth.updateProfile({\n locale: value\n })\n\n i18next.changeLanguage(value)\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.localeEl.value = oldLocale\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n openLoginHistory() {\n openPopup(html` <my-login-history></my-login-history> `, {\n title: i18next.t('label.login_history')\n })\n }\n\n deleteUser() {\n openPopup(html` <delete-user-popup></delete-user-popup> `, {\n title: i18next.t('label.delete account')\n })\n }\n\n async registerUser() {\n try {\n const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())\n const attResp = await startRegistration(options)\n const verification = await fetch('/auth/verify-registration', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(attResp)\n }).then(res => res.json())\n\n if (verification.verified) {\n notify({\n level: 'info',\n message: i18next.t('text.user credential registered successfully')\n })\n } else {\n console.error(await verification.text())\n\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration not allowed')\n })\n }\n } catch (error) {\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration failed')\n })\n }\n }\n\n get applicationMeta() {\n var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n return {\n icon: iconLink?.href || '',\n title: titleMeta?.content || 'Things Factory',\n description: descriptionMeta?.content || 'Reimagining Software'\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"profile-component.js","sourceRoot":"","sources":["../../client/components/profile-component.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AACjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AAE1E,MAAM,mBAAmB,GAAG,qBAAqB,IAAI,MAAM,CAAA;AAEpD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA5D;;QAgHI,cAAS,GAAwC,EAAE,CAAA;QACnD,iBAAY,GAUjB,EAAE,CAAA;IAyQR,CAAC;aAnYQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsGF;KACF,AAzGY,CAyGZ;IAwBD,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;OAcT;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAA;IACnC,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;YACpC,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;QAChC,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QAEnC,IAAI,CAAC,SAAS,GAAG,MAAM,YAAY,EAAE,CAAA;IACvC,CAAC;IAED,aAAa,CAAC,UAAU;QACtB,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAA;YACnC,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAA;YAC3B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAA;QAC/B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAA;YAClB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAA;YACd,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QACjB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,QAAQ,IAAI,EAAE;;;uCAGR,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,QAAQ,IAAI,EAAE;;;;;mCAK7E,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,IAAI,IAAI,EAAE;;;;;iDAKnD,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,IAAI,EAAE;;;;;;;oBAOhG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC;kBACrC,OAAO,CAAC,QAAQ,IAAI,OAAO;uBACtB,IAAI,CAAC,SAAS;;;;;;;;;8DASyB,IAAI,CAAC,YAAY;;UAGrE,mBAAmB;YACjB,CAAC,CAAC,IAAI,CAAA;yCACuB,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;qBAC7C,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC;;eAEnD;YACH,CAAC,CAAC,OACN;;;;cAIM,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;mDACA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;KAK5C,CAAA;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,QAAQ;QAC9B,IAAI,CAAC,QAAQ;YAAE,OAAM;QAErB,IAAI,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAA;QAE/B,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC;gBACvC,QAAQ;aACT,CAAC,CAAA;YAEF,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,WAAW,IAAI,EAAE,CAAA;YAEzC,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,IAAI;QACtB,IAAI,CAAC,IAAI;YAAE,OAAM;QAEjB,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA;QAEvB,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC;gBACvC,IAAI;aACL,CAAC,CAAA;YAEF,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,OAAO,IAAI,EAAE,CAAA;YAEjC,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,KAAK,CAAC,cAAc,CAAC,KAAK;QACxB,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAA;QAEzB,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC;gBACvC,KAAK;aACN,CAAC,CAAA;YAEF,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,QAAQ,IAAI,EAAE,CAAA;YAEnC,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,KAAK;QACzB,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,IAAI,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAA;QAEhC,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC;gBACvC,MAAM,EAAE,KAAK;aACd,CAAC,CAAA;YAEF,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;YAE7B,MAAM,CAAC;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO;aACR,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,CAAM,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAA;YAE/B,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACxC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,SAAS,CAAC,IAAI,CAAA,yCAAyC,EAAE;YACvD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;SACxC,CAAC,CAAA;IACJ,CAAC;IAED,UAAU;QACR,SAAS,CAAC,IAAI,CAAA,2CAA2C,EAAE;YACzD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;SACzC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC;YACH,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,mCAAmC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAA;YACxF,MAAM,OAAO,GAAG,MAAM,iBAAiB,CAAC,OAAO,CAAC,CAAA;YAChD,MAAM,YAAY,GAAG,MAAM,KAAK,CAAC,2BAA2B,EAAE;gBAC5D,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE;oBACP,cAAc,EAAE,kBAAkB;iBACnC;gBACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;aAC9B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAA;YAE1B,IAAI,YAAY,CAAC,QAAQ,EAAE,CAAC;gBAC1B,MAAM,CAAC;oBACL,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,8CAA8C,CAAC;iBACnE,CAAC,CAAA;YACJ,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,KAAK,CAAC,MAAM,YAAY,CAAC,IAAI,EAAE,CAAC,CAAA;gBAExC,MAAM,CAAC;oBACL,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,iDAAiD,CAAC;iBACtE,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,CAAC;gBACL,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,4CAA4C,CAAC;aACjE,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;QAC7F,IAAI,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;QAC/F,IAAI,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;QAE5G,OAAO;YACL,IAAI,EAAE,QAAQ,EAAE,IAAI,IAAI,EAAE;YAC1B,KAAK,EAAE,SAAS,EAAE,OAAO,IAAI,gBAAgB;YAC7C,WAAW,EAAE,eAAe,EAAE,OAAO,IAAI,sBAAsB;SAChE,CAAA;IACH,CAAC;;AAvR2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8CAAc;AAEhC;IAAR,KAAK,EAAE;;mDAAoD;AACnD;IAAR,KAAK,EAAE;;sDAUF;AAEc;IAAnB,KAAK,CAAC,WAAW,CAAC;8BAAc,gBAAgB;oDAAA;AACjC;IAAf,KAAK,CAAC,OAAO,CAAC;8BAAU,gBAAgB;gDAAA;AACxB;IAAhB,KAAK,CAAC,QAAQ,CAAC;8BAAW,gBAAgB;iDAAA;AACzB;IAAjB,KAAK,CAAC,SAAS,CAAC;8BAAY,gBAAgB;kDAAA;AAhIlC,gBAAgB;IAD5B,aAAa,CAAC,mBAAmB,CAAC;GACtB,gBAAgB,CAoY5B","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport './change-password.js'\nimport './delete-user-popup.js'\nimport './my-login-history.js'\n\nimport { gql } from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { startRegistration } from '@simplewebauthn/browser'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { FormFieldStyles } from '@operato/styles'\nimport { auth, getLanguages } from '@things-factory/auth-base/dist-client'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n@customElement('profile-component')\nexport class ProfileComponent extends localize(i18next)(LitElement) {\n static styles = [\n FormFieldStyles,\n css`\n :host {\n display: block;\n background-color: var(--md-sys-color-background);\n padding: 15px 0;\n }\n .wrap {\n max-width: var(--profile-wrap-max-width, 400px);\n margin: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n * {\n box-sizing: border-box;\n }\n\n *:focus {\n outline: none;\n }\n\n /* 색·테두리·모서리·포커스·placeholder 는 FormFieldStyles 가 담당하고, 여기서는 치수만 둔다 */\n input {\n margin: var(--spacing-small) 0;\n padding: 9px;\n border-radius: var(--border-radius);\n font: var(--auth-input-field-font);\n width: var(--auth-input-field-width);\n }\n\n .user {\n background: url(/assets/images/icon-profile.png) center top no-repeat;\n margin: var(--profile-icon-margin);\n padding: 180px 20px 20px 20px;\n color: var(--md-sys-color-secondary);\n font: var(--header-bar-title);\n text-align: center;\n }\n\n hr {\n width: 100%;\n /* rgba(0,0,0,.1) 은 다크 배경에서 보이지 않는다 */\n border: dotted 1px var(--md-sys-color-outline-variant);\n }\n\n .wrap * {\n grid-column: span 2;\n }\n\n label {\n font: bold 14px var(--theme-font);\n color: var(--md-sys-color-primary);\n text-transform: capitalize;\n grid-column: 1;\n }\n\n .wrap *.inline {\n grid-column: unset;\n }\n\n /*\n * 언어 select 는 ox-i18n-selector 의 shadow root 안에 있어 위 input 규칙이 닿지 않는다.\n * 높이가 어긋나지 않도록 인풋과 **같은 값**을 토큰으로 넘긴다(padding 9px, 16px 글자).\n */\n ox-i18n-selector {\n --i18n-selector-field-width: var(--auth-input-field-width);\n /* 여백은 호스트에만 준다 — 내부에도 주면 두 번 더해져 인풋보다 벌어진다 */\n --i18n-selector-field-margin: 0;\n --i18n-selector-field-padding: 9px;\n --i18n-selector-field-border-radius: var(--border-radius);\n --i18n-selector-field-font: var(--auth-input-field-font);\n /* ox-i18n-selector 가 font 뒤에 font-size(기본 15px)를 다시 선언하므로 크기도 넘겨야 한다 */\n --i18n-selector-field-font-size: 16px;\n --i18n-selector-field-border: var(--input-field-border, 1px solid var(--md-sys-color-outline));\n --i18n-selector-field-background-color: var(\n --input-field-background,\n var(--md-sys-color-surface-container-highest)\n );\n --i18n-selector-field-color: var(--input-field-color, var(--md-sys-color-on-surface));\n margin: var(--spacing-small) 0;\n }\n\n md-text-button {\n text-transform: capitalize;\n }\n\n footer {\n padding: 20px;\n text-align: center;\n }\n\n footer p {\n font-size: 14px;\n margin-bottom: 5px;\n color: var(--md-sys-color-on-background);\n }\n\n footer a {\n color: var(--md-sys-color-primary);\n text-decoration: none;\n font-weight: bold;\n }\n `\n ]\n\n @property({ type: String }) username?: string\n @property({ type: String }) email?: string\n @property({ type: String }) name?: string\n\n @state() languages: { code: string; display: string }[] = []\n @state() passwordRule: {\n lowerCase?: boolean\n upperCase?: boolean\n digit?: boolean\n specialCharacter?: boolean\n allowRepeat?: boolean\n useTightPattern?: boolean\n useLoosePattern?: boolean\n tightCharacterLength?: number\n looseCharacterLength?: number\n } = {}\n\n @query('#username') usernameEl!: HTMLInputElement\n @query('#name') nameEl!: HTMLInputElement\n @query('#email') emailEl!: HTMLInputElement\n @query('#locale') localeEl!: HTMLInputElement\n\n async connectedCallback(): Promise<void> {\n super.connectedCallback()\n\n const response = await client.query({\n query: gql`\n query {\n passwordRule {\n lowerCase\n upperCase\n digit\n specialCharacter\n allowRepeat\n useTightPattern\n useLoosePattern\n tightCharacterLength\n looseCharacterLength\n }\n }\n `\n })\n\n this.passwordRule = response.data\n }\n\n async firstUpdated() {\n auth.on('profile', ({ credential }) => {\n this.setCredential(credential)\n })\n\n this.setCredential(auth.credential)\n\n this.languages = await getLanguages()\n }\n\n setCredential(credential) {\n if (credential) {\n this.username = credential.username\n this.name = credential.name\n this.email = credential.email\n } else {\n this.username = ''\n this.name = ''\n this.email = ''\n }\n }\n\n render() {\n return html`\n <div class=\"wrap\">\n <div class=\"user\">${this.username || ''}</div>\n\n <label for=\"username\"><ox-i18n slot=\"title\" msgid=\"label.user-id\"></ox-i18n></label>\n <input id=\"username\" @change=${e => this.onUsernameChanged(e.target.value)} .value=${this.username || ''} />\n\n <hr />\n\n <label for=\"name\"><ox-i18n slot=\"title\" msgid=\"label.name\"></ox-i18n></label>\n <input id=\"name\" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name || ''} />\n\n <hr />\n\n <label for=\"email\"><ox-i18n slot=\"title\" msgid=\"label.email\"></ox-i18n></label>\n <input id=\"email\" type=\"email\" @change=${e => this.onEmailChanged(e.target.value)} .value=${this.email || ''} />\n\n <hr />\n\n <label for=\"locale\"><ox-i18n slot=\"title\" msgid=\"label.language\"></ox-i18n></label>\n <ox-i18n-selector\n id=\"locale\"\n @change=${e => this.onLocaleChanged(e.detail)}\n value=${i18next.language || 'en-US'}\n .languages=${this.languages}\n ></ox-i18n-selector>\n\n <hr />\n\n <label for=\"change-password\">\n <ox-i18n msgid=\"label.password\"></ox-i18n>\n </label>\n\n <change-password id=\"change-password\" .passwordRule=${this.passwordRule}></change-password>\n\n ${\n isAvailableWebauthn\n ? html`\n <md-text-button @click=${() => this.registerUser()}\n >${i18next.t('button.security-key registration')}</md-text-button\n >\n `\n : nothing\n }\n\n <footer>\n <p>\n ${i18next.t('text.click login history')}\n <a href=\"javascript:void(0);\" @click=${this.openLoginHistory.bind(this)}\n >${i18next.t('label.login_history')}</a\n >\n </p>\n </footer>\n </div>\n `\n }\n\n async onUsernameChanged(username) {\n if (!username) return\n\n var oldUsername = this.username\n\n try {\n const message = await auth.updateProfile({\n username\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.usernameEl.value = oldUsername || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onNameChanged(name) {\n if (!name) return\n\n var oldName = this.name\n\n try {\n const message = await auth.updateProfile({\n name\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.nameEl.value = oldName || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onEmailChanged(email) {\n if (!email) return\n\n var oldEmail = this.email\n\n try {\n const message = await auth.updateProfile({\n email\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.emailEl.value = oldEmail || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onLocaleChanged(value) {\n if (!value) return\n\n var oldLocale = i18next.language\n\n try {\n const message = await auth.updateProfile({\n locale: value\n })\n\n i18next.changeLanguage(value)\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.localeEl.value = oldLocale\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n openLoginHistory() {\n openPopup(html` <my-login-history></my-login-history> `, {\n title: i18next.t('label.login_history')\n })\n }\n\n deleteUser() {\n openPopup(html` <delete-user-popup></delete-user-popup> `, {\n title: i18next.t('label.delete account')\n })\n }\n\n async registerUser() {\n try {\n const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())\n const attResp = await startRegistration(options)\n const verification = await fetch('/auth/verify-registration', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(attResp)\n }).then(res => res.json())\n\n if (verification.verified) {\n notify({\n level: 'info',\n message: i18next.t('text.user credential registered successfully')\n })\n } else {\n console.error(await verification.text())\n\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration not allowed')\n })\n }\n } catch (error) {\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration failed')\n })\n }\n }\n\n get applicationMeta() {\n var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n return {\n icon: iconLink?.href || '',\n title: titleMeta?.content || 'Things Factory',\n description: descriptionMeta?.content || 'Reimagining Software'\n }\n }\n}\n"]}
|
|
@@ -18,6 +18,8 @@ let RoleEditForm = class RoleEditForm extends localize(i18next)(LitElement) {
|
|
|
18
18
|
padding-bottom: var(--spacing-medium);
|
|
19
19
|
}
|
|
20
20
|
input {
|
|
21
|
+
background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
|
|
22
|
+
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
21
23
|
border: var(--border-dim-color);
|
|
22
24
|
border-radius: var(--border-radius);
|
|
23
25
|
margin: var(--input-margin);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"role-edit-form.js","sourceRoot":"","sources":["../../client/components/role-edit-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGjD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC/C,WAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"role-edit-form.js","sourceRoot":"","sources":["../../client/components/role-edit-form.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGjD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC/C,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoClB,AApCY,CAoCZ;IAGD,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,CAAA;QAEvD,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;wCAI/B,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;;;;gDAOtC,IAAI,CAAC,WAAW,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;KAIhG,CAAA;IACH,CAAC;IAKD,OAAO;QACL,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAA;QAE/C,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAA;QAC9F,CAAC;QAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;IAC9B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;SACvB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;IACrG,CAAC;;AAhD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CAAU;AAwBV;IAA1B,KAAK,CAAC,kBAAkB,CAAC;8BAAa,gBAAgB;+CAAA;AACrB;IAAjC,KAAK,CAAC,yBAAyB,CAAC;8BAAoB,gBAAgB;sDAAA;AA/DjE,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAuFjB","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\n\n@customElement('role-edit-form')\nclass RoleEditForm extends localize(i18next)(LitElement) {\n static styles = css`\n [field-2column] {\n border-radius: var(--border-radius);\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 5px 15px;\n clear: both;\n max-width: var(--input-container-max-width);\n }\n [field] {\n display: flex;\n flex-direction: column;\n padding-bottom: var(--spacing-medium);\n }\n input {\n background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n color: var(--input-field-color, var(--md-sys-color-on-surface));\n border: var(--border-dim-color);\n border-radius: var(--border-radius);\n margin: var(--input-margin);\n padding: var(--input-padding);\n min-width: 250px;\n font: var(--input-font);\n }\n label {\n display: flex;\n flex-direction: column;\n font: var(--label-font);\n color: var(--md-sys-color-on-primary);\n text-transform: var(--label-text-transform);\n }\n @media screen and (max-width: 480px) {\n [field] {\n grid-column: span 2;\n }\n }\n `\n @property({ type: Object }) role: any\n\n render() {\n const role = this.role || { name: '', description: '' }\n\n return html`\n <form field-2column @input=\"${this.dispatchRoleChanged.bind(this)}\">\n <div field>\n <label\n >role name\n <input name=\"name\" value=\"${role.name}\" @click=\"${e => e.stopPropagation()}\" />\n </label>\n </div>\n\n <div field>\n <label\n >role description\n <input name=\"description\" .value=\"${role.description}\" @click=\"${e => e.stopPropagation()}\" />\n </label>\n </div>\n </form>\n `\n }\n\n @query('input[name=name]') nameInput!: HTMLInputElement\n @query('input[name=description]') descriptionInput!: HTMLInputElement\n\n getRole() {\n const name = this.nameInput.value\n const description = this.descriptionInput.value\n\n if (!name) {\n return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }))\n }\n\n return { name, description }\n }\n\n dispatchRoleChanged() {\n this.dispatchEvent(\n new CustomEvent('roleChanged', {\n detail: this.getRole()\n })\n )\n }\n\n showToast(message) {\n document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }))\n }\n}\n"]}
|
|
@@ -50,6 +50,8 @@ let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
input {
|
|
53
|
+
background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
|
|
54
|
+
color: var(--input-field-color, var(--md-sys-color-on-surface));
|
|
53
55
|
border: var(--border-dim-color);
|
|
54
56
|
border-radius: var(--border-radius);
|
|
55
57
|
margin: var(--input-margin);
|