-
Notifications
You must be signed in to change notification settings - Fork 0
/
signup.php
204 lines (175 loc) · 12 KB
/
signup.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sneakerology | SignUp</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="assets/icons/signin.ico">
<!-- Bootstrap HTML Link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<header>
<?php require 'includes/header.php'; ?>
<?php require 'includes/config.php' ?>
<!-- SweetAlert2 library for customized alerts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Used for confetti animation -->
<script src='https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2'></script>";
</header>
<!-- Section that handles sign up page -->
<section class="vh-200 mt-3" id="section-background">
<div class="mask d-flex align-items-center h-100">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 20px;">
<div class="card-body p-5">
<h2 class="text-uppercase font-monospace text-center fw-bold">Create an account with us</h2>
<p class="lead text-muted text-center">Unlock all features possible</p>
<!-- Display these messages ONLY if the credentials are incorrect -->
<div class="mb-4 text-center">
<p id="incorrect_password_prompt_password" class="lead text-danger fw-bold m-2" style="display: none;">Make sure the password exceeds 10 characters and has at least one number</p>
<p id="incorrect_password_prompt_username" class="lead text-danger fw-bold m-2" style="display: none;">Email or username already in use</p>
<p id="incorrect_password_prompt_password_match" class="lead text-danger fw-bold m-2" style="display: none;">Repeated passwords do not match</p>
</div>
<!-- Form which handles the sign up -->
<form method="post" action="signup.php">
<div class="form-outline mb-4">
<label class="form-label" for="fullname">Your Full Name</label>
<input type="text" id="fullname" name = "fullname" class="form-control form-control-lg" required>
</div>
<div class="form-outline mb-4">
<label class="form-label" for="fullname">Your Username</label>
<input type="text" id="username" name = "username" class="form-control form-control-lg" required>
</div>
<div class="form-outline mb-4">
<label class="form-label" for="email">Your Email</label>
<input type="email" id="email" name = "email" class="form-control form-control-lg" required>
</div>
<div class="form-outline mb-4">
<label class="form-label" for="password">Your Password</label>
<br>
<small class = "text-muted">Ensure it has more then 10 characters and has at least a number</small>
<input type="password" id="password" name = "password" class="form-control form-control-lg" required>
</div>
<div class="form-outline mb-4">
<label class="form-label" for="repeatpassword">Repeat your password</label>
<input type="password" id="repeatpassword" name="repeatpassword" class="form-control form-control-lg" required>
</div>
<div class="mb-4 text-center"> <!-- If password doesnt match the repeated password show this code -->
<p id = "incorrect_password_prompt" class = "lead text-danger fw-bold m-5" style = "display: none;">Repeated password doesnt match!</p>
</div>
<!-- Required field to make sure the user knows what he is opting in for -->
<div class="form-check d-flex justify-content-center mb-3">
<input class="form-check-input me-2" type="checkbox" value="" id="termsandconditions" required>
<label class="form-check-label" for="termsandconditions"> I read and agreed to the <a href="https://www.aliveshoes.com/sneakerology-god/terms" target=_blank class="text-primary">Terms of service</a> </label>
</div>
<div class="d-flex justify-content-center">
<input type="submit" value="Register now" name="submit" class="btn btn-outline-primary btn-block btn-lg w-100">
</div>
<p class="text-center text-muted mt-5 mb-0">Have already an account?<a href="login.php" class="fw-bold text-primary">Login here</a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Script that handles input validation -->
<script>
document.addEventListener('DOMContentLoaded', function () {
var passwordInput = document.getElementById('password');
var errorPrompt = document.getElementById('incorrect_password_prompt_password');
passwordInput.addEventListener('input', function () {
var passwordValue = passwordInput.value;
var hasNumber = /\d/.test(passwordValue);
if (passwordValue.length <= 10 || !hasNumber) {
errorPrompt.style.display = 'block';
} else {
errorPrompt.style.display = 'none';
}
});
});
</script>
<!-- Styles the background -->
<style>
#section-background {
background-image: url('https://img.freepik.com/free-vector/wave-background-minimalist-color-gradient_483537-3378.jpg?w=1060&t=st=1698688680~exp=1698689280~hmac=dea58b0b94f526bb003e62aa6fcf0359d634e83ffd951fef1fd29f528f5e2bfa');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
</style>
<!-- Handle form information with php -->
<?php
//Store all information in a session
if (isset($_POST["submit"])) {
$user_fullname = $_POST["fullname"];
$user_username = $_POST["username"];
$user_email = $_POST["email"];
$user_password = $_POST["password"];
$user_password_confirmation = $_POST["repeatpassword"];
// Check if email or username already exists
$checkQuery = $conn->prepare("SELECT COUNT(*) FROM users WHERE user_username = :user_username OR user_email = :user_email");
$checkQuery->execute([
":user_username" => $user_username,
":user_email" => $user_email,
]);
$count = $checkQuery->fetchColumn();
//If credentials already exists inform user
if ($count > 0) {
// Email or username already exists
echo "<script>document.getElementById('incorrect_password_prompt_username').style.display = 'block';</script>";
} else { //Credentials dont already exist, so proceed here:
if ($user_password === $user_password_confirmation) {
try {
//Insert user credentials into database
$insert = $conn->prepare("INSERT INTO users (user_username, user_email, user_password, full_name) VALUES (:user_username, :user_email, :user_password, :user_fullname)");
$insert->execute([
":user_username" => $user_username,
":user_email" => $user_email,
":user_password" => password_hash($user_password, PASSWORD_DEFAULT),
":user_fullname" => $user_fullname,
]);
//Fun confetti animation when user managed to sign in
echo "<script>
confetti({
particleCount: 500,
spread: 120,
origin: { y: 0.6 }
});
setTimeout(function() {
Swal.fire({
title: 'Thank you for creating an account with Sneakerology!',
text: 'You may now proceed to use all benefits, including buying, selling and much more',
icon: 'success',
confirmButtonText: 'I understand, take me to the login page',
confirmButtonColor: '#3085d6'
}).then((result) => {
if (result.isConfirmed) {
window.location.href = 'login.php';
}
});
}, 1000);
</script>";
} catch (PDOException) { //Display an error if anything goes wrong
echo "<script> window.alert('An unforseen error has occured! Try reload to page'); </script>";
}
} else { //Display an error message if the credentials are of incorrect type
echo "<script>document.getElementById('incorrect_password_prompt_password').style.display = 'block';</script>";
}
}
}
?>
<!-- Close the database connection -->
<?php closeConnection(); ?>
<!-- Bootstrap Javascript Link -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<footer>
<?php require 'includes/footer.html'; ?>
</footer>
</body>
</html>