Example: Password Reveal Button

CruddyForms generates an SVG password reveal button for each form field of type password, and it provides vanilla javascript that toggles the visibility of the password when the button is clicked.
    1

  • Define the schema using Typebox

        // ~/examples/basic/schema.ts
import {Type} from "@sinclair/typebox";
import type {FormInputText} from "cruddy-forms";

const PASS_MIN = 6;
export const Schema = Type.Object( {
  password: Type.String( {
    element: "input",
    hint: `Use ${PASS_MIN} or more characters`,
    inputType: "password",
    minLength: PASS_MIN,
    placeholder: "your password",
    } satisfies FormInputText ),
} );
    ts
    • 2

  • Generate the Form HTML

    Here we create 3 example forms to demonstrate how to enable and/or customize the password reveal button in CruddyForms. Be sure to call form.getHTMLComponent() to get the HTML which will work automatically with the javascript provided by CruddyForms.

        // ~/examples/custom/form.ts
import {Form} from "cruddy-forms";
import {Schema} from "~/examples/password/schema.ts";

export function getHTMLComponent1(data?: FormData) {
  const form = new Form(Schema, "Submit", {passwordHideSVG: "", passwordShowSVG: ""});
  if (data) {
    form.validate(data);
  }
  return form.getHTMLComponent();
}

export function getHTMLComponent2(data?: FormData) {
  const form = new Form(Schema);
  if (data) {
    form.validate(data);
  }
  return form.getHTMLComponent();
}

export function getHTMLComponent3(data?: FormData) {
  const passwordShowSVG = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-check" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M11.102 17.957c-3.204 -.307 -5.904 -2.294 -8.102 -5.957c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6a19.5 19.5 0 0 1 -.663 1.032" /><path d="M15 19l2 2l4 -4" /></svg>`;
  const passwordHideSVG = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-closed" width="32" height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M21 9c-2.4 2.667 -5.4 4 -9 4c-3.6 0 -6.6 -1.333 -9 -4" /><path d="M3 15l2.5 -3.8" /><path d="M21 14.976l-2.492 -3.776" /><path d="M9 17l.5 -4" /><path d="M15 17l-.5 -4" /></svg>`;
  const form = new Form(Schema, "Submit", {passwordHideSVG, passwordShowSVG});
  if (data) {
    form.validate(data);
  }
  return form.getHTMLComponent();
}
    ts
    3

  • Serve the Form HTML, CSS, and Javascript

    The details of this step will depend on your chosen server-side rendering framework. Your server response should include the generated Form HTML from Step 2, the normform.css file, and the cruddy-client.js script that ships with CruddyForms.
    • 4

  • Resulting Forms

    Notice the 3 different versions of the password reveal button, generated from the code in Step 2.

    No Password Reveal Button
    Use 6 or more characters

    Default Password Reveal Button
    Use 6 or more characters

    Custom Password Reveal Button
    Use 6 or more characters