jtpmcdevitt/web_php
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add registration functionality

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-22 21:02:01 -05:00
parent 04cc76c4ab
commit d9d2fb682b
1 changed files with 86 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
hotel_booking/components/header.php
View file

@ -119,7 +119,7 @@
<div class="modal fade" id="registerBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form>
<form id = "register-form">
<div class="modal-header" style="border: none;">
<button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
@ -130,42 +130,115 @@
<div class="row">
<div class="mb-3 col-md-6">
<label>First Name</label>
<input type="text" class="form-control shadow-none"/>
<input type="text" name="firstname" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-6">
<label>Last Name</label>
<input type="text" class="form-control shadow-none"/>
<input type="text" name="lastname" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-6">
<label>Phone Number</label>
<input type="tel" class="form-control shadow-none"/>
<input type="tel" name="phone" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-6">
<label>Date of Birth</label>
<input type="date" class="form-control shadow-none"/>
<input type="date" name="birth" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-12">
<label>Address</label>
<textarea type="text" rows="3" class="form-control shadow-none" style="resize: none;"></textarea>
<textarea type="text" name="address" rows="3" class="form-control shadow-none" style="resize: none;" required></textarea>
</div>
<div class="mb-3 col-md-12">
<label>Email</label>
<input type="email" class="form-control shadow-none"/>
<input type="email" name="email" class="form-control shadow-none" required/>
</div>
<div class="mb-3 col-md-6">
<label>Password</label>
<input type="password" class="form-control shadow-none"/>
<input type="password" name="password" class="form-control shadow-none" required/>
</div>
<div class="mb-5 col-md-6">
<label>Confirm Password</label>
<input type="password" class="form-control shadow-none"/>
</div>
<div class="mb-3 d-grid">
<button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
<input type="password" name="cpassword" class="form-control shadow-none" required/>
</div>
</div>
</div>
<div class="mb-3 d-grid mx-3">
<button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function alert(type, msg, position='body'){
let bs_class = (type == 'success') ? 'alert-success' : 'alert-danger';
let element = document.createElement('div');
element.innerHTML =
`<div class="d-flex justify-content-end align-items-start">
<div class="alert ${bs_class} alert-dismissible fade show" role="alert">
<strong class="me-3">${msg}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>`;
if(position == 'body'){
document.body.append(element);
element.classList.add('custom-alert-t');
} else{
document.getElementById(position).appendChild(element);
}
setTimeout(removeAlert, 3000)
}
function removeAlert(){
document.getElementsByClassName('alert')[0].remove();
}
let register_form = document.getElementById('register-form');
register_form.addEventListener('submit', (e) => {
e.preventDefault();
let data = new FormData();
data.append('firstname', register_form.elements['firstname'].value);
data.append('lastname', register_form.elements['lastname'].value);
data.append('phone', register_form.elements['phone'].value);
data.append('birth', register_form.elements['birth'].value);
data.append('address', register_form.elements['address'].value);
data.append('email', register_form.elements['email'].value);
data.append('password', register_form.elements['password'].value);
data.append('cpassword', register_form.elements['cpassword'].value);
data.append('register', '');
var myModal = document.getElementById('registerBackdrop');
var modal = bootstrap.Modal.getInstance(myModal);
modal.hide();
let xhr = new XMLHttpRequest();
xhr.open("POST", "ajax/login_register.php", true);
xhr.onload = function(){
if(this.responseText == 'pass_mismatch'){
alert('error', 'Wrong password, please try again!');
} else if(this.responseText == 'email_already'){
alert('error', 'This email is alerady registered!');
} else if(this.responseText == 'phone_already'){
alert('error', 'This phone number is alerady registered!');
} else if(this.responseText == 'mail_failed'){
alert('error', 'We cannot sent you an email confirmation');
} else if(this.responseText == 'ins_failed'){
alert('error', 'Registration error');
} else{
alert('success' , 'Registration successful. The confirmation is sent to your email.');
register_form.reset();
}
}
xhr.send(data);
});
</script>