Make a login signup using Django with Password Hashing and Proper Backend Validation

We can see how to make a Login , Signup using Django with Password Hashing and Proper Back-end Validation Using Django inbuilt Auth User. 

Features:

  • Email Should Unique.
  • Username doesn’t contain special characters.
  • Password saved in the database with the hash method.
  • Email format: Validate with Django email verification.
  • Registration entry can’t be blank.
  • Creating A Django User Session.

views.py

from django.shortcuts import render, redirect
from django.contrib.auth.models import User
from django.contrib import messages
from django.contrib.auth.hashers import make_password, check_password
from django.core.exceptions import ValidationError
from django.core.validators import validate_email

# Create your views here.

def checkusername(username): # Special Character not allowed
if username != '' and all(chr.isalnum() or chr.isspace() for chr in username):
return True
else:
return False


def uniqueemail(email): # Email Should be unique
search_email = User.objects.filter(email=email)
if search_email:
return False
else:
return True


def checkemail(email):
try:
validate_email(email)
return True
except ValidationError:
return False


def checkpassword(password): # Password format
if password != '' :
return True
else:
return False


def validate_registration(request,username,email,password):
if checkusername(username)==False:
messages.warning(request, "Username should contain only alphabets")
elif checkemail(email)==False:
messages.warning(request, "Enter a valid email address")
elif uniqueemail(email)==False:
messages.warning(request, "This Email is already Registered")
elif checkpassword(password)==False:
messages.warning(request, "Password can't be blank")
else:
return 1


def login(request):
if request.method == 'POST':
username = request.POST.get('username')
psw = request.POST.get('password')
try:
get_user_by_username =User.objects.get(username=username)
if get_user_by_username:
flag= check_password(psw, get_user_by_username.password)
if flag:
request.session["uid"] = request.POST.get('username')
messages.success(request, "Login Successfully.")
return redirect('/index')
error = 'Wrong password'
messages.warning(request, "Wrong password")
return render(request, "login.html", locals())
except:
error = 'User not Exists'
messages.error(request, "User not Exists")
return render(request, "login.html", locals())
return render(request, "login.html", locals())



def register(request):
if request.method == 'POST':
username = request.POST.get('username')
email = request.POST.get('email')
psw = request.POST.get('psw')
repeat_psw= request.POST.get('psw_repeat')
if validate_registration(request,username,email,psw) == 1:
if psw == repeat_psw:
password = make_password(psw)
obj_user = User.objects.filter(username=username)
if obj_user:
error = 'Username already exists'
messages.warning(request, "Username already exists")
return render(request, "register.html", locals())
else:
newuser = User.objects.create(username=username, password = password, email=email)
newuser.save()
messages.success(request, "User Register Successfully.")
return redirect('/login')
else:
messages.warning(request, "Password and Confirm Password should be same")
return render(request, "register.html", locals())
return render(request, "register.html", locals())




def index(request):
if request.session.has_key('uid'):
return render(request, "index.html")
else:
return redirect('/login')

def logout(request):
try:
del request.session["uid"]
except KeyError:
pass
return redirect("/login")


def forgot_password(request):
return render(request, 'resetpassword.html')


def password_reset(request):
if request.method == 'POST':
username = request.POST.get('username')
psw = request.POST.get('new_psw')
repeat_psw = request.POST.get('psw_repeat')
try:
get_user = User.objects.get(username=username)
print("get", get_user)
if get_user:
if psw == repeat_psw:
password = make_password(psw)
User.objects.filter(pk=get_user.id).update(password=password)
messages.success(request, "Password reset Successfully.")
return render(request, 'password_reset.html')
else:
messages.warning(request, "Password and Confirm Password should be same")
return render(request, "password_reset.html", locals())
except:
messages.warning(request, "User not exists")
return render(request, 'password_reset.html')
return render(request, 'password_reset.html')

urls.py

from django.contrib import admin
from django.urls import path
from login_signup_app import views

urlpatterns = [
path('admin/', admin.site.urls),
path('login/', views.login, name = "login"),
path('register/', views.register, name ="register"),
path('index/', views.index, name ="index"),
path('logout/', views.logout, name ="logout"),
path('password_reset/', views.password_reset, name ="password_reset"),


]

Templates

login.html

{% load static %}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'style.css' %}">
<!--<link rel="stylesheet" href="/static/css/style.css">-->
</head>
<body>
{% if messages %}
{% for message in messages %}
<div class="alert {{message.tags}}" id="message_container">
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
<strong>{{ message }}!!</strong>
{% endfor %}
</div>
{% endif %}

<h2>Login Form</h2>

<form action="" method="post">
{% csrf_token %}
<div class="container">
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>

<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<p>{{error}}</p>

<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>

<div class="container" style="background-color:#f1f1f1">
<input type="button" onclick="location.href='/register';" value="Sign Up" />
<span class="psw">Forgot <a href="/password_reset">password?</a></span>
</div>
</form>
<script>
var message_ele = document.getElementById("message_container");

setTimeout(function(){
message_ele.style.display = "none";
}, 3000);
// Timeout is 3 sec, you can change it
</script>
</body>

register.html

{% load static %}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
{% if messages %}
{% for message in messages %}
<div class="alert {{message.tags}}" id="message_container">
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
<strong>{{ message }}!!</strong>
{% endfor %}
</div>
{% endif %}
<form action="" method="post">
{% csrf_token %}
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account</p>
<hr>

<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" id="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>

<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw_repeat" id="psw-repeat" required>
<hr>
<p>{{error}}</p>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

<button type="submit" class="registerbtn">Register</button>
</div>

<div class="container signin">
<p>Already have an account? <a href="/login">Sign in</a>.</p>
</div>
</form>
<script>
var message_ele = document.getElementById("message_container");

setTimeout(function(){
message_ele.style.display = "none";
}, 3000);
// Timeout is 3 sec, you can change it
</script>
</body>

index.html

{% load static %}
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{% static 'style.css' %}">
<title>Index</title>
</head>
<body>
{% if messages %}
{% for message in messages %}
<div class="alert {{message.tags}}" id="message_container">
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
<strong>{{ message }}!!</strong>
{% endfor %}
</div>
{% endif %}
Welcome index

<div class="container" style="background-color:#f1f1f1">
<input type="button" onclick="location.href='/logout';" value="Logout" />

</div>
<script>
var message_ele = document.getElementById("message_container");

setTimeout(function(){
message_ele.style.display = "none";
}, 3000);
// Timeout is 3 sec, you can change it
</script>
</body>



password_reset.html

{% load static %}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'style.css' %}">
<!--<link rel="stylesheet" href="/static/css/style.css">-->
</head>
<body>
{% if messages %}
{% for message in messages %}
<div class="alert {{message.tags}}" id="message_container">
<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
<strong>{{ message }}!!</strong>
{% endfor %}
</div>
{% endif %}

<h2>Password Reset</h2>
<p>Enter a username for update existing Password</p>

<form action="{% url 'password_reset' %}" method="post">
{% csrf_token %}
<div class="container">
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" id = username required>

<label for="new_psw"><b> New Password</b></label>
<input type="password" placeholder="Enter Password" name="new_psw" id="new_psw" required>

<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw_repeat" id="psw-repeat" required>

<button type="submit">Update Password</button>

</div>
<div class="container" style="background-color:#f1f1f1">
<input type="button" onclick="location.href='/login';" value="Login Now" />
</div>
</form>
<script>
var message_ele = document.getElementById("message_container");

setTimeout(function(){
message_ele.style.display = "none";
}, 3000);
// Timeout is 3 sec, you can change it
</script>
</body>

Static

style.css

body
{
font-family: Arial, Helvetica, sans-serif;
}

form
{
border: 3px solid #f1f1f1;
}

input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}

button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
border-radius: 5px;
width: 100%;
}

button:hover {
opacity: 0.8;
}

.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}

.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}

img.avatar {
width: 40%;
border-radius: 50%;
}

.container {
padding: 16px;
}

span.psw {
float: right;
padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}


.alert {
padding: 5px;
background-color: #f44336;
color: white;
border-radius: 5px;
text-align: center;
opacity: 2;
transition: opacity 0.6s;
}

.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}
.alert.error {background-color: #7676a7;}


.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}

.closebtn:hover {
color: black;
}

Leave a Comment

Your email address will not be published. Required fields are marked *