[VPAT-27] chore(security): disable autocomplete on sensitive input fields #8517
Disable autocomplete on authentication and security-related forms to prevent browsers from storing sensitive credentials. This affects sign-in, password reset, account security, and onboarding forms across admin, web, and space apps. Modified components: - Auth forms (email, password, unique code, forgot/reset/set password) - Account security pages - Instance setup and profile onboarding - Shared UI components (auth-input, password-input)
This commit is contained in:
parent
d3c6e5ec94
commit
e9b011896d
20 changed files with 52 additions and 40 deletions
|
|
@ -74,7 +74,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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,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}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -213,7 +213,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"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
|
|
@ -250,6 +250,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"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -123,7 +123,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>
|
||||
|
|
@ -144,7 +144,7 @@ export const ResetPasswordForm = observer(function ResetPasswordForm() {
|
|||
minLength={8}
|
||||
onFocus={() => setIsPasswordInputFocused(true)}
|
||||
onBlur={() => setIsPasswordInputFocused(false)}
|
||||
autoComplete="on"
|
||||
autoComplete="new-password"
|
||||
autoFocus
|
||||
/>
|
||||
{showPassword.password ? (
|
||||
|
|
@ -175,6 +175,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
|
||||
|
|
|
|||
|
|
@ -126,7 +126,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>
|
||||
|
|
@ -147,7 +147,7 @@ export const SetPasswordForm = observer(function SetPasswordForm() {
|
|||
minLength={8}
|
||||
onFocus={() => setIsPasswordInputFocused(true)}
|
||||
onBlur={() => setIsPasswordInputFocused(false)}
|
||||
autoComplete="on"
|
||||
autoComplete="new-password"
|
||||
autoFocus
|
||||
/>
|
||||
{showPassword.password ? (
|
||||
|
|
@ -178,6 +178,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
|
||||
|
|
|
|||
|
|
@ -107,7 +107,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 && (
|
||||
|
|
@ -134,6 +134,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">
|
||||
|
|
|
|||
|
|
@ -164,6 +164,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}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -187,6 +188,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
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -392,7 +392,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
|
||||
|
|
@ -433,6 +433,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
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
|
|||
placeholder={t("old_password")}
|
||||
className="w-full"
|
||||
hasError={Boolean(errors.old_password)}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -193,6 +194,7 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
|
|||
hasError={Boolean(errors.new_password)}
|
||||
onFocus={() => setIsPasswordInputFocused(true)}
|
||||
onBlur={() => setIsPasswordInputFocused(false)}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -238,6 +240,7 @@ export const SecurityProfileSettings = observer(function SecurityProfileSettings
|
|||
hasError={Boolean(errors.confirm_password)}
|
||||
onFocus={() => setIsRetryPasswordInputFocused(true)}
|
||||
onBlur={() => setIsRetryPasswordInputFocused(false)}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue