70 lines
2.4 KiB
HTML
70 lines
2.4 KiB
HTML
{% extends 'registration/registration_base.html' %}
|
|
{% block title %}Dj Learning Management System - Login{% endblock title %}
|
|
{% load crispy_forms_tags %}
|
|
{% block content %}
|
|
|
|
<div class="col-md-4 mx-auto mt-5">
|
|
<div class="card">
|
|
<div class="form-title">
|
|
<i class="fas fa-lock me-2"></i>
|
|
Sign in
|
|
</div>
|
|
<div class="card-body">
|
|
<form action="" method="POST" id="login-form">{% csrf_token %}
|
|
<div class="form-group mb-3">
|
|
<label class="mb-2" for="username_id"><i class="fas fa-address-card me-2"></i>ID Number</label>
|
|
<input type="text" name="username" id="username_id" class="form-control" required>
|
|
<div id="message-wrapper"></div>
|
|
</div>
|
|
<div class="form-group mb-3">
|
|
<label class="mb-2" for="password_id"><i class="fas fa-key me-2"></i>Password</label>
|
|
<input type="password" name="password" id="password_id" class="form-control" required>
|
|
</div>
|
|
{% if form.errors %}
|
|
<span class="text-danger"><i class="fas fa-exclamation-circle"></i> Invalid ID & Password.</span><br>
|
|
{% endif %}
|
|
|
|
<button type="submit" class="btn btn-primary" id="login-btn"><i class="fas fa-sign-in-alt"></i><small> SIGN IN</small></button>
|
|
</form>
|
|
<br>
|
|
<div class="login-bottom">
|
|
<a href="{% url 'password_reset' %}" class="link">Forgot password ?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block js %}
|
|
|
|
<script>
|
|
$('#login-form').submit(function (e) {
|
|
// e.preventDefault();
|
|
$('#login-btn').addClass('disabled')
|
|
$('#login-btn').html(`<i class="fas fa-sign-in-alt"></i> Signining you in . . .`)
|
|
})
|
|
|
|
$("#username").on("input", function () {
|
|
username = $(this).val();
|
|
|
|
$.ajax({
|
|
url: "/accounts/ajax/validate-username/",
|
|
data: {
|
|
username: username
|
|
},
|
|
dataType: 'json',
|
|
success: function (data) {
|
|
if (data.is_taken) {
|
|
console.log(data.is_taken);
|
|
$('#message-wrapper').html(`<p class="my-2 text-danger"><span class="bg-error p-2"><b>${username}</b> already taken :( try another one </span></p>`)
|
|
}
|
|
else {
|
|
$('#message-wrapper').html(`<p class="my-2 text-success"><span class="bg-correct p-2"><b>${username}</b> is valid </span></p>`)
|
|
}
|
|
}
|
|
|
|
})
|
|
})
|
|
</script>
|
|
{% endblock %}
|