Password input

import { Button } from "@bosunkit/components/button";
import { Card } from "@bosunkit/components/card";
import { FormField } from "@bosunkit/components/form-field";
import { Input } from "@bosunkit/components/input";
import { PasswordInput } from "@bosunkit/components/password-input";
import type { CSSProperties, ReactElement, SyntheticEvent } from "react";

export const description: string =
  "The Starlink router's Wi-Fi network and the cloud assistant's key, as two forms in one card: a password manager " +
  "saves the password under the network's name and leaves the key alone. Press Caps Lock in the password field to " +
  "see the warning.";

/** The two forms side by side where the card has room for both, as on a phone on its side, one over the other below. */
const FORMS: CSSProperties = {
  display: "grid",
  gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 18em), 1fr))",
  alignItems: "start",
  gap: "var(--space-lg)",
};

function keepOnPage(event: SyntheticEvent<HTMLFormElement>): void {
  event.preventDefault();
}

export default function Showcase(): ReactElement {
  return (
    <Card title="Connections" style={{ width: "100%", maxWidth: 820 }}>
      <div style={FORMS}>
        <form onSubmit={keepOnPage} style={{ display: "grid", gap: "var(--space-md)" }}>
          <FormField label="Wi-Fi network">
            <Input autoComplete="username" defaultValue="STARLINK-Althea" spellCheck={false} />
          </FormField>
          <FormField label="Wi-Fi password" hint="On the label under the Starlink router.">
            <PasswordInput purpose="current" defaultValue="harbor-light-26" hideOnBlur />
          </FormField>
          <Button type="submit" variant="primary">
            Join network
          </Button>
        </form>
        <form onSubmit={keepOnPage} style={{ display: "grid", gap: "var(--space-md)" }}>
          <FormField label="Anthropic API key" hint="From the Anthropic console. Paste it from your password manager.">
            <PasswordInput purpose="secret" placeholder="sk-ant-…" />
          </FormField>
          <Button type="submit">Save key</Button>
        </form>
      </div>
    </Card>
  );
}

import { PasswordInput } from "@bosunkit/components/password-input";
import type { ReactElement } from "react";

export const description: string =
  "A marina's Wi-Fi password, `purpose=\"current\"`: the form shows no username, so `username` puts the network's " +
  "name in a hidden field and a password manager saves the password under it.";

export default function CurrentPassword(): ReactElement {
  return (
    <form style={{ width: "100%", maxWidth: 360 }}>
      <PasswordInput
        appearance="outlined"
        label="Password for Marina Falmouth Guest"
        username="Marina Falmouth Guest"
        purpose="current"
      />
    </form>
  );
}

import { PasswordInput } from "@bosunkit/components/password-input";
import type { ReactElement } from "react";

export const description: string =
  'The vessel\'s own Wi-Fi password, `purpose="new"`: a checklist of its length and the names to leave out, and ' +
  "`passwordRules` for the managers' generators. The show button lets the crew check what they typed, so there is " +
  "no second field.";

/** WPA2's limits for a passphrase: 8 to 63 printable ASCII characters. Lengths and a character set, no classes. */
const RULES: string = "minlength: 8; maxlength: 63; allowed: ascii-printable;";

export default function NewPassword(): ReactElement {
  return (
    <form style={{ width: "100%", maxWidth: 360 }}>
      <PasswordInput
        appearance="outlined"
        label="New Wi-Fi password"
        username="Althea"
        purpose="new"
        passwordRules={RULES}
        minLength={8}
        maxLength={63}
        contextWords={["Althea"]}
      />
    </form>
  );
}

import { PasswordInput } from "@bosunkit/components/password-input";
import type { ReactElement } from "react";

export const description: string =
  'A Telegram bot token, `purpose="secret"`: the managers\' extensions leave the field alone, and pasting works.';

export default function Secret(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <PasswordInput
        appearance="outlined"
        label="Telegram bot token"
        hint="From BotFather in Telegram, as 123456789:AA…"
        purpose="secret"
      />
    </div>
  );
}

import { PasswordInput } from "@bosunkit/components/password-input";
import type { ReactElement } from "react";

export const description: string =
  'The guest network\'s password, `purpose="shared"`: guests are told it, so it is plain text with no show button, ' +
  "never hidden, with the checklist of a new password.";

export default function Shared(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <PasswordInput
        appearance="outlined"
        label="Guest Wi-Fi password"
        purpose="shared"
        minLength={8}
        maxLength={63}
        contextWords={["Althea", "Althea Guest"]}
        defaultValue="harbor-lantern-41"
      />
    </div>
  );
}

import { PasswordInput } from "@bosunkit/components/password-input";
import type { ReactElement } from "react";

export const description: string =
  "A password the network refused: the error says what happened and what to do, and is announced.";

export default function Invalid(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <PasswordInput
        appearance="outlined"
        label="Wi-Fi password"
        username="Marina Falmouth Guest"
        defaultValue="harborguest2"
        error="The network refused this password. Check it with the marina office and type it again."
      />
    </div>
  );
}

import { PasswordInput } from "@bosunkit/components/password-input";
import type { ReactElement } from "react";

export const description: string = "A disabled field: it cannot be typed in or shown.";

export default function Disabled(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <PasswordInput appearance="outlined" label="Wi-Fi password" defaultValue="harbor-light-26" disabled />
    </div>
  );
}

import { FormField } from "@bosunkit/components/form-field";
import { PasswordInput } from "@bosunkit/components/password-input";
import type { ReactElement } from "react";

export const description: string =
  "Inside a form field: the field's label names the input, and its hint and required state reach it.";

export default function InFormField(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <FormField label="Wi-Fi password" hint="On the label under the router." required>
        <PasswordInput username="STARLINK-Althea" />
      </FormField>
    </div>
  );
}

import { FormField } from "@bosunkit/components/form-field";
import { PasswordInput } from "@bosunkit/components/password-input";
import type { ReactElement } from "react";

export const description: string =
  "The two appearances: `plain`, the kit's text input inside a form field, and `outlined`, the maritime inputs' " +
  "outlined field with its name on the outline. The button sits inside the field's edge in both.";

export default function Appearances(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360, display: "grid", gap: "var(--space-lg)" }}>
      <FormField label="Wi-Fi password">
        <PasswordInput defaultValue="harbor-light-26" />
      </FormField>
      <PasswordInput appearance="outlined" label="Wi-Fi password" defaultValue="harbor-light-26" />
    </div>
  );
}