diff --git a/src/app/components/signup/index.php b/src/app/components/signup/index.php
index e5fd04bb8263a9c0ef55e2de3b6eae13df344369..2affe9d7c1ab842748f4a07886ad7189150d5cae 100644
--- a/src/app/components/signup/index.php
+++ b/src/app/components/signup/index.php
@@ -17,72 +17,87 @@ $page = "SignUp";
<body>
<!-- Navbar -->
- <?php include (dirname(__DIR__)) . "/navbar/index.php" ?>
-
+ <?php include(dirname(__DIR__)) . "/navbar/index.php" ?>
+
<section class="signupcont">
<div class="boxsignup">
<h1 class="judulsignup">Sign Up</h1>
- <form class="form" action="/src/backend/validate-signup.php" method="post" id="form" >
+ <form class="form" action="/src/backend/validate-signup.php" method="post" id="form">
<div class="column">
<div class="input-box">
<label for="name" class="labelsignup">Name</label><br>
<input type="text" id="name" name="name">
- <div class="error"></div>
+ <span class="error">
+ <!-- <?php echo isset($errors['name']) ? $errors['name'] : ''; ?> -->
+ </span>
</div>
<div class="input-box">
<label for="email" class="labelsignup">Email</label><br>
<input type="text" id="email" name="email">
- <div class="error"></div>
+ <span class="error">
+ <!-- <?php echo isset($errors['email']) ? $errors['email'] : ''; ?> -->
+ </span>
</div>
</div>
<div class="column">
<div class="input-box">
<label for="phone" class="labelsignup">Phone Number</label><br>
<input type="tel" id="phone" name="phone">
- <div class="error"></div>
+ <span class="error">
+ <!-- <?php echo isset($errors['phone']) ? $errors['phone'] : ''; ?> -->
+ </span>
</div>
<div class="input-box">
<label for="password" class="labelsignup">Password</label><br>
<input type="password" id="password" name="password">
- <div class="error"></div>
+ <span class="error">
+ <!-- <?php echo isset($errors['password']) ? $errors['password'] : ''; ?> -->
+ </span>
</div>
</div>
<br>
<div class="genderbox">
- <label for="gender" class="labelsignup">Gender</label><br>
- <input type="radio" id="female" name="gender" value="Female">
- <label for="female" class="labelsignup">Female</label><br>
- <input type="radio" id="male" name="gender" value="Male">
- <label for="male" class="labelsignup">Male</label>
+ <div id="gender">
+ <label for="gender" class="labelsignup">Gender</label><br>
+ <input type="radio" id="female" name="gender" value="Female">
+ <label for="female" class="labelsignup">Female</label><br>
+ <input type="radio" id="male" name="gender" value="Male">
+ <label for="male" class="labelsignup">Male</label> <br>
+ <span class="error">
+ <!-- <?php echo isset($errors['gender']) ? $errors['gender'] : ''; ?> -->
+ </span>
+ </div>
</div>
<div class="submit-button">
- <button type="submit" class="btn" id="register">Register</button><br>
- <label class="detailtext">Already have an account?</label>
- <u><a class="linklogin" href="/?login">Login here</a></u>
+ <button type="submit" class="btn" id="register">Register</button><br>
+ <label class="detailtext">Already have an account?</label>
+ <u><a class="linklogin" href="/?login">Login here</a></u>
</div>
</div>
</form>
</div>
</section>
-
+
<div class="name-overlay">
</div>
<footer class="footer">
- <div class="footer-container">
- <div class="row">
- <div class="footer-col">
- <ul>
- <img src="/src/public/img/gimmick.png" alt="logo" class="logofooter">
- <li><a class="footer-content">SayIt adalah platform yang mewadahi pendidikan seks dan pelaporan pelecehan seksual</a></li>
- <li><a class="footer-content">Contact Us</a></li>
- </ul>
- </div>
- </div>
+ <div class="footer-container">
+ <div class="row">
+ <div class="footer-col">
+ <ul>
+ <img src="/src/public/img/gimmick.png" alt="logo" class="logofooter">
+ <li><a class="footer-content">SayIt adalah platform yang mewadahi pendidikan seks dan pelaporan
+ pelecehan seksual</a></li>
+ <li><a class="footer-content">Contact Us</a></li>
+ </ul>
</div>
</div>
- </footer>
+ </div>
+ </div>
+ </footer>
</body>
+<script src="/src/public/js/signup.js"></script>
</html>
\ No newline at end of file
diff --git a/src/backend/validate-signup.php b/src/backend/validate-signup.php
index 11a4a14e4e2683bc1d59576cf1a6411a5fde6f77..fd6fa3d29de68231c2524417eed0cd28c3dfebb4 100644
--- a/src/backend/validate-signup.php
+++ b/src/backend/validate-signup.php
@@ -1,65 +1,45 @@
<?php
-require_once __DIR__ . "/../db.php";
+session_start(); // Start a session
+
+require_once __DIR__ . "/../db.php";
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$errors = array();
// Validate name
if (empty($_POST['name'])) {
- $errors[] = 'Please enter your name';
- // echo "<script>alert('Please enter your name!')</script>";
- echo "<script>window.location.href='/?signup';</script>";
+ $errors['name'] = 'Please enter your name';
}
// Validate email
if (empty($_POST['email'])) {
- $errors[] = 'Please enter your email';
- // echo "<script>alert('Please enter your email!')</script>";
- echo "<script>window.location.href='/?signup';</script>";
- }
- elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
- $errors[] = 'Invalid email format';
- // echo "<script>alert('Please enter a valid email!')</script>";
- echo "<script>window.location.href='/?signup';</script>";
+ $errors['email'] = 'Please enter your email';
+ } elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
+ $errors['email'] = 'Invalid email format';
+ } elseif (!checkExistingEmail($_POST['email'])) {
+ $errors['email'] = 'Email already exists';
}
// Validate phone number
if (empty($_POST['phone'])) {
- $errors[] = 'Please enter your phone number';
- // echo "<script>alert('Please enter your phone number!')</script>";
- echo "<script>window.location.href='/?signup';</script>";
- }
- // elseif (!preg_match('^\(\+62|62|0)8[1-9][0-9]{6,9}$^', $_POST['phone'])){
- // $errors[] = 'Invalid phone number format';
- // echo "phone";
- // }
-
- // Validate age
- // if (empty($_POST['age'])) {
- // $errors[] = 'Please enter your age';
- // echo "age";
- // } elseif (!is_numeric($_POST['age'])) {
- // $errors[] = 'Age must be a number';
- // echo "age";
- // }
+ $errors['phone'] = 'Please enter your phone number';
+ } elseif (!checkExistingPhone($_POST['phone'])) {
+ $errors['phone'] = 'Phone number already exists';
+ }
// Validate password
if (empty($_POST['password'])) {
- $errors[] = 'Please enter your password';
- // echo "<script>alert('Please enter your password!')</script>";
- echo "<script>window.location.href='/?signup';</script>";
+ $errors['password'] = 'Please enter your password';
} elseif (strlen($_POST['password']) < 8) {
- $errors[] = 'Password must be at least 8 characters long';
- // echo "<script>alert('Please enter your password!')</script>";
- echo "<script>window.location.href='/?signup';</script>";
+ $errors['password'] = 'Password must be at least 8 characters long';
}
+ // Check if there are any validation errors
if (empty($errors)) {
// All input is valid, proceed to insert into the database
$mysqli = require __DIR__ . "/../db.php";
$query = "INSERT INTO user (user_name, user_email, user_pass, user_gender, user_phone, roles) VALUES (?, ?, ?, ?, ?, ?)";
-
$stmt = $mysqli->stmt_init();
if ($stmt->prepare($query)) {
@@ -69,7 +49,7 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
if ($stmt->execute()) {
echo "<script>alert('Register success!')</script>";
- echo "<script>window.location.href='/?home';</script>";
+ echo "<script>window.location.href='/?login';</script>";
} else {
echo $mysqli->error;
}
@@ -79,11 +59,46 @@ if ($_SERVER["REQUEST_METHOD"] === "POST") {
$stmt->close();
$mysqli->close();
- } else {
- // Display validation errors
- foreach ($errors as $error) {
- echo $error . '<br>';
- }
}
}
+
+// Function to check if an email already exists in the database
+function checkExistingEmail($email) {
+ $mysqli = require __DIR__ . "/../db.php";
+
+ $checkEmail = "SELECT * FROM user WHERE user_email = ?";
+ $stmt = $mysqli->prepare($checkEmail);
+ $stmt->bind_param('s', $email);
+ $stmt->execute();
+
+ $result = $stmt->get_result();
+
+ if ($result->num_rows > 0) {
+ echo "<script>alert('Email already exists!')</script>";
+ echo "<script>window.location.href='/?signup';</script>";
+ return false;
+ }
+
+ return true;
+}
+
+// Function to check if a phone number already exists in the database
+function checkExistingPhone($phone) {
+ $mysqli = require __DIR__ . "/../db.php";
+
+ $checkPhone = "SELECT * FROM user WHERE user_phone = ?";
+ $stmt = $mysqli->prepare($checkPhone);
+ $stmt->bind_param('s', $phone);
+ $stmt->execute();
+
+ $result = $stmt->get_result();
+
+ if ($result->num_rows > 0) {
+ echo "<script>alert('Phone Number already exists!')</script>";
+ echo "<script>window.location.href='/?signup';</script>";
+ return false;
+ }
+
+ return true;
+}
?>
\ No newline at end of file
diff --git a/src/public/css/signup.css b/src/public/css/signup.css
index f48e1fe5b36cac7b4accf37886d0f7595fd49acb..c014f046ee697bddfbc6b284d0a10652cca24d24 100644
--- a/src/public/css/signup.css
+++ b/src/public/css/signup.css
@@ -244,7 +244,7 @@ section{
}
-.column .input-box .labelsignup{
+.column .input-box .labelsignup .gender-box.labelsignup{
color: #FAF9F4;
color: #FFF;
font-family: 'Poppins', sans-serif;
@@ -414,4 +414,18 @@ section{
color: #ff3860;
font-size: 16px;
height: 13px;
+}
+
+.genderbox.success input {
+ border-color: #09c372;
+}
+
+.genderbox.error input {
+ border-color: #ff3860;
+}
+
+.genderbox .error {
+ color: #ff3860;
+ font-size: 16px;
+ height: 13px;
}
\ No newline at end of file
diff --git a/src/public/js/signup.js b/src/public/js/signup.js
new file mode 100644
index 0000000000000000000000000000000000000000..63830d7e4c6b3f5b4b9b3f064cfa49c938ebc547
--- /dev/null
+++ b/src/public/js/signup.js
@@ -0,0 +1,85 @@
+document.addEventListener('DOMContentLoaded', function () {
+ const form = document.getElementById('form');
+ const name = document.getElementById('name');
+ const email = document.getElementById('email');
+ const phone = document.getElementById('phone');
+ const password = document.getElementById('password');
+
+ form.addEventListener('submit', function (e) {
+ e.preventDefault();
+ validateInputs();
+ });
+
+ function validateInputs() {
+ let isValid = true;
+
+ // Reset error messages
+ const errorElements = document.querySelectorAll('.error');
+ errorElements.forEach((element) => (element.textContent = ''));
+
+ // Validate name
+ if (name.value.trim() === '') {
+ setError(name.parentElement, 'Name is required');
+ isValid = false;
+ }
+
+ // Validate email
+ if (email.value.trim() === '') {
+ setError(email.parentElement, 'Email is required');
+ isValid = false;
+ } else if (!isValidEmail(email.value.trim())) {
+ setError(email.parentElement, 'Provide a valid email address');
+ isValid = false;
+ }
+
+ // Validate phone number
+ if (phone.value.trim() === '') {
+ setError(phone.parentElement, 'Phone number is required');
+ isValid = false;
+ } else if (!isValidPhone(phone.value.trim())) {
+ setError(phone.parentElement, 'Phone number must be 0xxxx');
+ isValid = false;
+ } else if (isNaN(phone.value.trim())) {
+ setError(phone.parentElement, 'Phone number must be a number');
+ isValid = false;
+ }
+
+ // Validate password
+ if (password.value.trim() === '') {
+ setError(password.parentElement, 'Password is required');
+ isValid = false;
+ } else if (password.value.trim().length < 8) {
+ setError(password.parentElement, 'Password must be at least 8 characters');
+ isValid = false;
+ }
+
+ // Validate gender
+ const gender = document.querySelector('input[name="gender"]:checked');
+ if (!gender) {
+ setError(document.getElementById('gender'), 'Gender is required');
+ isValid = false;
+ }
+
+ if (isValid) {
+ // If all inputs are valid, submit the form to the server
+ form.submit();
+ }
+ }
+
+ function setError(container, message) {
+ console.log("container: " + container);
+ console.log("message: " + message);
+ const errorDisplay = container.querySelector('.error'); // Find .error within the container
+ errorDisplay.textContent = message;
+ }
+
+ function isValidEmail(email) {
+ const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ return re.test(String(email).toLowerCase());
+ }
+
+ function isValidPhone(phone) {
+ const re = /^(?:0)[2-9]\d{6,12}$/;
+ return re.test(phone);
+ }
+});