<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP - Register</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.register-container {
max-width: 500px;
margin: 50px auto;
padding: 30px;
background: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.register-header {
text-align: center;
margin-bottom: 30px;
}
.register-header h1 {
color: #2c3e50;
font-size: 24px;
margin-bottom: 10px;
}
.form-control {
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
}
.form-control:focus {
border-color: #3498db;
box-shadow: 0 0 0 0.2rem rgba(52,152,219,0.25);
}
.btn-register {
background-color: #3498db;
border: none;
padding: 12px;
width: 100%;
border-radius: 5px;
color: white;
font-weight: 600;
margin-top: 20px;
}
.btn-register:hover {
background-color: #2980b9;
}
.login-link {
text-align: center;
margin-top: 20px;
}
.login-link a {
color: #3498db;
text-decoration: none;
}
.login-link a:hover {
text-decoration: underline;
}
.alert {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="register-container">
<div class="register-header">
<h1>Create Account</h1>
<p class="text-muted">Join MCP to manage your vulnerabilities</p>
</div>
{% if error %}
<div class="alert alert-danger">
<i class="fas fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
<form method="POST" action="/register">
<div class="mb-3">
<label for="name" class="form-label">Full Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone">
</div>
<div class="mb-3">
<label for="company" class="form-label">Company</label>
<input type="text" class="form-control" id="company" name="company">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
<div class="form-text">Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one special character.</div>
</div>
<div class="mb-3">
<label for="confirm_password" class="form-label">Confirm Password</label>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="newsletter" name="newsletter">
<label class="form-check-label" for="newsletter">Subscribe to newsletter</label>
</div>
<button type="submit" class="btn btn-register">
<i class="fas fa-user-plus"></i> Create Account
</button>
</form>
<div class="login-link">
Already have an account? <a href="/login">Login here</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>