Merge pull request #653 from codeforpdx/587/restyle-sign-in

587: Restyle Sign In

Updates the styling of the sign-in page to be visually simple. Separates new and existing pod sign-up into tabs

src/components/Signup/ExistingPodForm.jsx

@@ -4,13 +4,17 @@ import React, { useState } from 'react';
 import { useSession } from '@hooks';
 // Material UI Imports
 import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
+import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 
 /* Styles */
 const formRowStyle = {
-  margin: '20px 0'
+  m: 1
+};
+
+const textFieldStyle = {
+  margin: '8px',
+  width: '27ch'
 };
 
 // TODO: Add JSDocs
@@ -33,37 +37,28 @@ const ExistingPodForm = () => {
   };
 
   return (
-    <Card
-      sx={{
-        padding: '8px',
-        margin: '8px',
-        boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
-      }}
-    >
-      <CardHeader title="Register with Existing Pod" />
-      <form onSubmit={loginHandler} style={formRowStyle}>
-        {/* TODO: Consider changing this to Autocomplete like the NavBar and SignInModal have */}
-        <TextField
-          sx={{ margin: '8px' }}
-          id="existing-pod-provider"
-          aria-label="Pod Provider"
-          label="Pod Provider"
-          variant="outlined"
-          onChange={(e) => setOidcIssuer(e.target.value)}
-          required
-        />
-        <br />
-        <Button
-          variant="contained"
-          color="primary"
-          size="large"
-          aria-label="Login to Pod Provider"
-          type="submit"
-        >
-          Login to Pod Provider
-        </Button>
-      </form>
-    </Card>
+    <Box component="form" onSubmit={loginHandler} sx={formRowStyle} textAlign="center">
+      {/* TODO: Consider changing this to Autocomplete like the NavBar and SignInModal have */}
+      <TextField
+        sx={textFieldStyle}
+        id="existing-pod-provider"
+        label="Pod Provider"
+        variant="outlined"
+        onChange={(e) => setOidcIssuer(e.target.value)}
+        fullWidth
+        required
+      />
+      <br />
+      <Button
+        variant="contained"
+        color="primary"
+        size="large"
+        aria-label="Login to Pod Provider"
+        type="submit"
+      >
+        Login to Pod Provider
+      </Button>
+    </Box>
   );
 };
 

src/components/Signup/PodRegistrationForm.jsx

@@ -3,31 +3,19 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 // Material UI Imports
 import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import CardHeader from '@mui/material/CardHeader';
-import FilledInput from '@mui/material/FilledInput';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
-import InputLabel from '@mui/material/InputLabel';
+import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
-import { FormHelperText } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-
-/* Styles for MUI components */
-const cardStyle = {
-  padding: '8px',
-  margin: '8px',
-  boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
-};
 
 const formRowStyle = {
-  margin: '20px 0'
+  m: 1
 };
 
 const textFieldStyle = {
-  margin: '8px'
+  margin: '8px',
+  width: '27ch'
 };
 
 /**
@@ -48,114 +36,111 @@ const PodRegistrationForm = ({ register, caseManagerName, previousInfo = null })
     previousInfo ? previousInfo.confirmPassword : ''
   );
   const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const theme = useTheme();
 
   const [searchParams] = useSearchParams();
   const handleSubmit = async (event) => {
     event.preventDefault();
     register(email, password, confirmPassword);
   };
 
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
+
   return (
     <>
-      <Typography
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        mb={2}
-        variant="h5"
-        component="h3"
-      >
-        Register For PASS
-      </Typography>
       {searchParams.get('webId') && (
         <p>You will register with {caseManagerName ?? searchParams.get('webId')}</p>
       )}
 
-      <Card variant="outlined" sx={cardStyle}>
-        <CardHeader title="Set Up a New Pod" />
-
-        <form onSubmit={handleSubmit} style={formRowStyle} autoComplete="off">
-          <TextField
-            style={textFieldStyle}
-            id="email-form"
-            aria-label="Email"
-            label="Email"
-            variant="outlined"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-          <br />
-          <InputLabel htmlFor="password-form">Password</InputLabel>
-          <FilledInput
-            style={textFieldStyle}
-            id="password-form"
-            inputProps={{
-              'aria-label': 'Password'
-            }}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            type={showPassword ? 'text' : 'password'}
-            endAdornment={
+      <Box
+        component="form"
+        onSubmit={handleSubmit}
+        sx={formRowStyle}
+        autoComplete="off"
+        textAlign="center"
+      >
+        <TextField
+          sx={textFieldStyle}
+          id="email-form"
+          aria-label="Email"
+          label="Email"
+          variant="outlined"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          margin="normal"
+          required
+          fullWidth
+        />
+        <br />
+        <TextField
+          sx={textFieldStyle}
+          id="password-form"
+          margin="normal"
+          label="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          type={showPassword ? 'text' : 'password'}
+          InputProps={{
+            endAdornment: (
               <InputAdornment position="end">
                 <IconButton
                   aria-label="toggle password visibility"
-                  onClick={() => setShowPassword(!showPassword)}
+                  onClick={handleClickShowPassword}
                   edge="end"
                 >
                   {showPassword ? <VisibilityOff /> : <Visibility />}
                 </IconButton>
               </InputAdornment>
-            }
-            minLength="8"
-            required
-          />
-          <br />
-          <InputLabel htmlFor="confirm-password-form">Confirm Password</InputLabel>
-          <FilledInput
-            style={textFieldStyle}
-            id="confirm-password-form"
-            inputProps={{
-              'aria-label': 'Confirm Password'
-            }}
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            type={showConfirmPassword ? 'text' : 'password'}
-            error={password !== confirmPassword}
-            endAdornment={
+            )
+          }}
+          required
+          fullWidth
+          variant="outlined"
+          minLength="8"
+        />
+        <br />
+        <TextField
+          sx={textFieldStyle}
+          id="confirm-password-form"
+          label="Confirm Password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+          type={showPassword ? 'text' : 'password'}
+          error={password !== confirmPassword}
+          helperText={password !== confirmPassword && 'Password does not match'}
+          InputProps={{
+            endAdornment: (
               <InputAdornment position="end">
                 <IconButton
-                  aria-label="toggle confirm password visibility"
-                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  aria-label="toggle password visibility"
+                  onClick={() => setShowPassword(!showPassword)}
+                  onMouseDown={handleMouseDownPassword}
                   edge="end"
                 >
-                  {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
                 </IconButton>
               </InputAdornment>
-            }
-            minLength="8"
-            required
-          />
-          {password !== confirmPassword && (
-            <FormHelperText sx={{ color: theme.palette.status.error.main }}>
-              Password does not match
-            </FormHelperText>
-          )}
-          <br />
-          <Button
-            variant="contained"
-            color="primary"
-            size="large"
-            aria-label="Sign Up For a Pod"
-            type="submit"
-            disabled={password !== confirmPassword}
-          >
-            Set up your Pod
-          </Button>
-        </form>
-      </Card>
+            )
+          }}
+          variant="outlined"
+          minLength="8"
+          required
+          fullWidth
+        />
+        <br />
+        <Button
+          variant="contained"
+          color="primary"
+          size="large"
+          aria-label="Sign Up For a Pod"
+          type="submit"
+          disabled={password !== confirmPassword}
+        >
+          Set up your Pod
+        </Button>
+      </Box>
     </>
   );
 };

src/layouts/Layout.jsx

@@ -19,7 +19,6 @@ const Layout = ({ ariaLabel, children }) => {
     <Box
       aria-label={ariaLabel}
       sx={{
-        display: 'grid',
         minHeight: '100vh'
       }}
     >