Madhuban Khatri

Posted on Aug 8, 2021 • Edited on Aug 11, 2021

Save your Passwords | A Django Project

#django #python #security #javascript

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:-

Create A Dictionary App using Django and BeautifulSoup

Madhuban Khatri ・ May 16 '21

#django #python #html

Online Video Sharing Website - Django Project

Madhuban Khatri ・ Jan 6 '21

#django #python

DEV Community

Save your Passwords | A Django Project

Let's go

Templates

base.html

index.html

login.html

save_pwd.html

show_pwd.html

edit.html

Create A Dictionary App using Django and BeautifulSoup

Madhuban Khatri ・ May 16 '21

Online Video Sharing Website - Django Project

Madhuban Khatri ・ Jan 6 '21

Top comments (0)

Read next

Creating a Multilingual Expense Tracker with Tolgee

Strapi — Why

RabbitMQ with Web MQTT Plugin vs. Node.js : Performance and Memory Usage Comparison

Discover JSREPL.io – A JavaScript REPL & Playground