redo of entire app

app/(auth)/login/page.js

@@ -0,0 +1,53 @@
+'use client'; // Mark as a Client Component
+import { useState } from 'react';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+
+export default function Login() {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const router = useRouter();
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        const result = await signIn('credentials', {
+            redirect: false,
+            username,
+            password,
+        });
+
+        if (result.error) {
+            setError(result.error);
+        } else {
+            router.push('/team-selection'); // Redirect to the team selection page after login
+        }
+    };
+
+    return (
+        <div>
+            <h1>Login</h1>
+            <form onSubmit={handleLogin}>
+                <input
+                    type="text"
+                    placeholder="Username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required
+                />
+                <input
+                    type="password"
+                    placeholder="Password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+                <button type="submit">Log In</button>
+            </form>
+            {error && <p className="error">{error}</p>}
+            <p>
+                Don't have an account? <a href="/register">Register</a>
+            </p>
+        </div>
+    );
+}

app/(auth)/register/page.js

@@ -0,0 +1,54 @@
+'use client'; // Mark as a Client Component
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { query } from '../../../lib/db';
+import bcrypt from 'bcryptjs';
+
+export default function Register() {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const router = useRouter();
+
+    const handleRegister = async (e) => {
+        e.preventDefault();
+        const hashedPassword = bcrypt.hashSync(password, 10);
+
+        try {
+            await query(
+                'INSERT INTO users (username, password, role) VALUES (?, ?, ?)',
+                [username, hashedPassword, 'user']
+            );
+            router.push('/login'); // Redirect to the login page after registration
+        } catch (err) {
+            setError('Registration failed. Username may already exist.');
+        }
+    };
+
+    return (
+        <div>
+            <h1>Register</h1>
+            <form onSubmit={handleRegister}>
+                <input
+                    type="text"
+                    placeholder="Username"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    required
+                />
+                <input
+                    type="password"
+                    placeholder="Password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+                <button type="submit">Register</button>
+            </form>
+            {error && <p className="error">{error}</p>}
+            <p>
+                Already have an account? <a href="/login">Login</a>
+            </p>
+        </div>
+    );
+}