Merge pull request #23 from Code-4-Community/ma-signup-update

added success page

apps/frontend/src/components/map/Map.tsx

@@ -13,6 +13,7 @@ import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
 import SignUpPage from '../volunteer/signup/SignUpPage';
 
+
 const MapDiv = styled.div`
   height: 100%;
 `;

apps/frontend/src/components/volunteer/signup/SignUpPage.tsx

@@ -9,6 +9,9 @@ import {
 } from '@chakra-ui/react';
 import { Checkbox } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
 
 interface InputField {
   label: string;
@@ -27,6 +30,9 @@ interface InputFieldGroup {
 }
 
 const checkboxesMap: CheckboxField[] = [
+  {
+    label: 'Are you signing up as a group?',
+  },
   {
     label: 'I have reviewed the General Safety Guidelines',
   },
@@ -64,7 +70,7 @@ const inputFieldsMap: InputFieldGroup[] = [
     width: '369px',
   },
   {
-    fields: [{ label: 'Age' }],
+    fields: [{ label: 'Birth Date', placeholder: 'MM/DD/YYYY' }],
     type: 'single',
     height: '40px',
     width: '107px',
@@ -154,10 +160,20 @@ interface Props {
 }
 
 export default function SignUpPage({ setShowSignUp }: Props) {
+  const [isSubmitted, setIsSubmitted] = useState(false); // Step 1
+  const navigate = useNavigate();
+
   const closeSignUp = () => {
     setShowSignUp(false);
   };
 
+
+  const handleSubmit = () => {
+    // You can add form validation logic here if needed
+    setIsSubmitted(true);
+    navigate('/success'); // Step 2
+  };
+
   return (
     <Box
       className="outermost-box"
@@ -225,10 +241,27 @@ export default function SignUpPage({ setShowSignUp }: Props) {
         >
           <CheckboxFields />
         </Box>
-        <Button size="large" marginBottom="7%" fontSize="20px">
-          Submit
-        </Button>
+
+        {/* Conditional rendering for the submit button */}
+        {!isSubmitted && (
+          <Button size="large" marginBottom="7%" fontSize="20px" onClick={handleSubmit}
+          bottom="10%"
+          left="50%"
+          transform="translateX(-50%)">
+            Submit
+          </Button>
+        )}
+
+        {/* Success message */}
+        {isSubmitted && (
+          <Box>
+            <Text fontSize="24px" fontWeight={600}>
+              Thank you for submitting the form!
+            </Text>
+            {/* You can add additional content for the success page */}
+          </Box>
+        )}
       </Box>
     </Box>
   );
-}
+}

apps/frontend/src/components/volunteer/signup/SuccessPage.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import checkIcon from './check.png';
+
+
+const SuccessPage = () => {
+  return (
+    <div style={styles.container}>
+      <div style={styles.content}>
+        <h1>Welcome, Volunteer!</h1>
+        <div style={styles.checkContainer}>
+          <img src={checkIcon} alt="Check Icon" style={styles.checkIcon} /> {/* Use img tag with src attribute */}
+          <p>Thank you!</p>
+          <p>Please verify your account with the link sent to your email.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100vh',
+    outline: '1px solid black', // Outline of the sign-up form
+  } as React.CSSProperties, // Assert styles as React.CSSProperties
+  content: {
+    textAlign: 'center',
+  } as React.CSSProperties, // Assert styles as React.CSSProperties
+  checkContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginBottom: '1rem',
+  } as React.CSSProperties, // Assert styles as React.CSSProperties
+  checkIcon: {
+    width: '100px', // Adjust the width and height of the image as needed
+    height: '100px',
+    marginBottom: '0.5rem',
+  } as React.CSSProperties, // Assert styles as React.CSSProperties
+};
+
+export default SuccessPage;

apps/frontend/src/main.tsx

@@ -3,20 +3,23 @@ import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import MapPage from './pages/mapPage/MapPage';
-import MyAdoptedGIPage from './pages/myAdoptedGIPage/MyAdoptedGIPage';
+import SuccessPage from './components/volunteer/signup/SuccessPage';
 import VolunteerPage from './pages/volunteerPage/VolunteerPage';
+import MyAdoptedGIPage from './pages/myAdoptedGIPage/MyAdoptedGIPage';
+
 
 const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<MapPage />} />
-        <Route path="/volunteer" element={<VolunteerPage />} />
-        <Route path="/volunteer/my-adopted-gi" element={<MyAdoptedGIPage />} />
-      </Routes>
+        <Routes>
+          <Route path="/" element={<MapPage />} />
+          <Route path="/success" element={<SuccessPage />} />
+          <Route path="/volunteer" element={<VolunteerPage />} />
+           <Route path="/volunteer/my-adopted-gi" element={<MyAdoptedGIPage />} />
+        </Routes>
       </BrowserRouter>
     </QueryClientProvider>
   </React.StrictMode>,

apps/frontend/src/pages/Navbar.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Container from '@mui/material/Container';
 import c4cLogo from '../images/logos/c4cLogo.png';
@@ -11,6 +10,7 @@ import SignupPopup from '../components/volunteer/signup/SignupPopup';
 function Navbar() {
   const [selected, setSelected] = useState(false);
   const [showSignupPopup, setShowSignupPopup] = useState(false);
+  const [showSidePanel, setShowSidePanel] = useState(false);
 
   const openSignupPopup = () => {
     setShowSignupPopup(true);
@@ -22,6 +22,10 @@ function Navbar() {
     }
   };
 
+  const toggleSidePanel = () => {
+    setShowSidePanel(!showSidePanel);
+  };
+
   return (
     <div
       onClick={handleClick}
@@ -82,13 +86,50 @@ function Navbar() {
               >
                 LOG IN
               </button>
-              <img src={profileLogo} />
+              <img src={profileLogo} style={{ cursor: 'pointer' }} onClick={toggleSidePanel} />
             </div>
-          </Toolbar>
+            </Toolbar>
         </Container>
         {showSignupPopup && <SignupPopup setShowSignupPopup={setShowSignupPopup} />}
       </AppBar>
+      {showSidePanel && (
+        <div
+          style={{
+            position: 'fixed',
+            top: '109px',
+            right: 0,
+            height: 'calc(100vh - 109px)',
+            backgroundColor: '#fff',
+            boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
+            padding: '1rem',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            zIndex: 1000,
+          }}
+        >
+          <div>
+            <span style={{ display: 'block', textAlign: 'center', fontSize: '20px', fontWeight: 'bold' }}>Hamsini Malli</span>
+            <span style={{ display: 'block', textAlign: 'center' }}>Volunteer since April 2024</span>
+          </div>
+          <div style={{ margin: '1rem 0' }}>
+            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '0.5rem' }}>
+              <span style={{ marginRight: '0.5rem' }}>🌳</span>
+              <div style={{ textAlign: 'center' }}>
+  <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', textAlign: 'center' }}>10</span>
+  <span style={{ textAlign: 'center' }}>Green Infrastructure Adopted</span>
+</div>
+            </div>
+
+          </div>
+          <div>
+            <button style={{ marginRight: '0.5rem' }}>Settings</button>
+            <button>Log Out</button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
+
 export default Navbar;