js/views/register.js — stiprumas ir async

Kodo stulpelyje — js/views/register.js, sudėtingiausia forma kurse. Trys nauji dalykai.

1. Slaptažodžio stiprumas. checkPassword (iš validation.js) grąžina balą 0–4 ir trūkumus:

export function checkPassword(password) {
  let score = 0; const errors = [];
  if (password.length >= 8) score++; else errors.push('At least 8 characters.');
  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++; else errors.push('Mix of case.');
  if (/\d/.test(password)) score++; else errors.push('A number.');
  if (/[^A-Za-z0-9]/.test(password)) score++; else errors.push('A symbol.');
  return { score, label: ['Very weak','Weak','Fair','Good','Strong'][score], errors };
}

Per input matuoklio juosta ir sąrašas atsinaujina gyvai — vartotojas mato, kaip stiprumas auga.

2. Patvirtinimo sutapimas — kryžminis, tikrinamas gyvai. matches(values.password, ...) yra taisyklė. Bet yra subtilumas: jei jau įvedei patvirtinimą, o paskui keiti pirmą slaptažodį, patvirtinimas turi persivertinti iškart:

passwordInput.addEventListener('input', () => {
  const confirm = form.querySelector('[name="confirmPassword"]');
  if (confirm.value) {
    setFieldError(form, 'confirmPassword',
      confirm.value === passwordInput.value ? '' : 'Passwords do not match.');
  }
});

3. Asinchroninis patikrinimas. „Ar vardas užimtas?" per blur:

usernameInput.addEventListener('blur', async () => {
  usernameInput.classList.add('checking');            // suktukas
  const taken = await isUsernameTaken(value);         // imituota serverio užklausa
  usernameInput.classList.remove('checking');
  if (taken) setFieldError(form, 'username', `"${value}" is already taken.`);
});

Patikrink. Registracijos formoje:

1. Rašai slaptažodį → matuoklis auga, reikalavimai žymimi ✓.
2. Patvirtinimas nesutampa → klaida; ištaisai pirmą slaptažodį → klaida dingsta gyvai.
3. Įvedi „admin" ir išeini iš lauko → po ~pusės sekundės: „already taken".

Spąstai (async lenktynės). Asinchroninės patikros gali lenktyniauti: įvedi „admin" (lėta patikra pakeliui), tada „adm002" (greita patikra grįžta pirma). Jei nesaugosies, senesnis atsakymas gali perrašyti naujesnį ir parodyti klaidą ne tam vardui. Tikri sprendimai: debounce + „laimi paskutinis" (pagal užklausos eilės numerį). 17 pamokoje pamatysim, kaip tipai padeda modeliuoti tokią „laukiama / gauta / klaida" būseną saugiai.

Sukurk šį failą kataloge js/views/

// Registration (DEMO). Teaches the hardest form patterns: password strength,
// confirmation matching (cross-field, re-checked live), show/hide, a required
// terms checkbox, and ASYNC validation (is the username taken?).
//
// The password is NEVER stored — passwords belong on a server, hashed, never
// in the browser. We don't store it at all.

import { attachLiveValidation, setFieldError } from '../forms.js';
import {
  required, email, minLength, maxLength, matches, checked, checkPassword,
} from '../validation.js';
import { showToast } from '../toast.js';

const form = document.getElementById('register-form');
const passwordInput = form.querySelector('[name="password"]');
const usernameInput = form.querySelector('[name="username"]');

const TAKEN_USERNAMES = ['admin', 'nasa', 'cosmos', 'apod', 'test'];   // a fake "server"

function rules(values) {
  return {
    username: [required('Username'), minLength(3, 'Username'), maxLength(20, 'Username')],
    email: [required('Email'), email()],
    password: [required('Password'), (v) => checkPassword(v).errors[0] || null],
    // CROSS-FIELD: this rule reads ANOTHER field's value
    confirmPassword: [required('Password confirmation'), matches(values.password, 'Passwords do not match.')],
    terms: [checked('You must accept the terms to continue.')],
  };
}

export function initRegister() {
  const validateAll = attachLiveValidation(form, rules);

  // --- live password strength + live confirm-match ---
  passwordInput.addEventListener('input', () => {
    const { score, label } = checkPassword(passwordInput.value);
    // ...update the meter bar width + label from `score`/`label`...

    // If confirm already has a value, re-check the match on every keystroke
    const confirm = form.querySelector('[name="confirmPassword"]');
    if (confirm.value) {
      setFieldError(form, 'confirmPassword',
        confirm.value === passwordInput.value ? '' : 'Passwords do not match.');
    }
  });

  // --- ASYNC validation: is the username taken? (real app: a debounced request) ---
  usernameInput.addEventListener('blur', async () => {
    const value = usernameInput.value.trim();
    if (value.length < 3) return;
    usernameInput.classList.add('checking');           // a spinner while awaiting
    const taken = await isUsernameTaken(value);
    usernameInput.classList.remove('checking');
    if (taken) setFieldError(form, 'username', `"${value}" is already taken.`);
  });

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    if (!validateAll().ok) { showToast('Please fix the errors below', 'error'); return; }
    // the async check must pass too, then fakeRegister() — never storing the password
  });
}

/** Fake "is this username free?" — a real one hits your server. */
function isUsernameTaken(username) {
  return new Promise(resolve =>
    setTimeout(() => resolve(TAKEN_USERNAMES.includes(username.toLowerCase())), 500));
}