binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2211] fix: input autoComplete (#5333)

Browse source 
* fix: input autoComplete

* chore: code refactor

* chore: set autoComplete on for email, password and name
This commit is contained in:
Anmol Singh Bhatia 2024-08-09 16:42:31 +05:30 • committed by GitHub
parent 0b72bd373b
commit 24b1e71cbf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 36 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
admin/app/general/form.tsx
View file

@ -86,6 +86,7 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
value={instanceAdmins[0]?.user_detail?.email ?? ""}
placeholder="Admin email"
className="w-full cursor-not-allowed !text-custom-text-400"
autoComplete="on"
disabled
/>
</div>

4
admin/core/components/instance/setup-form.tsx
View file

@ -174,6 +174,7 @@ export const InstanceSetupForm: FC = (props) => {
placeholder="Wilber"
value={formData.first_name}
onChange={(e) => handleFormChange("first_name", e.target.value)}
autoComplete="on"
autoFocus
/>
</div>
@ -190,6 +191,7 @@ export const InstanceSetupForm: FC = (props) => {
placeholder="Wright"
value={formData.last_name}
onChange={(e) => handleFormChange("last_name", e.target.value)}
autoComplete="on"
/>
</div>
</div>
@ -208,6 +210,7 @@ export const InstanceSetupForm: FC = (props) => {
value={formData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
autoComplete="on"
/>
{errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
<p className="px-1 text-xs text-red-500">{errorData.message}</p>
@ -247,6 +250,7 @@ export const InstanceSetupForm: FC = (props) => {
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
/>
{showPassword.password ? (
<button

2
admin/core/components/login/sign-in-form.tsx
View file

@ -127,6 +127,7 @@ export const InstanceSignInForm: FC = (props) => {
placeholder="name@company.com"
value={formData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
autoComplete="on"
autoFocus
/>
</div>
@ -145,6 +146,7 @@ export const InstanceSignInForm: FC = (props) => {
placeholder="Enter your password"
value={formData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
autoComplete="on"
/>
{showPassword ? (
<button

14
packages/ui/src/form-fields/input.tsx
View file

@ -7,10 +7,21 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
inputSize?: "sm" | "md";
hasError?: boolean;
className?: string;
autoComplete?: "on" | "off";
}
const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const { id, type, name, mode = "primary", inputSize = "sm", hasError = false, className = "", ...rest } = props;
const {
id,
type,
name,
mode = "primary",
inputSize = "sm",
hasError = false,
className = "",
autoComplete = "off",
...rest
} = props;
return (
<input
@ -31,6 +42,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
},
className
)}
autoComplete={autoComplete}
{...rest}
/>
);

1
space/core/components/account/auth-forms/email.tsx
View file

@ -63,6 +63,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
autoComplete="on"
autoFocus
/>
{email.length > 0 && (

1
space/core/components/account/auth-forms/password.tsx
View file

@ -157,6 +157,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoFocus
/>
{showPassword?.password ? (

1
web/app/accounts/forgot-password/page.tsx
View file

@ -154,6 +154,7 @@ export default function ForgotPasswordPage() {
hasError={Boolean(errors.email)}
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
autoComplete="on"
disabled={resendTimerCode > 0}
/>
)}

2
web/app/accounts/reset-password/page.tsx
View file

@ -153,6 +153,7 @@ export default function ResetPasswordPage() {
//hasError={Boolean(errors.email)}
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
autoComplete="on"
disabled
/>
</div>
@ -173,6 +174,7 @@ export default function ResetPasswordPage() {
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoFocus
/>
{showPassword.password ? (

2
web/app/accounts/set-password/page.tsx
View file

@ -147,6 +147,7 @@ const SetPasswordPage = observer(() => {
//hasError={Boolean(errors.email)}
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
autoComplete="on"
disabled
/>
</div>
@ -167,6 +168,7 @@ const SetPasswordPage = observer(() => {
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoFocus
/>
{showPassword.password ? (

3
web/app/profile/page.tsx
View file

@ -245,6 +245,7 @@ const ProfileSettingsPage = observer(() => {
placeholder="Enter your first name"
className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
maxLength={24}
autoComplete="on"
/>
)}
/>
@ -269,6 +270,7 @@ const ProfileSettingsPage = observer(() => {
placeholder="Enter your last name"
className="w-full rounded-md"
maxLength={24}
autoComplete="on"
/>
)}
/>
@ -296,6 +298,7 @@ const ProfileSettingsPage = observer(() => {
className={`w-full cursor-not-allowed rounded-md !bg-custom-background-80 ${
errors.email ? "border-red-500" : ""
}`}
autoComplete="on"
disabled
/>
)}

1
web/core/components/account/auth-forms/email.tsx
View file

@ -63,6 +63,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
autoComplete="on"
autoFocus
/>
{email.length > 0 && (

1
web/core/components/account/auth-forms/password.tsx
View file

@ -208,6 +208,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoFocus
/>
{showPassword?.password ? (

1
web/core/components/account/auth-forms/unique-code.tsx
View file

@ -107,6 +107,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder="name@company.com"
className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
autoComplete="on"
disabled
/>
{uniqueCodeFormData.email.length > 0 && (

3
web/core/components/onboarding/profile-setup.tsx
View file

@ -372,6 +372,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
hasError={Boolean(errors.first_name)}
placeholder="Wilbur"
className="w-full border-onboarding-border-100"
autoComplete="on"
/>
)}
/>
@ -405,6 +406,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
hasError={Boolean(errors.last_name)}
placeholder="Wright"
className="w-full border-onboarding-border-100"
autoComplete="on"
/>
)}
/>
@ -438,6 +440,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
className="w-full border-[0.5px] border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
/>
{showPassword.password ? (
<EyeOff