DEV Community

Cover image for Save your Passwords | A Django Project
Madhuban Khatri
Madhuban Khatri

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

Now create an app in your project,

python manage.py startapp main
Enter fullscreen mode Exit fullscreen mode

Open your settings.py file and add your app in this file,

INSTALLED_APPS = [
    #some apps are already installed
    'main'

]
Enter fullscreen mode Exit fullscreen mode

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'))
]
Enter fullscreen mode Exit fullscreen mode

Create a Super User,

python manage.py createsuperuser

#add name- admin
#add email- admin@gmail.com
#add password- admin
Enter fullscreen mode Exit fullscreen mode

Now do this,

python manange.py makemigrations

python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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'),
]
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

Read my other blogs:-

madhubankhatri

Create A Dictionary App using Django and BeautifulSoup

Madhuban Khatri ・ May 16 '21

#django #python #html
madhubankhatri

Online Video Sharing Website - Django Project

Madhuban Khatri ・ Jan 6 '21

#django #python

Top comments (0)

Read next

ajmal_hasan profile image

Building a Smooth, Keyboard-Aware Component in React Native

Ajmal Hasan -

sagarmuchhal profile image

How to use Cookie Consent in a React App with react-cookie-consent

Muchhal Sagar -

mitchell_cheng profile image

String - JavaScript Challenges

Mitchell -

rumca-js profile image

Django bookmark management software

Piotr -