Update LoginForm + RegisterForm

CristianF09 · Oct 29, 2024 · e44e5d2 · e44e5d2
1 parent 7fb24e3
commit e44e5d2
Show file tree

Hide file tree

Showing 29 changed files with 17,237 additions and 10,780 deletions.
diff --git a/assets/deploy-status.png b/assets/deploy-status.png
diff --git a/assets/gh-actions-perm-1.png b/assets/gh-actions-perm-1.png
diff --git a/assets/gh-actions-perm-2.png b/assets/gh-actions-perm-2.png
diff --git a/assets/how-it-works.png b/assets/how-it-works.png
diff --git a/assets/repo-settings.png b/assets/repo-settings.png
diff --git a/assets/template-step-1.png b/assets/template-step-1.png
diff --git a/assets/template-step-2.png b/assets/template-step-2.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,21 +1,26 @@
 {
-  "name": "react-homework-template",
+  "name": "team1_MoneyGuard",
   "version": "0.1.0",
   "private": true,
   "homepage": "https://cristianf09.github.io/team1_MoneyGuard",
   "dependencies": {
+    "@chakra-ui/react": "^3.0.1",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@reduxjs/toolkit": "^2.3.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
     "formik": "^2.4.6",
+    "framer-motion": "^11.11.10",
     "react": "^18.1.0",
     "react-datepicker": "^7.5.0",
     "react-dom": "^18.1.0",
     "react-icons": "^5.3.0",
     "react-loader-spinner": "^6.1.6",
     "react-modal": "^3.16.1",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",

diff --git a/public/assets/icon.png b/public/assets/icon.png
diff --git a/public/assets/loginBackground.png b/public/assets/loginBackground.png
diff --git a/public/assets/registerBackground.png b/public/assets/registerBackground.png
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/Pages/LoginPage/LoginPage.jsx → src/Pages/Home/Home.jsx b/src/Pages/LoginPage/LoginPage.jsx → src/Pages/Home/Home.jsx
diff --git a/src/Pages/RegistrationPage/RegistrationPage.jsx b/src/Pages/RegistrationPage/RegistrationPage.jsx
diff --git a/src/Pages/RegistrationPage/RegistrationPage.module.css b/src/Pages/RegistrationPage/RegistrationPage.module.css
diff --git a/src/Pages/LoginPage/LoginPage.module.css → src/Pages/Statistics/Statistics.jsx b/src/Pages/LoginPage/LoginPage.module.css → src/Pages/Statistics/Statistics.jsx
diff --git a/src/components/App.jsx b/src/components/App.jsx
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from '../../Pages/Home/Home';
+import Dashboard from '../../Pages/DashboardPage/Dashboard';
+import Statistics from '../../Pages/Statistics/Statistics';
+import PrivateRoutes from '../../routes/PrivateRoutes'; 
+import PublicRoutes from '../../routes/PublicRoutes'; 
+
+const App = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route element={<PublicRoutes />}>
+          <Route path="/" element={<Home />} />
+        </Route>
+        <Route element={<PrivateRoutes />}>
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/statistics" element={<Statistics />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+};
+
+export default App;
diff --git a/src/components/App/App.module.css b/src/components/App/App.module.css
@@ -0,0 +1,8 @@
+.container {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 40px;
+  color: #010101;
+}
diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import styles from './LoginFormModal.module.css';
+import icon from '../../assets/icon.png'; 
+
+const LoginFormModal = ({ onClose }) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [loginData, setLoginData] = useState({
+    email: '',
+    password: '',
+  });
+
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible((prev) => !prev);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setLoginData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Login Data:', loginData);
+
+  };
+
+  return (
+    <div className={styles.modalOverlay} onClick={onClose}>
+      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+        <img src={icon} alt="Money Guard Icon" className={styles.icon} />
+        <h1 className={styles.title}>Money Guard</h1>
+
+        <form className={styles.form} onSubmit={handleSubmit}>
+          <div className={styles.inputField}>
+            <i className="fas fa-envelope"></i>
+            <input
+              type="email"
+              name="email"
+              placeholder="E-mail"
+              value={loginData.email}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className={styles.inputField}>
+            <i className="fas fa-lock"></i>
+            <input
+              type={isPasswordVisible ? 'text' : 'password'}
+              name="password"
+              placeholder="Password"
+              value={loginData.password}
+              onChange={handleChange}
+              required
+            />
+            <i
+              className={`fas ${isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}
+              onClick={togglePasswordVisibility}
+              style={{ cursor: 'pointer', marginLeft: '8px' }}
+            ></i>
+          </div>
+          <button type="submit" className={styles.btn}>Log In</button>
+          <button type="button" className={styles.btn} onClick={() => console.log("Register clicked")}>Register</button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginFormModal;
diff --git a/src/components/LoginForm/LoginForm.module.css b/src/components/LoginForm/LoginForm.module.css
@@ -0,0 +1,77 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modalContent {
+  background: rgba(255, 255, 255, 0.9);
+  padding: 20px;
+  border-radius: 8px;
+  width: 300px;
+  max-width: 90%;
+  text-align: center;
+  position: relative;
+  background-image: url('./assets/loginBackground.png');
+  background-size: cover;
+  background-position: center;
+}
+
+.icon {
+  width: 50px;
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 24px;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.inputField {
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.inputField i {
+  margin-right: 8px;
+  color: #666;
+}
+
+.inputField input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.btn {
+  padding: 10px 15px;
+  border: none;
+  color: #fff;
+  background-color: #4caf50;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.btn:hover {
+  background-color: #45a049;
+}
diff --git a/src/components/RegistrationForm/RegistrationForm.jsx b/src/components/RegistrationForm/RegistrationForm.jsx
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import styles from './RegisterFormModal.module.css';
+import icon from '../../assets/icon.png';
+const RegisterFormModal = ({ onClose }) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [registerData, setRegisterData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+  });
+
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible((prev) => !prev);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setRegisterData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Register Data:', registerData);
+
+  };
+
+  return (
+    <div className={styles.modalOverlay} onClick={onClose}>
+      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+        <img src={icon} alt="Money Guard Icon" className={styles.icon} />
+        <h1 className={styles.title}>Money Guard</h1>
+
+        <form className={styles.form} onSubmit={handleSubmit}>
+          <div className={styles.inputField}>
+            <i className="fas fa-user"></i>
+            <input
+              type="text"
+              name="name"
+              placeholder="Name"
+              value={registerData.name}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className={styles.inputField}>
+            <i className="fas fa-envelope"></i>
+            <input
+              type="email"
+              name="email"
+              placeholder="E-mail"
+              value={registerData.email}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <div className={styles.inputField}>
+            <i className="fas fa-lock"></i>
+            <input
+              type={isPasswordVisible ? 'text' : 'password'}
+              name="password"
+              placeholder="Password"
+              value={registerData.password}
+              onChange={handleChange}
+              required
+            />
+            <i
+              className={`fas ${isPasswordVisible ? 'fa-eye-slash' : 'fa-eye'}`}
+              onClick={togglePasswordVisibility}
+              style={{ cursor: 'pointer', marginLeft: '8px' }}
+            ></i>
+          </div>
+          <div className={styles.inputField}>
+            <i className="fas fa-lock"></i>
+            <input
+              type={isPasswordVisible ? 'text' : 'password'}
+              name="confirmPassword"
+              placeholder="Confirm Password"
+              value={registerData.confirmPassword}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          <button type="submit" className={styles.btn}>Register</button>
+          <button type="button" className={styles.btnAlt} onClick={() => console.log("Log In clicked")}>Log In</button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default RegisterFormModal;