Login System using django with ajax
Here are some step that you need to follow to create login system with django and ajax.
step:1 First, create django project with command django-admin startproject loginsystem and then inside login system create django app with command python manage.py startapp blog.
step:2 Now, Include blog in your settings.py as
step3:Here,inside loginsystem directory you can find urls.py , make some modification as
from django.contrib import admin
from django.urls import path
from blog import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.login,name='login'),
path('register/',views.register,name='register'),
path('reset/',views.reset,name='reset'),
]
step4:create template directory inside your app means that inside blog and inside template directory create blog directory again and inside blog create main.html and index.html and login.system and register.html and reset.html file.
step4:main.html, this is the main file which include CDN link and index.html.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css
/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWv
TNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>login system</title>
</head>
<body style="background-color: #b2defd;">
<div class="container">
{% include 'blog/index.html' %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
step5:In index.html
<style>
input{
height: 50px; width:400px;
margin:5px 0px;
}
button{
background-color: #b2defd;
padding:5px 15px;
font-size:20px;
font-weight:600;
margin:10px 0px;
border:none;
}
</style>
<div class="mainDiv mx-auto w-50 mt-5" >
<h2>Login System in Django</h2>
<div class="loginSystem " style="height:400px;background-color: #628fae; ">
<ul class="nav nav-tabs mb-5" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold text-dark" id="login-tab"
data-toggle="tab" href="#login" role="tab" aria-controls="login"
aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold text-dark" id="register-tab"
data-toggle="tab" href="#register" role="tab" aria-controls="register"
aria-selected="false">Register</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold text-dark" id="reset-tab"
data-toggle="tab" href="#reset" role="tab" aria-controls="reset"
aria-selected="false">Reset Password</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel"
aria-labelledby="login-tab">
<!-- login system -->
{% include 'blog/login.html'%}
</div>
<div class="tab-pane fade" id="register" role="tabpanel"
aria-labelledby="register-tab">
<!-- register system -->
{% include 'blog/register.html'%}
</div>
<div class="tab-pane fade" id="reset" role="tabpanel"
aria-labelledby="reset-tab">
<!-- reset system -->
{% include 'blog/reset.html'%}
</div>
</div>
</div>
</div>
step6:In login.html
<form class="mx-auto w-75">
<input type="text" placeholder="Username" id='l_user' autocomplete=""><br>
<input type="password" placeholder="Password" id='l_pass'><br>
<div class="form-check">
<input class="form-check-input" type="checkbox" style="height: 20px;
width: 20px;" onclick="myFunction()">
<label class="font-weight-bold text-white">Show Password</label>
</div>
{% if user.is_authenticated%}
<button id="btn1" disabled>Login</button>
{% else %}
<button id="btn1">Login</button>
{% endif%}
</form>
<script>
function myFunction() {
var x = document.getElementById("l_pass");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
document.getElementById('btn1').addEventListener('click',(event)=>{
event.preventDefault();
const username=document.getElementById('l_user').value;
const password=document.getElementById('l_pass').value;
if(username.length==0 || password.length==0){
alert('username and password cannot be empty!')
}else{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const data=JSON.parse(this.responseText);
if(data.msg=='success'){
alert('user is authenticated !')
document.getElementById("btn1").disabled = true;
document.getElementById('l_user').value='';
document.getElementById('l_pass').value='';
}else{
alert(data.msg);
}
}
};
xhttp.open("POST", `/`, true);
xhttp.setRequestHeader('X-CSRFToken', csrftoken);
xhttp.setRequestHeader("Content-type", "text/plain");
xhttp.send(`${username}&${password}`);
}
})
</script>
step7:In register.html
<form class="mx-auto w-75" method="post">
<input type="text" placeholder="Username" id='r_user'><br>
<input type="password" placeholder="Password" id='r_pass'><br>
<input type="password" placeholder="Repeat Password" id='r_pass1'><br>
<div class="form-check">
<input class="form-check-input" type="checkbox" style="height: 20px;
width: 20px;" onclick="myFunction2()">
<label class="font-weight-bold text-white">Show Password</label>
</div>
<button id='btn2'>Register</button>
</form>
<script>
function myFunction2() {
var x = document.getElementById("r_pass");
var y=document.getElementById("r_pass1");
if (x.type === "password" && y.type === "password" ) {
x.type = "text";
y.type='text';
} else {
x.type = "password";
y.type = "password";
}
}
document.getElementById('btn2').addEventListener('click',(event)=>{
event.preventDefault();
const user=document.getElementById('r_user').value;
const pass1=document.getElementById('r_pass').value;
const pass2=document.getElementById('r_pass1').value;
if(user.length==0 || pass1.length==0 || pass2.length==0){
alert('username and password cannot be empty!');
}
else{
if(pass1 !=pass2){
alert('password doesnot match !')
}else{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const re=JSON.parse(this.responseText);
if(re.msg=='error'){
alert(`${user} is already exist! `);
}else{
alert(`${user} successfully registered ! `);
document.getElementById('r_user').value='';
document.getElementById('r_pass').value='';
document.getElementById('r_pass1').value='';
}
}
};
xhttp.open("POST", `/register/`, true);
xhttp.setRequestHeader('X-CSRFToken', csrftoken);
xhttp.setRequestHeader("Content-type", "text/plain");
xhttp.send(`${user}&${pass1}`);
}
}
});
</script>
step9:In reset.html
<form class="mx-auto w-75">
<input type="text" placeholder="Username" id='reset_user'><br>
<input type="password" placeholder="New Password" id='reset_pass1'><br>
<div class="form-check">
<input class="form-check-input" type="checkbox" style="height: 20px;
width: 20px;" onclick="myFunction3()">
<label class="font-weight-bold text-white">Show Password</label>
</div>
<button id='btn3'>Reset</button>
</form>
<script>
function myFunction3() {
var x = document.getElementById("reset_pass1");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
document.getElementById('btn3').addEventListener('click',(event)=>{
event.preventDefault();
const ruser=document.getElementById('reset_user').value;
const rpass1=document.getElementById('reset_pass1').value;
if(ruser.length==0 || rpass1.length==0 ){
alert('username and password cannot be empty!');
}
else{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const resp=JSON.parse(this.responseText);
if(resp.msg=='error'){
alert(`${ruser} doesnot exist! `);
}else{
alert(`Password change successfully ! `);
document.getElementById('reset_user').value='';
document.getElementById('reset_pass1').value='';
}
}
};
xhttp.open("POST", `/reset/`, true);
xhttp.setRequestHeader('X-CSRFToken', csrftoken);
xhttp.setRequestHeader("Content-type", "text/plain");
xhttp.send(`${ruser}&${rpass1}`);
}
});
</script>
step10:Lastly, after writing all coding part.now click on this 👉 clickme and see the result.
Tags:How to create login using django || login system using django with ajax.
0 Comments