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.

import {
  Button,
  Label,
  PasswordCreationField,
  IconSshKey,
} from "@mittwald/flow-react-components";
import { useState } from "react";
export default () => {
  const [password, setPassword] = useState("");

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

Mit Copy Button

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

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

export default () => {
  return (
    <PasswordCreationField>
      <Label>Password</Label>
      <CopyButton />
    </PasswordCreationField>
  );
}

Passwort Richtlinien

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

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

import {
  Policy,
  RuleType,
} from "@mittwald/flow-react-components/mittwald-password-tools-js";
import { useState } from "react";

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

  return (
    <PasswordCreationField
      validationPolicy={Policy.fromDeclaration({
        minComplexity: 3,
        rules: [
          {
            ruleType: RuleType.length,
            min: 8,
            max: 12,
          },
          {
            ruleType: RuleType.regex,
            pattern: "^[0-9]",
            min: 1,
            max: 2,
          },
          {
            ruleType: RuleType.hibp,
          },
          {
            identifier: "special",
            ruleType: RuleType.charPool,
            charPools: ["special"],
            min: 1,
            max: 2,
          },
          {
            identifier: "numbers",
            ruleType: RuleType.charPool,
            charPools: ["numbers"],
            min: 1,
            max: 2,
          },
          {
            ruleType: RuleType.blocklist,
            blocklist: ["foo", "bar"],
            substringMatch: true,
          },
        ],
      })}
      value={password}
      onChange={setPassword}
    >
      <Label>Password</Label>
    </PasswordCreationField>
  );
}

Disabled

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

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

<PasswordCreationField isDisabled>
  <Label>Password</Label>
</PasswordCreationField>

Kombiniere mit ...

React Hook Form

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

import { useForm } from "react-hook-form";
import {
  Form,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/03-components/actions/action/examples/lib";
import {
  Button,
  Label,
  Section,
  PasswordCreationField,
} from "@mittwald/flow-react-components";
import {
  generatePasswordCreationFieldValidation,
  Policy,
  RuleType,
} from "@mittwald/flow-react-components/mittwald-password-tools-js";

export default () => {
  const customPolicy = Policy.fromDeclaration({
    minComplexity: 3,
    rules: [
      {
        ruleType: RuleType.length,
        min: 8,
        max: 12,
      },
    ],
  });

  const form = useForm<{ password: string }>({
    defaultValues: {
      password: "",
    },
  });
  const Field = typedField(form);

  return (
    <Section>
      <Form form={form} onSubmit={sleep}>
        <Field
          name="password"
          rules={{
            required: true,
            validate:
              generatePasswordCreationFieldValidation(
                customPolicy,
              ),
          }}
        >
          <PasswordCreationField
            validationPolicy={customPolicy}
          >
            <Label>Passwort</Label>
          </PasswordCreationField>
        </Field>
        <Button type="submit">Speichern</Button>
      </Form>
    </Section>
  );
}

Components