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 { interface PasswordFieldProps {
name: string; name: string;
label?: string; label?: string;
placeholder?: string; placeholder?: string;
columns?: COL_WIDTHS; columns?: COL_WIDTHS;
autoComplete?: string; autoComplete?: string;
defaultValue?: string; defaultValue?: string;
help?: string; help?: string;
required?: boolean; required?: boolean;
} }
export const PasswordField = ({ export const PasswordField = ({
@ -280,35 +280,44 @@ export const PasswordField = ({
{label} {required && <span className="text-gray-500">*</span>} {label} {required && <span className="text-gray-500">*</span>}
</label> </label>
)} )}
<Field name={name} defaultValue={defaultValue}> <div>
{({ <Field name={name} defaultValue={defaultValue}>
field, {({
meta field,
}: FieldProps) => ( meta
<div className="sm:col-span-2 relative"> }: FieldProps) => (
<input <>
{...field} <div className="sm:col-span-2 relative">
id={name} <input
type={isVisible ? "text" : "password"} {...field}
autoComplete={autoComplete} id={name}
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")} type={isVisible ? "text" : "password"}
placeholder={placeholder} 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}> <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" />} {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />
</div> : <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 && ( {meta.touched && meta.error && (
<p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p> <p className="error text-sm text-red-600 mt-1">* {meta.error}</p>
)} )}
</>
{meta.touched && meta.error && ( )}
<p className="error text-sm text-red-600 mt-1">* {meta.error}</p> </Field>
)} </div>
</div>
)}
</Field>
</div> </div>
); );
}; };