gitea-actions
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import { LoginInputProps } from "./Input.types";
|
|
|
|
export default function LoginInput({
|
|
label,
|
|
type,
|
|
name,
|
|
value,
|
|
errors,
|
|
onChange,
|
|
...restProps
|
|
}: LoginInputProps) {
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
function isPassword() {
|
|
if (type === "password") {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute top-1/2 right-4 -translate-y-1/2 text-(--color-text-muted) transition-colors hover:text-(--color-primary)"
|
|
aria-label={showPassword ? "Ẩn mật khẩu" : "Hiện mật khẩu"}
|
|
>
|
|
<i
|
|
className={`fa-solid ${showPassword ? "fa-eye-slash" : "fa-eye"}`}
|
|
></i>
|
|
</button>
|
|
);
|
|
}
|
|
return "";
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<label
|
|
htmlFor={name}
|
|
className="mb-2 block text-sm font-medium text-(--color-text-secondary)"
|
|
>
|
|
{label}
|
|
</label>
|
|
<div className="relative">
|
|
<i className="fa-solid fa-user absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block"></i>
|
|
<input
|
|
id={name}
|
|
type={showPassword ? "text" : type}
|
|
value={value}
|
|
onChange={onChange}
|
|
placeholder={
|
|
type === "password"
|
|
? "Mật khẩu"
|
|
: "admin / số điện thoại / tên nhân viên"
|
|
}
|
|
className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-10 py-3 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) lg:pl-11 ${errors ? "border-red-400" : "border-(--color-border)"} `}
|
|
/>
|
|
{isPassword()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|