Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/admin/app/(all)/(home)/sign-in-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export function InstanceSignInForm() {
placeholder="[email protected]"
value={formData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
autoComplete="on"
autoComplete="off"
autoFocus
/>
</div>
Expand All @@ -159,7 +159,7 @@ export function InstanceSignInForm() {
placeholder="Enter your password"
value={formData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
autoComplete="on"
autoComplete="off"
/>
{showPassword ? (
<button
Expand Down
5 changes: 3 additions & 2 deletions apps/admin/core/components/instance/setup-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ export function InstanceSetupForm() {
value={formData.email}
onChange={(e) => handleFormChange("email", e.target.value)}
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
autoComplete="on"
autoComplete="off"
/>
{errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
<p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
Expand Down Expand Up @@ -244,7 +244,7 @@ export function InstanceSetupForm() {
hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="new-password"
/>
{showPassword.password ? (
<button
Expand Down Expand Up @@ -288,6 +288,7 @@ export function InstanceSetupForm() {
className="w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
{showPassword.retypePassword ? (
<button
Expand Down
2 changes: 1 addition & 1 deletion apps/space/core/components/account/auth-forms/email.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
onChange={(e) => setEmail(e.target.value)}
placeholder="[email protected]"
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-subtle border-0 focus:bg-none active:bg-transparent`}
autoComplete="on"
autoComplete="off"
autoFocus
ref={inputRef}
/>
Expand Down
3 changes: 2 additions & 1 deletion apps/space/core/components/account/auth-forms/password.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="off"
autoFocus
/>
{showPassword?.password ? (
Expand Down Expand Up @@ -186,6 +186,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="off"
/>
{showPassword?.retypePassword ? (
<EyeOff
Expand Down
2 changes: 2 additions & 0 deletions apps/space/core/components/account/auth-forms/unique-code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder="[email protected]"
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
autoComplete="off"
disabled
/>
{uniqueCodeFormData.email.length > 0 && (
Expand All @@ -113,6 +114,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
onChange={(e) => handleFormChange("code", e.target.value)}
placeholder="123456"
className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
autoComplete="off"
autoFocus
/>
<div className="flex w-full items-center justify-between px-1 text-11 pt-1">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ function SecurityPage() {
placeholder={t("old_password")}
className="w-full"
hasError={Boolean(errors.old_password)}
autoComplete="current-password"
/>
)}
/>
Expand Down Expand Up @@ -184,6 +185,7 @@ function SecurityPage() {
hasError={Boolean(errors.new_password)}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="new-password"
/>
)}
/>
Expand Down Expand Up @@ -226,6 +228,7 @@ function SecurityPage() {
hasError={Boolean(errors.confirm_password)}
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
)}
/>
Expand Down
3 changes: 3 additions & 0 deletions apps/web/app/(all)/profile/security/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ function SecurityPage() {
placeholder={t("old_password")}
className="w-full"
hasError={Boolean(errors.old_password)}
autoComplete="current-password"
/>
)}
/>
Expand Down Expand Up @@ -182,6 +183,7 @@ function SecurityPage() {
hasError={Boolean(errors.new_password)}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="new-password"
/>
)}
/>
Expand Down Expand Up @@ -224,6 +226,7 @@ function SecurityPage() {
hasError={Boolean(errors.confirm_password)}
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
)}
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/account/auth-forms/email.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
onChange={(e) => setEmail(e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-danger-primary border-0 focus:bg-none active:bg-transparent`}
autoComplete="on"
autoComplete="off"
autoFocus
ref={inputRef}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
autoComplete="on"
autoComplete="off"
disabled={resendTimerCode > 0}
/>
)}
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/account/auth-forms/password.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="off"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Use mode-appropriate autocomplete values for better password manager integration.

The password field currently uses autoComplete="off" for both sign-in and sign-up flows. According to HTML autocomplete specifications and password manager best practices:

  • Sign-in mode: Should use "current-password" to help password managers recognize existing credential entry
  • Sign-up mode: Should use "new-password" to signal new credential creation

Other files in this PR (set-password.tsx, reset-password.tsx) correctly use "new-password" for password creation flows.

🔐 Proposed fix to differentiate autocomplete by mode
             <Input
               type={showPassword?.password ? "text" : "password"}
               id="password"
               name="password"
               value={passwordFormData.password}
               onChange={(e) => handleFormChange("password", e.target.value)}
               placeholder={t("auth.common.password.placeholder")}
               className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
-              autoComplete="off"
+              autoComplete={mode === EAuthModes.SIGN_IN ? "current-password" : "new-password"}
               autoFocus
             />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
autoComplete="off"
<Input
type={showPassword?.password ? "text" : "password"}
id="password"
name="password"
value={passwordFormData.password}
onChange={(e) => handleFormChange("password", e.target.value)}
placeholder={t("auth.common.password.placeholder")}
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete={mode === EAuthModes.SIGN_IN ? "current-password" : "new-password"}
autoFocus
/>
🤖 Prompt for AI Agents
In @apps/web/core/components/account/auth-forms/password.tsx at line 210, The
password input currently hardcodes autoComplete="off"; update the input's
autoComplete attribute to be mode-aware so sign-in uses "current-password" and
sign-up (password creation) uses "new-password" — e.g., in the password input
element where autoComplete is set, compute the value from the component's
mode/flow prop (e.g., mode === 'signin' ? 'current-password' : 'new-password')
and replace the static "off" with that conditional value so password managers
get the correct hint.

autoFocus
/>
<button
Expand Down Expand Up @@ -244,6 +244,7 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="off"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Use "new-password" for confirm password field consistency.

The confirm password field uses autoComplete="off", but should use "new-password" to match:

  • The password field's autocomplete value (in sign-up mode)
  • Other confirm password fields in this PR (set-password.tsx, reset-password.tsx)

This ensures consistent password manager behavior and semantic correctness.

♻️ Proposed fix
             <Input
               type={showPassword?.retypePassword ? "text" : "password"}
               id="confirm-password"
               name="confirm_password"
               value={passwordFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder={t("auth.common.password.confirm_password.placeholder")}
               className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
-              autoComplete="off"
+              autoComplete="new-password"
             />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
autoComplete="off"
<Input
type={showPassword?.retypePassword ? "text" : "password"}
id="confirm-password"
name="confirm_password"
value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRettyPasswordInputFocused(true)}
onBlur={() => setIsRettyPasswordInputFocused(false)}
autoComplete="new-password"
/>
🤖 Prompt for AI Agents
In @apps/web/core/components/account/auth-forms/password.tsx at line 247, In the
confirm-password input in the password.tsx component change the autoComplete
attribute from "off" to "new-password" so it matches the password field in
sign-up mode and the other confirm password fields (set-password.tsx,
reset-password.tsx); locate the confirm password input element (the JSX input
with autoComplete="off") and replace that value with
autoComplete="new-password".

/>
<button
type="button"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
autoComplete="on"
autoComplete="off"
disabled
/>
</div>
Expand All @@ -138,7 +138,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="new-password"
autoFocus
/>
{showPassword.password ? (
Expand Down Expand Up @@ -169,6 +169,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
{showPassword.retypePassword ? (
<EyeOff
Expand Down
5 changes: 3 additions & 2 deletions apps/web/core/components/account/auth-forms/set-password.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
//hasError={Boolean(errors.email)}
placeholder={t("auth.common.email.placeholder")}
className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
autoComplete="on"
autoComplete="off"
disabled
/>
</div>
Expand All @@ -141,7 +141,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
minLength={8}
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="new-password"
autoFocus
/>
{showPassword.password ? (
Expand Down Expand Up @@ -172,6 +172,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
onFocus={() => setIsRetryPasswordInputFocused(true)}
onBlur={() => setIsRetryPasswordInputFocused(false)}
autoComplete="new-password"
/>
{showPassword.retypePassword ? (
<EyeOff
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/account/auth-forms/unique-code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
onChange={(e) => handleFormChange("email", e.target.value)}
placeholder={t("auth.common.email.placeholder")}
className="disable-autofill-style h-10 w-full placeholder:text-placeholder border-0"
autoComplete="on"
autoComplete="off"
disabled
/>
{uniqueCodeFormData.email.length > 0 && (
Expand All @@ -128,6 +128,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
onChange={(e) => handleFormChange("code", e.target.value)}
placeholder={t("auth.common.unique_code.placeholder")}
className="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
autoComplete="off"
autoFocus
/>
<div className="flex w-full items-center justify-between px-1 text-11 pt-1">
Expand Down
2 changes: 2 additions & 0 deletions apps/web/core/components/core/modals/change-email-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
{ "border-danger-strong": errors.email },
{ "cursor-not-allowed !bg-surface-2": secondStep }
)}
autoComplete="off"
disabled={secondStep}
/>
)}
Expand All @@ -181,6 +182,7 @@ export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props)
ref={ref}
placeholder={changeEmailT("form.code.placeholder")}
className={cn({ "border-danger-strong": errors.code })}
autoComplete="off"
autoFocus
/>
)}
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/onboarding/profile-setup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -384,7 +384,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
className="w-full border-[0.5px] border-subtle pr-12 placeholder:text-placeholder"
onFocus={() => setIsPasswordInputFocused(true)}
onBlur={() => setIsPasswordInputFocused(false)}
autoComplete="on"
autoComplete="new-password"
/>
{showPassword.password ? (
<EyeOff
Expand Down Expand Up @@ -425,6 +425,7 @@ export const ProfileSetup = observer(function ProfileSetup(props: Props) {
hasError={Boolean(errors.confirm_password)}
placeholder={t("auth.common.password.confirm_password.placeholder")}
className="w-full border-subtle pr-12 placeholder:text-placeholder"
autoComplete="new-password"
/>
{showPassword.retypePassword ? (
<EyeOff
Expand Down
12 changes: 4 additions & 8 deletions packages/ui/src/auth-form/auth-confirm-password-input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,16 @@ import React, { useState } from "react";
import { cn } from "@plane/utils";
import { AuthInput } from "./auth-input";

export interface AuthConfirmPasswordInputProps extends Omit<
React.InputHTMLAttributes<HTMLInputElement>,
"autoComplete"
> {
export type TAuthConfirmPasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
password: string;
label?: string;
error?: string;
showPasswordToggle?: boolean;
containerClassName?: string;
labelClassName?: string;
errorClassName?: string;
autoComplete?: "on" | "off";
onPasswordMatchChange?: (matches: boolean) => void;
}
};

export function AuthConfirmPasswordInput({
password,
Expand All @@ -29,7 +25,7 @@ export function AuthConfirmPasswordInput({
onChange,
onPasswordMatchChange,
...props
}: AuthConfirmPasswordInputProps) {
}: TAuthConfirmPasswordInputProps) {
const [isFocused, setIsFocused] = useState(false);

const confirmPassword = value as string;
Expand Down Expand Up @@ -71,7 +67,7 @@ export function AuthConfirmPasswordInput({
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
autoComplete="on"
autoComplete="off"
/>
{confirmPassword && passwordsMatch && <p className="text-13 text-success-primary">Passwords match</p>}
</div>
Expand Down
9 changes: 5 additions & 4 deletions packages/ui/src/auth-form/auth-input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,12 @@ import React, { useState } from "react";
import { Input } from "../form-fields/input";
import { cn } from "../utils";

export interface AuthInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "autoComplete"> {
export type TAuthInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
label?: string;
error?: string;
showPasswordToggle?: boolean;
errorClassName?: string;
autoComplete?: "on" | "off";
}
};

const baseContainerClassName = "flex flex-col gap-1.5";

Expand All @@ -20,8 +19,9 @@ export function AuthInput({
errorClassName = "",
className = "",
type = "text",
autoComplete = "off",
...props
}: AuthInputProps) {
}: TAuthInputProps) {
const { id } = props;
const [showPassword, setShowPassword] = useState(false);
const isPasswordType = type === "password";
Expand All @@ -39,6 +39,7 @@ export function AuthInput({
<Input
{...props}
type={inputType}
autoComplete={autoComplete}
className={cn(
"rounded-md disable-autofill-style h-6 w-full placeholder:text-14 placeholder:text-placeholder p-0 border-none",
{
Expand Down
9 changes: 4 additions & 5 deletions packages/ui/src/auth-form/auth-password-input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,16 @@ import { cn, getPasswordStrength } from "@plane/utils";
import { PasswordStrengthIndicator } from "../form-fields/password/indicator";
import { AuthInput } from "./auth-input";

export interface AuthPasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "autoComplete"> {
export type TAuthPasswordInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
label?: string;
error?: string;
showPasswordStrength?: boolean;
showPasswordToggle?: boolean;
containerClassName?: string;
errorClassName?: string;
autoComplete?: "on" | "off";
onPasswordChange?: (password: string) => void;
onPasswordStrengthChange?: (strength: E_PASSWORD_STRENGTH) => void;
}
};

export function AuthPasswordInput({
label = "Password",
Expand All @@ -29,7 +28,7 @@ export function AuthPasswordInput({
onPasswordChange,
onPasswordStrengthChange,
...props
}: AuthPasswordInputProps) {
}: TAuthPasswordInputProps) {
const [isFocused, setIsFocused] = useState(false);

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -67,7 +66,7 @@ export function AuthPasswordInput({
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
autoComplete="on"
autoComplete="off"
/>
{showPasswordStrength && value && isFocused && (
<PasswordStrengthIndicator password={value as string} showCriteria />
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/auth-form/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export { AuthConfirmPasswordInput } from "./auth-confirm-password-input";
export { AuthForgotPassword } from "./auth-forgot-password";

export type { AuthFormProps, AuthFormData, AuthMode } from "./auth-form";
export type { AuthInputProps } from "./auth-input";
export type { AuthPasswordInputProps } from "./auth-password-input";
export type { AuthConfirmPasswordInputProps } from "./auth-confirm-password-input";
export type { TAuthInputProps } from "./auth-input";
export type { TAuthPasswordInputProps } from "./auth-password-input";
export type { TAuthConfirmPasswordInputProps } from "./auth-confirm-password-input";
export type { AuthForgotPasswordProps } from "./auth-forgot-password";
Loading
Loading