Password Input

<PasswordInput
  className="w-72"
  clearable
  hint="Optional hint"
  label="Password"
  placeholder="Create password"
/>

import type {ReactElement} from "react"

import {KeyRound} from "lucide-react"

import {PasswordInput} from "@qualcomm-ui/react/password-input"

export function PasswordInputIconsDemo(): ReactElement {
  return (
    <PasswordInput
      className="w-72"
      label="Password"
      placeholder="Create password"
      startIcon={KeyRound}
    />
  )
}

<PasswordInput.Root className="w-72">
  <PasswordInput.Label>Password</PasswordInput.Label>
  <PasswordInput.InputGroup>
    <PasswordInput.Input placeholder="Placeholder text" />
    <PasswordInput.VisibilityTrigger />
  </PasswordInput.InputGroup>
  <PasswordInput.Hint>Optional hint</PasswordInput.Hint>
</PasswordInput.Root>

import {type ReactElement, useState} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {PasswordInput} from "@qualcomm-ui/react/password-input"

export function PasswordInputControlledValueDemo(): ReactElement {
  const [value, setValue] = useState<string>("passw0rd")

  return (
    <div className="flex items-end gap-4">
      <PasswordInput
        className="w-72"
        label="Password"
        onValueChange={(updatedValue) => {
          console.debug("Value changed:", updatedValue)
          setValue(updatedValue)
        }}
        placeholder="Enter your password"
        value={value}
      />

      <Button emphasis="primary" onClick={() => setValue("")} variant="outline">
        Reset
      </Button>
    </div>
  )
}

import {type ReactElement, useState} from "react"

import {Button} from "@qualcomm-ui/react/button"
import {PasswordInput} from "@qualcomm-ui/react/password-input"

export function PasswordInputControlledVisibilityDemo(): ReactElement {
  const [visible, setVisible] = useState<boolean>(false)

  return (
    <div className="flex flex-col gap-4">
      <PasswordInput
        className="w-72"
        defaultValue="passw0rd"
        label="Password"
        onVisibleChange={setVisible}
        placeholder="Enter your password"
        visible={visible}
      />

      <Button
        emphasis="primary"
        onClick={() => setVisible(!visible)}
        variant="outline"
      >
        {visible ? "Hide Password" : "Show Password"}
      </Button>
    </div>
  )
}

import {arktypeResolver} from "@hookform/resolvers/arktype"
import {type} from "arktype"
import {Controller, useForm} from "react-hook-form"

import {Button} from "@qualcomm-ui/react/button"
import {PasswordInput} from "@qualcomm-ui/react/password-input"

interface PasswordFormData {
  confirmPassword: string
  password: string
}

// Arktype schema
const passwordSchema = type({
  confirmPassword: "string",
  password: "string",
}).narrow(({confirmPassword, password}, ctx) => {
  let passwordError: string | undefined
  if (!password || password.trim().length === 0) {
    passwordError = "Please enter your password"
  } else if (password.length < 8) {
    passwordError = "Must be at least 8 characters long"
  } else if (!/(?=.*[a-z])/.test(password)) {
    passwordError = "Must contain at least one lowercase letter"
  } else if (!/(?=.*[A-Z])/.test(password)) {
    passwordError = "Must contain at least one uppercase letter"
  } else if (!/(?=.*\d)/.test(password)) {
    passwordError = "Must contain at least one number"
  } else if (!/(?=.*[@$!%*?&])/.test(password)) {
    passwordError = "Must contain at least one special character (@$!%*?&)"
  }

  let valid = true
  if (passwordError) {
    valid = false
    ctx.reject({message: passwordError, path: ["password"]})
  }
  if (!confirmPassword) {
    valid = false
    ctx.reject({
      message: "Please confirm your password",
      path: ["confirmPassword"],
    })
  } else if (password !== confirmPassword) {
    valid = false
    ctx.reject({
      // don't display the password in the error message
      actual: "",
      message: "Passwords do not match",
      path: ["confirmPassword"],
    })
  }
  return valid
})

export function PasswordInputReactHookFormDemo() {
  const {
    control,
    formState: {errors, isSubmitting, submitCount, touchedFields},
    handleSubmit,
  } = useForm<PasswordFormData>({
    defaultValues: {
      confirmPassword: "",
      password: "",
    },
    mode: "onChange",
    resolver: arktypeResolver(passwordSchema),
  })

  const onSubmit = (data: PasswordFormData) => {
    console.log("Form submitted:", data)
  }

  const shouldShowError = (fieldName: keyof PasswordFormData) => {
    return (submitCount > 0 || touchedFields[fieldName]) && errors[fieldName]
  }

  return (
    <form
      className="mx-auto flex w-full max-w-xs flex-col gap-3"
      onSubmit={(e) => {
        void handleSubmit(onSubmit)(e)
      }}
    >
      <div className="grid grid-cols-1 gap-4">
        <div>
          <Controller
            control={control}
            name="password"
            render={({field: {onChange, ...fieldProps}}) => {
              return (
                <PasswordInput
                  errorText={errors.password?.message}
                  hint="must be 8+ characters with at least 1 number, lowercase, uppercase, and special character."
                  invalid={!!shouldShowError("password")}
                  label="Password"
                  onValueChange={onChange}
                  placeholder="Create password"
                  {...fieldProps}
                />
              )
            }}
          />
        </div>

        <div>
          <Controller
            control={control}
            name="confirmPassword"
            render={({field: {onChange, ...fieldProps}}) => {
              return (
                <PasswordInput
                  errorText={errors.confirmPassword?.message}
                  invalid={!!errors.confirmPassword}
                  label="Confirm password"
                  onValueChange={onChange}
                  placeholder="Confirm password"
                  {...fieldProps}
                />
              )
            }}
          />
        </div>
      </div>

      <div className="mt-2 flex w-full justify-end">
        <Button
          disabled={isSubmitting}
          emphasis="primary"
          type="submit"
          variant="fill"
        >
          Submit
        </Button>
      </div>
    </form>
  )
}

import {useForm} from "@tanstack/react-form"

import {Button} from "@qualcomm-ui/react/button"
import {PasswordInput} from "@qualcomm-ui/react/password-input"

interface PasswordFormData {
  confirmPassword: string
  password: string
}

// Password validation utility
const validatePassword = (password: string): string | undefined => {
  if (!password || password.trim().length === 0) {
    return "Please enter your password"
  }
  if (password.length < 8) {
    return "Must be at least 8 characters long"
  }
  if (!/(?=.*[a-z])/.test(password)) {
    return "Must contain at least one lowercase letter"
  }
  if (!/(?=.*[A-Z])/.test(password)) {
    return "Must contain at least one uppercase letter"
  }
  if (!/(?=.*\d)/.test(password)) {
    return "Must contain at least one number"
  }
  if (!/(?=.*[@$!%*?&])/.test(password)) {
    return "Must contain at least one special character (@$!%*?&)"
  }
  return undefined
}

export function PasswordInputTanstackFormDemo() {
  const form = useForm({
    canSubmitWhenInvalid: true,
    defaultValues: {
      confirmPassword: "",
      password: "",
    } satisfies PasswordFormData,
    onSubmit: ({value}) => {
      console.log("Form submitted:", value)
    },
  })

  return (
    <form
      className="mx-auto flex w-full max-w-xs flex-col gap-3"
      onSubmit={(e) => {
        e.preventDefault()
        form.handleSubmit()
      }}
    >
      <div className="grid grid-cols-1 gap-4">
        <form.Field
          name="password"
          validators={{
            onBlur: ({value}) => validatePassword(value),
            onChange: ({fieldApi, value}) => {
              const error = validatePassword(value)
              if (!error) {
                fieldApi.setErrorMap({onBlur: undefined})
              }
              return error
            },
          }}
        >
          {(field) => {
            // only show the error if the user has attempted to submit the form, or
            // this field has been blurred. This prevents the error from showing
            // immediately as the user types.
            const isInvalid =
              (form.state.submissionAttempts > 0 ||
                field.getMeta().isBlurred) &&
              !!field.state.meta.errors?.at(0)
            return (
              <PasswordInput
                errorText={field.state.meta.errors?.at(0)}
                hint="must be 8+ characters with at least 1 number, lowercase, uppercase, and special character."
                invalid={isInvalid}
                label="Password"
                name={field.name}
                onBlur={field.handleBlur}
                onValueChange={field.handleChange}
                placeholder="Create password"
                value={field.state.value}
              />
            )
          }}
        </form.Field>

        <form.Field
          name="confirmPassword"
          validators={{
            onBlur: ({fieldApi, value}) => {
              if (!value || value.trim().length === 0) {
                return "Please confirm your password"
              }

              const passwordValue = fieldApi.form.getFieldValue("password")
              if (value !== passwordValue) {
                return "Passwords do not match"
              }

              return undefined
            },
            onChange: ({fieldApi, value}) => {
              if (!value || value.trim().length === 0) {
                return "Please confirm your password"
              }

              const passwordValue = fieldApi.form.getFieldValue("password")
              if (value !== passwordValue) {
                return "Passwords do not match"
              }

              // clear onBlur error
              fieldApi.setErrorMap({onBlur: undefined})
              return undefined
            },
          }}
        >
          {(field) => (
            <PasswordInput
              errorText={field.state.meta.errors?.at(0)}
              invalid={field.state.meta.errors.length > 0}
              label="Confirm password"
              name={field.name}
              onBlur={field.handleBlur}
              onValueChange={field.handleChange}
              placeholder="Confirm password"
              value={field.state.value}
            />
          )}
        </form.Field>
      </div>

      <div className="mt-2 flex w-full justify-end">
        <Button
          disabled={form.state.isSubmitting}
          emphasis="primary"
          type="submit"
          variant="fill"
        >
          Submit
        </Button>
      </div>
    </form>
  )
}