mjbalcueva/password-input.tsx

mjbalcueva · 2023-11-19T15:12:09Z

and here's what it looks like:

cblberlin · 2023-11-20T08:41:05Z

gread example, thx

lucassarcanjo · 2024-02-05T14:37:05Z

awesome man, thanks!

NirajD10 · 2024-02-24T04:51:36Z

for those people who are having trouble error message seen as "Function components cannot be given refs. Attempts to access this ref will fail.",
Use React.forwardRef instead of forwardRef

and make sure don't forget import
import React, {useState} from "react"

not
import { forwardRef, useState } from "react"

findhridoy · 2024-02-29T12:36:37Z

thanks!

noflame · 2024-03-20T08:32:22Z

Love you, 💯

EricTsai83 · 2024-04-12T11:42:42Z

thanks a lot.

jsantanders · 2024-04-17T17:11:42Z

Thanks!

ProDanish203 · 2024-04-22T21:53:40Z

thanks alot

laryhills · 2024-04-28T12:38:16Z

Thanks a lot, made a shadcn-svelte version. -> https://gist.github.com/laryhills/dddd2d17dd0db9179f5686c6afbc9c94

immdraselkhan · 2024-04-30T16:53:57Z

import { EyeOffIcon, EyeIcon } from "lucide-react";
import { useFormContext } from "react-hook-form";
import { Box } from "@/components/ui/box";
import {
  FormField,
  FormItem,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { createElement, useState } from "react";

type PasswordFieldProps = {
  name?: string;
  placeholder?: string;
  description?: string | JSX.Element;
};

export function PasswordField({
  name = "password",
  placeholder = "Enter password",
  description,
}: PasswordFieldProps) {
  const { control, getFieldState } = useFormContext();
  const [passwordVisibility, setPasswordVisibility] = useState(false);

  return (
    <FormField
      control={control}
      name={name}
      render={({ field }) => (
        <FormItem>
          <FormControl>
            <Box className="relative">
              <Input
                {...field}
                type={passwordVisibility ? "text" : "password"}
                autoComplete="on"
                placeholder={placeholder}
                className={`pr-12 ${getFieldState(name).error && "text-destructive"}`}
              />
              <Box
                className="absolute inset-y-0 right-0 flex cursor-pointer items-center p-3 text-muted-foreground"
                onClick={() => setPasswordVisibility(!passwordVisibility)}
              >
                {createElement(passwordVisibility ? EyeOffIcon : EyeIcon, {
                  className: "h-6 w-6",
                })}
              </Box>
            </Box>
          </FormControl>
          <FormMessage />
          {description && <FormDescription>{description}</FormDescription>}
        </FormItem>
      )}
    />
  );
}

This is another approach with better control. Make sure to wrap the form using FormProvider.

Usage example:

<PasswordField
  // description={<Link href="reset">Forgot your password?</Link>}
  description={"Forgot your password?"}
/>

thomaslemoine · 2024-05-22T05:59:09Z

hi immdraselkhan, thanks! Can you share your Box component? ☺️

immdraselkhan · 2024-05-22T06:05:43Z

hi immdraselkhan, thanks! Can you share your Box component? ☺️

Hello @thomaslemoine, here you go...

import { cn } from "@/lib/shadcn/cn";
import React from "react";

interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {}

const Box = React.forwardRef<HTMLDivElement, BoxProps>(
  ({ className, ...props }, ref) => (
    <div className={cn(className)} ref={ref} {...props} />
  ),
);

Box.displayName = "Box";

export { Box };

JorgeCabDig · 2024-06-20T16:22:12Z

Has anyone tried to implement this with zod?

immdraselkhan · 2024-06-20T16:29:22Z

Has anyone tried to implement this with zod?

👉 Usage example

  const form = useForm<FieldKeysValues>({
    mode: "onBlur",
    resolver: zodResolver(passwordZodSchema),
    defaultValues: {
      password: "",
      password2: "",
    },
  });

👉 passwordZodSchema

export const passwordZodSchema = z
  .object({
    password: passwordSchema,
    password2: passwordSchema,
  })
  .refine(({ password, password2 }) => password === password2, {
    path: ["password2"],
    message: "Password didn't match.",
  });

👉 passwordSchema

export const passwordSchema = z
  .string({
    required_error: "Password can not be empty.",
  })
  .regex(/^.{8,20}$/, {
    message: "Minimum 8 and maximum 20 characters.",
  })
  .regex(/(?=.*[A-Z])/, {
    message: "At least one uppercase character.",
  })
  .regex(/(?=.*[a-z])/, {
    message: "At least one lowercase character.",
  })
  .regex(/(?=.*\d)/, {
    message: "At least one digit.",
  })
  .regex(/[$&+,:;=?@#|'<>.^*()%!-]/, {
    message: "At least one special character.",
  });

JorgeCabDig · 2024-06-20T16:46:59Z

Thanks! <3 Helped me a lot

mirjalol-jabborov · 2024-07-14T12:10:31Z

awesome man, thanks!

jesseemana · 2024-08-14T22:57:19Z

sweet

Ruhtra · 2024-10-07T12:45:41Z

I had a problem where the default input password Eye button appeared and was left with 2 reveal buttons

The solution that i found was to include the following code in my index.css, that removes the default button from the html input:

@layer utilities {
  /* Clean Eye button in input */
  input::-ms-reveal,
  input::-ms-clear {
    display: none;
  }
}

AjayRathod67 · 2024-10-11T09:37:07Z

Thanks a lot

kingtirano · 2024-11-10T14:46:08Z

Has anyone tried to implement this with zod?

👉 Usage example

  const form = useForm<FieldKeysValues>({
    mode: "onBlur",
    resolver: zodResolver(passwordZodSchema),
    defaultValues: {
      password: "",
      password2: "",
    },
  });

👉 passwordZodSchema

export const passwordZodSchema = z
  .object({
    password: passwordSchema,
    password2: passwordSchema,
  })
  .refine(({ password, password2 }) => password === password2, {
    path: ["password2"],
    message: "Password didn't match.",
  });

👉 passwordSchema

export const passwordSchema = z
  .string({
    required_error: "Password can not be empty.",
  })
  .regex(/^.{8,20}$/, {
    message: "Minimum 8 and maximum 20 characters.",
  })
  .regex(/(?=.*[A-Z])/, {
    message: "At least one uppercase character.",
  })
  .regex(/(?=.*[a-z])/, {
    message: "At least one lowercase character.",
  })
  .regex(/(?=.*\d)/, {
    message: "At least one digit.",
  })
  .regex(/[$&+,:;=?@#|'<>.^*()%!-]/, {
    message: "At least one special character.",
  });

Yes, I was already using normal input with zod and I took this code to replace the input.

kingtirano · 2024-11-10T14:46:24Z

Thank You bro.

ghazi360 · 2024-11-21T18:46:22Z

import { EyeOffIcon, EyeIcon } from "lucide-react";
import { useFormContext } from "react-hook-form";
import { Box } from "@/components/ui/box";
import {
  FormField,
  FormItem,
  FormControl,
  FormMessage,
  FormDescription,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { createElement, useState } from "react";

type PasswordFieldProps = {
  name?: string;
  placeholder?: string;
  description?: string | JSX.Element;
};

export function PasswordField({
  name = "password",
  placeholder = "Enter password",
  description,
}: PasswordFieldProps) {
  const { control, getFieldState } = useFormContext();
  const [passwordVisibility, setPasswordVisibility] = useState(false);

  return (
    <FormField
      control={control}
      name={name}
      render={({ field }) => (
        <FormItem>
          <FormControl>
            <Box className="relative">
              <Input
                {...field}
                type={passwordVisibility ? "text" : "password"}
                autoComplete="on"
                placeholder={placeholder}
                className={`pr-12 ${getFieldState(name).error && "text-destructive"}`}
              />
              <Box
                className="absolute inset-y-0 right-0 flex cursor-pointer items-center p-3 text-muted-foreground"
                onClick={() => setPasswordVisibility(!passwordVisibility)}
              >
                {createElement(passwordVisibility ? EyeOffIcon : EyeIcon, {
                  className: "h-6 w-6",
                })}
              </Box>
            </Box>
          </FormControl>
          <FormMessage />
          {description && <FormDescription>{description}</FormDescription>}
        </FormItem>
      )}
    />
  );
}

This is another approach with better control. Make sure to wrap the form using FormProvider.

Usage example:

<PasswordField
  // description={<Link href="reset">Forgot your password?</Link>}
  description={"Forgot your password?"}
/>

Thank you for this, helped me very much

fillsanches · 2024-11-22T15:12:55Z

For those who received a warning Module '"@/components/ui/input"' has no exported member 'InputProps'.

Just edit src/components/ui/input.tsx, so add the section commented below:

import * as React from "react";

import { cn } from "@/lib/utils";

//BEGIN - ADD THIS PART

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

//END - ADD THIS PART

const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
          className
        )}
        ref={ref}
        {...props}
      />
    );
  }
);
Input.displayName = "Input";

export { Input };

d-pamneja · 2024-11-22T17:27:08Z

Thanks a lot mate. Great work!!

omotsuebe · 2024-12-03T18:55:28Z

Using zod here is how I implemented mine.

'use client';  
  
import React, { useState, forwardRef } from 'react';  
import { EyeIcon, EyeOffIcon } from 'lucide-react';  
  
import { Button } from '@/components/ui/button';  
import { Input, type InputProps } from '@/components/ui/input';  
import { cn } from '@/lib/utils';  
  
const PasswordInput = forwardRef<HTMLInputElement, InputProps>(  
    ({ className, ...props }, ref) => {  
        const [showPassword, setShowPassword] = useState(false);  
  
        return (  
            <div className="relative">  
 <Input  type={showPassword ? 'text' : 'password'}  
                    className={cn('hide-password-toggle pr-10', className)}  
                    ref={ref}  
                    {...props}  
                />  
 <Button  type="button"  
  variant="ghost"  
  size="sm"  
  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"  
  onClick={() => setShowPassword((prev) => !prev)}  
                >  
  {showPassword ? (  
                        <EyeOffIcon className="h-4 w-4" aria-hidden="true" />) : (  
                        <EyeIcon className="h-4 w-4" aria-hidden="true" />  
  )}  
                    <span className="sr-only">{showPassword ? 'Hide password' : 'Show password'}</span>  
 </Button> <style>{`.hide-password-toggle::-ms-reveal,.hide-password-toggle::-ms-clear {visibility: hidden;pointer-events: none; display: none;}`}</style>  
 </div>  );  
    }  
);  
  
PasswordInput.displayName = 'PasswordInput';  
export { PasswordInput };

Usage

import { SignupFormSchema, SignupFormState } from '@/lib/userValidation';
const {  register,  handleSubmit,  formState: { errors }} = useForm<SignupFormState>({  
  resolver: zodResolver(SignupFormSchema),  
});

<div>  
 <Label htmlFor="password">Password</Label>  
 <PasswordInput id="password" placeholder="Enter your password" {...register("password")} />  
</div>

joshpachner · 2024-12-14T17:49:07Z

Thank you. I'll name my firstborn after you.
You are what gives me hope in humanity.

	"use client"

	import { useState } from "react"
	import { PasswordInput } from "@/components/password-input"
	import { Button } from "@/components/ui/button"
	import { Label } from "@/components/ui/label"

	const SampleUseCase = () => {
	const [currentPassword, setCurrentPassword] = useState("")
	const [password, setPassword] = useState("")
	const [passwordConfirmation, setPasswordConfirmation] = useState("")

	return (
	<div className="space-y-4">
	<div>
	<Label htmlFor="current_password">Current Password</Label>
	<PasswordInput
	id="current_password"
	value={currentPassword}
	onChange={(e) => setCurrentPassword(e.target.value)}
	autoComplete="current-password"
	/>
	</div>
	<div>
	<Label htmlFor="password">New Password</Label>
	<PasswordInput
	id="password"
	value={password}
	onChange={(e) => setPassword(e.target.value)}
	autoComplete="new-password"
	/>
	</div>
	<div>
	<Label htmlFor="password_confirmation">Confirm Password</Label>
	<PasswordInput
	id="password_confirmation"
	value={passwordConfirmation}
	onChange={(e) => setPasswordConfirmation(e.target.value)}
	autoComplete="new-password"
	/>
	</div>
	<Button type="submit">Save</Button>
	</div>
	)
	}

	export default SampleUseCase

mjbalcueva/password-input.tsx

mjbalcueva commented Nov 19, 2023

cblberlin commented Nov 20, 2023

lucassarcanjo commented Feb 5, 2024

NirajD10 commented Feb 24, 2024 •

edited

Loading

findhridoy commented Feb 29, 2024

noflame commented Mar 20, 2024

EricTsai83 commented Apr 12, 2024

jsantanders commented Apr 17, 2024

ProDanish203 commented Apr 22, 2024

laryhills commented Apr 28, 2024

immdraselkhan commented Apr 30, 2024 •

edited

Loading

thomaslemoine commented May 22, 2024 •

edited

Loading

immdraselkhan commented May 22, 2024 •

edited

Loading

JorgeCabDig commented Jun 20, 2024

immdraselkhan commented Jun 20, 2024 •

edited

Loading

JorgeCabDig commented Jun 20, 2024

mirjalol-jabborov commented Jul 14, 2024

jesseemana commented Aug 14, 2024

Ruhtra commented Oct 7, 2024 •

edited

Loading

AjayRathod67 commented Oct 11, 2024

kingtirano commented Nov 10, 2024

kingtirano commented Nov 10, 2024

ghazi360 commented Nov 21, 2024

fillsanches commented Nov 22, 2024

d-pamneja commented Nov 22, 2024

omotsuebe commented Dec 3, 2024

joshpachner commented Dec 14, 2024

	'use client'

	import * as React from 'react'
	import { EyeIcon, EyeOffIcon } from 'lucide-react'

	import { Button } from '@/components/ui/button'
	import { Input, type InputProps } from '@/components/ui/input'
	import { cn } from '@/lib/utils'

	const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
	const [showPassword, setShowPassword] = React.useState(false)
	const disabled = props.value === '' \|\| props.value === undefined \|\| props.disabled

	return (
	<div className="relative">
	<Input
	type={showPassword ? 'text' : 'password'}
	className={cn('hide-password-toggle pr-10', className)}
	ref={ref}
	{...props}
	/>
	<Button
	type="button"
	variant="ghost"
	size="sm"
	className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
	onClick={() => setShowPassword((prev) => !prev)}
	disabled={disabled}
	>
	{showPassword && !disabled ? (
	<EyeIcon className="h-4 w-4" aria-hidden="true" />
	) : (
	<EyeOffIcon className="h-4 w-4" aria-hidden="true" />
	)}
	<span className="sr-only">{showPassword ? 'Hide password' : 'Show password'}</span>
	</Button>

	{/* hides browsers password toggles */}
	<style>{`
	.hide-password-toggle::-ms-reveal,
	.hide-password-toggle::-ms-clear {
	visibility: hidden;
	pointer-events: none;
	display: none;
	}
	`}</style>
	</div>
	)
	})
	PasswordInput.displayName = 'PasswordInput'

	export { PasswordInput }

mjbalcueva/password-input.tsx

mjbalcueva commented Nov 19, 2023

cblberlin commented Nov 20, 2023

lucassarcanjo commented Feb 5, 2024

NirajD10 commented Feb 24, 2024 • edited Loading

findhridoy commented Feb 29, 2024

noflame commented Mar 20, 2024

EricTsai83 commented Apr 12, 2024

jsantanders commented Apr 17, 2024

ProDanish203 commented Apr 22, 2024

laryhills commented Apr 28, 2024

immdraselkhan commented Apr 30, 2024 • edited Loading

thomaslemoine commented May 22, 2024 • edited Loading

immdraselkhan commented May 22, 2024 • edited Loading

JorgeCabDig commented Jun 20, 2024

immdraselkhan commented Jun 20, 2024 • edited Loading

JorgeCabDig commented Jun 20, 2024

mirjalol-jabborov commented Jul 14, 2024

jesseemana commented Aug 14, 2024

Ruhtra commented Oct 7, 2024 • edited Loading

AjayRathod67 commented Oct 11, 2024

kingtirano commented Nov 10, 2024

kingtirano commented Nov 10, 2024

ghazi360 commented Nov 21, 2024

fillsanches commented Nov 22, 2024

d-pamneja commented Nov 22, 2024

omotsuebe commented Dec 3, 2024

joshpachner commented Dec 14, 2024

NirajD10 commented Feb 24, 2024 •

edited

Loading

immdraselkhan commented Apr 30, 2024 •

edited

Loading

thomaslemoine commented May 22, 2024 •

edited

Loading

immdraselkhan commented May 22, 2024 •

edited

Loading

immdraselkhan commented Jun 20, 2024 •

edited

Loading

Ruhtra commented Oct 7, 2024 •

edited

Loading