secure-ui-components 0.2.3 → 0.2.5

package/dist/components/secure-password-confirm/secure-password-confirm.js

@@ -1,329 +1 @@
-import { SecureBaseComponent } from '../../core/base-component.js';
-export class SecurePasswordConfirm extends SecureBaseComponent {
-    #passwordInput = null;
-    #confirmInput = null;
-    #passwordError = null;
-    #confirmError = null;
-    #matchIndicator = null;
-    #passwordToggle = null;
-    #confirmToggle = null;
-    #passwordValue = '';
-    #confirmValue = '';
-    #confirmTouched = false;
-    #passwordVisible = false;
-    #confirmVisible = false;
-    #hiddenInput = null;
-    #instanceId = `secure-password-confirm-${Math.random().toString(36).substring(2, 11)}`;
-    // Strip any pre-set security-tier before the base reads it,
-    // guaranteeing this component is always CRITICAL.
-    connectedCallback() {
-        this.removeAttribute('security-tier');
-        super.connectedCallback();
-    }
-    static get observedAttributes() {
-        return [
-            ...super.observedAttributes,
-            'name',
-            'label',
-            'password-label',
-            'confirm-label',
-            'required',
-            'minlength',
-        ];
-    }
-    render() {
-        const fragment = document.createDocumentFragment();
-        const container = document.createElement('div');
-        container.className = 'container';
-        container.setAttribute('part', 'container');
-        // Optional group label
-        const groupLabelText = this.getAttribute('label');
-        if (groupLabelText) {
-            const groupLabel = document.createElement('div');
-            groupLabel.className = 'group-label';
-            groupLabel.textContent = this.sanitizeValue(groupLabelText);
-            container.appendChild(groupLabel);
-        }
-        const isRequired = this.hasAttribute('required');
-        // ── Password field ──────────────────────────────────────────────────────
-        const passwordSection = this.#buildField({
-            inputPart: 'password-input',
-            wrapperPart: 'password-wrapper',
-            labelPart: 'password-label',
-            errorPart: 'password-error',
-            togglePart: 'password-toggle',
-            labelText: this.getAttribute('password-label') ?? 'New Password',
-            inputId: `${this.#instanceId}-password`,
-            errorId: `${this.#instanceId}-password-error`,
-            isRequired,
-        });
-        this.#passwordInput = passwordSection.querySelector('[part="password-input"]');
-        this.#passwordToggle = passwordSection.querySelector('[part="password-toggle"]');
-        this.#passwordError = passwordSection.querySelector('[part="password-error"]');
-        // ── Confirm field ───────────────────────────────────────────────────────
-        const confirmSection = this.#buildField({
-            inputPart: 'confirm-input',
-            wrapperPart: 'confirm-wrapper',
-            labelPart: 'confirm-label',
-            errorPart: 'confirm-error',
-            togglePart: 'confirm-toggle',
-            labelText: this.getAttribute('confirm-label') ?? 'Confirm Password',
-            inputId: `${this.#instanceId}-confirm`,
-            errorId: `${this.#instanceId}-confirm-error`,
-            isRequired,
-        });
-        this.#confirmInput = confirmSection.querySelector('[part="confirm-input"]');
-        this.#confirmToggle = confirmSection.querySelector('[part="confirm-toggle"]');
-        this.#confirmError = confirmSection.querySelector('[part="confirm-error"]');
-        // ── Match indicator ─────────────────────────────────────────────────────
-        this.#matchIndicator = document.createElement('div');
-        this.#matchIndicator.setAttribute('part', 'match-indicator');
-        this.#matchIndicator.className = 'match-indicator';
-        this.#matchIndicator.setAttribute('aria-hidden', 'true');
-        container.appendChild(passwordSection);
-        container.appendChild(confirmSection);
-        container.appendChild(this.#matchIndicator);
-        this.#attachPasswordListeners();
-        this.#attachConfirmListeners();
-        this.#attachToggleListeners();
-        this.#createHiddenInput();
-        this.addComponentStyles(new URL('./secure-password-confirm.css', import.meta.url).href);
-        fragment.appendChild(container);
-        return fragment;
-    }
-    // ── DOM builders ──────────────────────────────────────────────────────────
-    #buildField(opts) {
-        const section = document.createElement('div');
-        section.className = 'field-section';
-        const label = document.createElement('label');
-        label.setAttribute('part', opts.labelPart);
-        label.htmlFor = opts.inputId;
-        label.textContent = this.sanitizeValue(opts.labelText);
-        const wrapper = document.createElement('div');
-        wrapper.className = 'input-wrapper';
-        wrapper.setAttribute('part', opts.wrapperPart);
-        const input = document.createElement('input');
-        input.id = opts.inputId;
-        input.type = 'password';
-        input.autocomplete = 'new-password';
-        input.setAttribute('part', opts.inputPart);
-        input.setAttribute('aria-describedby', opts.errorId);
-        if (opts.isRequired) {
-            input.required = true;
-            input.setAttribute('aria-required', 'true');
-        }
-        const toggle = document.createElement('button');
-        toggle.type = 'button';
-        toggle.className = 'toggle-btn';
-        toggle.setAttribute('part', opts.togglePart);
-        toggle.setAttribute('aria-label', 'Show password');
-        toggle.appendChild(this.#createEyeIcon());
-        wrapper.appendChild(input);
-        wrapper.appendChild(toggle);
-        const error = document.createElement('div');
-        error.id = opts.errorId;
-        error.setAttribute('part', opts.errorPart);
-        error.setAttribute('role', 'alert');
-        error.className = 'error-container hidden';
-        section.appendChild(label);
-        section.appendChild(wrapper);
-        section.appendChild(error);
-        return section;
-    }
-    // ── Event wiring ──────────────────────────────────────────────────────────
-    #attachPasswordListeners() {
-        this.#passwordInput.addEventListener('focus', () => {
-            this.recordTelemetryFocus();
-        });
-        this.#passwordInput.addEventListener('input', (e) => {
-            this.recordTelemetryInput(e);
-            this.#passwordValue = this.#passwordInput.value;
-            this.detectInjection(this.#passwordValue, this.getAttribute('name') ?? '');
-            if (this.#confirmTouched) {
-                this.#checkMatch();
-            }
-            this.dispatchEvent(new CustomEvent('secure-input', {
-                detail: { name: this.getAttribute('name') ?? '', field: 'password' },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-        this.#passwordInput.addEventListener('blur', () => {
-            this.recordTelemetryBlur();
-            this.#validateStrength();
-        });
-    }
-    #attachConfirmListeners() {
-        this.#confirmInput.addEventListener('input', () => {
-            this.#confirmValue = this.#confirmInput.value;
-            this.detectInjection(this.#confirmValue, this.getAttribute('name') ?? '');
-            if (this.#confirmTouched) {
-                this.#checkMatch();
-            }
-        });
-        this.#confirmInput.addEventListener('blur', () => {
-            this.#confirmTouched = true;
-            this.#confirmValue = this.#confirmInput.value;
-            this.#checkMatch();
-        });
-    }
-    #attachToggleListeners() {
-        this.#passwordToggle.addEventListener('click', () => {
-            this.#passwordVisible = !this.#passwordVisible;
-            this.#passwordInput.type = this.#passwordVisible ? 'text' : 'password';
-            this.#passwordToggle.classList.toggle('is-visible', this.#passwordVisible);
-            this.#passwordToggle.setAttribute('aria-label', this.#passwordVisible ? 'Hide password' : 'Show password');
-        });
-        this.#confirmToggle.addEventListener('click', () => {
-            this.#confirmVisible = !this.#confirmVisible;
-            this.#confirmInput.type = this.#confirmVisible ? 'text' : 'password';
-            this.#confirmToggle.classList.toggle('is-visible', this.#confirmVisible);
-            this.#confirmToggle.setAttribute('aria-label', this.#confirmVisible ? 'Hide confirm password' : 'Show confirm password');
-        });
-    }
-    // ── SVG icon ──────────────────────────────────────────────────────────────
-    #createEyeIcon() {
-        const ns = 'http://www.w3.org/2000/svg';
-        const svg = document.createElementNS(ns, 'svg');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('aria-hidden', 'true');
-        svg.setAttribute('class', 'eye-icon');
-        svg.setAttribute('width', '18');
-        svg.setAttribute('height', '18');
-        // Outer eye shape
-        const outline = document.createElementNS(ns, 'path');
-        outline.setAttribute('class', 'eye-outline');
-        outline.setAttribute('d', 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z');
-        // Pupil
-        const pupil = document.createElementNS(ns, 'circle');
-        pupil.setAttribute('class', 'eye-pupil');
-        pupil.setAttribute('cx', '12');
-        pupil.setAttribute('cy', '12');
-        pupil.setAttribute('r', '3');
-        // Slash — drawn in when password is visible (eye-off state)
-        // Line (3,3)→(21,21): length = √(18²+18²) ≈ 25.46 → dasharray 26
-        const slash = document.createElementNS(ns, 'line');
-        slash.setAttribute('class', 'eye-slash');
-        slash.setAttribute('x1', '3');
-        slash.setAttribute('y1', '3');
-        slash.setAttribute('x2', '21');
-        slash.setAttribute('y2', '21');
-        svg.append(outline, pupil, slash);
-        return svg;
-    }
-    // ── Validation ────────────────────────────────────────────────────────────
-    #validateStrength() {
-        const err = this.#strengthError(this.#passwordValue);
-        if (err) {
-            this.#showError(this.#passwordError, this.#passwordInput, err);
-        }
-        else {
-            this.#clearError(this.#passwordError, this.#passwordInput);
-        }
-    }
-    #strengthError(value) {
-        if (!value)
-            return null;
-        if (value.length < 8)
-            return 'Password must be at least 8 characters';
-        if (!/[a-z]/.test(value))
-            return 'Password must include a lowercase letter';
-        if (!/[A-Z]/.test(value))
-            return 'Password must include an uppercase letter';
-        if (!/[0-9]/.test(value))
-            return 'Password must include a number';
-        if (!/[^a-zA-Z0-9]/.test(value))
-            return 'Password must include a special character';
-        return null;
-    }
-    #checkMatch() {
-        const matched = this.#passwordValue.length > 0 && this.#passwordValue === this.#confirmValue;
-        this.#syncHiddenInput(matched);
-        this.#updateMatchIndicator(matched);
-        if (matched) {
-            this.#clearError(this.#confirmError, this.#confirmInput);
-            this.dispatchEvent(new CustomEvent('secure-password-match', {
-                detail: { name: this.getAttribute('name') ?? '', matched: true },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-        else {
-            const msg = this.#confirmValue.length > 0
-                ? 'Passwords do not match'
-                : 'Please confirm your password';
-            this.#showError(this.#confirmError, this.#confirmInput, msg);
-            this.dispatchEvent(new CustomEvent('secure-password-mismatch', {
-                detail: { name: this.getAttribute('name') ?? '', matched: false },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-    // ── UI helpers ────────────────────────────────────────────────────────────
-    #showError(container, input, message) {
-        container.textContent = message;
-        container.classList.remove('hidden');
-        input.setAttribute('aria-invalid', 'true');
-    }
-    #clearError(container, input) {
-        container.classList.add('hidden');
-        container.textContent = '';
-        input.removeAttribute('aria-invalid');
-    }
-    #updateMatchIndicator(matched) {
-        if (!this.#matchIndicator)
-            return;
-        this.#matchIndicator.className = `match-indicator ${matched ? 'matched' : 'mismatched'}`;
-        this.#matchIndicator.textContent = matched ? '✓ Passwords match' : '✗ Passwords do not match';
-    }
-    // ── Form participation ────────────────────────────────────────────────────
-    #createHiddenInput() {
-        const name = this.getAttribute('name');
-        if (!name || this.closest('secure-form'))
-            return;
-        this.#hiddenInput = document.createElement('input');
-        this.#hiddenInput.type = 'hidden';
-        this.#hiddenInput.name = name;
-        this.#hiddenInput.value = '';
-        this.appendChild(this.#hiddenInput);
-    }
-    #syncHiddenInput(matched) {
-        if (!this.#hiddenInput)
-            return;
-        this.#hiddenInput.value = matched ? this.#passwordValue : '';
-    }
-    // ── Public API ────────────────────────────────────────────────────────────
-    getPasswordValue() {
-        if (!this.#passwordValue || !this.#confirmValue)
-            return null;
-        if (this.#passwordValue !== this.#confirmValue)
-            return null;
-        return this.#passwordValue;
-    }
-    get valid() {
-        if (!this.#passwordValue || !this.#confirmValue)
-            return false;
-        if (this.#passwordValue !== this.#confirmValue)
-            return false;
-        return this.#strengthError(this.#passwordValue) === null;
-    }
-    get name() {
-        return this.getAttribute('name') ?? '';
-    }
-    // ── Lifecycle ─────────────────────────────────────────────────────────────
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#passwordValue = '';
-        this.#confirmValue = '';
-        if (this.#passwordInput)
-            this.#passwordInput.value = '';
-        if (this.#confirmInput)
-            this.#confirmInput.value = '';
-        if (this.#hiddenInput)
-            this.#hiddenInput.value = '';
-    }
-}
-customElements.define('secure-password-confirm', SecurePasswordConfirm);
-export default SecurePasswordConfirm;
-//# sourceMappingURL=secure-password-confirm.js.map
+import{SecureBaseComponent as l}from"../../core/base-component.js";class o extends l{#e=null;#s=null;#c=null;#h=null;#a=null;#l=null;#u=null;#t="";#r="";#p=!1;#n=!1;#o=!1;#i=null;#d=`secure-password-confirm-${Math.random().toString(36).substring(2,11)}`;connectedCallback(){this.removeAttribute("security-tier"),super.connectedCallback()}static get observedAttributes(){return[...super.observedAttributes,"name","label","password-label","confirm-label","required","minlength"]}render(){const t=document.createDocumentFragment(),e=document.createElement("div");e.className="container",e.setAttribute("part","container");const i=this.getAttribute("label");if(i){const n=document.createElement("div");n.className="group-label",n.textContent=this.sanitizeValue(i),e.appendChild(n)}const r=this.hasAttribute("required"),s=this.#b({inputPart:"password-input",wrapperPart:"password-wrapper",labelPart:"password-label",errorPart:"password-error",togglePart:"password-toggle",labelText:this.getAttribute("password-label")??"New Password",inputId:`${this.#d}-password`,errorId:`${this.#d}-password-error`,isRequired:r});this.#e=s.querySelector('[part="password-input"]'),this.#l=s.querySelector('[part="password-toggle"]'),this.#c=s.querySelector('[part="password-error"]');const a=this.#b({inputPart:"confirm-input",wrapperPart:"confirm-wrapper",labelPart:"confirm-label",errorPart:"confirm-error",togglePart:"confirm-toggle",labelText:this.getAttribute("confirm-label")??"Confirm Password",inputId:`${this.#d}-confirm`,errorId:`${this.#d}-confirm-error`,isRequired:r});return this.#s=a.querySelector('[part="confirm-input"]'),this.#u=a.querySelector('[part="confirm-toggle"]'),this.#h=a.querySelector('[part="confirm-error"]'),this.#a=document.createElement("div"),this.#a.setAttribute("part","match-indicator"),this.#a.className="match-indicator",this.#a.setAttribute("aria-hidden","true"),e.appendChild(s),e.appendChild(a),e.appendChild(this.#a),this.#A(),this.#v(),this.#E(),this.#I(),this.addComponentStyles(new URL("./secure-password-confirm.css",import.meta.url).href),t.appendChild(e),t}#b(t){const e=document.createElement("div");e.className="field-section";const i=document.createElement("label");i.setAttribute("part",t.labelPart),i.htmlFor=t.inputId,i.textContent=this.sanitizeValue(t.labelText);const r=document.createElement("div");r.className="input-wrapper",r.setAttribute("part",t.wrapperPart);const s=document.createElement("input");s.id=t.inputId,s.type="password",s.autocomplete="new-password",s.setAttribute("part",t.inputPart),s.setAttribute("aria-describedby",t.errorId),t.isRequired&&(s.required=!0,s.setAttribute("aria-required","true"));const a=document.createElement("button");a.type="button",a.className="toggle-btn",a.setAttribute("part",t.togglePart),a.setAttribute("aria-label","Show password"),a.appendChild(this.#C()),r.appendChild(s),r.appendChild(a);const n=document.createElement("div");return n.id=t.errorId,n.setAttribute("part",t.errorPart),n.setAttribute("role","alert"),n.className="error-container hidden",e.appendChild(i),e.appendChild(r),e.appendChild(n),e}#A(){this.#e.addEventListener("focus",()=>{this.recordTelemetryFocus()}),this.#e.addEventListener("input",t=>{this.recordTelemetryInput(t),this.#t=this.#e.value,this.detectInjection(this.#t,this.getAttribute("name")??""),this.#p&&this.#m(),this.dispatchEvent(new CustomEvent("secure-input",{detail:{name:this.getAttribute("name")??"",field:"password"},bubbles:!0,composed:!0}))}),this.#e.addEventListener("blur",()=>{this.recordTelemetryBlur(),this.#P()})}#v(){this.#s.addEventListener("input",()=>{this.#r=this.#s.value,this.detectInjection(this.#r,this.getAttribute("name")??""),this.#p&&this.#m()}),this.#s.addEventListener("blur",()=>{this.#p=!0,this.#r=this.#s.value,this.#m()})}#E(){this.#l.addEventListener("click",()=>{this.#n=!this.#n,this.#e.type=this.#n?"text":"password",this.#l.classList.toggle("is-visible",this.#n),this.#l.setAttribute("aria-label",this.#n?"Hide password":"Show password")}),this.#u.addEventListener("click",()=>{this.#o=!this.#o,this.#s.type=this.#o?"text":"password",this.#u.classList.toggle("is-visible",this.#o),this.#u.setAttribute("aria-label",this.#o?"Hide confirm password":"Show confirm password")})}#C(){const t="http://www.w3.org/2000/svg",e=document.createElementNS(t,"svg");e.setAttribute("viewBox","0 0 24 24"),e.setAttribute("aria-hidden","true"),e.setAttribute("class","eye-icon"),e.setAttribute("width","18"),e.setAttribute("height","18");const i=document.createElementNS(t,"path");i.setAttribute("class","eye-outline"),i.setAttribute("d","M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z");const r=document.createElementNS(t,"circle");r.setAttribute("class","eye-pupil"),r.setAttribute("cx","12"),r.setAttribute("cy","12"),r.setAttribute("r","3");const s=document.createElementNS(t,"line");return s.setAttribute("class","eye-slash"),s.setAttribute("x1","3"),s.setAttribute("y1","3"),s.setAttribute("x2","21"),s.setAttribute("y2","21"),e.append(i,r,s),e}#P(){const t=this.#w(this.#t);t?this.#f(this.#c,this.#e,t):this.#g(this.#c,this.#e)}#w(t){return t?t.length<8?"Password must be at least 8 characters":/[a-z]/.test(t)?/[A-Z]/.test(t)?/[0-9]/.test(t)?/[^a-zA-Z0-9]/.test(t)?null:"Password must include a special character":"Password must include a number":"Password must include an uppercase letter":"Password must include a lowercase letter":null}#m(){const t=this.#t.length>0&&this.#t===this.#r;if(this.#S(t),this.#y(t),t)this.#g(this.#h,this.#s),this.dispatchEvent(new CustomEvent("secure-password-match",{detail:{name:this.getAttribute("name")??"",matched:!0},bubbles:!0,composed:!0}));else{const e=this.#r.length>0?"Passwords do not match":"Please confirm your password";this.#f(this.#h,this.#s,e),this.dispatchEvent(new CustomEvent("secure-password-mismatch",{detail:{name:this.getAttribute("name")??"",matched:!1},bubbles:!0,composed:!0}))}}#f(t,e,i){t.textContent=i,t.classList.remove("hidden"),e.setAttribute("aria-invalid","true")}#g(t,e){t.classList.add("hidden"),t.textContent="",e.removeAttribute("aria-invalid")}#y(t){this.#a&&(this.#a.className=`match-indicator ${t?"matched":"mismatched"}`,this.#a.textContent=t?"\u2713 Passwords match":"\u2717 Passwords do not match")}#I(){const t=this.getAttribute("name");!t||this.closest("secure-form")||(this.#i=document.createElement("input"),this.#i.type="hidden",this.#i.name=t,this.#i.value="",this.appendChild(this.#i))}#S(t){this.#i&&(this.#i.value=t?this.#t:"")}getPasswordValue(){return!this.#t||!this.#r||this.#t!==this.#r?null:this.#t}get valid(){return!this.#t||!this.#r||this.#t!==this.#r?!1:this.#w(this.#t)===null}get name(){return this.getAttribute("name")??""}disconnectedCallback(){super.disconnectedCallback(),this.#t="",this.#r="",this.#e&&(this.#e.value=""),this.#s&&(this.#s.value=""),this.#i&&(this.#i.value="")}}customElements.define("secure-password-confirm",o);var c=o;export{o as SecurePasswordConfirm,c as default};