Password Hell

A password field with requirements that change every few seconds, often contradicting each other.

Test Your AI See this pattern in action in Level 6: Password Requirements From Hell
Try Level 6

Demo

Requirements changing...

    Try to create a password that meets all requirements before they change

    React

    React
    1.import { PasswordHell } from 'anti-ai-ui';
    2.

    3.function App() {
    4.  return (
    5.    <PasswordHell
    6.      requirementChangeInterval={3000}
    7.      onSubmit={(password) => console.log('Submitted:', password)}
    8.    />
    9.  );
    10.}

    Custom Components

    Custom Components
    1.import { PasswordHell } from 'anti-ai-ui';
    2.import { MyInput, MyButton } from './MyComponents';
    3.

    4.function App() {
    5.  return (
    6.    <PasswordHell
    7.      requirementChangeInterval={3000}
    8.      renderInput={({ value, onChange, type }) => (
    9.        <MyInput
    10.          type={type}
    11.          value={value}
    12.          onChange={(e) => onChange(e.target.value)}
    13.          placeholder="Enter password..."
    14.        />
    15.      )}
    16.      renderRules={({ rules }) => (
    17.        <ul className="my-rules-list">
    18.          {rules.map((rule) => (
    19.            <li key={rule.id} className={rule.isValid ? 'valid' : 'invalid'}>
    20.              {rule.description}
    21.            </li>
    22.          ))}
    23.        </ul>
    24.      )}
    25.      renderSubmit={({ onSubmit }) => (
    26.        <MyButton onClick={onSubmit}>
    27.          Create Account
    28.        </MyButton>
    29.      )}
    30.      onSubmit={(password) => console.log('Submitted:', password)}
    31.    />
    32.  );
    33.}

    Vanilla JS

    Vanilla JS
    1.import { makePasswordHell } from 'anti-ai-ui/vanilla';
    2.

    3.const container = document.getElementById('container');
    4.

    5.const { destroy } = makePasswordHell(container, {
    6.  requirementChangeInterval: 3000,
    7.  onSubmit: (password) => console.log('Submitted:', password)
    8.});
    9.

    10.// Call destroy() to remove

    Props

    Prop Type Default Description
    requirementChangeInterval number 2500 How often requirements change (ms)
    onSubmit function undefined Callback when form is submitted with valid password
    renderInput (props: RenderInputProps) => ReactNode undefined Custom render function for the password input
    renderRules (props: RenderRulesProps) => ReactNode undefined Custom render function for the requirements list
    renderSubmit (props: RenderSubmitProps) => ReactNode undefined Custom render function for the submit button
    className string undefined CSS class for the form container
    style CSSProperties undefined Inline styles for the form container