idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 08:49:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): PasswordField eye icon alignment (#824)

Browse source 
* keep eye icon inside PasswordField during onboarding

* proper solution

* removed redundant relative class
This commit is contained in:
martylukyy 2023-04-10 14:30:29 +02:00 • committed by GitHub
parent 1cdbbe5bf3
commit 69f6acbc4d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

79
web/src/components/inputs/input.tsx
View file

@ -247,14 +247,14 @@ export const TextArea = ({
);
interface PasswordFieldProps {
name: string;
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
autoComplete?: string;
defaultValue?: string;
help?: string;
required?: boolean;
name: string;
label?: string;
placeholder?: string;
columns?: COL_WIDTHS;
autoComplete?: string;
defaultValue?: string;
help?: string;
required?: boolean;
}
export const PasswordField = ({
@ -280,35 +280,44 @@ export const PasswordField = ({
{label} {required && <span className="text-gray-500">*</span>}
</label>
)}
<Field name={name} defaultValue={defaultValue}>
{({
field,
meta
}: FieldProps) => (
<div className="sm:col-span-2 relative">
<input
{...field}
id={name}
type={isVisible ? "text" : "password"}
autoComplete={autoComplete}
className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md")}
placeholder={placeholder}
/>
<div>
<Field name={name} defaultValue={defaultValue}>
{({
field,
meta
}: FieldProps) => (
<>
<div className="sm:col-span-2 relative">
<input
{...field}
id={name}
type={isVisible ? "text" : "password"}
autoComplete={autoComplete}
className={classNames(
meta.touched && meta.error
? "focus:ring-red-500 focus:border-red-500 border-red-500"
: "focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
"mt-2 block w-full dark:bg-gray-800 dark:text-gray-100 rounded-md"
)}
placeholder={placeholder}
/>
<div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
{!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
</div>
<div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
{!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />
: <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
</div>
</div>
{help && (
<p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
)}
{help && (
<p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
)}
{meta.touched && meta.error && (
<p className="error text-sm text-red-600 mt-1">* {meta.error}</p>
)}
</div>
)}
</Field>
{meta.touched && meta.error && (
<p className="error text-sm text-red-600 mt-1">* {meta.error}</p>
)}
</>
)}
</Field>
</div>
</div>
);
};