mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
fixed a bit
This commit is contained in:
bobbert committed
1 parent
e9d831c0a2
commit
9326f2845e
8 files changed
+990
-584
No files matched your search
+165
-97
@@ -1,107 +1,175 @@
|
||||
'use client'; // Mark as a Client Component
|
||||
import { useState } from 'react';
|
||||
import { signIn } from 'next-auth/react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
"use client"; // Mark as a Client Component
|
||||
import { useState } from "react";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Login() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const result = await signIn('credentials', {
|
||||
redirect: false,
|
||||
username,
|
||||
password,
|
||||
});
|
||||
try {
|
||||
const result = await signIn("credentials", {
|
||||
redirect: false,
|
||||
username,
|
||||
password,
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
setError('Invalid username or password');
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
// Fetch the user role to redirect appropriately
|
||||
const response = await fetch('/api/user');
|
||||
const userData = await response.json();
|
||||
if (result?.error) {
|
||||
setError("Invalid username or password");
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
// Fetch the user role to redirect appropriately
|
||||
const response = await fetch("/api/user");
|
||||
const userData = await response.json();
|
||||
|
||||
if (userData.role === 'admin') {
|
||||
router.push('/admin');
|
||||
} else {
|
||||
router.push('/team-selection');
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
setError('An unexpected error occurred');
|
||||
console.error(err);
|
||||
setIsLoading(false);
|
||||
if (userData.role === "admin") {
|
||||
router.push("/admin");
|
||||
} else {
|
||||
router.push("/team-selection");
|
||||
}
|
||||
};
|
||||
}
|
||||
} catch (err) {
|
||||
setError("An unexpected error occurred");
|
||||
console.error(err);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="page-header">
|
||||
<div className="back-button">←</div>
|
||||
<div className="page-title">Login</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="page-header">
|
||||
<div className="back-button">←</div>
|
||||
<div className="page-title">Login</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="auth-button"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? 'Logging in...' : 'Log In'}
|
||||
</button>
|
||||
<div className="auth-link">
|
||||
Don't have an account? <Link href="/register">Register</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nav-bar">
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">🏠</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">📊</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">🏆</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">👤</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="auth-button"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? "Logging in..." : "Log In"}
|
||||
</button>
|
||||
<Link href="/register">
|
||||
<button className="auth-button">Register</button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="nav-bar">
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">🏠</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">📊</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">🏆</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">👤</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.auth-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.auth-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.input-container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.auth-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.auth-button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
background-color: #68543c; /* Updated brown color */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.nav-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+170
-88
@@ -1,99 +1,181 @@
|
||||
'use client'; // Mark as a Client Component
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { registerUser } from '../../actions/auth';
|
||||
import Link from 'next/link';
|
||||
"use client"; // Mark as a Client Component
|
||||
import { useState } from "react";
|
||||
import { signIn } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Register() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
const handleRegister = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError("");
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('username', username);
|
||||
formData.append('password', password);
|
||||
try {
|
||||
const response = await fetch("/api/register", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
|
||||
const result = await registerUser(formData);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
router.push('/login');
|
||||
} else {
|
||||
setError(result.error || 'Registration failed');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('An unexpected error occurred');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
// Automatically log in the user after successful registration
|
||||
const signInResult = await signIn("credentials", {
|
||||
redirect: false,
|
||||
username,
|
||||
password,
|
||||
});
|
||||
|
||||
if (signInResult?.error) {
|
||||
setError("Registration successful, but failed to log in");
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
router.push("/team-selection");
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
setError("An unexpected error occurred");
|
||||
console.error(err);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="page-header">
|
||||
<Link href="/login" className="back-button">←</Link>
|
||||
<div className="page-title">Register</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<div className="page-header">
|
||||
<div className="back-button">←</div>
|
||||
<div className="page-title">Register</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="auth-button"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? 'Registering...' : 'Register'}
|
||||
</button>
|
||||
<div className="auth-link">
|
||||
Already have an account? <Link href="/login">Login</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="nav-bar">
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">🏠</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">📊</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">🏆</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">👤</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="auth-input"
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
<button
|
||||
onClick={handleRegister}
|
||||
className="auth-button"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? "Registering..." : "Register"}
|
||||
</button>
|
||||
<Link href="/login">
|
||||
<button className="auth-button">Log In</button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="nav-bar">
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">🏠</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">📊</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">🏆</div>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<div className="nav-icon">👤</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.auth-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.auth-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.auth-card {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.input-container {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.auth-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.auth-button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
background-color: #68543c; /* Updated brown color */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.nav-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user