Save your Passwords | A Django Project
Madhuban Khatri
Posted on August 8, 2021
Welcome to Blog page,
It is new project related to Django Framework and Here I m going to create a website where users can create their account and can save their all the password with Django Security.
User can save Pc's, Social Media's, Smartphone's etc. passwords on this website.
Let's go
First of all create a django project using this command,
django-admin startproject save_password
Now create an app in your project,
python manage.py startapp main
Open your settings.py file and add your app in this file,
INSTALLED_APPS = [
#some apps are already installed
'main'
]
Create a new urls.py file in your app and add this to project's urls.py, like this
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('main.urls'))
]
Create a Super User,
python manage.py createsuperuser
#add name- admin
#add email- admin@gmail.com
#add password- admin
Now do this,
python manange.py makemigrations
python manage.py migrate
create models
from django.db import models
# Create your models here.
class User(models.Model):
name = models.CharField(max_length=100)
pwd = models.CharField(max_length=500)
def __str__(self):
return self.name
class SavePassword(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
title = models.CharField(max_length=50)
pwd = models.CharField(max_length=1000)
hide_pwd = models.CharField(max_length=1000)
def __str__(self):
return self.title
Add models in admin.py file, like this
from django.contrib import admin
from .models import User, SavePassword
# Register your models here.
class UserAdmin(admin.ModelAdmin):
list_display = ['name', 'pwd']
class SavePasswordAdmin(admin.ModelAdmin):
list_display = ['user','title', 'pwd', 'hide_pwd']
admin.site.register(User, UserAdmin)
admin.site.register(SavePassword, SavePasswordAdmin)
Code in views.py file
from django.shortcuts import render, redirect
from django.http import HttpResponse
from django.views import View
from .models import User, SavePassword
from django.contrib.auth.hashers import check_password, make_password
# Create your views here.
class Index(View):
def get(self, request):
if 'user' in request.session:
get_save_pwd = SavePassword.objects.filter(user__name=request.session['user']).order_by('-id')
account_pwd = User.objects.get(name=request.session['user'])
params = {'passwords': get_save_pwd, 'user_account': account_pwd}
return render(request, 'show_pwd.html', params)
else:
return render(request, 'index.html')
def post(self, request):
uname = request.POST['user_name']
pwd = request.POST['password']
if uname and pwd:
create_user = User.objects.create(name=uname, pwd=pwd)
create_user.save()
return render(request, 'index.html')
else:
error = "Please Fill the fields."
return render(request, 'show_pwd.html', {'error': error})
class Login(View):
def get(self, request):
return render(request, 'login.html')
def post(self, request):
uname = request.POST['uname']
pwd = request.POST['pwd']
try:
user_obj = User.objects.get(name=uname, pwd=pwd)
request.session['user'] = user_obj.name
except:
return redirect('login')
return redirect('index')
class Logout(View):
def get(self, request):
del request.session['user']
return redirect('index')
class SavePwd(View):
def get(self, request):
return render(request, 'save_pwd.html')
def post(self, request):
title = request.POST['title']
pwd = request.POST['pwd']
makePwd = make_password(pwd)
user_obj = User.objects.get(name=request.session['user'])
savePwd = SavePassword.objects.create(user=user_obj, title=title, pwd=pwd, hide_pwd=makePwd)
savePwd.save()
return redirect('save_pwd')
class Edit(View):
def get(self, request, id):
pwd_id_obj = SavePassword.objects.get(id=id)
params = {'obj': pwd_id_obj}
return render(request, 'edit.html', params)
def post(self,request, id):
pwd_obj = SavePassword.objects.get(id=id)
new_title = request.POST['title']
new_pwd = request.POST['pwd']
new_pwd_hash = make_password(new_pwd)
pwd_obj.title = new_title
pwd_obj.pwd = new_pwd
pwd_obj.hide_pwd = new_pwd_hash
pwd_obj.save()
return redirect('index')
make urls in app's url.py file,
from django.urls import path
from . import views
urlpatterns = [
path('', views.Index.as_view(), name='index'),
path('login', views.Login.as_view(), name='login'),
path('logout', views.Logout.as_view(), name='logout'),
path('save_password', views.SavePwd.as_view(), name='save_pwd'),
path('<int:id>/edit/', views.Edit.as_view(), name='edit'),
]
Templates
base.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
{% load static %}
<title>Safe Password</title>
</head>
<body class="bg-dark" style="background-image: url({% static 'security.jpg' %}); background-repeat: no-repeat; background-size: cover;">
<div class="container-fluid bg-dark">
<header class="d-flex justify-content-center py-3">
<ul class="nav nav-pills">
<li class="nav-item"><a href="{% url 'index' %}" class="nav-link" aria-current="page">Home</a></li>
{% if request.session.user %}
<li class="nav-item"><a href="{% url 'save_pwd' %}" class="nav-link">Save a new Password</a></li>
<li class="nav-item"><a href="{% url 'logout' %}" class="nav-link">Logout</a></li>
{% else %}
<li class="nav-item"><a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#exampleModal1">Signup</a></li>
<li class="nav-item"><a href="{% url 'login' %}" class="nav-link">Login</a></li>
{% endif %}
</ul>
</header>
</div>
{% if error %}
<div class="alert alert-danger" role="alert">
{{error}}
</div>
{% endif %}
<!-- Signup Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create an Account</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="{% url 'index' %}" method="post">
{% csrf_token %}
<div class="container">
<label for="uname">Name</label>
<input type="text" id="uname" class="form-control" name="user_name">
</div>
<br>
<div class="container">
<label for="pwd">Password</label>
<input type="password" id="pwd" class="form-control" name="password">
</div>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Signup">
</form>
</div>
</div>
</div>
</div>
{% block body %}
{% endblock %}
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
index.html
{% extends 'base.html' %}
{% block body %}
<div class="container w-50" style="margin-top: 200px;">
<div class="card rounded" style="padding: 50px;">
<p style="text-align: center; font-family: sans-serif; font-weight: bold; font-size: 25px;">Save your Password here and get Full Security.</p>
</div>
</div>
{% endblock %}
login.html
{% extends 'base.html' %}
{% block body %}
<div class="container w-25 rounded border my-5 bg-dark py-3 px-3">
<h2 class="text-light">Login</h2>
<form action="{% url 'login' %}" method="post">
{% csrf_token %}
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label text-light">Name</label>
<input type="text" class="form-control" name="uname" id="exampleFormControlInput1">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label text-light">Password</label>
<input type="password" class="form-control" name="pwd" id="exampleFormControlTextarea1" name="">
</div>
<div class="mb-3">
<input type="submit" class="btn btn-primary" id="exampleFormControlTextarea1" value="Login">
</div>
</form>
</div>
{% endblock %}
save_pwd.html
{% extends 'base.html' %}
{% block body %}
<div class="container px-5 py-5 border">
<div class="card w-50 px-5 py-5 mx-auto">
<h2>Save Password</h2>
<hr>
<form action="{% url 'save_pwd' %}" method="post">
{% csrf_token %}
<label for="title">Title</label>
<input type="text" id="title" class="form-control" name="title">
<br>
<label for="password">Password</label>
<input type="password" id="password" class="form-control" name="pwd">
<br>
<input type="submit" value="Save Password" class="btn btn-primary">
</form>
</div>
</div>
{% endblock %}
show_pwd.html
{% extends 'base.html' %}
{% block body %}
<h3 class="text-light">You Login as: <span class="text-warning">{{request.session.user}}</span></h3>
<div class="container my-5 px-5 py-5 border">
<div class="row">
<div class="col-sm-6 w-100 text-center">
<div class="card">
<div class="card-body">
<h5 class="card-title">Account Password</h5>
<p class="card-text"><strong id="para">***********</strong></p>
<a class="btn btn-danger" id="trigger" onclick="show_pwd()">Show</a>
</div>
</div>
</div>
{% for password in passwords %}
<div class="col-sm-6 w-50 my-2">
<div class="card">
<div class="card-body">
<h5 class="card-title text-danger">{{password.title}}</h5>
<hr>
<p class="card-text"><strong>Decoded: </strong>{{password.pwd}} <a href="{% url 'edit' password.id %}" style="float: right; margin-right: 20px;" class="btn btn-sm btn-primary">Edit</a></p>
<p class="card-text"><strong>Encoded: </strong>{{password.hide_pwd}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script type="text/javascript">
var a = "{{user_account.pwd}}";
var p = document.getElementById('para');
var btn = document.getElementById('trigger');
var is_active = 0;
function show_pwd() {
if(is_active == 0){
p.innerHTML = a;
btn.innerHTML = "Hide";
is_active = 1;
}
else{
p.innerHTML = "*************";
btn.innerHTML = "Show";
is_active = 0;
}
}
</script>
{% endblock %}
edit.html
{% extends 'base.html' %}
{% block body %}
<div class="container px-5 py-5 border">
<div class="card w-50 px-5 py-5 mx-auto">
<h2>Edit Password</h2>
<hr>
<form action="{% url 'edit' obj.id %}" method="post">
{% csrf_token %}
<label for="title">Title</label>
<input type="text" id="title" value="{{obj.title}}" class="form-control" name="title">
<br>
<label for="password">Password</label>
<input type="password" id="password" value="{{obj.pwd}}" class="form-control" name="pwd">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="btn_show" onclick="my_fun()">
<label class="form-check-label">
Show Password
</label>
</div>
<br>
<input type="submit" value="Save Password" class="btn btn-primary">
</form>
</div>
</div>
<script type="text/javascript">
var btn = document.getElementById('btn_show');
var pwd = document.getElementById('password');
function my_fun(){
var status = 0;
if (pwd.type == 'password'){
pwd.type = 'text';
}
else{
pwd.type = 'password';
}
}
</script>
{% endblock %}
Read my other blogs:-
💖 💪 🙅 🚩
Madhuban Khatri
Posted on August 8, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related