mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-04-29 12:39:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

[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
14 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/app/general/form.tsx
+1
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>
admin/core/components/instance/setup-form.tsx
+4
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
admin/core/components/login/sign-in-form.tsx
+2
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
packages/ui/src/form-fields/input.tsx
+13 -1
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}
/>
);
space/core/components/account/auth-forms/email.tsx
+1
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 && (
space/core/components/account/auth-forms/password.tsx
+1
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 ? (
web/app/accounts/forgot-password/page.tsx
+1
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}
/>
)}
web/app/accounts/reset-password/page.tsx
+2
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 ? (
web/app/accounts/set-password/page.tsx
+2
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 ? (
web/app/profile/page.tsx
+3
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
/>
)}
web/core/components/account/auth-forms/email.tsx
+1
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 && (
web/core/components/account/auth-forms/password.tsx
+1
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 ? (
web/core/components/account/auth-forms/unique-code.tsx
+1
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 && (
web/core/components/onboarding/profile-setup.tsx
+3
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