Fixed browser autocomplete related issues on pgAdmin authentication related pages. #7082

This commit is contained in:
Aditya Toshniwal 2023-12-28 16:29:15 +05:30
parent 01a118d495
commit e837de5e8f
5 changed files with 19 additions and 10 deletions

View File

@ -17,7 +17,8 @@ export default function ForgotPasswordPage({csrfToken, actionUrl, ...props}) {
<form style={{display:'flex', gap:'15px', flexDirection:'column'}} action={actionUrl} method="POST">
<input name="csrf_token" defaultValue={csrfToken} hidden/>
<div>{gettext('Enter the email address for the user account you wish to recover the password for:')}</div>
<InputText name="email" value={form.email} onChange={(v)=>onTextChange('email', v)} placeholder={gettext('Email Address')} autoFocus />
<InputText name="email" value={form.email} onChange={(v)=>onTextChange('email', v)} placeholder={gettext('Email Address')} autoFocus
controlProps={{autoComplete: null}} />
<SecurityButton name="internal_button" value="Recover Password">{gettext('Recover Password')}</SecurityButton>
</form>
</BasePage>

View File

@ -10,7 +10,7 @@ export default function LoginPage({userLanguage, langOptions, forgotPassUrl, csr
const [form, setForm] = useState(({email: '', password: '', language: userLanguage}));
// Hide login form if auth source is only oauth2 and/or kerberos. #5386
const showLoginForm = !((authSources?.includes('oauth2') || authSources?.includes('kerberos')) && authSources?.length == 1 || (authSources?.includes('oauth2')
const showLoginForm = !((authSources?.includes('oauth2') || authSources?.includes('kerberos')) && authSources?.length == 1 || (authSources?.includes('oauth2')
&& authSources?.includes('kerberos')) && authSources?.length == 2);
const onTextChange = (n, val)=>{
@ -33,8 +33,10 @@ export default function LoginPage({userLanguage, langOptions, forgotPassUrl, csr
{showLoginForm &&
<>
<input name="csrf_token" defaultValue={csrfToken} hidden/>
<InputText name="email" value={form.email} onChange={(v)=>onTextChange('email', v)} placeholder={gettext('Email Address / Username')} autoFocus />
<InputText name="password" value={form.password} onChange={(v)=>onTextChange('password', v)} type="password" placeholder={gettext('Password')} />
<InputText name="email" value={form.email} onChange={(v)=>onTextChange('email', v)} placeholder={gettext('Email Address / Username')} autoFocus
controlProps={{autoComplete: null}} />
<InputText name="password" value={form.password} onChange={(v)=>onTextChange('password', v)} type="password" placeholder={gettext('Password')}
controlProps={{autoComplete: null}} />
<Box textAlign="right" marginTop="-10px">
<a style={{color: 'inherit'}} href={forgotPassUrl}>{gettext('Forgotten your password?')}</a>
</Box>

View File

@ -16,8 +16,10 @@ export default function PasswordResetPage({csrfToken, actionUrl, ...props}) {
<BasePage title={gettext('Reset Password')} pageImage={<ForgotPasswordImage style={{height: '100%', width: '100%'}} />} {...props} >
<form style={{display:'flex', gap:'15px', flexDirection:'column'}} action={actionUrl} method="POST">
<input name="csrf_token" defaultValue={csrfToken} hidden/>
<InputText name="password" value={form.password} onChange={(v)=>onTextChange('password', v)} type="password" placeholder={gettext('Password')} autoFocus/>
<InputText name="password_confirm" value={form.password_confirm} onChange={(v)=>onTextChange('password_confirm', v)} type="password" placeholder={gettext('Retype Password')} />
<InputText name="password" value={form.password} onChange={(v)=>onTextChange('password', v)} type="password" placeholder={gettext('Password')} autoFocus
controlProps={{autoComplete: 'new-password'}} />
<InputText name="password_confirm" value={form.password_confirm} onChange={(v)=>onTextChange('password_confirm', v)} type="password" placeholder={gettext('Retype Password')}
controlProps={{autoComplete: 'new-password'}} />
<SecurityButton value="Reset Password">{gettext('Reset Password')}</SecurityButton>
</form>
</BasePage>

View File

@ -396,7 +396,7 @@ export const InputText = forwardRef(({
'aria-describedby': helpid,
...(type ? { pattern: !_.isUndefined(controlProps) && !_.isUndefined(controlProps.pattern) ? controlProps.pattern : patterns[type] } : {}),
style: inputStyle || {},
autoComplete: 'new-password',
autoComplete: _.isUndefined(controlProps?.autoComplete) ? 'nope' : controlProps?.autoComplete,
'data-testid': 'input-text',
title: controlProps?.title,
}}
@ -812,7 +812,7 @@ OptionView.propTypes = {
function CustomSelectInput(props) {
const { maxLength } = props.selectProps;
return (
<RSComponents.Input {...props} maxLength={maxLength} />
<RSComponents.Input {...props} maxLength={maxLength} autoComplete='off' autoCorrect='off' spellCheck='off' />
);
}
CustomSelectInput.propTypes = {

View File

@ -122,13 +122,17 @@ class UserManagementCollection extends BaseUISchema {
}
}, {
id: 'newPassword', label: gettext('New password'), cell: 'password',
minWidth: 90, width: 90, deps: ['auth_source'],
minWidth: 90, width: 90, deps: ['auth_source'], controlProps: {
autoComplete: 'new-password',
},
editable: (state)=> {
return obj.isEditable(state) && state.auth_source == AUTH_METHODS['INTERNAL'];
}
}, {
id: 'confirmPassword', label: gettext('Confirm password'), cell: 'password',
minWidth: 90, width: 90, deps: ['auth_source'],
minWidth: 90, width: 90, deps: ['auth_source'], controlProps: {
autoComplete: 'new-password',
},
editable: (state)=> {
return obj.isEditable(state) && state.auth_source == AUTH_METHODS['INTERNAL'];
}