@dowel-ui/react 0.5.0 → 0.7.0

package/src/blocks/signup/signup.tsx

@@ -1,240 +0,0 @@
-"use client";
-
-import { useState, type FormEvent } from "react";
-
-import { Button } from "@/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/card";
-import { Checkbox } from "@/components/checkbox";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormLabel,
-  FormMessage,
-} from "@/components/form";
-import { Input } from "@/components/input";
-import { Progress } from "@/components/progress";
-import { cn } from "@/lib/utils";
-
-/**
- * An account creation form.
- *
- * The password strength meter is the interesting part. It is a hint, not a
- * gate: the requirement is a length minimum, and the meter tells people how
- * they are doing without inventing rules about symbols that push everyone
- * towards the same predictable substitutions.
- */
-
-export interface SignupBlockProps {
-  onSubmit?: (values: { name: string; email: string; password: string }) => void;
-  error?: string;
-  pending?: boolean;
-  loginHref?: string;
-  /** Minimum password length. Length is the requirement that actually helps. */
-  minPasswordLength?: number;
-  className?: string;
-}
-
-interface Strength {
-  score: number;
-  label: string;
-  tone: "destructive" | "warning" | "success";
-}
-
-/**
- * A rough strength estimate.
- *
- * Deliberately crude, and deliberately not a validation rule. Its only job is
- * to nudge; the form is gated on length alone.
- */
-export function estimatePasswordStrength(password: string, minLength: number): Strength {
-  if (password.length === 0)
-    return { score: 0, label: "Enter a password", tone: "destructive" };
-
-  let score = Math.min(60, (password.length / (minLength * 2)) * 60);
-  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score += 15;
-  if (/\d/.test(password)) score += 10;
-  if (/[^\w\s]/.test(password)) score += 15;
-
-  const rounded = Math.min(100, Math.round(score));
-  if (password.length < minLength)
-    return { score: rounded, label: "Too short", tone: "destructive" };
-  if (rounded < 60) return { score: rounded, label: "Weak", tone: "warning" };
-  if (rounded < 85) return { score: rounded, label: "Good", tone: "success" };
-  return { score: rounded, label: "Strong", tone: "success" };
-}
-
-export function SignupBlock({
-  onSubmit,
-  error,
-  pending = false,
-  loginHref = "/login",
-  minPasswordLength = 12,
-  className,
-}: SignupBlockProps) {
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [accepted, setAccepted] = useState(false);
-  const [touched, setTouched] = useState(false);
-
-  const strength = estimatePasswordStrength(password, minPasswordLength);
-  const emailError =
-    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-  const passwordError =
-    touched && password.length < minPasswordLength
-      ? `Use at least ${String(minPasswordLength)} characters.`
-      : undefined;
-  const termsError = touched && !accepted ? "Accept the terms to continue." : undefined;
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setTouched(true);
-    if (!email.includes("@") || password.length < minPasswordLength || !accepted) return;
-    onSubmit?.({ name, email, password });
-  }
-
-  return (
-    <Card className={cn("w-full max-w-sm", className)}>
-      <CardHeader>
-        <CardTitle>Create an account</CardTitle>
-        <CardDescription>Start building in a couple of minutes.</CardDescription>
-      </CardHeader>
-
-      <CardContent>
-        <Form onSubmit={handleSubmit} className="gap-4">
-          {error ? (
-            <p role="alert" className="text-sm font-medium text-destructive">
-              {error}
-            </p>
-          ) : null}
-
-          <FormField name="name">
-            <FormLabel>Name</FormLabel>
-            <FormControl>
-              <Input
-                autoComplete="name"
-                placeholder="Ada Lovelace"
-                value={name}
-                disabled={pending}
-                onChange={(event) => {
-                  setName(event.target.value);
-                }}
-              />
-            </FormControl>
-          </FormField>
-
-          <FormField name="email" error={emailError}>
-            <FormLabel>Email</FormLabel>
-            <FormControl>
-              <Input
-                type="email"
-                autoComplete="email"
-                placeholder="you@example.com"
-                value={email}
-                disabled={pending}
-                onChange={(event) => {
-                  setEmail(event.target.value);
-                }}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormField>
-
-          <FormField name="password" error={passwordError}>
-            <FormLabel>Password</FormLabel>
-            <FormControl>
-              <Input
-                type="password"
-                autoComplete="new-password"
-                value={password}
-                disabled={pending}
-                onChange={(event) => {
-                  setPassword(event.target.value);
-                }}
-              />
-            </FormControl>
-            <FormDescription>At least {minPasswordLength} characters.</FormDescription>
-            <FormMessage />
-          </FormField>
-
-          {password.length > 0 ? (
-            <div className="grid gap-1.5">
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-muted-foreground">Password strength</span>
-                <span
-                  className={cn(
-                    strength.tone === "success"
-                      ? "text-success"
-                      : strength.tone === "warning"
-                        ? "text-warning"
-                        : "text-destructive",
-                  )}
-                >
-                  {strength.label}
-                </span>
-              </div>
-              {/* The label above already says the strength, so the bar is a
-                  summary rather than a second thing to read. */}
-              <Progress
-                value={strength.score}
-                size="sm"
-                tone={
-                  strength.tone === "success"
-                    ? "success"
-                    : strength.tone === "warning"
-                      ? "warning"
-                      : "destructive"
-                }
-                aria-hidden="true"
-              />
-            </div>
-          ) : null}
-
-          <FormField name="terms" error={termsError}>
-            <div className="flex items-start gap-2">
-              <FormControl>
-                <Checkbox
-                  className="mt-0.5"
-                  checked={accepted}
-                  disabled={pending}
-                  onCheckedChange={(checked) => {
-                    setAccepted(checked === true);
-                  }}
-                />
-              </FormControl>
-              {/* FormLabel, not a Label with a guessed htmlFor: the field
-                  generates the control's id, so anything hard-coded points at
-                  nothing and leaves the checkbox unnamed. */}
-              <FormLabel className="text-sm leading-snug font-normal">
-                I agree to the terms of service and privacy policy.
-              </FormLabel>
-            </div>
-            <FormMessage />
-          </FormField>
-
-          <Button type="submit" loading={pending} className="w-full">
-            Create account
-          </Button>
-        </Form>
-      </CardContent>
-
-      <CardFooter className="justify-center">
-        <p className="text-sm text-muted-foreground">
-          Already have an account?{" "}
-          <a href={loginHref} className="font-medium text-primary underline underline-offset-4">
-            Sign in
-          </a>
-        </p>
-      </CardFooter>
-    </Card>
-  );
-}