fix: improve password imputs and default behaviour

saleor · Nov 24, 2023 · ba1f380 · ba1f380
1 parent 1405d48
commit ba1f380
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/src/checkout/components/PasswordInput/PasswordInput.tsx b/src/checkout/components/PasswordInput/PasswordInput.tsx
@@ -31,27 +31,29 @@ export const PasswordInputComponent = <TName extends string>({
 				<label className="text-xs text-neutral-700">
 					{label}
 					{required && <span aria-hidden="true">*</span>}
+					<div className="relative mt-1 flex items-stretch shadow-sm">
+						<input
+							required={required}
+							spellCheck={false}
+							type={passwordVisible ? "text" : "password"}
+							autoCapitalize="off"
+							autoComplete="off"
+							{...field}
+							{...props}
+							className={clsx(
+								"block w-full appearance-none rounded-md border-neutral-300 pr-10 transition-colors focus:border-neutral-300 focus:outline-none focus:ring focus:ring-neutral-200 focus:ring-opacity-50 active:border-neutral-200 active:outline-none",
+								{ "border-red-300": error },
+								props.className,
+							)}
+						/>
+						<IconButton
+							ariaLabel="change password visibility"
+							onClick={() => setPasswordVisible(!passwordVisible)}
+							icon={passwordVisible ? <EyeIcon /> : <EyeHiddenIcon />}
+							className="absolute right-0 mt-px flex h-10 w-10 items-center justify-center rounded-md  text-center focus:border-neutral-300 focus:outline-none focus:ring focus:ring-neutral-200 focus:ring-opacity-50 active:border-neutral-200 active:outline-none"
+						/>
+					</div>
 				</label>
-				<div className="relative mt-1 flex items-stretch shadow-sm">
-					<input
-						required={required}
-						spellCheck={false}
-						type={passwordVisible ? "text" : "password"}
-						{...field}
-						{...props}
-						className={clsx(
-							"block w-full appearance-none rounded-md border-neutral-300 pr-10 transition-colors focus:border-neutral-300 focus:outline-none focus:ring focus:ring-neutral-200 focus:ring-opacity-50 active:border-neutral-200 active:outline-none",
-							{ "border-red-300": error },
-							props.className,
-						)}
-					/>
-					<IconButton
-						ariaLabel="change password visibility"
-						onClick={() => setPasswordVisible(!passwordVisible)}
-						icon={passwordVisible ? <EyeIcon /> : <EyeHiddenIcon />}
-						className="absolute right-0 mt-px flex h-10 w-10 items-center justify-center rounded-md  text-center focus:border-neutral-300 focus:outline-none focus:ring focus:ring-neutral-200 focus:ring-opacity-50 active:border-neutral-200 active:outline-none"
-					/>
-				</div>
 			</div>
 			{error && <p className="text-sm text-red-500">{error}</p>}
 		</div>

diff --git a/src/ui/components/LoginForm.tsx b/src/ui/components/LoginForm.tsx
@@ -55,6 +55,8 @@ export function LoginForm() {
 						type="password"
 						name="password"
 						placeholder="Password"
+						autoCapitalize="off"
+						autoComplete="off"
 						className="w-full rounded border bg-neutral-50 px-4 py-2"
 						value={formValues.password}
 						onChange={changeHandler}