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
}
<Flex direction='column' h='100%' w='100%' justify='stretch'>
<OIDPSettingsForm isConfigValid={handleOIDPConfigValid} />
<OIDPSettingsForm key='OIDPSettingsForm' isConfigValid={handleOIDPConfigValid} />
{
showRoles && allRoles ?
<RolesSettingsForm
key='RolesSettingsForm'
allRoles={allRoles}
refetchRoles={() => getRoles.mutate()}
/>

13
src/widgets/OIDPSettingsForm.tsx
View File

@ -16,6 +16,13 @@ interface OIDPSettingsFormProps {
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> = ({
isConfigValid
}) => {
@ -98,7 +105,6 @@ const OIDPSettingsForm: React.FC<OIDPSettingsFormProps> = ({
if (isError) return <RetryError onRetry={refetch} />
return (
<>
<form onSubmit={handleSubmit}>
<FloatingLabelInput
name="clientId"
@ -141,11 +147,10 @@ const OIDPSettingsForm: React.FC<OIDPSettingsFormProps> = ({
onChange={handleInputChange}
/>
<Flex w='100%' justify='stretch' wrap='nowrap' align='center' mt='lg'>
<Button w='100%' onClick={handleDiscard} m='0.5rem'>{t('discard')}</Button>
<Button w='100%' type="submit" m='0.5rem'>{t('confirm')}</Button>
<Button id="discard-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>
</Flex>
</form>
</>
);
};