| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html xmlns:th="http://www.thymeleaf.org">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
|---|
| 6 | <title>Register</title>
|
|---|
| 7 | <!-- Bootstrap CSS -->
|
|---|
| 8 | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|---|
| 9 | </head>
|
|---|
| 10 | <body>
|
|---|
| 11 | <div class="container mt-5">
|
|---|
| 12 | <div class="row justify-content-center">
|
|---|
| 13 | <div class="col-md-6">
|
|---|
| 14 | <div class="card shadow">
|
|---|
| 15 | <div class="card-body">
|
|---|
| 16 | <h3 class="card-title text-center mb-4">Register</h3>
|
|---|
| 17 |
|
|---|
| 18 | <form th:action="@{/register}" method="post">
|
|---|
| 19 | <!-- First Name -->
|
|---|
| 20 | <div class="mb-3">
|
|---|
| 21 | <label for="firstName" class="form-label">First Name</label>
|
|---|
| 22 | <input type="text" name="firstName" class="form-control" id="firstName" placeholder="Enter your first name" required>
|
|---|
| 23 | </div>
|
|---|
| 24 |
|
|---|
| 25 | <!-- Last Name -->
|
|---|
| 26 | <div class="mb-3">
|
|---|
| 27 | <label for="lastName" class="form-label">Last Name</label>
|
|---|
| 28 | <input type="text" name="lastName" class="form-control" id="lastName" placeholder="Enter your last name" required>
|
|---|
| 29 | </div>
|
|---|
| 30 |
|
|---|
| 31 | <!-- Email -->
|
|---|
| 32 | <div class="mb-3">
|
|---|
| 33 | <label for="email" class="form-label">Email</label>
|
|---|
| 34 | <input type="email" name="email" class="form-control" id="email" placeholder="Enter your email" required>
|
|---|
| 35 | </div>
|
|---|
| 36 |
|
|---|
| 37 | <!-- Password -->
|
|---|
| 38 | <div class="mb-3">
|
|---|
| 39 | <label for="password" class="form-label">Password</label>
|
|---|
| 40 | <input type="password" name="password" class="form-control" id="password" placeholder="Enter your password" required>
|
|---|
| 41 | </div>
|
|---|
| 42 |
|
|---|
| 43 | <!-- Role Selection -->
|
|---|
| 44 | <div class="mb-3">
|
|---|
| 45 | <label for="role" class="form-label">Role</label>
|
|---|
| 46 | <select name="role" class="form-select" id="role" required>
|
|---|
| 47 | <option value="" disabled selected>Select your role</option>
|
|---|
| 48 | <option value="USER">USER</option>
|
|---|
| 49 | <option value="INSTRUCTOR">INSTRUCTOR</option>
|
|---|
| 50 | </select>
|
|---|
| 51 | </div>
|
|---|
| 52 |
|
|---|
| 53 | <!-- Submit Button -->
|
|---|
| 54 | <div class="d-grid mt-4">
|
|---|
| 55 | <button type="submit" class="btn btn-primary btn-lg">Register</button>
|
|---|
| 56 | </div>
|
|---|
| 57 | </form>
|
|---|
| 58 |
|
|---|
| 59 | <p class="mt-3 text-center">
|
|---|
| 60 | Already have an account? <a th:href="@{/login}">Login here</a>
|
|---|
| 61 | </p>
|
|---|
| 62 | </div>
|
|---|
| 63 | </div>
|
|---|
| 64 | </div>
|
|---|
| 65 | </div>
|
|---|
| 66 | </div>
|
|---|
| 67 |
|
|---|
| 68 | <!-- Bootstrap JS -->
|
|---|
| 69 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|---|
| 70 | </body>
|
|---|
| 71 | </html>
|
|---|
