PasswordCreationField

Das PasswordCreationField unterstützt den User dabei, sichere Passwörter zu erstellen. Über eine visuelle Komplexitätsanzeige wird es dem User erleichtert, unsichere Passwörter zu erkennen und zu meiden.GitHub

Playground

Verwende <PasswordCreationField />, um ein PasswordCreationField darzustellen. Standardmäßig enthält die Component folgende Passwortregeln:

Mindestlänge von 12 Zeichen
Mindestens ein Sonderzeichen enthalten
Mindestens eine Zahl enthalten
Darf nicht durch HaveIBeenPwned verboten sein

import {
  Label,
  PasswordCreationField,
} from "@mittwald/flow-react-components";
import { useState } from "react";

export default () => {
  const [password, setPassword] = useState("");

  return (
    <PasswordCreationField
      value={password}
      onChange={setPassword}
    >
      <Label>Password</Label>
    </PasswordCreationField>
  );
}

Mit zusätzlichen Buttons

Das PasswordCreationField kann mit zusätzlichen Buttons ergänzt werden. Diese Erweiterungen sind flexibel einsetzbar und sollten im direkten Zusammenhang mit der Passworterstellung stehen.

Mit Copy Button

Optional kann ein CopyButton integriert werden. Dadurch lassen sich erstellte Passwörter direkt in die Zwischenablage kopieren.

Passwort Richtlinien

Neben den Standardrichtlinien können eigene Passwortanforderungen definiert werden. Diese sollten klar formuliert und für User nachvollziehbar sein.

Disabled

Ist das PasswordCreationField disabled, ist keine Interaktion möglich.

Kombiniere mit ...

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form).

Components