LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-07 04:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate UI components to React 19

Browse Source
This commit is contained in:
Bereket Engida
2025-03-04 20:29:25 +03:00
parent 232f565cb7
commit 210c20eb65
42 changed files with 2456 additions and 2031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
demo/nextjs/components/ui/password-input.tsx
View File

@@ -7,52 +7,58 @@ 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;
const PasswordInput = (
{
ref,
className,
...props
}: InputProps & {
ref: React.RefObject<HTMLInputElement>;
}
) => {
const [showPassword, setShowPassword] = React.useState(false);
const disabled =
props.value === "" || props.value === undefined || props.disabled;
return (
<div className="relative">
<Input
{...props}
type={showPassword ? "text" : "password"}
name="password_fake"
className={cn("hide-password-toggle pr-10", className)}
ref={ref}
/>
<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>
return (
<div className="relative">
<Input
{...props}
type={showPassword ? "text" : "password"}
name="password_fake"
className={cn("hide-password-toggle pr-10", className)}
ref={ref}
/>
<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>
);
},
);
{/* 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 };