Python Django Random password generator from scratch.

Django

Django is one of the most popular frameworks used to create or build web applications with python. Without further ado let's create a password generator in django with user signup, login and logout option and a result page to show that user has already logged in.

Pre-requisite

Make sure you have the latest version of python, Go with any IDE you are familiar with.

Installing Virtual Environment and Django Project

Open your terminal and run these commands to Install required Packages:
1. pip install pipenv
2. cd (folder name) - get into the folder where you want your django project to be present, then run
3. pipenv install django
4. pipenv shell
5. django-admin startproject (project name)
6. pipenv --venv - copy and paste this path with python interpreter path and add (\bin\python) to it.
7. python manage.py startapp (app name) - whenever an app is started, the app name has to be mentioned in Settings.py under Installed Apps.

8. python manage.py createsuperuser - which is to get login details for admin(username, email, password and confirm password) now Admin module can be logged in. Note: By default Django provides Admin module and its features.
9. python manage.py makemigrations
10. python manage.py migrate
11. python manage.py runserver - click the url shown in terminal use ctrl + click (now you can see the page with successfully installed in your web browser)

Project Folder

After adding some files and folders your directory looks something like this

Folder and Files to be added in your app:

1. template folder and required html files.
2. forms.py - to use default form provided by django.
3. decorators.py - to authenticate whether the user is already logged in or not.
4. urls.py - to redirect pages according to url.

Template

Firstly let me explain how a web application works. Redirecting from one page to another in a site won't change the template every time only the body of the content is going to change, similarly we are also going to use the same template for every page.

<!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Python Password Generator</title>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          
          <style>
              *{
                  background-color: white;
                  transition: all .20s ease;
                  height: auto;
                  width: auto;
              }

#content{
                  color:red;
                  text-align:center;
                  font-family:FontAwesome;
                  font-weight:bold;
                  margin-top:3vh;
                  font-size:2vw;
              }

#top-nav-bar{
                  border-bottom:1px solid red;
                  border-top:1px solid red;
                  padding: 10px;
                  text-align: center;
                  font-family:FontAwesome;
                  font-weight:400;
                  font-size:12px;
                  width: 100%;
                  display: flex;
                  height: auto;
                  box-sizing: border-box;
                  position: relative;
                  margin: 0 auto;
                  overflow: visible;
                  justify-content: space-between;
                  z-index: 10;
              }

#web-name{
                  float:left;
                  padding-left: 5%;
                  font-size:16px;
                  display: block;
                  font-family: Arial;
              }
              #main-menu{
                  float: right;
                  padding-left:5%;
                  display: block;
                  font-family: Arial;
              }

a{
                  padding-left: 25px;
                  text-decoration: none;
                  color: black;
                  font-weight: bold;
              }
              a:hover{
                  color: red;
              }
              li{
                  display: inline-block;
              }
              #mob-nav-open, #mob-nav-close{
                  top:20px;
                  right: 10px;
                  position: absolute;
                  padding:0 0 0 20px;
                  display: none;
                  transition: 2s;
              }

@media  screen and (max-width:850px){

#web-name{
                      padding-left: 0px;
                  }
                  #main-menu{
                      display:none;
                  }
                  #mob-nav-open{
                      display: block;
                  }
                  #top-nav-bar{
                      display: block;
                  }
                  #top-nav-bar{
                      flex-direction: column;
                      align-items: flex-start;
                      display: flex;

}
                  #main-menu{
                      width: 100%;
                      height: 100%;
                      transition: 1s ease;
                      z-index: 20;
                      text-align: left;
                  }
                  li{
                      display:block;
                      padding: 10px;
                      border-top: 1px solid red;
                      font-family: FontAwesome;
                      font-size: 12px;
                      font-weight: bold;
                  }
                  li > a{
                      display: inline-block;
                      width: 98%;
                  }
              }

</style>   
          
          <script>
              // DISPLAY TOP MOBILE NAVIGATION
          // HIDE TOP MOBILE NAVIGATION TOGGLE
      function mobnav(){
          var a = document.getElementById("main-menu");
          var open = document.getElementById("mob-nav-open");
          var close = document.getElementById("mob-nav-close");
          open.style.display ="none";
          close.style.display ="block";
          if(a.style.display === "block"){
              a.style.display = "none";
          }
          else{
          a.style.display = 'block';
          }
      }
          // OPEN TOP MOBILE NAVIGATION TOGGLE
      function mobnavclose(){
          var a = document.getElementById("main-menu");
          var open = document.getElementById("mob-nav-open");
          var close = document.getElementById("mob-nav-close");
          open.style.display = "";
          close.style.display = "none";
          a.style.display = "";
      }
          </script>
      </head>
      <body >
      <div class="container">
          
          <div class="top-nav-bar" id="top-nav-bar">
              
              <div class="web-name" id="web-name" title="website">
                 <a href="home">PASSWORD GENERATOR</a> <br>
                 <a style="color: blue; font-size: 10px;">Python Password Generator</a> 
              </div>
              
              <ul class="main-menu" id="main-menu" title="main menu">
                  <li><a href="admin" title="admin login">ADMIN</a></li>
                  <li><a href="home" title="home">HOME</a></li>
                  <li><a href="result" title="result">RESULT</a></li>
                  <li><a href="register" title="register">SIGNUP</a></li>
                  <li><a href="login_page" title="login">LOGIN</a></li>
                  <li><a href="logout_user" title="logout">LOGOUT</a></li>
                  </ul>

<div id="content">
              {% block content %}
              
              {% endblock %}
              </div>    
      </div>

</body>
      </html>

Template contains only a basic responsive main-menu and it's a simple one created using html,css and js. Instead of using Internal Css and Js you also can use external files and you also can go with bootstrap instead of using css and js in django.

Random Password Generator

A simple html form that contains a button to generate a random password, once the password is generated that will be displayed in the same page within a textbox and the generated password is copied to the user's clipboard done by using python's pandas library. This html form has to be linked with the above template.

Css

This is going to be the Cascading style sheet for all of our html files except template.

*{
                  color: red;
              }
              #head{
                color:black;
                text-align: left;
              }
              #form_head{
                color:blue;
                align-items: center;
              }

textarea {
                  width: calc(100% - 12px);
                  padding: 5px;
                  }
                  form {
                  padding: 20px;
                  border-radius: 6px;
                  background: #fff;
                  box-shadow: 0 0 8px  #669999; 
                  flex: 1;
                  margin: 20%;
                  margin-top: 0%;
                  }

#log_in{
                  flex-direction:column;
                  }
                  #log_in input{
                    width: 200%
                  }

input, select, textarea {
                  margin-bottom: 10px;
                  border: 1px solid #ccc;
                  border-radius: 3px;
                  }
                  input {
                  width: calc(100% - 10px);
                  padding: 5px;
                  }
                  input[type="date"] {
                  padding: 4px 5px;
                  }
                  textarea {
                  width: calc(100% - 12px);
                  padding: 5px;
                  }
                  label{
                    float: left;
                    color: black;
                    margin-left: 0px;
                  }
                  span{
                    color:red;
                  }
                  .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
                  color:  #669999;
                  }
                  .item input:hover, .item select:hover, .item textarea:hover {
                  border: 1px solid transparent;
                  box-shadow: 0 0 3px 0  #669999;
                  color: #669999;
                  }
                  .item {
                  position: relative;
                  margin: 10px 0;
                  }
                  .item span {
                  color: red;
                  }
                  .colums {
                  display:flex;
                  justify-content:space-between;
                  flex-direction:row;
                  flex-wrap:wrap;
                  }
                  .colums div {
                  width:48%;
                  }

input[type="date"]::-webkit-inner-spin-button {
                  display: none;
                  }
                  .item i, input[type="date"]::-webkit-calendar-picker-indicator {
                  position: absolute;
                  font-size: 20px;
                  color:  #a3c2c2;
                  }
                  .item i {
                  right: 1%;
                  top: 30px;
                  z-index: 1;
                  }
              .btn-block {
                  margin-top: 10px;
                  text-align: center;
                  align-items: center;
                  }
                  button {
                  width: 100px;
                  padding: 10px;
                  border: none;
                  border-radius: 5px; 
                  background:  grey;
                  font-size: 16px;
                  color: white;
                  cursor: pointer;
                  }
                  button:hover {
                  background:  black;
                  }
                  #messages{
                    color: green;
                    font-weight: bold;
                    font-size: 100%;
                  }

home.html

{% extends  'temp.html' %} 
	  
      {% block content %}  
  
      <html>
      <head>
        
      </head>  
      <body>

<h3 id="head">Generate Password</h3>

{% for message in messages %}
        <p id="messages">{{message}}</p>
      {% endfor %}

<form action="generate" method="post" id="login">
              {% csrf_token %}

<h3 id="form_head">Click the Button to Generate Random Password</h3>

<div class="colums" id="log_in">
                <div class="item">
                  <label for="password">Password</label>
                  <input id="password" type="text"  name="password" value="{{password}}">
                </div>
              </div>
              <div class="btn-block">
                <button type="submit" name="generate">Generate</button>
              </div>

</form>

</body>
      </html>

{% endblock %}

urls.py

Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))

You can see the above instruction in the auto created urls.py file. Add another URL configuration using include as mentioned above:

urls.py (app)

views.py (app)

from django.shortcuts import render, redirect
      from django.contrib import messages
      import string
      from random import *
      import pandas as pd

def home(request):
          context={
              'password':""
          }
          return render(request,'home.html',context)

def generate(request):
          Tamil_Number = u"௦௧௨௩௪௫௬௭௮௯௰௱௲"
          Number = string.digits
          Character = string.ascii_letters
          Tamil_Character = u"ஃஅஆஇஈஉஊஎஏஐஓஔ"
          Symbol = string.punctuation

Numbers = Tamil_Number + Number
          Characters = Tamil_Character + Character
          Strong_Password = Numbers + Characters + Symbol

characters = Strong_Password
          password = "".join(choice(characters) for x in range(randrange(17, 18)))
          context={
              'password':password
          }

df = pd.DataFrame([password])
          df.to_clipboard(index=False, header=False)
          messages.success(request,"Password copied to your Clipboard")
          return render(request,'home.html',context)

Password comprises English Alphabets, Numbers(0 to 9), Symbols, Tamil Numbers and some Tamil letters. Once the Random Password is generated the password is copied to the user's clipboard with the help of pandas library before returning the rendered HttpResponse to the user.

If anyone wants me to continue login, signup, logout and how to access Admin panel in django options for this password generator let me know through comment section guys. Anyway thanks for reading.

Here is the link for Mark Sheet Result page using Html and Css.

Here is the link for Draw Scale using Java Paint

How to read multiple Integer input in a single line ? and Android Studio Getting Thumbnail to a Video using Glide in a Recyclerview

Image Processing in Java - Read, Write, to Black and White, to Gray, to Negative and Bit-Plane Slicing.

Write a Java code to check whether a number is prime or not with n root time complexity.

Here is the link for Google KickStart Round F 2021 Trash Bins Problem.

Know About

Python Django Random password generator from scratch.

0 Comments

Followers

Popular Posts

3x3 Matrix Multiplication Tracing in Java

Marksheet design sample in html code responsive one

Doctor Appointment Booking System with source code

Email Subscription

Java

Tags

Like Button

Contact Us

About Me

Know About

Contact List

Contact Form

Know About

Python Django Random password generator from scratch.

You may like these posts

0 Comments

Followers

Popular Posts

3x3 Matrix Multiplication Tracing in Java

Marksheet design sample in html code responsive one

Doctor Appointment Booking System with source code

Email Subscription

Java

Tags

Like Button

Contact Us

About Me

Know About

Contact List

Contact Form