Merge pull request #20 from Celesca/owen

pull register from latest was Hongyok
Celesca · Nov 23, 2024 · 6cf4e92 · 6cf4e92
2 parents 5c01181 + ac0345e
commit 6cf4e92
Show file tree

Hide file tree

Showing 44 changed files with 4,761 additions and 6 deletions.
diff --git a/.env b/.env
@@ -1,5 +1,5 @@
 PORT = 3000 
-DATABASE_URL="mysql://root:@localhost:3306/hack_db"
+DATABASE_URL="mysql://root:@localhost:3307/hack_db"
 
 # --- For Docker-compose 
 # DATABASE_URL="mysql://root:root@localhost:3306/hack_db"
diff --git a/.gitignore b/.gitignore
@@ -41,4 +41,10 @@ yarn-error.log*
 package-lock.json
 **/*.bun
 
-server.exe
+server.exe
+
+# Frontend folder
+frontend/node_modules
+frontend
+
+bun.lockb
diff --git a/bun.lockb b/bun.lockb
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -0,0 +1,22 @@
+{
+    "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended"
+    ],
+    "plugins": ["react", "react-hooks"],
+    "parserOptions": {
+      "ecmaVersion": 2020,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true
+      }
+    },
+    "env": {
+      "browser": true,
+      "es2020": true
+    },
+    "rules": {
+      "react/react-in-jsx-scope": "off"
+    }
+  }
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.20",
+    "axios": "^1.7.7",
+    "framer-motion": "^11.11.17",
+    "lucide-react": "^0.460.0",
+    "postcss-cli": "^11.0.0",
+    "react": "^18.3.1",
+    "react-daisyui": "^5.0.5",
+    "react-dom": "^18.3.1",
+    "react-draggable": "^4.4.6",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.26.2",
+    "react-type-animation": "^3.2.0",
+    "sweetalert2": "^11.14.5",
+    "tailwindcss": "^3.4.13"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "daisyui": "^4.12.14",
+    "eslint": "^9.11.1",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "vite": "^5.4.11",
+    "vite-plugin-eslint": "^1.8.1"
+  }
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,9 @@
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+export default {
+    plugins: [
+        tailwindcss,
+        autoprefixer,
+    ],
+};
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -0,0 +1,41 @@
+import './App.css';
+import homebg from './assets/homebg.jpg';
+import { TypeAnimation } from 'react-type-animation';
+import { Link } from 'react-router-dom';
+
+function App() {
+
+  return (
+    <>
+      <div
+        className="min-h-screen bg-cover bg-center"
+        style={{ backgroundImage: `url(${homebg})` }}
+      >
+        <main className="flex flex-col justify-center items-center h-screen bg-blue-200 bg-opacity-75">
+          <TypeAnimation
+            sequence={[
+              'Hack2gather', 
+              3000, 
+              'Finding connections',
+              3000,
+              'Finding friends',
+              3000,
+              'explring hackathons'
+            ]}
+            wrapper="h1"
+            cursor={true}
+            repeat={Infinity}
+            className="text-5xl font-bold text-blue-900"
+          />
+           <Link to="/register">
+        <button className="bg-yellow-200 text-blue-900 font-bold py-2 px-8 mt-6 rounded shadow-md">
+            Join Us
+        </button>
+      </Link>
+        </main>
+      </div>
+    </>
+  );
+}
+
+export default App;
diff --git a/frontend/src/LoginForm.jsx b/frontend/src/LoginForm.jsx
@@ -0,0 +1,107 @@
+import { FaUser, FaLock } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
+import imagelogin from './assets/imagelogin.png';
+import Axios from 'axios';
+import { useState } from 'react';
+import Swal from 'sweetalert2';
+
+const LoginForm = () => {
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await Axios.post('http://localhost:3000/user/login', formData);
+
+      console.log(response.data);
+
+
+      Swal.fire({
+        title: "Good job!",
+        text: "Login Sucessful!",
+        icon: "success"
+      });
+      setTimeout(() => {
+        Swal.close();
+      }, 3000);
+
+      await new Promise(resolve => setTimeout(resolve, 750));
+
+      // Save token to localStorage and redirect
+      // localStorage.setItem('authToken', response.data.token);
+      localStorage.setItem('UserID', JSON.stringify(response.data.UserID));
+      window.location.href = '/profile';
+    } catch (error) {
+      Swal.fire({
+        title: 'Error!',
+        text: error.response?.data.message || 'Login failed!',
+        icon: 'error',
+      });
+    }
+  };
+
+  return (
+    <div
+      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">
+        <form onSubmit={handleLogin}>
+          <h1 className="text-3xl font-bold mb-6 text-center text-white">Login</h1>
+          <div className="relative mb-4">
+            <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"
+            />
+            <FaUser className="absolute right-4 top-3 text-white" />
+          </div>
+          <div className="relative mb-4">
+            <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"
+            />
+            <FaLock className="absolute right-4 top-3 text-white" />
+          </div>
+          <div className="flex justify-between items-center mb-4 text-white">
+            <label className="flex items-center">
+              <input type="checkbox" className="mr-2" />
+              Remember me
+            </label>
+            <a href="#" className="text-black hover:underline ml-4">
+              Forgot password?
+            </a>
+          </div>
+          <button className="w-full bg-white text-black font-bold py-2 rounded-full hover:bg-gray-200 transition">
+            Login
+          </button>
+          <div className="text-center mt-4">
+            <p className="text-white">
+              Don&apos;t have an account?{' '}
+              <Link to="/Register" className="text-black hover:underline">
+                Register
+              </Link>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginForm;
diff --git a/frontend/src/Register.css b/frontend/src/Register.css