Merge pull request #27 from Celesca/owen

Profile & navbar
Celesca · Nov 25, 2024 · 24b9cf9 · 24b9cf9
2 parents efdd6d9 + 88c40bf
commit 24b9cf9
Show file tree

Hide file tree

Showing 11 changed files with 631 additions and 562 deletions.
diff --git a/.env b/.env
@@ -2,4 +2,4 @@ PORT = 3000
 DATABASE_URL="mysql://root:@localhost:3306/hack_db"
 
 # --- For Docker-compose 
-# DATABASE_URL="mysql://root:root@localhost:3306/hack_db"
+# DATABASE_URL="mysql://root:root@localhost:3307/hack_db"
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Hack2gather</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
   </head>
   <body>

diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
     "framer-motion": "^11.11.17",
     "lucide-react": "^0.460.0",
     "postcss-cli": "^11.0.0",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-daisyui": "^5.0.5",
     "react-dom": "^18.3.1",

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -20,7 +20,7 @@ function App() {
               3000,
               'Finding friends',
               3000,
-              'explring hackathons'
+              'exploring hackathons'
             ]}
             wrapper="h1"
             cursor={true}

diff --git a/frontend/src/LoginForm.jsx b/frontend/src/LoginForm.jsx
@@ -22,6 +22,11 @@ const LoginForm = () => {
       console.log(response.data);
 
 
+      const userID = response.data.UserID || response.data.user?.UserID;
+      if (!userID) throw new Error('UserID is missing in the response');
+
+
+
       Swal.fire({
         title: "Good job!",
         text: "Login Sucessful!",
@@ -35,7 +40,7 @@ const LoginForm = () => {
 
       // Save token to localStorage and redirect
       // localStorage.setItem('authToken', response.data.token);
-      localStorage.setItem('UserID', JSON.stringify(response.data.UserID));
+      localStorage.setItem('UserID', userID);
       window.location.href = '/profile';
     } catch (error) {
       Swal.fire({
@@ -51,34 +56,34 @@ const LoginForm = () => {
       className="flex items-center justify-center h-screen bg-cover bg-center"
       style={{ backgroundImage: `url(${imagelogin})` }}
     >
-      <div className="bg-gradient-to-b from-bluebg to-skybg shadow-md rounded-lg p-12 w-90">
+      <div className="bg-gradient-to-b from-bluebg to-skybg shadow-lg rounded-lg p-12 w-90 transform transition-transform hover:scale-105">
         <form onSubmit={handleLogin}>
-          <h1 className="text-3xl font-bold mb-6 text-center text-white">Login</h1>
-          <div className="relative mb-4">
+          <h1 className="text-4xl font-bold mb-8 text-center text-white">Login</h1>
+          <div className="relative mb-6">
             <input
               type="email"
               name="email"
               placeholder="Email"
               value={formData.email}
               onChange={handleInputChange}
               required
-              className="border border-gray-300 rounded-full w-full py-2 px-3 bg-white bg-opacity-0 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-white"
+              className="border border-gray-300 rounded-full w-full py-3 px-4 bg-white bg-opacity-0 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-white transition-transform hover:scale-105"
             />
             <FaUser className="absolute right-4 top-3 text-white" />
           </div>
-          <div className="relative mb-4">
+          <div className="relative mb-6">
             <input
               type="password"
               name="password"
               placeholder="Password"
               value={formData.password}
               onChange={handleInputChange}
               required
-              className="border border-gray-300 rounded-full w-full py-2 px-3 bg-white bg-opacity-0 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-white"
+              className="border border-gray-300 rounded-full w-full py-3 px-4 bg-white bg-opacity-0 focus:outline-none focus:ring-2 focus:ring-blue-500 text-white placeholder-white transition-transform hover:scale-105"
             />
             <FaLock className="absolute right-4 top-3 text-white" />
           </div>
-          <div className="flex justify-between items-center mb-4 text-white">
+          <div className="flex justify-between items-center mb-6 text-white">
             <label className="flex items-center">
               <input type="checkbox" className="mr-2" />
               Remember me
@@ -87,10 +92,10 @@ const LoginForm = () => {
               Forgot password?
             </a>
           </div>
-          <button className="w-full bg-white text-black font-bold py-2 rounded-full hover:bg-gray-200 transition">
+          <button className="w-full bg-white text-black font-bold py-3 rounded-full hover:bg-gray-200 transition-transform hover:scale-105">
             Login
           </button>
-          <div className="text-center mt-4">
+          <div className="text-center mt-6">
             <p className="text-white">
               Don&apos;t have an account?{' '}
               <Link to="/Register" className="text-black hover:underline">

diff --git a/frontend/src/Register.jsx b/frontend/src/Register.jsx
@@ -2,6 +2,8 @@ import Swal from 'sweetalert2'
 import Axios from 'axios'
 import {useState} from 'react'
 import imagelogin from './assets/imagelogin.png';
+import { Link } from 'react-router-dom';
+
 const Register = () => {
   const  [formData, setFormData] = useState( { 
     userName:'',
@@ -15,9 +17,20 @@ const Register = () => {
   const [message, setMessage] = useState('');
 
   const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
+    const { name, value, files } = e.target;
+    if (name === 'ProfileImage' && files.length > 0) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFormData({ ...formData, ProfileImage: reader.result }); // Store base64 string
+      };
+      reader.readAsDataURL(files[0]);
+    } else {
+      setFormData({ ...formData, [name]: value });
+    }
   };
+
+
+
 
 
   const handleSubmit = async (e) => {
@@ -89,11 +102,11 @@ const Register = () => {
       className="flex items-center justify-center min-h-screen bg-cover bg-center"
       style={{ backgroundImage: `url(${imagelogin})` }}
     >
-      <div className="mt-20 w-full max-w-2xl bg-gradient-to-b from-bluebg to-skybg text-white rounded-lg p-5 shadow-lg">
+      <div className="mt-20 w-full max-w-2xl bg-gradient-to-b from-bluebg to-skybg text-white rounded-lg p-8 shadow-2xl transform transition duration-500 hover:scale-105">
         <form onSubmit={handleSubmit}>
-          <h1 className="text-4xl font-bold text-center mb-6">Register</h1>
+          <h1 className="text-4xl font-bold text-center mb-8">Register</h1>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {/* Input fields */}
             <input
               name="userName"
@@ -102,7 +115,7 @@ const Register = () => {
               value={formData.userName}
               onChange={handleInputChange}
               required
-              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white"
+              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-black placeholder-white focus:outline-none focus:border-white transition duration-300 hover:bg-white hover:text-black"
             />
             <input
               name="email"
@@ -111,62 +124,63 @@ const Register = () => {
               value={formData.email}
               onChange={handleInputChange}
               required
-              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white"
+              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white transition duration-300 hover:bg-white hover:text-black"
             />
 
             <textarea
               name="bio"
               placeholder="Short Description"
               value={formData.bio}
               onChange={handleInputChange}
-              className="w-full h-32 px-4 py-2 bg-transparent border border-white rounded-lg text-white placeholder-white focus:outline-none focus:border-white resize-none"
+              className="w-full h-32 px-4 py-2 bg-transparent border border-white rounded-lg text-white placeholder-white focus:outline-none focus:border-white resize-none transition duration-300 hover:bg-white hover:text-black"
             />
 
-
-          <input
+            <input
               name="password"
               type="password"
               placeholder="Password"
               value={formData.password}
               onChange={handleInputChange}
               required
-              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white"
+              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white transition duration-300 hover:bg-white hover:text-black"
             />
 
-
             <input
               name="ProfileImage"
-              type="file"  // Changed to file input
+              type="file"
               onChange={handleInputChange}
+              accept="image/*"
               required
-              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white"
+              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white transition duration-300 hover:bg-white hover:text-black"
             />
 
-<input
+            <input
               name="workingStyle"
               type="text"
               placeholder="Working Style"
               value={formData.workingStyle}
               onChange={handleInputChange}
-              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white"
+              className="w-full h-12 px-4 py-2 bg-transparent border border-white rounded-full text-white placeholder-white focus:outline-none focus:border-white transition duration-300 hover:bg-white hover:text-black"
             />
-
-
-
-
           </div>
 
           {/* Submit button */}
           <button
             type="submit"
-            className="mt-10 w-full h-12 bg-white text-black font-bold rounded-full shadow-md hover:bg-gray-200 transition duration-300"
+            className="mt-10 w-full h-12 bg-white text-black font-bold rounded-full shadow-md hover:bg-gray-200 transition duration-300 transform hover:scale-105"
           >
             Register
           </button>
-          {message && <p className="text-center mt-4">{message}</p>}
-
-
 
+          <div className="text-center mt-6">
+            <p className="text-white">
+              Already have an account?{' '}
+              <Link to="/login" className="text-black hover:underline">
+                Login
+              </Link>
+            </p>
+          </div>
+          {message && <p className="text-center mt-4">{message}</p>}
         </form>
       </div>
     </div>