# 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.

## Overview

# 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](https://haveibeenpwned.com/passwords)
  verboten sein

```tsx
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](/04-components/actions/button/overview) ergänzt werden. Diese
Erweiterungen sind flexibel einsetzbar und sollten im direkten Zusammenhang mit
der Passworterstellung stehen.

```tsx
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](/04-components/actions/copy-button/overview)
integriert werden. Dadurch lassen sich erstellte Passwörter direkt in die
Zwischenablage kopieren.

```tsx
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.

```tsx
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.

```tsx
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)](/04-components/react-hook-form/form/overview).

```tsx
import { useForm } from "react-hook-form";
import {
  Form,
  SubmitButton,
  typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-components/actions/action/examples/lib";
import {
  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>
        <SubmitButton>Speichern</SubmitButton>
      </Form>
    </Section>
  );
}
```