<?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>
<button class="whitespace-nowrap text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-background hover:bg-accent hover:text-accent-foreground h-10 w-full p-6 rounded-xl border border-gray-200 font-medium mb-4 flex items-center justify-center gap-2" type="button"><svg class="w-5 h-5" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path></svg>Sign up with Google</button>
<button class="whitespace-nowrap text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-background hover:bg-accent hover:text-accent-foreground h-10 w-full p-6 rounded-xl border border-gray-200 font-medium flex items-center justify-center gap-2" type="button"><svg class="w-5 h-5" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"></path></svg>Sign up with Apple</button>
<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>
