[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
|
|
@ -146,7 +146,7 @@ export function InstanceSignInForm() {
|
|||
placeholder="name@company.com"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleFormChange("email", e.target.value)}
|
||||
autoComplete="on"
|
||||
autoComplete="off"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -165,7 +165,7 @@ export function InstanceSignInForm() {
|
|||
placeholder="Enter your password"
|
||||
value={formData.password}
|
||||
onChange={(e) => handleFormChange("password", e.target.value)}
|
||||
autoComplete="on"
|
||||
autoComplete="off"
|
||||
/>
|
||||
{showPassword ? (
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -222,7 +222,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>
|
||||
|
|
@ -268,7 +268,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
|
||||
|
|
@ -312,6 +312,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
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
|
|||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="name@company.com"
|
||||
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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -159,7 +159,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 ? (
|
||||
|
|
@ -192,6 +192,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
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
|
|||
onChange={(e) => handleFormChange("email", e.target.value)}
|
||||
placeholder="name@company.com"
|
||||
className={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
|
||||
autoComplete="off"
|
||||
disabled
|
||||
/>
|
||||
{uniqueCodeFormData.email.length > 0 && (
|
||||
|
|
@ -119,6 +120,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">
|
||||
|
|
|
|||
|
|
@ -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