add registration functionality
This commit is contained in:
parent
04cc76c4ab
commit
d9d2fb682b
1 changed files with 86 additions and 13 deletions
|
@ -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>
|
Loading…
Add table
Reference in a new issue