Build a Password Generator and Deploy to Cloudfare Pages in 3 minutes

While we await the passwordless future promised by Big Tech, we still have a great deal of security decisions to make regarding using secure passwords.
Below is a chart of how the number of words, numbers or symbols influence the complexity of a password.

To create a secure passwords these days, there is Google Chrome password generator extension but due to security reasons, it is unsafe because hackers can access and steal the stored passwords from your browser.

This leaves us with one last option - use a simple random password generator that you can run and use locally on your smartphone or deploy on Google cloud, which we are going to learn how to do that here in this article. The App is built with HTML, CSS, Javascript and Bootstrap.

You can download the source code for the Random Password Generator App here on Github - Github repo

Don't forget to star the repo and fork the repo to add new features.

Requirements:
1) A simple interface - Button and a input field. I can't stress this enough, many users will likely want to generate a password immediately, not click checkboxes and move sliders.
2) Copy functionality.
3) Fully responsive design with Bootstrap.

First create a file named "index.html" with the following code:

<body class="d-flex h-100 text-center text-white bg-dark">

<div class="cover-container d-flex w-100 h-80 p-3 mx-auto flex-column"> <header class="mb-auto"> <div> <h3 class="float-md-start mb-0"> <span class="fa fa-lock"></span> Password Generator</h3> </div>

</header>


<main class="px-3"> <h1>Generate Your Secure Password!</h1> <p class="lead"> <input type="text" class="form-control" name="gen-password" placeholder="Password shows here..."> </p> <span class="copied fa fa-check fa-2x" style="color:#32CD32" onclick="copy()">Copied</span> <span class="copy fa fa-copy fa-2x" onclick="copy()">Copy</span>
</p> <p class="lead"> <button class="btn btn-lg btn-secondary fw-bold border-white"> <span class="fa fa-key"></span> Generate Password </button>

</main>
<footer class="mt-auto text-white-50"> <p>We got tired of racking our brains for secure passwords.</p> <a href=""><span class="fa fa-github fa-2x" style="color:#FFFFFF"></span></a> </footer></div>

In the same file, we are going to add a script tag at the bottom of the page to add the javascript code that will generate the passwords:

<script> const display = document.querySelector("input"), button = document.querySelector("button"), copyBtn = document.querySelector("span.copy"), copyActive = document.querySelector("span.copied"); let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-="; button.onclick = ()=>{ let i, randomPassword = ""; copyBtn.style.display = "block"; copyActive.style.display = "none"; for (i = 0; i < 18; i++) { randomPassword = randomPassword + chars.charAt( Math.floor(Math.random() * chars.length) ); } display.value = randomPassword; } function copy(){ copyBtn.style.display = "none"; copyActive.style.display = "block"; display.select(); document.execCommand("copy"); }
</script>

What the code inside the script does is in two folds;
1) Firstly, a random password not less than 18 characters is generated every time the "Generate Password" button is clicked and displayed in the input field using the allotted characters and symbols as in the variable "char".
2) Secondly, a copy function enables the user to easily click on an icon and the password is automatically copied with a generated "Copied" message displayed right below the input field.

Deploying on Cloudfare Pages

1) Visit Cloudfare Pages - https://pages.cloudflare.com

2) Create an account or login to your existing account.

3) On the dashboard, on your left hand side, click on the "Pages" tab.

4) On the "Pages" tab, click on the "Create a project" button,

5) Click on the "Connect to git" button

6) Connect to Github, Github will notify you with a verification code to your email linked to your github profile.

7) After that, select the repository containing the project you want to deploy.

8) On the set up and deployment page, in the Project name input field, write out the project name of your choice. Note that the site will be deployed as "the project name".pages.dev

After deployment, go to the "Pages" tab again:

Deploy the site and your website will be live in a matter of seconds. This took me less than 3 minutes even on my first try, so rest assured the steps is straightforward and esy to follow. try it out!

The Random Password Generator App is hosted live at: https://securepasswords.pages.dev/

I hope this helps and you have learnt something out of this. Thanks for reading, see you next time.
You can download the source code for the Random Password Generator App here on Github - https://github.com/Tosynn/Random-Passwords-Generator

*Don't forget to star the repo and fork the repo to add new features.
*

Blog

Build a Password Generator and Deploy to Cloudfare Pages in 3 minutes

Tosin Adewale

Join Our Newsletter. No Spam, Only the good stuff.

Related