<?php
require_once 'includes/auth.php';
$error = '';
$success = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$email = $_POST['email'] ?? '';
$password = $_POST['password'] ?? '';
if (empty($email) || empty($password)) {
$error = 'All fields are required';
} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$error = 'Invalid email format';
} elseif (strlen($password) < 8) {
$error = 'Password must be at least 8 characters';
} else {
if (registerUser($email, $password)) {
$success = 'Registration successful! Please check your email to verify your account.';
} else {
$error = 'Email already exists';
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up - Leafboard</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-white flex items-center justify-center p-4">
<div class="w-full max-w-md">
<div class="flex items-center gap-2 mb-1">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
<path d="M12 2L2 7L12 12L22 7L12 2Z" fill="#4ADE80" fillOpacity="0.5"/>
<path d="M12 12L2 7L12 2L22 7L12 12Z" fill="#4ADE80"/>
</svg>
<h1 class="text-xl font-semibold">Leafboard</h1>
</div>
<p class="text-sm text-gray-600 mb-8">Work without limits</p>
<?php if ($error): ?>
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
<?php echo htmlspecialchars($error); ?>
</div>
<?php endif; ?>
<?php if ($success): ?>
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
<?php echo htmlspecialchars($success); ?>
</div>
<?php endif; ?>
<form method="POST" class="space-y-4">
<div>
<label class="block text-sm mb-2">Your email address</label>
<input
type="email"
name="email"
required
class="w-full p-4 rounded-xl border border-gray-200"
placeholder="[email protected]"
>
</div>
<div>
<label class="block text-sm mb-2">Choose a password</label>
<div class="relative">
<input
type="password"
name="password"
required
class="w-full p-4 rounded-xl border border-gray-200"
placeholder="min. 8 characters"
>
</div>
</div>
<button
type="submit"
class="w-full p-6 rounded-xl font-medium bg-[#4ADE80] hover:bg-[#22C55E] text-black"
>
Continue
</button>
<div class="relative my-8">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-200"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-gray-500">or</span>
</div>
</div>
<a href="login.php" class="block text-center text-sm text-gray-600">
Already have an account? <span class="text-[#4ADE80]">Log in</span>
</a>
</form>
</div>
</body>
</html>