One Time Password (OTP) – Eingabe von Einmalpasswörtern

<wm-otp name="signin-code-6" label="SMS-Code" value="1234a6" required numberOfFields="6" inputMode="text"></wm-otp>

<wm-otp name="signin-code-4" label="SMS-Code" value="2222" required numberOfFields="4" inputMode="numeric"></wm-otp>

<wm-otp
    name="recovery-code"
    label="Wiederherstellungscode"
    numberOfFields="6"
    required
    requiredText="Bitte den Wiederherstellungscode eingeben"
    hideAsterisk
  >
    <div slot="hint">Wir senden den Code an Ihre hinterlegte E-Mail-Adresse.</div>
  </wm-otp>

<wm-otp
    name="invalid-code"
    label="Code bestätigen"
    value="1111"
    error="Der eingegebene Code ist ungültig."
    required
  ></wm-otp>

<wm-otp
    id="countdown-demo"
    name="countdown-code"
    label="Code läuft bald ab"
    numberOfFields="6"
    countdownTime="10"
    countdownText="Der Code läuft in [COUNTDOWNTIME] Sekunden ab."
    countdownEndedText="Der Code ist abgelaufen. Bitte fordern Sie einen neuen an."
    required
  ></wm-otp>
  <script type="module">
    const initCountdownDemo = async () => {
      if (!customElements.get('wm-otp')) {
        await customElements.whenDefined('wm-otp');
      }

      const otp = document.getElementById('countdown-demo');
      if (!otp) {
        return;
      }
      otp.startTimer();
      otp.addEventListener('wm-timed-out', () => {
        console.log('Countdown ended for OTP component.');
      });
    };

    initCountdownDemo();
  </script>

<wm-otp name="disabled-code" label="Code im Prüfmodus" value="987654" disabled></wm-otp>

<wm-otp
    id="error-recovery-demo"
    name="error-recovery-demo"
    label="Code überprüfen"
    numberOfFields="4"
    required
  ></wm-otp>
  <p id="error-recovery-status" aria-live="polite"></p>
<script type="module">
  const initErrorRecoveryDemo = async () => {
    if (!customElements.get('wm-otp')) {
      await customElements.whenDefined('wm-otp');
    }

    const otp = document.getElementById('error-recovery-demo');
    const status = document.getElementById('error-recovery-status');

    if (!otp || !status) {
      return;
    }

    const showStatus = (message) => {
      status.textContent = message;
    };

    otp.addEventListener('complete', () => {
      const value = otp.value || '';
      if (value === '1234') {
        otp.error = '';
        showStatus('Der Code wurde korrekt eingegeben. Der Fehlerzustand wurde entfernt.');
      } else {
        otp.error = 'Der eingegebene Code ist falsch. Bitte versuchen Sie es erneut.';
        showStatus('Der eingegebene Code ist falsch. Bitte versuchen Sie es erneut.');
      }
    });

    otp.addEventListener('input', () => {
      if (!otp.error) {
        return;
      }

      if (otp.value?.length === otp.numberOfFields) {
        const currentValue = otp.value || '';
        if (currentValue === '1234') {
          otp.error = '';
          showStatus('Der Code wurde korrekt eingegeben. Der Fehlerzustand wurde entfernt.');
        }
      }
    });

    otp.addEventListener('change', () => {
      if (!otp.error) {
        return;
      }

      if ((otp.value || '').length === otp.numberOfFields && otp.value !== '1234') {
        otp.error = 'Der eingegebene Code ist falsch. Bitte versuchen Sie es erneut.';
        showStatus('Der eingegebene Code ist falsch. Bitte versuchen Sie es erneut.');
      }
    });
  };

  initErrorRecoveryDemo();
</script>

<wm-otp id="redirect-demo" name="redirect-demo" label="Weiterleitungstest" numberOfFields="4" required></wm-otp>
<p id="redirect-demo-status" aria-live="polite"></p>
<script type="module">
  const initRedirectDemo = async () => {
    if (!customElements.get('wm-otp')) {
      await customElements.whenDefined('wm-otp');
    }

    const otp = document.getElementById('redirect-demo');
    const status = document.getElementById('redirect-demo-status');

    if (!otp || !status) {
      return;
    }

    const showStatus = (message) => {
      status.textContent = message;
    };

    otp.addEventListener('complete', () => {
      const value = otp.value || '';
      if (value === '1234') {
        otp.error = '';
        showStatus('Der Code wurde korrekt eingegeben. Der Fehlerzustand wurde entfernt.');
        showStatus('Weiterleitung zum nächsten Schritt…');
        window.location.href = '/pattern-library/patterns/OneTimePassword/otp/#redirect-demo';
      } else {
        otp.error = 'Der eingegebene Code ist falsch. Bitte versuchen Sie es erneut.';
        showStatus('Der eingegebene Code ist falsch. Bitte versuchen Sie es erneut.');
      }
    });
  };

  initRedirectDemo();
</script>

<wm-otp
    id="api-playground"
    name="api-playground-code"
    label="API Playground"
    required
    numberOfFields="4"
    countdownTime="5"
    inputMode="text"
    countdownText="Der Code läuft in [COUNTDOWNTIME] Sekunden ab."
    countdownEndedText="Der Code ist abgelaufen. Bitte fordern Sie einen <a href='#'>neuen Code</a> an."
    required></wm-otp>
  <wm-stack horizontal="true" gap="xxs" wrap="true">
    <button type="button" data-action="set-value">Beispielwert</button>
    <button type="button" data-action="reset">Zurücksetzen</button>
    <button type="button" data-action="validate">Validieren</button>
    <button type="button" data-action="start-timer">Countdown starten</button>
    <button type="button" data-action="set-error">Fehler setzen</button>
    <button type="button" data-action="clear-error">Fehler löschen</button>
  </wm-stack>
  <p id="api-playground-status" aria-live="polite"></p>
<script type="module">
  const setStatus = (message) => {
    const output = document.getElementById('api-playground-status');
    if (output) {
      output.textContent = message;
    }
  };

  const initApiPlayground = async () => {
    if (!customElements.get('wm-otp')) {
      await customElements.whenDefined('wm-otp');
    }

    const otp = document.getElementById('api-playground');
    if (!otp) {
      return;
    }

    document.querySelectorAll('[data-action]').forEach((button) => {
      button.addEventListener('click', () => {
        const action = button.getAttribute('data-action');
        switch (action) {
          case 'set-value': {
            otp.value = '1234';
            setStatus('Beispielwert auf dem Host gesetzt.');
            break;
          }
          case 'reset': {
            otp.reset();
            setStatus('OTP-Komponente zurückgesetzt.');
            break;
          }
          case 'validate': {
            const valid = otp.reportValidity();
            setStatus(valid ? 'Validierung erfolgreich.' : 'Validierung fehlgeschlagen.');
            break;
          }
          case 'start-timer': {
            otp.startTimer();
            setStatus('Countdown-Timer gestartet.');
            break;
          }
          case 'set-error': {
            otp.error = 'Der eingegebene Code ist ungültig.';
            setStatus('Benutzerdefinierter Fehlerzustand gesetzt.');
            break;
          }
          case 'clear-error': {
            otp.error = '';
            setStatus('Benutzerdefinierter Fehlerzustand gelöscht.');
            break;
          }
          default:
            break;
        }
      });
    });
  };

  initApiPlayground();
</script>