Login page updated design

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/components/SignIn.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { host } from '../constants';
 // utility
-import {api, endpoints} from '../api';
+import { api, endpoints } from '../api';
 
 // components
 import Button from '@mui/material/Button';
@@ -21,23 +21,39 @@ import { Card, CardContent } from '@mui/material';
 
 const useStyles = makeStyles((theme) => ({
   cardContainer: {
-    display:"flex",
-    alignItems:"center",
-    justifyContent:"center",
-    marginTop:"20%"
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   loginCard: {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: "20%",
     width: "60%",
+    height: "60%",
     background: '#FFFFFF',
     gap: '10px',
     boxShadow: '0px 5px 10px rgba(131, 131, 131, 0.08)',
     borderRadius: '24px'
   },
+  loginCardContent: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    border: '3px black',
+    maxWidth: '73%',
+    height: '90%'
+  },
   text: {
     color: "#383838",
+    width: "100%"
+  },
+  subtext: {
+    color: "rgba(0, 0, 0, 0.6)",
+    width: "100%"
   }
 }));
 
@@ -54,18 +70,18 @@ export default function SignIn({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, se
   const classes = useStyles();
 
   useEffect(() => {
-    if(isAuthEnabled && isLoggedIn ) {
+    if (isAuthEnabled && isLoggedIn) {
       navigate("/home");
     } else {
-    api.get(`${host}/v2/`)
-      .then(response => {
-        if (response.status === 200) {
-          setIsAuthEnabled(false);
-        }
-      })
-      .catch(e => {
-        setIsAuthEnabled(true);
-      })
+      api.get(`${host}/v2/`)
+        .then(response => {
+          if (response.status === 200) {
+            setIsAuthEnabled(false);
+          }
+        })
+        .catch(e => {
+          setIsAuthEnabled(true);
+        })
     }
   }, []);
 
@@ -73,7 +89,7 @@ export default function SignIn({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, se
     event.preventDefault();
     setRequestProcessing(true);
     let cfg = {};
-    if(isAuthEnabled) {
+    if (isAuthEnabled) {
       const token = btoa(username + ':' + password);
       cfg = {
         headers: {
@@ -81,12 +97,12 @@ export default function SignIn({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, se
         }
       };
     }
-    api.get(`${host}${endpoints.imageList}`,cfg)
+    api.get(`${host}${endpoints.imageList}`, cfg)
       .then(response => {
         if (response.data && response.data.data) {
-          if(isAuthEnabled) {
+          if (isAuthEnabled) {
             const token = btoa(username + ':' + password);
-            localStorage.setItem('token',token);
+            localStorage.setItem('token', token);
             setRequestProcessing(false);
             setRequestError(false);
           }
@@ -132,75 +148,51 @@ export default function SignIn({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, se
 
   return (
     <Box className={classes.cardContainer}>
-        <Card className={classes.loginCard} >
-          <CardContent>
-              <CssBaseline />
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  border: '3px black',
-                }}
-              >
-                {isAuthEnabled ?
-                  (<>
-                    <Typography align="left" className={classes.text} component="h1" variant="h4">
-                      Sign in
-                    </Typography><Typography className={classes.text} variant="subtitle1" gutterBottom component="div">
-                      Welcome back! Please enter your details.
-                    </Typography><Box component="form" onSubmit={null} noValidate sx={{ mt: 1 }}>
-                      <TextField
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="username"
-                        label="Username"
-                        name="username"
-                        autoComplete="username"
-                        onInput={(e) => handleChange(e, 'username')}
-                        error={usernameError != null}
-                        helperText={usernameError} />
-                      <TextField
-                        margin="normal"
-                        required
-                        fullWidth
-                        name="password"
-                        label="Password"
-                        type="password"
-                        id="password"
-                        autoComplete="current-password"
-                        onInput={(e) => handleChange(e, 'password')}
-                        error={passwordError != null}
-                        helperText={passwordError} />
-                      {requestProcessing && <CircularProgress style={{ marginTop: 20 }} color="secondary" />}
-                      {requestError && <Alert style={{ marginTop: 20 }} severity="error">Authentication Failed. Please try again.</Alert>}
-                      <div>
-                        <Button
-                          fullWidth
-                          variant="contained"
-                          sx={{ mt: 3, mb: 2, background: "#7C4DFF",  border: 'white' }}
-                          onClick={handleClick}
-                        > Continue
-                        </Button>
-                      </div>
-                    </Box>
-                  </>) : (
-                    <div>
-                      <Button
-                        fullWidth
-                        variant="outlined"
-                        sx={{ mt: 3, mb: 2}}
-                        onClick={handleClick}
-                      > Continue as Guest
-                      </Button>
-                    </div>
-                  )
-                }
-              </Box>
-              <TermsOfService sx={{ mt: 2, mb: 4 }} />
-          </CardContent>
-        </Card>
+      <Card className={classes.loginCard} >
+        <CardContent className={classes.loginCardContent}>
+          <CssBaseline />
+          <Typography align="left" className={classes.text} component="h1" variant="h4">
+            Sign in
+          </Typography>
+          <Typography align="left" className={classes.subtext} variant="body1" gutterBottom>
+            Welcome back! Please enter your details.
+          </Typography><Box component="form" onSubmit={null} noValidate autoComplete='off' sx={{ mt: 1 }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              id="username"
+              label="Username"
+              name="username"
+              onInput={(e) => handleChange(e, 'username')}
+              error={usernameError != null}
+              helperText={usernameError} />
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Enter password"
+              type="password"
+              id="password"
+              onInput={(e) => handleChange(e, 'password')}
+              error={passwordError != null}
+              helperText={passwordError} />
+            {requestProcessing && <CircularProgress style={{ marginTop: 20 }} color="secondary" />}
+            {requestError && <Alert style={{ marginTop: 20 }} severity="error">Authentication Failed. Please try again.</Alert>}
+            <div>
+              <Button
+                fullWidth
+                variant="contained"
+                sx={{ mt: 3, mb: 2, background: "#7C4DFF", border: 'white' }}
+                onClick={handleClick}
+              > Continue
+              </Button>
+            </div>
+          </Box>
+          <TermsOfService sx={{ mt: 2, mb: 4 }} />
+        </CardContent>
+      </Card>
     </Box>
   );
 }

src/components/SignInPresentation.jsx

@@ -1,38 +1,50 @@
 import {Stack, Typography } from '@mui/material';
 import {makeStyles} from '@mui/styles';
 import React from 'react';
-import logoWhite from '../assets/zot-white.png'
+import logoWhite from '../assets/zot-white.png';
+import loginDrawing from '../assets/login-drawing.svg';
 
 const useStyles = makeStyles(() => ({
   container: {
-    background:"#A53692",
-    minHeight: "100%"
+    background:"linear-gradient(149.91deg, #7A4C75 14.36%, #9A6094 116.3%)",
+    minHeight: "100%",
+    alignItems:"center",
   },
   logo: {
     maxHeight:128,
-    maxWidth: 138
+    maxWidth: 138,
+    marginTop:"17%"
+  },
+  loginDrawing: {
+    maxHeight:298,
+    maxWidth:464,
+    marginTop:"4%"
   },
   mainText: {
     color: "#FFFFFF",
-    fontWeight: 700
+    fontWeight: 700,
+    maxWidth:"45%",
+    marginTop:"4%"
   },
   captionText: {
-    color: "#383838",
+    color: "rgba(255, 255, 255, 0.7)",
+    maxWidth:"48%",
+    marginTop:"2%"
   }
 }));
 
 export default function SigninPresentation(props) {
   const classes = useStyles();
   return (
-    <Stack spacing={0} className={classes.container} alignItems="center" justifyContent="center">
+    <Stack spacing={0} className={classes.container} >
       <img src={logoWhite} alt="zot logo" className={classes.logo}></img>
       <Typography variant="h2" className={classes.mainText}>
         Welcome to our repository
       </Typography>
-      <Typography variant="caption" className={classes.captionText}>
+      <Typography variant="body1" className={classes.captionText}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet, dis pellentesque posuere nulla tortor ac eu arcu nunc.
       </Typography>
-      
+      <img src={loginDrawing} alt="drawing" className={classes.loginDrawing}></img>
     </Stack>
   );
 }

src/components/TermsOfService.jsx

@@ -6,8 +6,11 @@ import { Stack, Typography } from '@mui/material';
 
 const useStyles = makeStyles((theme) => ({
   subtext: {
-    color: "#00000099",
-    margin: 0
+    color: "rgba(0, 0, 0, 0.6)",
+    margin: 0,
+    fontSize:"12px",
+    lineHeight:"166%",
+    letterSpacing:"0.4px"
   }
 }));
 
@@ -15,7 +18,7 @@ export default function TermsOfService(props) {
   const classes = useStyles();
   return (
     <Stack spacing={0}>
-      <Typography variant="caption" className={classes.subtext} align="center" {...props} pb={6}>
+      <Typography variant="caption" className={classes.subtext} align="justify" {...props} pb={6}>
         By creating an account, you agree to the Terms of Service. For more information about our privacy practices, see the zot's Privacy Policy.
       </Typography>
       <Typography variant="caption" className={classes.subtext} align="center" {...props}>

src/pages/LoginPage.jsx

@@ -1,5 +1,5 @@
 // react global
-import React, {  } from 'react';
+import React, { } from 'react';
 
 // components
 import SignIn from '../components/SignIn';
@@ -15,18 +15,18 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function LoginPage({isAuthEnabled, setIsAuthEnabled, isLoggedIn,setIsLoggedIn }) {
+function LoginPage({ isAuthEnabled, setIsAuthEnabled, isLoggedIn, setIsLoggedIn }) {
   const classes = useStyles();
 
   return (
-        <Grid container spacing={0} className={classes.container}>
-          <Grid item xs={6}>
-            <SignIn isAuthEnabled={isAuthEnabled} setIsAuthEnabled={setIsAuthEnabled} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
-          </Grid>
-          <Grid item xs={6}>
-            <SigninPresentation/>
-          </Grid>
-        </Grid>
+    <Grid container spacing={0} className={classes.container}>
+      <Grid item xs={6}>
+        <SigninPresentation />
+      </Grid>
+      <Grid item xs={6}>
+        <SignIn isAuthEnabled={isAuthEnabled} setIsAuthEnabled={setIsAuthEnabled} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
+      </Grid>
+    </Grid>
   );
 }