@things-factory/auth-ui 10.1.4 → 10.1.7

package/dist-client/components/change-password.d.ts

@@ -14,6 +14,17 @@ export declare class ChangePassword extends ChangePassword_base {
         looseCharacterLength?: number;
     };
     form: HTMLFormElement;
+    /**
+     * Set once the change went through.
+     *
+     * The server answers with a message and the shell shows it as a toast, but a toast leaves and
+     * the same three empty boxes stay behind. A person who has just changed their password reads
+     * that as "nothing happened" — the report that brought this in said exactly that.
+     *
+     * So the form is replaced by a statement that stays. It also stops the boxes from inviting a
+     * second attempt at something already done.
+     */
+    private changed;
     private passwordPattern;
     private passwordHelp;
     render(): import("lit-html").TemplateResult<1>;

package/dist-client/components/change-password.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { css, html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { FormFieldStyles } from '@operato/styles';
 import { auth } from '@things-factory/auth-base/dist-client/auth.js';
@@ -9,6 +9,17 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
     constructor() {
         super(...arguments);
         this.passwordRule = {};
+        /**
+         * Set once the change went through.
+         *
+         * The server answers with a message and the shell shows it as a toast, but a toast leaves and
+         * the same three empty boxes stay behind. A person who has just changed their password reads
+         * that as "nothing happened" — the report that brought this in said exactly that.
+         *
+         * So the form is replaced by a statement that stays. It also stops the boxes from inviting a
+         * second attempt at something already done.
+         */
+        this.changed = false;
         this.passwordPattern = '';
         this.passwordHelp = '';
     }
@@ -73,6 +84,40 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
       }
 
       /* 비밀번호 규칙 안내문 — 본문보다 낮은 강조. 라이트/다크 모두 읽히도록 토큰 파생. */
+      /* The statement that replaces the form once the change took. */
+      .changed {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        /*
+         * 같은 여백을 위쪽 인풋과 나눠 쓴다. 폼 상태에서는 첫 인풋의 margin 이 「비밀번호」
+         * 라벨과의 간격을 만드는데, 이 문장은 margin 이 없어 라벨에 붙어 있었다 — 같은 자리에
+         * 두 가지 간격이 생겼다. 값을 새로 정하지 않고 인풋과 같은 토큰을 쓴다.
+         */
+        margin: var(--change-password-field-margin, var(--spacing-small) 0);
+        padding: 12px 14px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-left: 3px solid var(--md-sys-color-primary);
+        border-radius: 7px;
+        background: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
+        line-height: 1.5;
+      }
+
+      .changed md-icon {
+        color: var(--md-sys-color-primary);
+      }
+
+      .changed button {
+        margin-left: auto;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        background: transparent;
+        color: inherit;
+        border-radius: 7px;
+        padding: 5px 11px;
+        cursor: pointer;
+      }
+
       .helper-text {
         font-size: 12px;
         color: var(--md-sys-color-on-surface-variant);
@@ -83,12 +128,32 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
     `
     ]; }
     render() {
+        if (this.changed) {
+            return html `
+        <div class="changed" role="status">
+          <md-icon>check_circle</md-icon>
+          <span>${i18next.t('text.password changed successfully')}</span>
+          <button type="button" @click=${() => (this.changed = false)}>
+            ${i18next.t('text.change password')}
+          </button>
+        </div>
+      `;
+        }
         return html `
       <form>
         <div class="field">
           <input type="password" name="current_pass" placeholder=${i18next.t('text.current password')} required />
         </div>
-        <span id="password-helper" class="helper-text">${this.passwordHelp}</span>
+        <!--
+          The rule belongs under the field the rule applies to.
+          
+          It used to sit between the two, directly beneath the current password, so a sighted
+          reader took it as the rule for that field — and the current password has no reason to
+          satisfy today's rule. It may predate it. The server only checks that it matches
+          (change-pwd.ts verifies the current one and validates the new one against the rule).
+          aria-describedby always pointed at the new field, so a screen reader had it right and
+          only the eye was misled.
+        -->
         <div class="field">
           <input
             type="password"
@@ -99,11 +164,25 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
             aria-describedby="password-helper"
           />
         </div>
+        <span id="password-helper" class="helper-text">${this.passwordHelp}</span>
         <div class="field">
           <input type="password" name="confirm_pass" placeholder=${i18next.t('text.confirm password')} required />
         </div>
 
-        <md-elevated-button @click=${this.submit.bind(this)}>${i18next.t('text.change password')}</md-elevated-button>
+        <!--
+          type="button", the way abstract-sign and abstract-auth-page already declare it.
+          
+          A Material button inside a form defaults to type="submit" and submits unless the click
+          is default-prevented. So one click ran submit() and then let the browser submit the
+          form as well. submit() had already called form.reset(), so constraint validation found
+          three empty required fields, rejected the first one, and put the caret back on the
+          current password with an English "Please fill out this field." bubble on a Korean
+          screen. It read as the current password being refused.
+          [확인함] 2026-09-09 · 사용자 보고 · 화면 사진
+        -->
+        <md-elevated-button type="button" @click=${this.submit.bind(this)}
+          >${i18next.t('text.change password')}</md-elevated-button
+        >
       </form>
     `;
     }
@@ -130,8 +209,11 @@ let ChangePassword = class ChangePassword extends localize(i18next)(LitElement)
         if (params['new_pass'] !== params['confirm_pass']) {
             return this.showToast(i18next.t('error.new-password-and-confirm-password-do-not-match'));
         }
-        auth.changePassword(params);
-        this.form.reset();
+        /* Clear only once it took — a refused change used to wipe all three fields. */
+        if (await auth.changePassword(params)) {
+            this.form.reset();
+            this.changed = true;
+        }
     }
     showToast(message) {
         document.dispatchEvent(new CustomEvent('notify', { detail: { message } }));
@@ -143,8 +225,23 @@ __decorate([
 ], ChangePassword.prototype, "passwordRule", void 0);
 __decorate([
     query('form'),
-    __metadata("design:type", HTMLFormElement)
+    __metadata("design:type", HTMLFormElement
+    /**
+     * Set once the change went through.
+     *
+     * The server answers with a message and the shell shows it as a toast, but a toast leaves and
+     * the same three empty boxes stay behind. A person who has just changed their password reads
+     * that as "nothing happened" — the report that brought this in said exactly that.
+     *
+     * So the form is replaced by a statement that stays. It also stops the boxes from inviting a
+     * second attempt at something already done.
+     */
+    )
 ], ChangePassword.prototype, "form", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ChangePassword.prototype, "changed", void 0);
 ChangePassword = __decorate([
     customElement('change-password')
 ], ChangePassword);

package/dist-client/components/change-password.js.map

@@ -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,eAAe,EAAE,MAAM,iBAAiB,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;;QAwEuB,iBAAY,GAUpC,EAAE,CAAA;QAIE,oBAAe,GAAW,EAAE,CAAA;QAC5B,iBAAY,GAAW,EAAE,CAAA;IA8DnC,CAAC;aApJQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkEF;KACF,AArEY,CAqEZ;IAmBD,MAAM;QACJ,OAAO,IAAI,CAAA;;;mEAGoD,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;yDAE5C,IAAI,CAAC,YAAY;;;;;0BAKhD,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;;sBAElC,IAAI,CAAC,eAAe;;;;;mEAKyB,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;;;qCAGhE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;;KAE3F,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;YAChC,IAAI,CAAC,eAAe,GAAG,6BAA6B,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAA;YAC9E,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;QACpE,CAAC;IACH,CAAC;IAED,eAAe;QACb,IAAI,CAAC,eAAe,GAAG,6BAA6B,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAA;QAC9E,IAAI,CAAC,YAAY,GAAG,2BAA2B,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACpE,CAAC;IAED,KAAK,CAAC,MAAM;QACV,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxC,IAAI,MAAM,GAAG,EAAE,CAAA;QACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;YAC9C,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,MAAM,WAAW,GAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG,GAAG,CAAsB,EAAE,WAAW,CAAA;gBAC/F,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB,EAAE,EAAE,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,CAAC,CAAC,CAAA;YACzF,CAAC;YACD,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;QACrB,CAAC;QAED,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC;YAClD,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAA;QAC1F,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,SAAS,CAAC,OAAO;QACf,QAAQ,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;IAC5E,CAAC;;AA5E2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;oDAUrB;AAES;IAAd,KAAK,CAAC,MAAM,CAAC;8BAAQ,eAAe;4CAAA;AApF1B,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAqJ1B","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"]}
+{"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, state } 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      /* The statement that replaces the form once the change took. */\n      .changed {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        /*\n         * 같은 여백을 위쪽 인풋과 나눠 쓴다. 폼 상태에서는 첫 인풋의 margin 이 「비밀번호」\n         * 라벨과의 간격을 만드는데, 이 문장은 margin 이 없어 라벨에 붙어 있었다 — 같은 자리에\n         * 두 가지 간격이 생겼다. 값을 새로 정하지 않고 인풋과 같은 토큰을 쓴다.\n         */\n        margin: var(--change-password-field-margin, var(--spacing-small) 0);\n        padding: 12px 14px;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        border-left: 3px solid var(--md-sys-color-primary);\n        border-radius: 7px;\n        background: var(--md-sys-color-surface-variant);\n        color: var(--md-sys-color-on-surface-variant);\n        line-height: 1.5;\n      }\n\n      .changed md-icon {\n        color: var(--md-sys-color-primary);\n      }\n\n      .changed button {\n        margin-left: auto;\n        border: 1px solid var(--md-sys-color-outline-variant);\n        background: transparent;\n        color: inherit;\n        border-radius: 7px;\n        padding: 5px 11px;\n        cursor: pointer;\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  /**\n   * Set once the change went through.\n   *\n   * The server answers with a message and the shell shows it as a toast, but a toast leaves and\n   * the same three empty boxes stay behind. A person who has just changed their password reads\n   * that as \"nothing happened\" — the report that brought this in said exactly that.\n   *\n   * So the form is replaced by a statement that stays. It also stops the boxes from inviting a\n   * second attempt at something already done.\n   */\n  @state() private changed = false\n\n  private passwordPattern: string = ''\n  private passwordHelp: string = ''\n\n  render() {\n    if (this.changed) {\n      return html`\n        <div class=\"changed\" role=\"status\">\n          <md-icon>check_circle</md-icon>\n          <span>${i18next.t('text.password changed successfully')}</span>\n          <button type=\"button\" @click=${() => (this.changed = false)}>\n            ${i18next.t('text.change password')}\n          </button>\n        </div>\n      `\n    }\n\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        <!--\n          The rule belongs under the field the rule applies to.\n          \n          It used to sit between the two, directly beneath the current password, so a sighted\n          reader took it as the rule for that field — and the current password has no reason to\n          satisfy today's rule. It may predate it. The server only checks that it matches\n          (change-pwd.ts verifies the current one and validates the new one against the rule).\n          aria-describedby always pointed at the new field, so a screen reader had it right and\n          only the eye was misled.\n        -->\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        <span id=\"password-helper\" class=\"helper-text\">${this.passwordHelp}</span>\n        <div class=\"field\">\n          <input type=\"password\" name=\"confirm_pass\" placeholder=${i18next.t('text.confirm password')} required />\n        </div>\n\n        <!--\n          type=\"button\", the way abstract-sign and abstract-auth-page already declare it.\n          \n          A Material button inside a form defaults to type=\"submit\" and submits unless the click\n          is default-prevented. So one click ran submit() and then let the browser submit the\n          form as well. submit() had already called form.reset(), so constraint validation found\n          three empty required fields, rejected the first one, and put the caret back on the\n          current password with an English \"Please fill out this field.\" bubble on a Korean\n          screen. It read as the current password being refused.\n          [확인함] 2026-09-09 · 사용자 보고 · 화면 사진\n        -->\n        <md-elevated-button type=\"button\" @click=${this.submit.bind(this)}\n          >${i18next.t('text.change password')}</md-elevated-button\n        >\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    /* Clear only once it took — a refused change used to wipe all three fields. */\n    if (await auth.changePassword(params)) {\n      this.form.reset()\n      this.changed = true\n    }\n  }\n\n  showToast(message) {\n    document.dispatchEvent(new CustomEvent('notify', { detail: { message } }))\n  }\n}\n"]}

package/dist-client/components/role-privilege-picker.d.ts

@@ -0,0 +1,37 @@
+import '@material/web/icon/icon.js';
+import '@material/web/checkbox/checkbox.js';
+import '@operato/input/ox-input-search.js';
+import { LitElement } from 'lit';
+import type { CSSResultGroup } from 'lit';
+/**
+ * 「할 수 있는 일 더하기」의 **그릇**.
+ *
+ * ── 왜 팝업인가 (사용자, 2026-09-11) ────────────────────────────────────────
+ * 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가? 지금은 좁아보이고」
+ *
+ * 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서 모듈 46개와 축 목록을
+ * 함께 봐야 한다. 고르는 동안은 **고르는 것만** 보는 것이 맞다.
+ *
+ * ── 이 부품은 아무것도 안 그린다 ────────────────────────────────────────────
+ * 모듈 접기·축 줄·유령 규칙이 전부 페이지의 상태(`modules`·`assigned`·`selected`·`keyword`)를
+ * 본다. 그것을 여기로 옮기면 **상태가 두 벌**이 되고, 그 순간 어느 쪽이 저장 범위인지
+ * 흐려진다 — 옛 편집기가 `querySelectorAll` 로 범위를 만들던 결함이 정확히 그 모양이었다.
+ *
+ * 그래서 그리기는 페이지가 하고(`renderPickerBody`), 여기는 담아서 띄우기만 한다. 대신
+ * 페이지가 토글할 때 이 부품에게 다시 그리라고 알린다(`page.picker`).
+ *
+ * ── 스타일도 한 벌이다 ──────────────────────────────────────────────────────
+ * 팝업은 페이지의 shadow root **밖**에 뜨므로 페이지 스타일이 여기까지 안 온다. 베껴 두면
+ * 한쪽만 고쳐지는 날이 오고, 오늘 이 화면에서 그 부류를 이미 만났다 — 칩 시절 CSS 가 남아
+ * 새 규칙을 이겼다. 그래서 페이지의 `styles` 를 그대로 가져간다.
+ *
+ * 페이지가 이 파일을 **동적으로** 들이기 때문에 이 import 가 순환이 되지 않는다.
+ */
+export declare class RolePrivilegePicker extends LitElement {
+    static styles: CSSResultGroup;
+    /** 담는 페이지. 이 부품은 그것의 `renderPickerBody()` 를 그린다. */
+    page?: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist-client/components/role-privilege-picker.js

@@ -0,0 +1,58 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/checkbox/checkbox.js';
+import '@operato/input/ox-input-search.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { RolePrivilegePage } from '../pages/role/role-privilege-page.js';
+/**
+ * 「할 수 있는 일 더하기」의 **그릇**.
+ *
+ * ── 왜 팝업인가 (사용자, 2026-09-11) ────────────────────────────────────────
+ * 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가? 지금은 좁아보이고」
+ *
+ * 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서 모듈 46개와 축 목록을
+ * 함께 봐야 한다. 고르는 동안은 **고르는 것만** 보는 것이 맞다.
+ *
+ * ── 이 부품은 아무것도 안 그린다 ────────────────────────────────────────────
+ * 모듈 접기·축 줄·유령 규칙이 전부 페이지의 상태(`modules`·`assigned`·`selected`·`keyword`)를
+ * 본다. 그것을 여기로 옮기면 **상태가 두 벌**이 되고, 그 순간 어느 쪽이 저장 범위인지
+ * 흐려진다 — 옛 편집기가 `querySelectorAll` 로 범위를 만들던 결함이 정확히 그 모양이었다.
+ *
+ * 그래서 그리기는 페이지가 하고(`renderPickerBody`), 여기는 담아서 띄우기만 한다. 대신
+ * 페이지가 토글할 때 이 부품에게 다시 그리라고 알린다(`page.picker`).
+ *
+ * ── 스타일도 한 벌이다 ──────────────────────────────────────────────────────
+ * 팝업은 페이지의 shadow root **밖**에 뜨므로 페이지 스타일이 여기까지 안 온다. 베껴 두면
+ * 한쪽만 고쳐지는 날이 오고, 오늘 이 화면에서 그 부류를 이미 만났다 — 칩 시절 CSS 가 남아
+ * 새 규칙을 이겼다. 그래서 페이지의 `styles` 를 그대로 가져간다.
+ *
+ * 페이지가 이 파일을 **동적으로** 들이기 때문에 이 import 가 순환이 되지 않는다.
+ */
+let RolePrivilegePicker = class RolePrivilegePicker extends LitElement {
+    static { this.styles = RolePrivilegePage.styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.page) {
+            this.page.picker = this;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.page?.picker === this) {
+            this.page.picker = undefined;
+        }
+    }
+    render() {
+        return this.page?.renderPickerBody?.() ?? html ``;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], RolePrivilegePicker.prototype, "page", void 0);
+RolePrivilegePicker = __decorate([
+    customElement('role-privilege-picker')
+], RolePrivilegePicker);
+export { RolePrivilegePicker };
+//# sourceMappingURL=role-privilege-picker.js.map

package/dist-client/components/role-privilege-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"role-privilege-picker.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;aAC1C,WAAM,GAAmB,iBAAiB,CAAC,MAAwB,AAA7D,CAA6D;IAK1E,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QAC9B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,IAAI,IAAI,CAAA,EAAE,CAAA;IAClD,CAAC;;AAlB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAW;AAJ3B,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAuB/B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/checkbox/checkbox.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { html, LitElement } from 'lit'\nimport type { CSSResultGroup } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RolePrivilegePage } from '../pages/role/role-privilege-page.js'\n\n/**\n * 「할 수 있는 일 더하기」의 **그릇**.\n *\n * ── 왜 팝업인가 (사용자, 2026-09-11) ────────────────────────────────────────\n * 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가? 지금은 좁아보이고」\n *\n * 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서 모듈 46개와 축 목록을\n * 함께 봐야 한다. 고르는 동안은 **고르는 것만** 보는 것이 맞다.\n *\n * ── 이 부품은 아무것도 안 그린다 ────────────────────────────────────────────\n * 모듈 접기·축 줄·유령 규칙이 전부 페이지의 상태(`modules`·`assigned`·`selected`·`keyword`)를\n * 본다. 그것을 여기로 옮기면 **상태가 두 벌**이 되고, 그 순간 어느 쪽이 저장 범위인지\n * 흐려진다 — 옛 편집기가 `querySelectorAll` 로 범위를 만들던 결함이 정확히 그 모양이었다.\n *\n * 그래서 그리기는 페이지가 하고(`renderPickerBody`), 여기는 담아서 띄우기만 한다. 대신\n * 페이지가 토글할 때 이 부품에게 다시 그리라고 알린다(`page.picker`).\n *\n * ── 스타일도 한 벌이다 ──────────────────────────────────────────────────────\n * 팝업은 페이지의 shadow root **밖**에 뜨므로 페이지 스타일이 여기까지 안 온다. 베껴 두면\n * 한쪽만 고쳐지는 날이 오고, 오늘 이 화면에서 그 부류를 이미 만났다 — 칩 시절 CSS 가 남아\n * 새 규칙을 이겼다. 그래서 페이지의 `styles` 를 그대로 가져간다.\n *\n * 페이지가 이 파일을 **동적으로** 들이기 때문에 이 import 가 순환이 되지 않는다.\n */\n@customElement('role-privilege-picker')\nexport class RolePrivilegePicker extends LitElement {\n  static styles: CSSResultGroup = RolePrivilegePage.styles as CSSResultGroup\n\n  /** 담는 페이지. 이 부품은 그것의 `renderPickerBody()` 를 그린다. */\n  @property({ type: Object }) page?: any\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.page) {\n      this.page.picker = this\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this.page?.picker === this) {\n      this.page.picker = undefined\n    }\n  }\n\n  render() {\n    return this.page?.renderPickerBody?.() ?? html``\n  }\n}\n"]}

package/dist-client/components/role-template-picker.d.ts

@@ -0,0 +1,83 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+import type { CSSResultGroup } from 'lit';
+declare const RoleTemplatePicker_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * Starting a role.
+ *
+ * ── Why this stands where the blank row used to ──────────────────────────────
+ * A new plant has no roles, and the old answer to "make one" was an empty line waiting for
+ * a name. Naming it is the easy half; the hard half is which of 84 privileges belong to a
+ * quality inspector, and that is a judgement the product has made and the plant has not.
+ *
+ * miratek is the case: two roles (Administrator, TWIN-CONNECTOR), no MES seats, and eleven
+ * approval doors standing empty because there is nothing to route them to. Read from
+ * inside, that looks like a plant that has not decided. It is a plant with nothing to
+ * decide from.
+ *
+ * ── Both doors, in one place ─────────────────────────────────────────────────
+ * The templates come first and the blank name last, because the order is what teaches: a
+ * plant that sees "quality inspector, 7 privileges" learns what a seat looks like before
+ * it is asked to invent one. Hiding the blank door would be worse, though — the seats a
+ * factory actually has ("night shift lead", "outside inspector") are its own, and the
+ * product does not know them.
+ *
+ * ── Why the name is editable ─────────────────────────────────────────────────
+ * The template knows the seat exists; it does not know what the people there call it. And
+ * because a role is also what an approval line points at, the same seat is sometimes
+ * needed twice — a day and a night inspector hold the same privileges and take different
+ * approvals. A fixed name would allow each template exactly once per domain.
+ */
+export declare class RoleTemplatePicker extends RoleTemplatePicker_base {
+    static styles: CSSResultGroup;
+    page?: any;
+    private templates;
+    private selected?;
+    /** `undefined` means "the blank door" — name the seat yourself. */
+    private scratch;
+    private name;
+    private description;
+    connectedCallback(): Promise<void>;
+    private fetchTemplates;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * What the seat opens, in one line — **counted, not interpreted.**
+     *
+     * This briefly said "changes 6 · only sees 8", which read well and was not something the
+     * data supports: the privilege axis is an unconstrained string and its name does not
+     * determine what the resolver behind it does. Counting is safe; grouping by meaning was
+     * not. See `renderOpens`.
+     *
+     * "0 privileges" is still two different facts and must not be merged: granting nothing
+     * on purpose is an approval seat, and a template whose grants are all missing here is a
+     * defect (`missingCount`).
+     */
+    private summarize;
+    private renderDetail;
+    /**
+     * 이 자리가 무엇을 여나 — **선언된 것만.**
+     *
+     * ⚠ 여기 「바꿀 수 있는 것 / 볼 수만 있는 것」 두 묶음이 있었다. 사용자가 물었다(2026-09-11):
+     * 「바꿀 수 있고, 볼 수만 있는 것을 너가 어떻게 알아? 논리적이지 않은 것을 우겨넣지 말고.」
+     *
+     * 몰랐다. 지어낸 것이다. 근거가 없는 이유가 둘이다.
+     *
+     *  ① `@privilege(privilege:)` 는 **제약 없는 문자열**이다(지시자 선언이 `privilege: String`
+     *     이고 enum 이 아니다). 지금 쓰인 값이 mutation 484 · query 314 로 둘뿐인 것은 **오늘
+     *     그렇게 쓴 것**이지 둘로 한정된 것이 아니다. 내 코드는 `axis !== 'query'` 로 갈랐으므로,
+     *     처음 보는 값은 **알아서가 아니라 query 가 아니라서** 「바꿀 수 있는 것」으로 떨어졌다.
+     *  ② 이름이 뜻을 보장하지 않는다. 축 이름과 실제 GraphQL 연산이 어긋나는 자리가 6곳이고,
+     *     그중 둘은 이 기능의 내 파일이다(`role-template-query.ts` — 템플릿을 **읽는** 질의에
+     *     `privilege: "mutation"` 을 달았다. 역할을 만드는 문이라서 그게 맞다). 축은 연산 종류가
+     *     아니라 **어느 문을 지나야 하나**의 이름이다.
+     *
+     * 그래서 화면은 선언된 것을 그대로 낸다 — 어느 모듈에, 어느 권한이. 읽히게 만드는 것
+     * (굵기·줄 간격·가운뎃점)은 아무것도 주장하지 않으므로 그대로 둔다.
+     */
+    private renderOpens;
+    private pick;
+    private pickScratch;
+    private canCreate;
+    private create;
+}
+export {};