frontend

import React, { useState } from 'react';
import Header from './Header';
import Footer from './Footer';
import './Register.css';

function Register() {
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [role, setRole] = useState('');
const [projectType, setProjectType] = useState('');
const [error, setError] = useState({});
const [successMessage, setSuccessMessage] = useState('');

const validateForm = () => {
let formIsValid = true;
let errors = {};

if (!username.trim()) {
  formIsValid = false;
  errors["username"] = "Username is required";
}

if (!email.trim()) {
  formIsValid = false;
  errors["email"] = "Email is required";
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
  formIsValid = false;
  errors["email"] = "Invalid email format";
}

if (!password.trim()) {
  formIsValid = false;
  errors["password"] = "Password is required";
} else if (password.length < 6) {
  formIsValid = false;
  errors["password"] = "Password must be at least 6 characters long";
}

if (!role) {
  formIsValid = false;
  errors["role"] = "Role is required";
}

if (!projectType.trim()) {
  formIsValid = false;
  errors["projectType"] = "Project Type is required";
}

setError(errors);
return formIsValid;

};

const handleRegister = async (e) => {
e.preventDefault();
if (validateForm()) {
try {
// Dummy API call simulation
const response = await new Promise((resolve) => {
setTimeout(() => {
resolve({
success: true,
message: 'User registered successfully!',
});
}, 1000); // Simulate network delay
});

    if (response.success) {
      setSuccessMessage(response.message);
      console.log('User details sent to backend:', { username, email, password, role, projectType });
      setError({});
      // Clear form fields after successful registration
      setUsername('');
      setEmail('');
      setPassword('');
      setRole('');
      setProjectType('');
    } else {
      setError({ general: 'Registration failed. Please try again.' });
    }
  } catch (err) {
    setError({ general: 'Something went wrong. Please try again later.' });
  }
}

};

return (
<div className="register-container">
<h2>Register</h2>
{successMessage && <p className="success">{successMessage}</p>}
{error.general && <p className="error">{error.general}</p>}
<form onSubmit={handleRegister}>
<div>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
{error.username && <p className="error">{error.username}</p>}
</div>
<div>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{error.email && <p className="error">{error.email}</p>}
</div>
<div>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
{error.password && <p className="error">{error.password}</p>}
</div>
<div>
<select
value={role}
onChange={(e) => setRole(e.target.value)}
>
<option value="">Select Role</option>
<option value="employee">Employee</option>
<option value="manager">Manager</option>
</select>
{error.role && <p className="error">{error.role}</p>}
</div>
<div>
<input
type="text"
placeholder="Project Type"
value={projectType}
onChange={(e) => setProjectType(e.target.value)}
/>
{error.projectType && <p className="error">{error.projectType}</p>}
</div>
<button type="submit">Register</button>
</form>
</div>
);
}

export default Register;