|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <html>
|
3 | 3 | <head>
|
4 |
| - <meta charset="utf-8"> |
5 |
| - <title>Event Management</title> |
6 |
| - |
7 |
| - <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
8 |
| - |
9 |
| - <link rel="stylesheet" type="text/css" href="css/sourcesanspro-font.css"> |
10 |
| - |
11 |
| - <link rel="stylesheet" href="css/style.css"/> |
12 |
| - <link href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel=" stylesheet" integrity=" sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin=" anonymous" > |
13 |
| - <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js" integrity="sha512-L4lHq2JI/GoKsERT8KYa72iCwfSrKYWEyaBxzJeeITM9Lub5vlTj8tufqYk056exhjo2QDEipJrg6zen/DDtoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
14 |
| - |
15 |
| - <style> |
16 |
| - |
17 |
| - </style> |
18 |
| - |
| 4 | + <meta charset='utf-8'> |
| 5 | + <meta http-equiv='X-UA-Compatible' content='IE=edge'> |
| 6 | + <title>Event Management - Signup</title> |
| 7 | + <meta name='viewport' content='width=device-width, initial-scale=1'> |
| 8 | + <link rel='stylesheet' type='text/css' media='screen' href='styles.css'> |
19 | 9 | </head>
|
20 | 10 | <body>
|
21 |
| - <div id="whole"> EventM - Enjoy the Events in your City |
22 |
| - <img src="images/logo.png" alt="Event Management Logo" style="display: block; margin: 0 auto; max-width: 90%; max-height: 80%;" /> |
| 11 | + <div class="form-container"> |
| 12 | + <h2>Sign Up</h2> |
| 13 | + <form id="signup-form"> |
| 14 | + <div class="form-row"> |
| 15 | + <input type="text" name="firstName" class="input-text" required> |
| 16 | + <label class="label">First Name</label> |
| 17 | + </div> |
| 18 | + <div class="form-row"> |
| 19 | + <input type="text" name="lastName" class="input-text" required> |
| 20 | + <label class="label">Last Name</label> |
| 21 | + </div> |
| 22 | + <div class="form-row"> |
| 23 | + <input type="text" name="email" class="input-text" required> |
| 24 | + <label class="label">Email</label> |
| 25 | + </div> |
| 26 | + <div class="form-row"> |
| 27 | + <input type="text" name="city" class="input-text" required> |
| 28 | + <label class="label">City</label> |
| 29 | + </div> |
| 30 | + <div class="form-row"> |
| 31 | + <input type="password" name="password" class="input-text" required> |
| 32 | + <label class="label">Password</label> |
| 33 | + </div> |
| 34 | + <div class="form-row"> |
| 35 | + <label class="label">Interests</label> |
| 36 | + <select name="interests" class="input-text" multiple required> |
| 37 | + <!-- Interests will be populated here --> |
| 38 | + </select> |
| 39 | + </div> |
| 40 | + <div class="form-row"> |
| 41 | + <input type="submit" value="Sign Up"> |
| 42 | + </div> |
| 43 | + </form> |
23 | 44 | </div>
|
24 |
| - |
25 | 45 |
|
| 46 | + <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
| 47 | + <script> |
| 48 | + // Fetch interests and populate the dropdown |
| 49 | + axios.get('http://localhost:8000/api/interest') |
| 50 | + .then(response => { |
| 51 | + const interestsSelect = document.querySelector('select[name="interests"]'); |
| 52 | + const interests = response.data; |
| 53 | + |
| 54 | + interests.forEach(interest => { |
| 55 | + const option = document.createElement('option'); |
| 56 | + option.value = interest.interestName; // Get only the interest name |
| 57 | + option.textContent = interest.interestName; // Display only the interest name |
| 58 | + interestsSelect.appendChild(option); |
| 59 | + }); |
| 60 | + }) |
| 61 | + .catch(error => { |
| 62 | + console.error(error); |
| 63 | + }); |
| 64 | + |
| 65 | + // Handle form submission |
| 66 | + document.getElementById('signup-form').addEventListener('submit', function (event) { |
| 67 | + event.preventDefault(); |
| 68 | + const form = event.target; |
| 69 | + const formData = new FormData(form); |
| 70 | + |
| 71 | + // Get all selected interest options |
| 72 | + const selectedOptions = form.elements['interests'].selectedOptions; |
| 73 | + const selectedInterests = Array.from(selectedOptions).map(option => option.value); |
26 | 74 |
|
27 |
| - |
28 |
| - |
29 |
| - <div class="form-v8"> |
30 |
| - <div class="form-v8-content"> |
31 |
| - <h2>Create an Account or Sign In</h2> |
32 |
| - <div class="tab"> |
33 |
| - <button class="tablinks" onclick="openCity(event, 'sign-up')" id="defaultOpen">Sign Up</button> |
34 |
| - <button class="tablinks" onclick="openCity(event, 'sign-in')">Sign In</button> |
35 |
| - </div> |
36 |
| - <form id="register-form" class="form-detail" action="#" method="post"> |
37 |
| - <div class="tabcontent" id="sign-up"> |
38 |
| - <div class="form-row"> |
39 |
| - <input type="text" name="full_name" id="fname1" class="input-text" required> |
40 |
| - <label class="label">First name</label> |
41 |
| - <span class="border"></span> |
42 |
| - </div> |
43 |
| - <div class="form-row"> |
44 |
| - <input type="text" name="full_name" id="lname1" class="input-text" required> |
45 |
| - <label class="label">Last name</label> |
46 |
| - <span class="border"></span> |
47 |
| - </div> |
48 |
| - <div class="form-row"> |
49 |
| - <input type="text" name="your_email" id="email1" class="input-text" required> |
50 |
| - <label class="label">E-Mail</label> |
51 |
| - <span class="border"></span> |
52 |
| - </div> |
53 |
| - <div class="form-row"> |
54 |
| - <input type="text" name="city" id="city" class="input-text" required> |
55 |
| - <label class="label">City</label> |
56 |
| - <span class="border"></span> |
57 |
| - </div> |
58 |
| - <div class="form-row"> |
59 |
| - <input type="password" name="password" id="password1" class="input-text" required> |
60 |
| - <label class="label">Password</label> |
61 |
| - <span class="border"></span> |
62 |
| - </div> |
63 |
| - <div class="form-row-last"> |
64 |
| - <input type="submit" name="register" class="register" value="Register"> |
65 |
| - </div> |
66 |
| - </div> |
67 |
| - </form> |
68 |
| - <form id="login-form" class="form-detail" action="#" method="post"> |
69 |
| - <div class="tabcontent" id="sign-in"> |
70 |
| - <div class="form-row"> |
71 |
| - <input type="text" name="your_email_1" id="email2" class="input-text" required> |
72 |
| - <label class="label">E-Mail</label> |
73 |
| - <span class="border"></span> |
74 |
| - </div> |
75 |
| - <div class="form-row"> |
76 |
| - <input type="password" name="password_1" id="password2" class="input-text" required> |
77 |
| - <label class="label">Password</label> |
78 |
| - <span class="border"></span> |
79 |
| - </div> |
80 |
| - <div class="form-row-last"> |
81 |
| - <input type="submit" name="login" class="register" id="login" value="Sign In"> |
82 |
| - </div> |
83 |
| - </div> |
84 |
| - </form> |
85 |
| - </div> |
86 |
| - </div> |
87 |
| - <script> |
88 |
| - function openCity(evt, cityName) { |
89 |
| - var i, tabcontent, tablinks; |
90 |
| - tabcontent = document.getElementsByClassName("tabcontent"); |
91 |
| - for (i = 0; i < tabcontent.length; i++) { |
92 |
| - tabcontent[i].style.display = "none"; |
93 |
| - } |
94 |
| - tablinks = document.getElementsByClassName("tablinks"); |
95 |
| - for (i = 0; i < tablinks.length; i++) { |
96 |
| - tablinks[i].className = tablinks[i].className.replace(" active", ""); |
97 |
| - } |
98 |
| - document.getElementById(cityName).style.display = "block"; |
99 |
| - evt.currentTarget.className += " active"; |
100 |
| - } |
| 75 | + // Create the payload object |
| 76 | + const payload = { |
| 77 | + firstName: formData.get('firstName'), |
| 78 | + lastName: formData.get('lastName'), |
| 79 | + email: formData.get('email'), |
| 80 | + city: formData.get('city'), |
| 81 | + password: formData.get('password'), |
| 82 | + interests: selectedInterests |
| 83 | + }; |
101 | 84 |
|
102 |
| - document.getElementById("defaultOpen").click(); |
103 |
| - </script> |
104 |
| - <script src="./js/index.js"></script> |
105 |
| - <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity=" sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin=" anonymous" ></script> |
| 85 | + axios.post('http://localhost:8000/api/user', payload) |
| 86 | + .then(response => { |
| 87 | + // Handle the response, e.g., show a success message or redirect to the dashboard |
| 88 | + console.log('User registered successfully!'); |
| 89 | + // Redirect to dashboard.html |
| 90 | + window.location.href = 'dashboard.html'; |
| 91 | + }) |
| 92 | + .catch(error => { |
| 93 | + // Handle the error, e.g., display an error message |
| 94 | + console.error(error); |
| 95 | + }); |
| 96 | + }); |
| 97 | + </script> |
106 | 98 | </body>
|
107 | 99 | </html>
|
0 commit comments