yashwin/VMS-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

try to fix warning from chrom about form

Browse Source
This commit is contained in:
NlightN22 2024-11-30 21:06:09 +07:00
parent 98fbcae2b1
commit a9c4d9abb9
2 changed files with 55 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/SettingsPage.tsx
View File

@ -46,10 +46,11 @@ const SettingsPage = () => {
: null : null
} }
<Flex direction='column' h='100%' w='100%' justify='stretch'> <Flex direction='column' h='100%' w='100%' justify='stretch'>
<OIDPSettingsForm isConfigValid={handleOIDPConfigValid} /> <OIDPSettingsForm key='OIDPSettingsForm' isConfigValid={handleOIDPConfigValid} />
{ {
showRoles && allRoles ? showRoles && allRoles ?
<RolesSettingsForm <RolesSettingsForm
key='RolesSettingsForm'
allRoles={allRoles} allRoles={allRoles}
refetchRoles={() => getRoles.mutate()} refetchRoles={() => getRoles.mutate()}
/> />

101
src/widgets/OIDPSettingsForm.tsx
View File

@ -16,6 +16,13 @@ interface OIDPSettingsFormProps {
isConfigValid?: (valid: boolean) => void isConfigValid?: (valid: boolean) => void
} }
/**
* [DOM] Multiple forms should be contained in their own form elements; break up complex forms into ones that represent a single action: (More info: https://goo.gl/9p2vKq)
* This is because you have several type=password inside one form
* Can not fixed
*
*/
const OIDPSettingsForm: React.FC<OIDPSettingsFormProps> = ({ const OIDPSettingsForm: React.FC<OIDPSettingsFormProps> = ({
isConfigValid isConfigValid
}) => { }) => {
@ -98,54 +105,52 @@ const OIDPSettingsForm: React.FC<OIDPSettingsFormProps> = ({
if (isError) return <RetryError onRetry={refetch} /> if (isError) return <RetryError onRetry={refetch} />
return ( return (
<> <form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit}> <FloatingLabelInput
<FloatingLabelInput name="clientId"
name="clientId" label={t('settingsPage.oidpClientId')}
label={t('settingsPage.oidpClientId')} value={config.clientId}
value={config.clientId} placeholder={t('settingsPage.oidpClientIdPH')}
placeholder={t('settingsPage.oidpClientIdPH')} encrypted={false}
encrypted={false} onChange={handleInputChange}
onChange={handleInputChange} />
/> <FloatingLabelInput
<FloatingLabelInput name="clientSecret"
name="clientSecret" label={t('settingsPage.clientSecret')}
label={t('settingsPage.clientSecret')} value={config.clientSecret}
value={config.clientSecret} placeholder={t('settingsPage.clientSecretPH')}
placeholder={t('settingsPage.clientSecretPH')} encrypted={true}
encrypted={true} onChange={handleInputChange}
onChange={handleInputChange} />
/> <FloatingLabelInput
<FloatingLabelInput name="clientUsername"
name="clientUsername" label={t('settingsPage.clientUsername')}
label={t('settingsPage.clientUsername')} value={config.clientUsername}
value={config.clientUsername} placeholder={t('settingsPage.clientUsernamePH')}
placeholder={t('settingsPage.clientUsernamePH')} encrypted={false}
encrypted={false} onChange={handleInputChange}
onChange={handleInputChange} />
/> <FloatingLabelInput
<FloatingLabelInput name="clientPassword"
name="clientPassword" label={t('settingsPage.clientPassword')}
label={t('settingsPage.clientPassword')} value={config.clientPassword}
value={config.clientPassword} placeholder={t('settingsPage.clientPasswordPH')}
placeholder={t('settingsPage.clientPasswordPH')} encrypted={true}
encrypted={true} onChange={handleInputChange}
onChange={handleInputChange} />
/> <FloatingLabelInput
<FloatingLabelInput name="clientURL"
name="clientURL" label={t('settingsPage.realmUrl')}
label={t('settingsPage.realmUrl')} value={config.clientURL}
value={config.clientURL} placeholder={t('settingsPage.realmUrlPH')}
placeholder={t('settingsPage.realmUrlPH')} encrypted={false}
encrypted={false} onChange={handleInputChange}
onChange={handleInputChange} />
/> <Flex w='100%' justify='stretch' wrap='nowrap' align='center' mt='lg'>
<Flex w='100%' justify='stretch' wrap='nowrap' align='center' mt='lg'> <Button id="discard-button" w='100%' onClick={handleDiscard} m='0.5rem'>{t('discard')}</Button>
<Button w='100%' onClick={handleDiscard} m='0.5rem'>{t('discard')}</Button> <Button id="confirm-button" w='100%' type="submit" m='0.5rem'>{t('confirm')}</Button>
<Button w='100%' type="submit" m='0.5rem'>{t('confirm')}</Button> </Flex>
</Flex> </form>
</form>
</>
); );
}; };