105 lines
5.0 KiB
HTML
Executable File
105 lines
5.0 KiB
HTML
Executable File
{% extends 'includes/base_auth.html' %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<main class="main-content mt-0">
|
|
<div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('https://images.unsplash.com/photo-1612911853182-96e6be2792c7?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-position: center;">
|
|
<span class="mask bg-gradient-dark opacity-6"></span>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-5 text-center mx-auto">
|
|
<h1 class="text-white mb-2 mt-5">Welcome!</h1>
|
|
<p class="text-lead text-white">Please log in to continue</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row mt-lg-n10 mt-md-n11 mt-n10 justify-content-center">
|
|
<div class="col-xl-4 col-lg-5 col-md-7 mx-auto">
|
|
<div class="card z-index-0">
|
|
<div class="card-header text-center pt-4">
|
|
<h5>Register</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form role="form" id="signup">
|
|
<div class="alert alert-danger text-white" role="alert" id="emailValidationMessage" hidden>
|
|
This is not a valid email address
|
|
</div>
|
|
<div class="mb-3 form-group" id="form_email">
|
|
<input type="text" id="id_email" class="form-control" placeholder="Email" aria-label="Email" autocomplete="email">
|
|
</div>
|
|
<div class="alert alert-danger text-white" role="alert" id="passwordMatchAlert" hidden>
|
|
Passwords do not match!
|
|
</div>
|
|
<div class="mb-3 form-group" id="form_password1">
|
|
<input type="password" id="id_password1" class="form-control" placeholder="Password" aria-label="Password1" autocomplete="new-password">
|
|
</div>
|
|
<div class="mb-3 form-group" id="form_password2">
|
|
<input type="password" id="id_password2" class="form-control" placeholder="Confirm Password" aria-label="Password2" autocomplete="new-password">
|
|
</div>
|
|
<div class="form-check form-group form-check-info text-start">
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
|
|
<label class="form-check-label" for="flexCheckDefault">
|
|
I agree the <a href="javascript:;" class="text-dark font-weight-bolder">Terms and Conditions</a>
|
|
</label>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="button" onclick="submit_form()" class="btn bg-gradient-dark w-100 my-4 mb-2" id="signUpSubmit">
|
|
<span class="spinner-border spinner-border-sm" id="submitSpinner" role="status" aria-hidden="true" hidden></span>
|
|
Sign up
|
|
</button>
|
|
</div>
|
|
<p class="text-sm mt-3 mb-0">Already have an account? <a href="{% url 'accounts:sign_in' %}" class="text-dark font-weight-bolder">Sign in</a></p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
|
|
|
{% endblock content %}
|
|
{% block scripts %}
|
|
<script>
|
|
|
|
function validateEmail(email) {
|
|
const res = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
|
|
return res.test(String(email).toLowerCase());
|
|
}
|
|
function submit_form(){
|
|
const csrftoken = Cookies.get('csrftoken');
|
|
document.getElementById('emailValidationMessage').setAttribute('hidden', 'true');
|
|
document.getElementById('passwordMatchAlert').setAttribute('hidden', 'true');
|
|
var email = document.getElementById('id_email').value;
|
|
var password1 = document.getElementById('id_password1').value;
|
|
var password2 = document.getElementById('id_password2').value;
|
|
if (validateEmail(email)){
|
|
var postdata = {'data': JSON.stringify({'email': email, 'password': password1})};
|
|
} else {
|
|
document.getElementById('emailValidationMessage').removeAttribute('hidden');
|
|
throw new Error('manual script stop');
|
|
};
|
|
if (password1 === password2 && password1 !== '' && password2 !== '') {
|
|
event.preventDefault();
|
|
console.log("trying to create user");
|
|
document.getElementById('submitSpinner').removeAttribute('hidden');
|
|
$.ajax({
|
|
url: "{% url 'accounts:user_sign_up' %}",
|
|
type: 'POST',
|
|
dataType: 'json',
|
|
data: postdata,
|
|
headers: {'X-CSRFToken': csrftoken},
|
|
success: function(result){
|
|
console.log(result);
|
|
if(result['no_errors'] === true ) location.href = "{% url 'index' %}"
|
|
}
|
|
});
|
|
} else {
|
|
document.getElementById('passwordMatchAlert').removeAttribute('hidden');
|
|
};
|
|
};
|
|
</script>
|
|
|
|
|
|
{% endblock scripts %} |