updated login page (#2)

* updated login page * prettier * fixing dependencies --------- Co-authored-by: kygchng <[email protected]>
hack4impact-upenn · Oct 20, 2024 · 8cb01a3 · 8cb01a3
1 parent 440768e
commit 8cb01a3
Show file tree

Hide file tree

Showing 13 changed files with 311 additions and 27,161 deletions.
diff --git a/README.md b/README.md
@@ -171,12 +171,12 @@ npm install --save dd-trace
 npm install winston
 ```
 
-4. The configDatadog.ts file exports three variables: `logger_info`, `logger_warn `, and `logger_error`. These variables represent different log statuses. Simply add one of these log variables within each function in the format below.
+4. The configDatadog.ts file exports three variables: `loggerInfo`, `loggerWarn `, and `loggerError`. These variables represent different log statuses. Simply add one of these log variables within each function in the format below.
 
 ```
-logger_info.log('Account Verified');
-logger_warn.warn('Logger Initialized');
-logger_error.error('Logout');
+loggerInfo.log('Account Verified');
+loggerWarn.warn('Logger Initialized');
+loggerError.error('Logout');
 ```
 
 Some examples are shown in login() and logout() functions in auth.controller.ts.

diff --git a/client/package.json b/client/package.json
@@ -33,6 +33,7 @@
     ]
   },
   "dependencies": {
+    "@emotion/styled": "^11.13.0",
     "@material-ui/icons": "^4.11.2",
     "@mui/material": "^5.5.3",
     "@mui/system": "^5.5.2",

diff --git a/client/src/Authentication/LoginPage.tsx b/client/src/Authentication/LoginPage.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { TextField, Link, Typography, Grid } from '@mui/material';
 import { useNavigate, Link as RouterLink } from 'react-router-dom';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import styled from '@emotion/styled';
 import { useAppDispatch } from '../util/redux/hooks.ts';
 import { login as loginRedux } from '../util/redux/userSlice.ts';
 import FormGrid from '../components/form/FormGrid.tsx';
@@ -12,14 +14,98 @@ import AlertDialog from '../components/AlertDialog.tsx';
 import PrimaryButton from '../components/buttons/PrimaryButton.tsx';
 import ScreenGrid from '../components/ScreenGrid.tsx';
 
-/**
- * A page allowing users to input their email and password to login. The default
- * starting page of the application
- */
+import PrimaryLogo from '../assets/Logos/BoxOfBalloonsPrimaryLogo.png';
+import SupportingElement1 from '../assets/Logos/boxBalloonsSupportingEl.png';
+import SupportingElement2 from '../assets/Logos/balloonBox.png';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#FF3F73', // Box of Balloons Pink
+    },
+    secondary: {
+      main: '#54C2B9', // Box of Balloons Teal
+    },
+    warning: {
+      main: '#FEE761', // Box of Balloons Yellow
+    },
+  },
+  typography: {
+    fontFamily: 'Open Sans Condensed Light, sans-serif',
+    h2: {
+      fontFamily: 'Janda Safe And Sound, sans-serif',
+      color: '#FF3F73', // Primary Pink
+    },
+  },
+});
+
+const StyledScreenGrid = styled(ScreenGrid)`
+  background-color: #fee761;
+  background-image: radial-gradient(#f28f8a 10%, transparent 11%),
+    radial-gradient(#54c2b9 10%, transparent 11%);
+  background-size: 60px 60px;
+  background-position: 0 0, 30px 30px;
+  background-repeat: repeat;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledFormGrid = styled(FormGrid)`
+  background-color: white;
+  border-radius: 20px;
+  padding: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 100%;
+  position: relative;
+`;
+
+const Logo = styled.img`
+  width: 250px;
+  margin-bottom: 1rem;
+`;
+
+const StyledTextField = styled(TextField)`
+  margin-bottom: 1rem;
+  .MuiOutlinedInput-root {
+    border-radius: 25px;
+    &:hover fieldset {
+      border-color: ${theme.palette.primary.main};
+    }
+  }
+`;
+
+const StyledPrimaryButton = styled(PrimaryButton)`
+  background-color: ${theme.palette.primary.main};
+  color: white;
+  font-family: 'Open Sans Bold', sans-serif;
+  border-radius: 25px;
+  padding: 10px 20px;
+  font-size: 16px;
+  &:hover {
+    background-color: #f28f8a;
+  }
+`;
+
+const SupportingElements = styled.div`
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+`;
+
+const SupportingIcon = styled.img`
+  width: 60px;
+  margin: 0 10px;
+`;
+
 function LoginPage() {
   const navigate = useNavigate();
 
-  // Default values for state
   const defaultValues = {
     email: '',
     password: '',
@@ -36,12 +122,10 @@ function LoginPage() {
   };
   type ValueType = keyof typeof values;
 
-  // State values and hooks
   const [values, setValueState] = useState(defaultValues);
   const [showError, setShowErrorState] = useState(defaultShowErrors);
   const [errorMessage, setErrorMessageState] = useState(defaultErrorMessages);
 
-  // Helper functions for changing only one field in a state object
   const setValue = (field: string, value: string) => {
     setValueState((prevState) => ({
       ...prevState,
@@ -85,15 +169,14 @@ function LoginPage() {
     clearErrorMessages();
     let isValid = true;
 
-    // eslint-disable-next-line no-restricted-syntax, guard-for-in
-    for (const valueTypeString in values) {
+    Object.keys(values).forEach((valueTypeString) => {
       const valueType = valueTypeString as ValueType;
       if (!values[valueType]) {
         setErrorMessage(valueTypeString, InputErrorMessage.MISSING_INPUT);
         setShowError(valueTypeString, true);
         isValid = false;
       }
-    }
+    });
 
     if (!values.email.match(emailRegex)) {
       setErrorMessage('email', InputErrorMessage.INVALID_EMAIL);
@@ -131,72 +214,87 @@ function LoginPage() {
   }
 
   return (
-    <ScreenGrid>
-      <FormGrid>
-        <FormCol>
-          <Grid item container justifyContent="center">
-            <Typography variant="h2" textAlign="center">
-              Welcome to Boilerplate
-            </Typography>
-          </Grid>
-          <Grid item width="1">
-            <TextField
-              fullWidth
-              error={showError.email}
-              helperText={errorMessage.email}
-              type="email"
-              required
-              label="Email"
-              value={values.email}
-              onChange={(e) => setValue('email', e.target.value)}
-            />
-          </Grid>
-          <Grid item width="1">
-            <TextField
-              fullWidth
-              error={showError.password}
-              helperText={errorMessage.password}
-              type="password"
-              required
-              label="Password"
-              value={values.password}
-              onChange={(e) => setValue('password', e.target.value)}
-            />
-          </Grid>
-          <Grid item container justifyContent="center">
-            <PrimaryButton
-              fullWidth
-              type="submit"
-              variant="contained"
-              onClick={() => handleSubmit()}
-            >
-              Login
-            </PrimaryButton>
-          </Grid>
-          <FormRow>
-            <Grid item>
-              <Link component={RouterLink} to="/email-reset">
-                Forgot password?
-              </Link>
+    <ThemeProvider theme={theme}>
+      <StyledScreenGrid>
+        <StyledFormGrid>
+          <FormCol>
+            <Grid item container justifyContent="center">
+              <Logo src={PrimaryLogo} alt="Box of Balloons Logo" />
+            </Grid>
+            <Grid item container justifyContent="center">
+              <Typography variant="h2" textAlign="center" color="primary">
+                Welcome Back!
+              </Typography>
+            </Grid>
+            <Grid item width="1">
+              <StyledTextField
+                fullWidth
+                error={showError.email}
+                helperText={errorMessage.email}
+                type="email"
+                required
+                label="Email"
+                value={values.email}
+                onChange={(e) => setValue('email', e.target.value)}
+              />
+            </Grid>
+            <Grid item width="1">
+              <StyledTextField
+                fullWidth
+                error={showError.password}
+                helperText={errorMessage.password}
+                type="password"
+                required
+                label="Password"
+                value={values.password}
+                onChange={(e) => setValue('password', e.target.value)}
+              />
             </Grid>
-            <Grid item>
-              <Link component={RouterLink} to="/register">
-                Sign up
-              </Link>
+            <Grid item container justifyContent="center">
+              <StyledPrimaryButton
+                fullWidth
+                type="submit"
+                variant="contained"
+                onClick={() => handleSubmit()}
+              >
+                Login
+              </StyledPrimaryButton>
             </Grid>
-          </FormRow>
-        </FormCol>
-      </FormGrid>
-      {/* The alert that pops up */}
-      <Grid item>
-        <AlertDialog
-          showAlert={showError.alert}
-          title={alertTitle}
-          message={errorMessage.alert}
-          onClose={handleAlertClose}
-        />
-      </Grid>
-    </ScreenGrid>
+            <FormRow>
+              <Grid item>
+                <Link
+                  component={RouterLink}
+                  to="/email-reset"
+                  color="secondary"
+                >
+                  Forgot password?
+                </Link>
+              </Grid>
+              <Grid item>
+                <Link component={RouterLink} to="/register" color="secondary">
+                  Sign up
+                </Link>
+              </Grid>
+            </FormRow>
+            <SupportingElements>
+              <SupportingIcon
+                src={SupportingElement1}
+                alt="Box Balloons Supporting Element"
+              />
+              <SupportingIcon src={SupportingElement2} alt="Balloon Box" />
+            </SupportingElements>
+          </FormCol>
+        </StyledFormGrid>
+        <Grid item>
+          <AlertDialog
+            showAlert={showError.alert}
+            title={alertTitle}
+            message={errorMessage.alert}
+            onClose={handleAlertClose}
+          />
+        </Grid>
+      </StyledScreenGrid>
+    </ThemeProvider>
   );
 }
 

diff --git a/client/src/assets/Logos/BoxOfBalloonsPrimaryLogo.png b/client/src/assets/Logos/BoxOfBalloonsPrimaryLogo.png
diff --git a/client/src/assets/Logos/balloonBox.png b/client/src/assets/Logos/balloonBox.png
diff --git a/client/src/assets/Logos/boxBalloonsSupportingEl.png b/client/src/assets/Logos/boxBalloonsSupportingEl.png
diff --git a/client/src/assets/Logos/kidsHelpingKids.png b/client/src/assets/Logos/kidsHelpingKids.png