fix: toggle pw visibility, add loading

CMS-Enterprise · Aug 8, 2023 · a7caba0 · a7caba0
1 parent 1719b7e
commit a7caba0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/src/components/forms/InputFormControl.tsx b/src/components/forms/InputFormControl.tsx
@@ -62,7 +62,6 @@ const InputFormControl = <TFieldValues extends FieldValues>({
                 input: {
                   'aria-invalid': !!error,
                   'aria-labelledby': `${name}-label`,
-                  pattern: name || 'text',
                   ...inputSlotProps,
                 },
               }}

diff --git a/src/views/SignIn/SignIn.test.tsx b/src/views/SignIn/SignIn.test.tsx
@@ -49,12 +49,14 @@ describe('SignIn', () => {
 
     // Type the password into the password field
     await user.type(
-      screen.getByRole('textbox', { name: /password/i }),
+      screen.getByLabelText(/password/i, {
+        selector: 'input',
+      }),
       'password'
     )
 
     // Save the form
-    await user.click(screen.getByRole('button', { name: /^login$/i }))
+    await user.click(screen.getByRole('button', { name: /login/i }))
 
     // Wait for form submission to complete
     waitFor(() => {

diff --git a/src/views/SignIn/SignIn.tsx b/src/views/SignIn/SignIn.tsx
@@ -10,7 +10,8 @@ import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import InputFormControl from '@/components/forms/InputFormControl'
-import LinearIndeterminate from '@/components/mui/LinearLoadingBar'
+import CircularProgress from '@mui/material/CircularProgress'
+import Backdrop from '@mui/material/Backdrop'
 import PasswordVisibilityToggle from '@/components/PasswordVisibilityToggle'
 import SubmitButton from '@/components/forms/SubmitButton'
 import BlankLayout from '@/layouts/BlankLayout'
@@ -119,7 +120,9 @@ const SignIn = () => {
                 control={control}
                 name="password"
                 InputProps={{
+                  autoComplete: 'current-password',
                   endAdornment: <ShowPasswordButton />,
+                  type: showPassword ? 'text' : 'password',
                 }}
               />
               <SubmitButton
@@ -128,8 +131,31 @@ const SignIn = () => {
                 name="login"
                 role="button"
               >
-                Login
+                Sign In
               </SubmitButton>
+              {loading && (
+                <Backdrop
+                  open={loading}
+                  sx={{
+                    borderRadius: 2,
+                    display: 'flex',
+                    position: 'absolute',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    top: 0,
+                    left: 0,
+                    height: '100%',
+                    width: '100%',
+                    '::before': {
+                      content: '""',
+                      filter: 'blur(10px)',
+                      background: 'inherit',
+                    },
+                  }}
+                >
+                  <CircularProgress data-testid="linear-indeterminate" />
+                </Backdrop>
+              )}
               <Typography align="center" variant="subtitle2">
                 or...
               </Typography>
@@ -143,10 +169,6 @@ const SignIn = () => {
               </Button>
             </Stack>
             {/* End of Form */}
-
-            {loading && (
-              <LinearIndeterminate data-testid="linear-indeterminate" />
-            )}
           </VerticalCenteredFlexBox>
         </CenteredFlexBox>
       </RightWrapper>