From d5abdaef7d89f4b38a80197ba0bc481d61d020ac Mon Sep 17 00:00:00 2001
From: hdjoumdjeu <hermannpougoue1@gmail.com>
Date: Sat, 18 Jan 2025 21:05:21 -0600
Subject: [PATCH 1/2] pull latest update

---
 src/views/ShareAProject.jsx | 475 +++++++++++++++++++++---------------
 1 file changed, 280 insertions(+), 195 deletions(-)

diff --git a/src/views/ShareAProject.jsx b/src/views/ShareAProject.jsx
index 4ccc624..f7eadb5 100644
--- a/src/views/ShareAProject.jsx
+++ b/src/views/ShareAProject.jsx
@@ -1,205 +1,290 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 import "../styles/ShareAProject.css";
-import { Input, CheckboxGroup, Fieldset, Textarea, Button } from "@chakra-ui/react"
-import { Field } from "../components/ui/field"
-import { Checkbox } from "../components/ui/checkbox"
-import { Toaster, toaster } from "../components/ui/toaster"
+import {
+  Input,
+  CheckboxGroup,
+  Fieldset,
+  Textarea,
+  Button,
+} from "@chakra-ui/react";
+import { Field } from "../components/ui/field";
+import { Checkbox } from "../components/ui/checkbox";
+import { Toaster, toaster } from "../components/ui/toaster";
 
 const ShareAProject = () => {
+  const [newProject, setNewProject] = useState({
+    title: "",
+    githubURL: "",
+    description: "",
+    frameworks: [],
+    liveDemoURL: "",
+    comments: "",
+    date: "",
+  });
 
-    const [newProject, setNewProject] = useState({
-        title: '',
-        githubURL: '',
-        description: '',
-        frameworks: [],
-        liveDemoURL: '',
-        comments: '',
-        date: ''
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await fetch("http://localhost:8001/addproject", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          ...newProject,
+          date: new Date().toISOString(),
+        }),
       });
-    
-      const handleSubmit = async (e) => {
-        e.preventDefault();
-    
-        try {
-            const response = await fetch('http://localhost:8001/projects', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                ...newProject,
-                date: new Date().toISOString()
-              }),
-            });
-    
-          if (response.ok) {
-            toaster.create({
-                title: 'Project submitted succesfully!',
-                type: 'success',
-                duration: 4000,
-                action: {
-                  label: "x",
-                }
-            })
-            setNewProject({
-              title: '',
-              githubURL: '',
-              description: '',
-              frameworks: [],
-              liveDemoURL: '',
-              comments: '',
-              date: '',
-            });
-          } else {
-            console.error('Failed to submit project');
-          }
-        } catch (error) {
-              toaster.create({
-              title: `Error submitting project: ${error.message}`,
-              type: 'error',
-              duration: 4000,
-              action: {
-                label: "x",
-              }
-              });
-        }
-      };
-    
-      const handleCheckboxChange = (value) => {
-        setNewProject((prev) => ({
-          ...prev,
-          frameworks: prev.frameworks.includes(value)
-            ? prev.frameworks.filter((framework) => framework !== value)
-            : [...prev.frameworks, value],
-        }));
-      };
+      console.log(newProject);
+      if (response.ok) {
+        toaster.create({
+          title: "Project submitted succesfully!",
+          type: "success",
+          duration: 4000,
+          action: {
+            label: "x",
+          },
+        });
+        setNewProject({
+          title: "",
+          githubURL: "",
+          description: "",
+          frameworks: [],
+          liveDemoURL: "",
+          comments: "",
+          date: "",
+        });
+      } else {
+        console.error("Failed to submit project");
+      }
+    } catch (error) {
+      toaster.create({
+        title: `Error submitting project: ${error.message}`,
+        type: "error",
+        duration: 4000,
+        action: {
+          label: "x",
+        },
+      });
+    }
+  };
+
+  const handleCheckboxChange = (value) => {
+    setNewProject((prev) => ({
+      ...prev,
+      frameworks: prev.frameworks.includes(value)
+        ? prev.frameworks.filter((framework) => framework !== value)
+        : [...prev.frameworks, value],
+    }));
+  };
 
-    return(
-        <form onSubmit={handleSubmit}>
-        <div className='share-project-container'>
-            <div className='sp-info-container'>
-              <p className='sp-form-header-responsive'>Share Your Project</p>
-                <div className='sp-info-text-area'>
-                    <p className='sp-info-header'>Start Your
-                    Journey with Us</p>
-                    <div className='sp-info-text-responsive'>
-                    <p className='sp-info-text'>Submit your project and take the next step in your learning journey with us. Whether you're looking to refine your skills or showcase your progress, we're here to guide you through each stage, helping you turn your ideas into impactful solutions.</p>
-                    </div>
-                    <img className="thumbs-up" src="./images/thumbs-up.svg" alt='thumbs-up'></img>
-                </div>
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="share-project-container">
+        <div className="sp-info-container">
+          <p className="sp-form-header-responsive">Share Your Project</p>
+          <div className="sp-info-text-area">
+            <p className="sp-info-header">Start Your Journey with Us</p>
+            <div className="sp-info-text-responsive">
+              <p className="sp-info-text">
+                Submit your project and take the next step in your learning
+                journey with us. Whether you're looking to refine your skills or
+                showcase your progress, we're here to guide you through each
+                stage, helping you turn your ideas into impactful solutions.
+              </p>
             </div>
-            
-            <div className='sp-form-container'>
-                <p className='sp-form-header'>Share Your Project</p>
-                <Field
-                marginTop="36px"
-                label={<span style={{ fontSize: "20px"}}>Project Title</span>} required
-                errorText="This field is required">
-                    <Input
-                        marginTop="20px"
-                        width="100%"
-                        height="52px"
-                        backgroundColor="rgba(255, 255, 255, 0.16)"
-                        placeholder="Enter your Project"
-                        borderRadius='8px'
-                        value={newProject.title}
-                        onChange={(e) => setNewProject({ ...newProject, title: e.target.value })}
-                    />
-                </Field>
-                <Field 
-                marginTop='36px'
-                label={<span style={{ fontSize: "20px"}}>Description</span>} required helperText="Max 500 characters.">
-                    <Textarea 
-                        variant="subtle" 
-                        marginTop="20px"
-                        width="100%"
-                        height="212px"
-                        backgroundColor="rgba(255, 255, 255, 0.16)"
-                        placeholder="Why did you develop this project?"
-                        borderRadius='8px'
-                        border='2px solid white'
-                        value={newProject.description}
-                        onChange={(e) => setNewProject({ ...newProject, description: e.target.value })}
-                    />
-                </Field>
-                <Fieldset.Root>
-                    <CheckboxGroup key={newProject.frameworks.length} defaultValue={newProject.frameworks} name="framework">
-                        <Fieldset.Legend mb="2" color='white' marginTop='36px' marginBottom='20px' fontSize='21px'>
-                        Frameworks / Languages
-                        </Fieldset.Legend>
-                        <Fieldset.Content gap='16px'>
-                            <Checkbox value="React" colorPalette='cyan' variant='solid'
-                            checked={newProject.frameworks.includes('React')}
-                            onChange={() => handleCheckboxChange('React')}>                         
-                            <span style={{ fontSize: "20px", display: 'flex', alignItems: 'center'}}>React</span>
-                            </Checkbox>
-                            <Checkbox value="Node.js" colorPalette='green' variant='solid'
-                            checked={newProject.frameworks.includes('Node.js')}
-                            onChange={() => handleCheckboxChange('Node.js')}>
-                            <span style={{ fontSize: "20px", display: 'flex', alignItems: 'center'}}>Node.js</span>
-                            </Checkbox>
-                            <Checkbox value="HTML / CSS" colorPalette='purple' variant='solid'
-                            checked={newProject.frameworks.includes('HTML / CSS')}
-                            onChange={() => handleCheckboxChange('HTML / CSS')}>
-                            <span style={{ fontSize: "20px", display: 'flex', alignItems: 'center'}}>HTML / CSS</span>
-                            </Checkbox>
-                        </Fieldset.Content>
-                    </CheckboxGroup>
-                </Fieldset.Root>
-                <Field
-                marginTop="36px"
-                label={<span style={{ fontSize: "20px"}}>Github Repository URL</span>} required
-                errorText="This field is required">
-                    <Input
-                        marginTop="20px"
-                        width="100%"
-                        height="52px"
-                        backgroundColor="rgba(255, 255, 255, 0.16)"
-                        placeholder="Enter your Github repository URL"
-                        borderRadius='8px'
-                        value={newProject.githubURL}
-                        onChange={(e) => setNewProject({ ...newProject, githubURL: e.target.value })}
-                    />
-                </Field>
-                <Field
+            <img
+              className="thumbs-up"
+              src="./images/thumbs-up.svg"
+              alt="thumbs-up"
+            ></img>
+          </div>
+        </div>
+
+        <div className="sp-form-container">
+          <p className="sp-form-header">Share Your Project</p>
+          <Field
+            marginTop="36px"
+            label={<span style={{ fontSize: "20px" }}>Project Title</span>}
+            required
+            errorText="This field is required"
+          >
+            <Input
+              marginTop="20px"
+              width="100%"
+              height="52px"
+              backgroundColor="rgba(255, 255, 255, 0.16)"
+              placeholder="Enter your Project"
+              borderRadius="8px"
+              value={newProject.title}
+              onChange={(e) =>
+                setNewProject({ ...newProject, title: e.target.value })
+              }
+            />
+          </Field>
+          <Field
+            marginTop="36px"
+            label={<span style={{ fontSize: "20px" }}>Description</span>}
+            required
+            helperText="Max 500 characters."
+          >
+            <Textarea
+              variant="subtle"
+              marginTop="20px"
+              width="100%"
+              height="212px"
+              backgroundColor="rgba(255, 255, 255, 0.16)"
+              placeholder="Why did you develop this project?"
+              borderRadius="8px"
+              border="2px solid white"
+              value={newProject.description}
+              onChange={(e) =>
+                setNewProject({ ...newProject, description: e.target.value })
+              }
+            />
+          </Field>
+          <Fieldset.Root>
+            <CheckboxGroup
+              key={newProject.frameworks.length}
+              defaultValue={newProject.frameworks}
+              name="framework"
+            >
+              <Fieldset.Legend
+                mb="2"
+                color="white"
                 marginTop="36px"
-                label={<span style={{ fontSize: "20px"}}>Live Demo URL (Optional)</span>}
-                errorText="This field is required">
-                    <Input
-                        marginTop="20px"
-                        width="100%"
-                        height="52px"
-                        backgroundColor="rgba(255, 255, 255, 0.16)"
-                        placeholder="Enter your Live Demo URL (Optional)"
-                        borderRadius='8px'
-                        value={newProject.liveDemoURL}
-                        onChange={(e) => setNewProject({ ...newProject, liveDemoURL: e.target.value })}
-                    />
-                </Field>
-                <Field 
-                marginTop='36px'
-                label={<span style={{ fontSize: "20px"}}>Comments (Optional)</span>}>
-                    <Textarea 
-                        variant="subtle" 
-                        marginTop="20px"
-                        width="100%"
-                        height="212px"
-                        backgroundColor="rgba(255, 255, 255, 0.16)"
-                        placeholder="Do you have any comments? (Optional)"
-                        borderRadius='8px'
-                        border='2px solid white'
-                        value={newProject.comments}
-                        onChange={(e) => setNewProject({ ...newProject, comments: e.target.value })}
-                    />
-                    <Button className='sp-button' variant="solid" type="submit">SUBMIT PROJECT</Button>
-                    <Toaster />
-                </Field>
-            </div>
+                marginBottom="20px"
+                fontSize="21px"
+              >
+                Frameworks / Languages
+              </Fieldset.Legend>
+              <Fieldset.Content gap="16px">
+                <Checkbox
+                  value="React"
+                  colorPalette="cyan"
+                  variant="solid"
+                  checked={newProject.frameworks.includes("React")}
+                  onChange={() => handleCheckboxChange("React")}
+                >
+                  <span
+                    style={{
+                      fontSize: "20px",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                  >
+                    React
+                  </span>
+                </Checkbox>
+                <Checkbox
+                  value="Node.js"
+                  colorPalette="green"
+                  variant="solid"
+                  checked={newProject.frameworks.includes("Node.js")}
+                  onChange={() => handleCheckboxChange("Node.js")}
+                >
+                  <span
+                    style={{
+                      fontSize: "20px",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                  >
+                    Node.js
+                  </span>
+                </Checkbox>
+                <Checkbox
+                  value="HTML / CSS"
+                  colorPalette="purple"
+                  variant="solid"
+                  checked={newProject.frameworks.includes("HTML / CSS")}
+                  onChange={() => handleCheckboxChange("HTML / CSS")}
+                >
+                  <span
+                    style={{
+                      fontSize: "20px",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                  >
+                    HTML / CSS
+                  </span>
+                </Checkbox>
+              </Fieldset.Content>
+            </CheckboxGroup>
+          </Fieldset.Root>
+          <Field
+            marginTop="36px"
+            label={
+              <span style={{ fontSize: "20px" }}>Github Repository URL</span>
+            }
+            required
+            errorText="This field is required"
+          >
+            <Input
+              marginTop="20px"
+              width="100%"
+              height="52px"
+              backgroundColor="rgba(255, 255, 255, 0.16)"
+              placeholder="Enter your Github repository URL"
+              borderRadius="8px"
+              value={newProject.githubURL}
+              onChange={(e) =>
+                setNewProject({ ...newProject, githubURL: e.target.value })
+              }
+            />
+          </Field>
+          <Field
+            marginTop="36px"
+            label={
+              <span style={{ fontSize: "20px" }}>Live Demo URL (Optional)</span>
+            }
+            errorText="This field is required"
+          >
+            <Input
+              marginTop="20px"
+              width="100%"
+              height="52px"
+              backgroundColor="rgba(255, 255, 255, 0.16)"
+              placeholder="Enter your Live Demo URL (Optional)"
+              borderRadius="8px"
+              value={newProject.liveDemoURL}
+              onChange={(e) =>
+                setNewProject({ ...newProject, liveDemoURL: e.target.value })
+              }
+            />
+          </Field>
+          <Field
+            marginTop="36px"
+            label={
+              <span style={{ fontSize: "20px" }}>Comments (Optional)</span>
+            }
+          >
+            <Textarea
+              variant="subtle"
+              marginTop="20px"
+              width="100%"
+              height="212px"
+              backgroundColor="rgba(255, 255, 255, 0.16)"
+              placeholder="Do you have any comments? (Optional)"
+              borderRadius="8px"
+              border="2px solid white"
+              value={newProject.comments}
+              onChange={(e) =>
+                setNewProject({ ...newProject, comments: e.target.value })
+              }
+            />
+            <Button className="sp-button" variant="solid" type="submit">
+              SUBMIT PROJECT
+            </Button>
+            <Toaster />
+          </Field>
         </div>
-        <img className="ctd-logo" src="./images/ctd-logo.png"></img>
-        </form>
-        
-    );
-}
+      </div>
+      <img className="ctd-logo" src="./images/ctd-logo.png"></img>
+    </form>
+  );
+};
 
-export default ShareAProject;
\ No newline at end of file
+export default ShareAProject;

From 8f3acfac7c0c776de21a1d42f94425c5c93b568a Mon Sep 17 00:00:00 2001
From: hdjoumdjeu <hermannpougoue1@gmail.com>
Date: Sat, 18 Jan 2025 23:19:09 -0600
Subject: [PATCH 2/2] sign in and out on md and lg device implemented

---
 src/components/LoginAuth.jsx | 191 ++++++++++++++++++++++-------------
 1 file changed, 122 insertions(+), 69 deletions(-)

diff --git a/src/components/LoginAuth.jsx b/src/components/LoginAuth.jsx
index edf82e2..85dc070 100644
--- a/src/components/LoginAuth.jsx
+++ b/src/components/LoginAuth.jsx
@@ -1,7 +1,10 @@
 import { Box, HStack, VStack, Image, Button } from "@chakra-ui/react";
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import {
   DialogBody,
+  DialogHeader,
+  DialogTitle,
   DialogContent,
   DialogRoot,
   DialogFooter,
@@ -19,6 +22,17 @@ const CardWithForm = ({ isAuthentificated }) => {
   const [formType, setFormType] = useState("login");
   const closeDialogRef = useRef(null); // Ref to programmatically trigger DialogCloseTrigger
 
+  const storedAuth = JSON.parse(localStorage.getItem("auth"));
+  const navigate = useNavigate();
+  /*const [isSignedIn, setIsSignedIn] = useState(() => {
+    return JSON.parse(localStorage.getItem("auth")) || false;
+  });*/
+
+  const handleLogout = () => {
+    localStorage.removeItem("auth"); // Clear auth data the logout api will be call here
+    navigate("/"); // Redirect to Home
+  };
+
   const handleClose = () => {
     if (closeDialogRef.current) {
       closeDialogRef.current.click(); // Programmatically trigger close button
@@ -44,77 +58,116 @@ const CardWithForm = ({ isAuthentificated }) => {
     }
   };
   return (
-
-    <DialogRoot placement="center" id={"authDialog"}>
-      <DialogTrigger>
-        <a href="#" style={{ cursor: "pointer" }}>
-          <img
-            className="usericon"
-            src="../images/user_icon.svg"
-            alt="User Icon"
-          />
-        </a>
-      </DialogTrigger>
-      <DialogTrigger>
-        <button style={{ display: "none" }} id="menu-signin-trigger">
-          Open Sign In
-        </button>
-      </DialogTrigger>
-      <DialogContent
-        maxWidth="1100px"
-        pt="16px"
-        className="dialog-container"
-        backdropFilter="blur(10px)"
-      >
-        <DialogBody Width="auto">
-          <HStack spacing={8} align="stretch" wrap="wrap">
-            {/* Left section with image */}
-            <Box
-              width="54%" // Fixed width for the image container
-              height="auto" // Let height be controlled by right-hand content
-              borderRadius="12px"
-              overflow="hidden"
-              flexShrink={0} // Prevent shrinking of the container
-              marginRight="16px"
-              display={["none", "none", "flex"]}
+    <>
+      {storedAuth ? (
+        <div>
+          <DialogRoot role="alertdialog" placement="top">
+            <DialogTrigger asChild>
+              <a href="#" style={{ cursor: "pointer" }}>
+                <img
+                  className="usericon"
+                  src="../images/user_icon.svg"
+                  alt="User Icon"
+                />
+              </a>
+            </DialogTrigger>
+            <DialogContent
+              className="dialog-container"
+              backdropFilter="blur(10px)"
             >
-              <Box
-                width="100%"
-                height="100%"
-                display="block"
-                position="relative"
-              >
-                <Image
-                  src="../images/register.png"
-                  alt="Code The Dream Logo"
-                  objectFit="cover"
-                  position="absolute"
-                  top={0}
-                  left={0}
-                  width="100%"
-                  height="100%"
+              <DialogHeader>
+                <DialogTitle>Confirm Logout</DialogTitle>
+              </DialogHeader>
+              <DialogBody>
+                <p>
+                  Are you sure you want to log out? Your session will be ended,
+                  and you’ll need to sign in again to access your account.
+                </p>
+              </DialogBody>
+              <DialogFooter>
+                <DialogActionTrigger asChild>
+                  <Button bg="whiteAlpha.500">Cancel</Button>
+                </DialogActionTrigger>
+                <Button bg="red.700" onClick={handleLogout}>
+                  Log Out
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </DialogRoot>
+        </div>
+      ) : (
+        <DialogRoot placement="center" id={"authDialog"}>
+          <DialogTrigger>
+            <a href="#" style={{ cursor: "pointer" }}>
+              <img
+                className="usericon"
+                src="../images/user_icon.svg"
+                alt="User Icon"
+              />
+            </a>
+          </DialogTrigger>
+          <DialogTrigger>
+            <button style={{ display: "none" }} id="menu-signin-trigger">
+              Open Sign In
+            </button>
+          </DialogTrigger>
+          <DialogContent
+            maxWidth="1100px"
+            pt="16px"
+            className="dialog-container"
+            backdropFilter="blur(10px)"
+          >
+            <DialogBody Width="auto">
+              <HStack spacing={8} align="stretch" wrap="wrap">
+                {/* Left section with image */}
+                <Box
+                  width="54%" // Fixed width for the image container
+                  height="auto" // Let height be controlled by right-hand content
+                  borderRadius="12px"
+                  overflow="hidden"
+                  flexShrink={0} // Prevent shrinking of the container
+                  marginRight="16px"
+                  display={["none", "none", "flex"]}
+                >
+                  <Box
+                    width="100%"
+                    height="100%"
+                    display="block"
+                    position="relative"
+                  >
+                    <Image
+                      src="../images/register.png"
+                      alt="Code The Dream Logo"
+                      objectFit="cover"
+                      position="absolute"
+                      top={0}
+                      left={0}
+                      width="100%"
+                      height="100%"
+                    />
+                  </Box>
+                </Box>
+                {/* Right section with form */}
+                <VStack spacing={4} align="start" flex="1">
+                  {renderFormContent()}
+                </VStack>
+              </HStack>
+            </DialogBody>
+            <DialogFooter>
+              <DialogActionTrigger>
+                <Button
+                  as="div"
+                  ref={closeDialogRef}
+                  variant="outline"
+                  display={"none"}
                 />
-              </Box>
-            </Box>
-            {/* Right section with form */}
-            <VStack spacing={4} align="start" flex="1">
-              {renderFormContent()}
-            </VStack>
-          </HStack>
-        </DialogBody>
-        <DialogFooter>
-          <DialogActionTrigger>
-            <Button
-              as="div"
-              ref={closeDialogRef}
-              variant="outline"
-              display={"none"}
-            />
-            <DialogCloseTrigger size="md" bg="wheat" m="2" />
-          </DialogActionTrigger>
-        </DialogFooter>
-      </DialogContent>
-    </DialogRoot>
+                <DialogCloseTrigger size="md" bg="wheat" m="2" />
+              </DialogActionTrigger>
+            </DialogFooter>
+          </DialogContent>
+        </DialogRoot>
+      )}
+    </>
   );
 };