working on signUp module in admin side

package.json

@@ -31,11 +31,13 @@
     "chart.js": "^4.4.2",
     "classnames": "^2.5.1",
     "core-js": "^3.36.1",
+    "js-cookie": "^3.0.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",
+    "react-toastify": "^10.0.5",
     "redux": "5.0.1",
     "simplebar-react": "^3.2.4"
   },

src/App.js

@@ -1,36 +1,93 @@
-import React, { Suspense, useEffect } from 'react'
-import { HashRouter, Route, Routes } from 'react-router-dom'
-import { useSelector } from 'react-redux'
+/* eslint-disable prettier/prettier */
+// import React, { Suspense, useEffect } from 'react'
+// import { HashRouter, Route, Routes } from 'react-router-dom'
+// import { useSelector } from 'react-redux'
 
-import { CSpinner, useColorModes } from '@coreui/react'
-import './scss/style.scss'
+// import { CSpinner, useColorModes } from '@coreui/react'
+// import './scss/style.scss'
 
-// Containers
-const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
+// // Containers
+// const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
-// Pages
-const Login = React.lazy(() => import('./views/pages/login/Login'))
-const Register = React.lazy(() => import('./views/pages/register/Register'))
-const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
-const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
+// // Pages
+// const Login = React.lazy(() => import('./views/pages/login/Login'))
+// const Register = React.lazy(() => import('./views/pages/register/Register'))
+// const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
+// const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
+
+// const App = () => {
+//   const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+//   const storedTheme = useSelector((state) => state.theme)
+
+//   useEffect(() => {
+//     const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+//     const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+//     if (theme) {
+//       setColorMode(theme)
+//     }
+
+//     if (isColorModeSet()) {
+//       return
+//     }
+
+//     setColorMode(storedTheme)
+//   }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+//   return (
+//     <HashRouter>
+//       <Suspense
+//         fallback={
+//           <div className="pt-3 text-center">
+//             <CSpinner color="primary" variant="grow" />
+//           </div>
+//         }
+//       >
+//         <Routes>
+//           <Route exact path="/login" name="Login Page" element={<Login />} />
+//           <Route exact path="/register" name="Register Page" element={<Register />} />
+//           <Route exact path="/404" name="Page 404" element={<Page404 />} />
+//           <Route exact path="/500" name="Page 500" element={<Page500 />} />
+//           <Route path="*" name="Home" element={<DefaultLayout />} />
+//         </Routes>
+//       </Suspense>
+//     </HashRouter>
+//   )
+// }
+
+// export default App
+
+
+import React, { useEffect, Suspense } from 'react';
+import { HashRouter, Route, Routes, Navigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { CSpinner, useColorModes } from '@coreui/react';
+import './scss/style.scss';
+import Login from './views/pages/login/Login';
+import Register from './views/pages/register/Register';
+import Page404 from './views/pages/page404/Page404';
+import Page500 from './views/pages/page500/Page500';
+import DefaultLayout from './layout/DefaultLayout';
+import Cookies from 'js-cookie';
 
 const App = () => {
-  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
-  const storedTheme = useSelector((state) => state.theme)
+  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme');
+  const storedTheme = useSelector((state) => state.theme);
 
   useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+    const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
+    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0];
     if (theme) {
-      setColorMode(theme)
+      setColorMode(theme);
     }
 
-    if (isColorModeSet()) {
-      return
+    if (!isColorModeSet()) {
+      setColorMode(storedTheme);
     }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    setColorMode(storedTheme)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  const authToken = Cookies.get('authorizationAdmin'); // Change 'authorization' to match your authentication token key
+  const isAuthenticated = !!authToken;
+  console.log("authorizationAdmin",isAuthenticated)
 
   return (
     <HashRouter>
@@ -42,15 +99,27 @@ const App = () => {
         }
       >
         <Routes>
-          <Route exact path="/login" name="Login Page" element={<Login />} />
-          <Route exact path="/register" name="Register Page" element={<Register />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route path="*" name="Home" element={<DefaultLayout />} />
+          <Route
+            exact
+            path="/login"
+            element={isAuthenticated ? <Navigate to="/dashboard" /> : <Login />}
+          />
+          <Route
+            exact
+            path="/register"
+            element={isAuthenticated ? <Navigate to="/dashboard" /> : <Register />}
+          />
+          <Route exact path="/404" element={<Page404 />} />
+          <Route exact path="/500" element={<Page500 />} />
+          <Route
+            path="*"
+            element={isAuthenticated ? <DefaultLayout /> : <Navigate to="/login" />}
+          />
         </Routes>
       </Suspense>
     </HashRouter>
-  )
-}
+  );
+};
+
+export default App;
 
-export default App

src/api.js

@@ -70,4 +70,19 @@ export const deleteEventById = async (eventId) => {
     console.error('Error deleting event:', error);
     throw error;
   }
-}
+}
+
+export const signup = async (userData) => {
+  const response = await axios.post(`http://localhost:8000/api/v1/signup`, userData, {
+    withCredentials: true,
+    // headers: { "Content-Type": "multipart/form-data" },
+  });
+  return response.data;
+};
+
+export const loginApi = async (userData) => {
+  const response = await axios.post(`http://localhost:8000/api/v1/login`, userData, {
+    withCredentials: true,
+  });
+  return response.data;
+};

src/views/event/events/Events.js

@@ -138,7 +138,7 @@ const Dashboard = () => {
                       <CTableHeaderCell className="bg-body-tertiary text-center">
                         <CIcon icon={cilPeople} />
                       </CTableHeaderCell>
-                      <CTableHeaderCell className="bg-body-tertiary">Title</CTableHeaderCell>
+                      <CTableHeaderCell className="bg-body-tertiary" >Title</CTableHeaderCell>
                       <CTableHeaderCell className="bg-body-tertiary">Organizer</CTableHeaderCell>
                       <CTableHeaderCell className="bg-body-tertiary">
                         Start Date, Time

src/views/pages/register/Register.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   CButton,
   CCard,
@@ -12,11 +12,62 @@ import {
   CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import Cookies from 'js-cookie'
 import { cilLockLocked, cilUser } from '@coreui/icons'
+import { ToastContainer, toast } from 'react-toastify'
+import { signup } from '../../../api'
+import { useNavigate } from 'react-router-dom'
 
 const Register = () => {
+  const navigate = useNavigate()
+  const [formData, setFormData] = useState({
+    name: ``,
+    email: ``,
+    password: ``,
+    passwordConfirm: ``,
+  })
+
+  const handleChange = (e) => {
+    const { name, value } = e.target
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }))
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    try {
+      const formDatas = {
+        name: formData.name,
+        email: formData.email,
+        password: formData.password,
+        passwordConfirm: formData.passwordConfirm,
+      }
+      console.log(`formdata:`, formDatas)
+      const response = await signup(formDatas)
+      console.log(`User signed up successfully:`, response)
+
+      toast(`User signed up successfully`)
+      if (response.success) {
+        const token = response.result.token
+        Cookies.set(`authorizationAdmin`, token, { expires: 7 })
+        navigate(`/`)
+      }
+    } catch (error) {
+      if (error.response && error.response.status === 400) {
+        const errorMessage = error.response.data.error.error.details[0].message
+        toast(errorMessage)
+      } else {
+        toast(`User already exist`)
+        console.error(`Failed to sign up user:`, error)
+      }
+    }
+  }
+
   return (
     <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+      <ToastContainer />
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md={9} lg={7} xl={6}>
@@ -29,11 +80,23 @@ const Register = () => {
                     <CInputGroupText>
                       <CIcon icon={cilUser} />
                     </CInputGroupText>
-                    <CFormInput placeholder="Username" autoComplete="username" />
+                    <CFormInput
+                      placeholder="Name"
+                      autoComplete="name"
+                      value={formData.name}
+                      onChange={handleChange}
+                      name="name"
+                    />
                   </CInputGroup>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>@</CInputGroupText>
-                    <CFormInput placeholder="Email" autoComplete="email" />
+                    <CFormInput
+                      placeholder="Email"
+                      autoComplete="email"
+                      value={formData.email}
+                      onChange={handleChange}
+                      name="email"
+                    />
                   </CInputGroup>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>
@@ -43,6 +106,9 @@ const Register = () => {
                       type="password"
                       placeholder="Password"
                       autoComplete="new-password"
+                      value={formData.password}
+                      onChange={handleChange}
+                      name="password"
                     />
                   </CInputGroup>
                   <CInputGroup className="mb-4">
@@ -53,10 +119,15 @@ const Register = () => {
                       type="password"
                       placeholder="Repeat password"
                       autoComplete="new-password"
+                      value={formData.passwordConfirm}
+                      onChange={handleChange}
+                      name="passwordConfirm"
                     />
                   </CInputGroup>
                   <div className="d-grid">
-                    <CButton color="success">Create Account</CButton>
+                    <CButton color="success" onClick={handleSubmit}>
+                      Create Account
+                    </CButton>
                   </div>
                 </CForm>
               </CCardBody>

src/views/widgets/WidgetsDropdown.js

@@ -143,10 +143,11 @@ const WidgetsDropdown = (props) => {
           color="primary"
           value={
             <>
-              {users?.length}
-              {/* <span className="fs-6 fw-normal">
-                (-12.4% <CIcon icon={cilArrowBottom} />)
-              </span> */}
+              {users?.length}{" "}
+              <span className="fs-6 fw-normal">
+                {/* (-12.4% <CIcon icon={cilArrowBottom} />) */}
+                (2024)
+              </span>
             </>
           }
           title="Total Users"
@@ -235,9 +236,10 @@ const WidgetsDropdown = (props) => {
           value={
             <>
               {events.length}{" "}
-              {/* <span className="fs-6 fw-normal">
-                ({percentageIncrease.toFixed(1)}% <CIcon icon={arrowIcon} />)
-              </span> */}
+              <span className="fs-6 fw-normal">
+                {/* ({percentageIncrease.toFixed(1)}% <CIcon icon={arrowIcon} />) */}
+                (2024)
+              </span>
             </>
           }
           title="Total Events"