Save your Passwords | A Django Project
Tags: django, python, security, javascript
Published: 2021-08-08 13:42:42

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.

{% youtube f0NnVaZQieA %}

##Let's go

First of all create a django project using this command,
```python
django-admin startproject save_password
```

Now create an app in your project,
```python
python manage.py startapp main
```

Open your settings.py file and add your app in this file,
```python
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
```python
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
python manage.py createsuperuser

#add name- admin
#add email- admin@gmail.com
#add password- admin
```

Now do this,
```python
python manange.py makemigrations

python manage.py migrate

```

create models
```python 
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
```python
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
```python
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,
```python
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
```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
```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
```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
```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
```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
```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:-
{% link madhubankhatri/create-a-dictionary-app-using-django-and-beautifulsoup-5gd5 %}

{% link madhubankhatri/online-video-sharing-website-django-project-3abo %}