@things-factory/auth-ui 8.0.64 → 8.0.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/client/components/profile-component.ts +54 -0
  2. package/dist-client/components/profile-component.d.ts +5 -0
  3. package/dist-client/components/profile-component.js +57 -0
  4. package/dist-client/components/profile-component.js.map +1 -1
  5. package/dist-client/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +3 -3
package/client/components/profile-component.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import '@operato/i18n/ox-i18n.js'
2
2
  import '@operato/i18n/ox-i18n-selector.js'
3
+ import '@operato/input/ox-input-signature.js'
3
4
  import './change-password'
4
5
  import './delete-user-popup'
5
6
  import './my-login-history'
@@ -92,6 +93,12 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
92
93
  text-transform: capitalize;
93
94
  }
94
95
 
96
+ ox-input-signature {
97
+ border: 1px solid rgba(0, 0, 0, 0.2);
98
+ border-radius: var(--border-radius);
99
+ margin-bottom: var(--spacing-medium);
100
+ }
101
+
95
102
  footer {
96
103
  padding: 20px;
97
104
  text-align: center;
@@ -114,6 +121,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
114
121
  @property({ type: String }) username?: string
115
122
  @property({ type: String }) email?: string
116
123
  @property({ type: String }) name?: string
124
+ @property({ type: String }) signature?: string
117
125
 
118
126
  @state() languages: { code: string; display: string }[] = []
119
127
  @state() passwordRule: {
@@ -132,6 +140,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
132
140
  @query('#name') nameEl!: HTMLInputElement
133
141
  @query('#email') emailEl!: HTMLInputElement
134
142
  @query('#locale') localeEl!: HTMLInputElement
143
+ @query('#signature') signatureEl!: HTMLElement
135
144
 
136
145
  async connectedCallback(): Promise<void> {
137
146
  super.connectedCallback()
@@ -172,10 +181,22 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
172
181
  this.username = credential.username
173
182
  this.name = credential.name
174
183
  this.email = credential.email
184
+ this.signature = credential.signature || ''
175
185
  } else {
176
186
  this.username = ''
177
187
  this.name = ''
178
188
  this.email = ''
189
+ this.signature = ''
190
+ }
191
+ }
192
+
193
+ updated(changedProps: Map<string, unknown>) {
194
+ if (changedProps.has('signature')) {
195
+ // value 변경만으로 프리뷰가 갱신되지 않아서 직접 변경 (첫 로딩 이슈)
196
+ const preview = this.signatureEl?.shadowRoot?.querySelector('.signature-preview') as HTMLElement
197
+ if (preview) {
198
+ preview.style.backgroundImage = this.signature ? `url(${this.signature})` : 'none'
199
+ }
179
200
  }
180
201
  }
181
202
 
@@ -223,6 +244,15 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
223
244
  `
224
245
  : nothing}
225
246
 
247
+ <hr />
248
+
249
+ <label for="signature"><ox-i18n slot="title" msgid="label.signature"></ox-i18n></label>
250
+ <ox-input-signature
251
+ id="signature"
252
+ @change=${e => this.onSignatureChanged(e.detail)}
253
+ .value=${this.signature || ''}
254
+ ></ox-input-signature>
255
+
226
256
  <footer>
227
257
  <p>
228
258
  ${i18next.t('text.click login history')}
@@ -235,6 +265,30 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
235
265
  `
236
266
  }
237
267
 
268
+ async onSignatureChanged(signature) {
269
+ var oldSignature = this.signature
270
+ this.signature = signature
271
+
272
+ try {
273
+ const message = await auth.updateProfile({
274
+ signature
275
+ })
276
+
277
+ notify({
278
+ level: 'info',
279
+ message
280
+ })
281
+ } catch (e: any) {
282
+ // rollback + preview 동기화
283
+ this.signature = oldSignature || ''
284
+
285
+ notify({
286
+ level: 'error',
287
+ message: 'message' in e ? e.message : e
288
+ })
289
+ }
290
+ }
291
+
238
292
  async onUsernameChanged(username) {
239
293
  if (!username) return
240
294
 
package/dist-client/components/profile-component.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import '@operato/i18n/ox-i18n.js';
2
2
  import '@operato/i18n/ox-i18n-selector.js';
3
+ import '@operato/input/ox-input-signature.js';
3
4
  import './change-password';
4
5
  import './delete-user-popup';
5
6
  import './my-login-history';
@@ -10,6 +11,7 @@ export declare class ProfileComponent extends ProfileComponent_base {
10
11
  username?: string;
11
12
  email?: string;
12
13
  name?: string;
14
+ signature?: string;
13
15
  languages: {
14
16
  code: string;
15
17
  display: string;
@@ -29,10 +31,13 @@ export declare class ProfileComponent extends ProfileComponent_base {
29
31
  nameEl: HTMLInputElement;
30
32
  emailEl: HTMLInputElement;
31
33
  localeEl: HTMLInputElement;
34
+ signatureEl: HTMLElement;
32
35
  connectedCallback(): Promise<void>;
33
36
  firstUpdated(): Promise<void>;
34
37
  setCredential(credential: any): void;
38
+ updated(changedProps: Map<string, unknown>): void;
35
39
  render(): import("lit-html").TemplateResult<1>;
40
+ onSignatureChanged(signature: any): Promise<void>;
36
41
  onUsernameChanged(username: any): Promise<void>;
37
42
  onNameChanged(name: any): Promise<void>;
38
43
  onEmailChanged(email: any): Promise<void>;
package/dist-client/components/profile-component.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __decorate, __metadata } from "tslib";
2
2
  import '@operato/i18n/ox-i18n.js';
3
3
  import '@operato/i18n/ox-i18n-selector.js';
4
+ import '@operato/input/ox-input-signature.js';
4
5
  import './change-password';
5
6
  import './delete-user-popup';
6
7
  import './my-login-history';
@@ -52,11 +53,23 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
52
53
  this.username = credential.username;
53
54
  this.name = credential.name;
54
55
  this.email = credential.email;
56
+ this.signature = credential.signature || '';
55
57
  }
56
58
  else {
57
59
  this.username = '';
58
60
  this.name = '';
59
61
  this.email = '';
62
+ this.signature = '';
63
+ }
64
+ }
65
+ updated(changedProps) {
66
+ var _a, _b;
67
+ if (changedProps.has('signature')) {
68
+ // value 변경만으로 프리뷰가 갱신되지 않아서 직접 변경 (첫 로딩 이슈)
69
+ const preview = (_b = (_a = this.signatureEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.signature-preview');
70
+ if (preview) {
71
+ preview.style.backgroundImage = this.signature ? `url(${this.signature})` : 'none';
72
+ }
60
73
  }
61
74
  }
62
75
  render() {
@@ -103,6 +116,15 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
103
116
  `
104
117
  : nothing}
105
118
 
119
+ <hr />
120
+
121
+ <label for="signature"><ox-i18n slot="title" msgid="label.signature"></ox-i18n></label>
122
+ <ox-input-signature
123
+ id="signature"
124
+ @change=${e => this.onSignatureChanged(e.detail)}
125
+ .value=${this.signature || ''}
126
+ ></ox-input-signature>
127
+
106
128
  <footer>
107
129
  <p>
108
130
  ${i18next.t('text.click login history')}
@@ -114,6 +136,27 @@ let ProfileComponent = class ProfileComponent extends localize(i18next)(LitEleme
114
136
  </div>
115
137
  `;
116
138
  }
139
+ async onSignatureChanged(signature) {
140
+ var oldSignature = this.signature;
141
+ this.signature = signature;
142
+ try {
143
+ const message = await auth.updateProfile({
144
+ signature
145
+ });
146
+ notify({
147
+ level: 'info',
148
+ message
149
+ });
150
+ }
151
+ catch (e) {
152
+ // rollback + preview 동기화
153
+ this.signature = oldSignature || '';
154
+ notify({
155
+ level: 'error',
156
+ message: 'message' in e ? e.message : e
157
+ });
158
+ }
159
+ }
117
160
  async onUsernameChanged(username) {
118
161
  if (!username)
119
162
  return;
@@ -327,6 +370,12 @@ ProfileComponent.styles = [
327
370
  text-transform: capitalize;
328
371
  }
329
372
 
373
+ ox-input-signature {
374
+ border: 1px solid rgba(0, 0, 0, 0.2);
375
+ border-radius: var(--border-radius);
376
+ margin-bottom: var(--spacing-medium);
377
+ }
378
+
330
379
  footer {
331
380
  padding: 20px;
332
381
  text-align: center;
@@ -357,6 +406,10 @@ __decorate([
357
406
  property({ type: String }),
358
407
  __metadata("design:type", String)
359
408
  ], ProfileComponent.prototype, "name", void 0);
409
+ __decorate([
410
+ property({ type: String }),
411
+ __metadata("design:type", String)
412
+ ], ProfileComponent.prototype, "signature", void 0);
360
413
  __decorate([
361
414
  state(),
362
415
  __metadata("design:type", Array)
@@ -381,6 +434,10 @@ __decorate([
381
434
  query('#locale'),
382
435
  __metadata("design:type", HTMLInputElement)
383
436
  ], ProfileComponent.prototype, "localeEl", void 0);
437
+ __decorate([
438
+ query('#signature'),
439
+ __metadata("design:type", HTMLElement)
440
+ ], ProfileComponent.prototype, "signatureEl", void 0);
384
441
  ProfileComponent = __decorate([
385
442
  customElement('profile-component')
386
443
  ], ProfileComponent);
package/dist-client/components/profile-component.js.map CHANGED
@@ -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'\nimport './delete-user-popup'\nimport './my-login-history'\n\nimport { gql } from 'graphql-tag'\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { startRegistration } from '@simplewebauthn/browser'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { auth, getLanguages } from '@things-factory/auth-base/dist-client'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n@customElement('profile-component')\nexport class ProfileComponent extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n background-color: var(--md-sys-color-background);\n padding: 15px 0;\n }\n .wrap {\n max-width: var(--profile-wrap-max-width, 400px);\n margin: auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n }\n\n * {\n box-sizing: border-box;\n }\n\n *:focus {\n outline: none;\n }\n\n input {\n margin: var(--spacing-small) 0;\n border: 1px solid rgba(0, 0, 0, 0.2);\n padding: 9px;\n border-radius: var(--border-radius);\n font: var(--auth-input-field-font);\n width: var(--auth-input-field-width);\n }\n input:focus {\n border: 1px solid var(--focus-background-color);\n }\n\n .user {\n background: url(/assets/images/icon-profile.png) center top no-repeat;\n margin: var(--profile-icon-margin);\n padding: 180px 20px 20px 20px;\n color: var(--md-sys-color-secondary);\n font: var(--header-bar-title);\n text-align: center;\n }\n\n hr {\n width: 100%;\n border: dotted 1px rgba(0, 0, 0, 0.1);\n }\n\n .wrap * {\n grid-column: span 2;\n }\n\n label {\n font: bold 14px var(--theme-font);\n color: var(--md-sys-color-primary);\n text-transform: capitalize;\n grid-column: 1;\n }\n\n .wrap *.inline {\n grid-column: unset;\n }\n\n ox-i18n-selector {\n --i18n-selector-field-width: var(--auth-input-field-width);\n --i18n-selector-field-margin: var(--change-password-field-margin);\n --i18n-selector-field-padding: var(--spacing-medium);\n --i18n-selector-field-border-radius: var(--border-radius);\n margin: var(--change-password-field-margin);\n }\n\n md-text-button {\n text-transform: capitalize;\n }\n\n footer {\n padding: 20px;\n text-align: center;\n }\n\n footer p {\n font-size: 14px;\n margin-bottom: 5px;\n color: var(--md-sys-color-on-background);\n }\n\n footer a {\n color: var(--md-sys-color-primary);\n text-decoration: none;\n font-weight: bold;\n }\n `\n ]\n\n @property({ type: String }) username?: string\n @property({ type: String }) email?: string\n @property({ type: String }) name?: string\n\n @state() languages: { code: string; display: string }[] = []\n @state() passwordRule: {\n lowerCase?: boolean\n upperCase?: boolean\n digit?: boolean\n specialCharacter?: boolean\n allowRepeat?: boolean\n useTightPattern?: boolean\n useLoosePattern?: boolean\n tightCharacterLength?: number\n looseCharacterLength?: number\n } = {}\n\n @query('#username') usernameEl!: HTMLInputElement\n @query('#name') nameEl!: HTMLInputElement\n @query('#email') emailEl!: HTMLInputElement\n @query('#locale') localeEl!: HTMLInputElement\n\n async connectedCallback(): Promise<void> {\n super.connectedCallback()\n\n const response = await client.query({\n query: gql`\n query {\n passwordRule {\n lowerCase\n upperCase\n digit\n specialCharacter\n allowRepeat\n useTightPattern\n useLoosePattern\n tightCharacterLength\n looseCharacterLength\n }\n }\n `\n })\n\n this.passwordRule = response.data\n }\n\n async firstUpdated() {\n auth.on('profile', ({ credential }) => {\n this.setCredential(credential)\n })\n\n this.setCredential(auth.credential)\n\n this.languages = await getLanguages()\n }\n\n setCredential(credential) {\n if (credential) {\n this.username = credential.username\n this.name = credential.name\n this.email = credential.email\n } else {\n this.username = ''\n this.name = ''\n this.email = ''\n }\n }\n\n render() {\n return html`\n <div class=\"wrap\">\n <div class=\"user\">${this.username || ''}</div>\n\n <label for=\"username\"><ox-i18n slot=\"title\" msgid=\"label.user-id\"></ox-i18n></label>\n <input id=\"username\" @change=${e => this.onUsernameChanged(e.target.value)} .value=${this.username || ''} />\n\n <hr />\n\n <label for=\"name\"><ox-i18n slot=\"title\" msgid=\"label.name\"></ox-i18n></label>\n <input id=\"name\" @change=${e => this.onNameChanged(e.target.value)} .value=${this.name || ''} />\n\n <hr />\n\n <label for=\"email\"><ox-i18n slot=\"title\" msgid=\"label.email\"></ox-i18n></label>\n <input id=\"email\" type=\"email\" @change=${e => this.onEmailChanged(e.target.value)} .value=${this.email || ''} />\n\n <hr />\n\n <label for=\"locale\"><ox-i18n slot=\"title\" msgid=\"label.language\"></ox-i18n></label>\n <ox-i18n-selector\n id=\"locale\"\n @change=${e => this.onLocaleChanged(e.detail)}\n value=${i18next.language || 'en-US'}\n .languages=${this.languages}\n ></ox-i18n-selector>\n\n <hr />\n\n <label for=\"change-password\">\n <ox-i18n msgid=\"label.password\"></ox-i18n>\n </label>\n\n <change-password id=\"change-password\" .passwordRule=${this.passwordRule}></change-password>\n\n ${isAvailableWebauthn\n ? html`\n <md-text-button @click=${() => this.registerUser()}\n >${i18next.t('button.security-key registration')}</md-text-button\n >\n `\n : nothing}\n\n <footer>\n <p>\n ${i18next.t('text.click login history')}\n <a href=\"javascript:void(0);\" @click=${this.openLoginHistory.bind(this)}\n >${i18next.t('label.login_history')}</a\n >\n </p>\n </footer>\n </div>\n `\n }\n\n async onUsernameChanged(username) {\n if (!username) return\n\n var oldUsername = this.username\n\n try {\n const message = await auth.updateProfile({\n username\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.usernameEl.value = oldUsername || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onNameChanged(name) {\n if (!name) return\n\n var oldName = this.name\n\n try {\n const message = await auth.updateProfile({\n name\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.nameEl.value = oldName || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onEmailChanged(email) {\n if (!email) return\n\n var oldEmail = this.email\n\n try {\n const message = await auth.updateProfile({\n email\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.emailEl.value = oldEmail || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n async onLocaleChanged(value) {\n if (!value) return\n\n var oldLocale = i18next.language\n\n try {\n const message = await auth.updateProfile({\n locale: value\n })\n\n i18next.changeLanguage(value)\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n this.localeEl.value = oldLocale\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\n }\n }\n\n openLoginHistory() {\n openPopup(html` <my-login-history></my-login-history> `, {\n title: i18next.t('label.login_history')\n })\n }\n\n deleteUser() {\n openPopup(html` <delete-user-popup></delete-user-popup> `, {\n title: i18next.t('label.delete account')\n })\n }\n\n async registerUser() {\n try {\n const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())\n const attResp = await startRegistration(options)\n const verification = await fetch('/auth/verify-registration', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(attResp)\n }).then(res => res.json())\n\n if (verification.verified) {\n notify({\n level: 'info',\n message: i18next.t('text.user credential registered successfully')\n })\n } else {\n console.error(await verification.text())\n\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration not allowed')\n })\n }\n } catch (error) {\n notify({\n level: 'error',\n message: i18next.t('error.user credential registeration failed')\n })\n }\n }\n\n get applicationMeta() {\n var iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n var titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n var descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n return {\n icon: iconLink?.href || '',\n title: titleMeta?.content || 'Things Factory',\n description: descriptionMeta?.content || 'Reimagining Software'\n }\n }\n}\n"]}
1
+ {"version":3,"file":"profile-component.js","sourceRoot":"","sources":["../../client/components/profile-component.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/i18n/ox-i18n-selector.js'\nimport '@operato/input/ox-input-signature.js'\nimport './change-password'\nimport './delete-user-popup'\nimport './my-login-history'\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 ox-input-signature {\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: var(--border-radius);\n margin-bottom: var(--spacing-medium);\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 @property({ type: String }) signature?: 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 @query('#signature') signatureEl!: HTMLElement\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 this.signature = credential.signature || ''\n } else {\n this.username = ''\n this.name = ''\n this.email = ''\n this.signature = ''\n }\n }\n\n updated(changedProps: Map<string, unknown>) {\n if (changedProps.has('signature')) {\n // value 변경만으로 프리뷰가 갱신되지 않아서 직접 변경 (첫 로딩 이슈)\n const preview = this.signatureEl?.shadowRoot?.querySelector('.signature-preview') as HTMLElement\n if (preview) {\n preview.style.backgroundImage = this.signature ? `url(${this.signature})` : 'none'\n }\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 <hr />\n\n <label for=\"signature\"><ox-i18n slot=\"title\" msgid=\"label.signature\"></ox-i18n></label>\n <ox-input-signature\n id=\"signature\"\n @change=${e => this.onSignatureChanged(e.detail)}\n .value=${this.signature || ''}\n ></ox-input-signature>\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 onSignatureChanged(signature) {\n var oldSignature = this.signature\n this.signature = signature\n\n try {\n const message = await auth.updateProfile({\n signature\n })\n\n notify({\n level: 'info',\n message\n })\n } catch (e: any) {\n // rollback + preview 동기화\n this.signature = oldSignature || ''\n\n notify({\n level: 'error',\n message: 'message' in e ? e.message : e\n })\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"]}