Built your first generated password for your company
19 April, 2023
1
1
0
Contributors
Are you aware of how many credentials you possess while working for your company? In today's world, security is paramount, and some reputable companies have implemented a standard operating procedure (SOP) of changing passwords every 30 or 90 days to keep your information safe. It's crucial to know if your password needs to meet specific requirements, such as being alphanumeric, to comply with these regulations. Keep yourself informed and secure by staying up-to-date with your credentials and password requirements.
--
Do you want to take your company's security to the next level? Look no further! I have a solution for you - create your own password generator. By developing a customized password generator for your company, you can ensure that each password meets the specific requirements you have set. This can give you peace of mind knowing that your company's sensitive information is secure. Let's take a step forward towards a safer and more secure workplace with a custom password generator.
Prerequisites
- Knowing how to create code
- Understand using js, Html, css
Let's we begin
First Step : Open up your favorite code-editor
Me 😎 : VScode
Second Step : Create 2 Files
javaScript file, like index.js and html file, like index.html
Third Step : Copy this file to JS file you already created
let desc = document.getElementById("desc")
let name = document.getElementById("name")
let username = document.getElementById("username")
let passwordLength = document.getElementById("passwordLength")
let password = document.getElementById("password")
let saveButton = document.getElementById("saveButton")
let reloadButton = document.getElementById("reloadButton")
const generatePassword = (len) => {
const lowerAlphabet = "abcdefghijklmnopqrstuvwxyz"
const upperAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const numeric = "0123456789"
const symbol = "!@#$%^&*()_+=-{}[]';:/?.,<>~`"
const data = lowerAlphabet + upperAlphabet + numeric + symbol
let generator = '';
for (let index = 0; index < len; index++) {
generator += data[~~(Math.random() * data.length)];
}
return generator
}
const getPassword = () => {
const newPassword = generatePassword(passwordLength.value)
password.value = newPassword
}
const savePassword = () => {
//document.title = password.value
saveButton.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent
(`
======================
[WARNING CONFIDENTIAL]
======================\n
please do not share to your friend !\n\n
Author : ${name.value}\n
Platform : ${desc.value}\n
Username : ${username.value}\n
Password : ${password.value}`)
)
saveButton.setAttribute('download', 'TypePass.txt')
}
const onReload = () => {
location.reload();
return false;
}Don`t forget to save it
Fourth Step : Copy this file to HTML file you already created
<!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>TypePass</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"/>
</head>
<body class="bg-warning bg-opacity-50">
<div class="d-flex justify-content-center align-items-center
min-vh-100">
<div class="d-flex flex-column">
<div class="bg-primary shadow p-3 mb-5 bg-body-tertiary rounded">
<div class="position-relative py-2 px-4 text-bg-dark border border-dark ">
<h1 class="align-middle">TypePass Generator</h1>
</div>
<div class="mx-auto d-flex flex-column gap-10 mt-2">
<label for="passwordLength" class="text-uppercase fw-bold">Login Platform</label>
<input class="form-control form-control-lg" placeholder="e.g.gmail.com" id="desc"/>
<label for="passwordLength" class="text-uppercase fw-bold">Name</label>
<input class="form-control form-control-lg" placeholder="Input author name" id="name"/>
<label for="passwordLength" class="text-uppercase fw-bold">Username</label>
<input class="form-control form-control-lg" placeholder="Input your username" id="username"/>
<label for="passwordLength" class="text-uppercase fw-bold">Input Password Length</label>
<input class="form-control form-control-lg" placeholder="Input Length of password" id="passwordLength"
type="number"/>
<label for="password" class="text-uppercase fw-bold">Password</label>
<input class="form-control form-control-lg" id="password" type="password" placeholder="*************"
disabled/>
<button class="btn btn-danger fw-bold btn-lg mt-2"
onclick="getPassword()">GENERATE PASSWORD</button>
<a class="btn btn-success fw-bold btn-lg mt-2 "
onclick="savePassword()" id="saveButton">SAVE
PASSWORD</a>
<a class="btn btn-outline-light fw-bold btn-lg mt-2 "
onclick="onReload()" id="reloadButton">RELOAD</a>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Don't forget to save it
Last Step : Modify the layout and delete unused code
So this is just a simple code to create password generator machine and for the cost
is free btw.
Also you can hosting it with vercel for free deployments.
click here to see the result.
Summary
You can see the password generator is just consist a 2 file code JS and HTML but for the styling i'm using inline-css with Bootstrap and for the state process of the app is just like this
INPUT TYPE --> GENERATED --> SAVE (DOWNLOAD)
easy right.
Thank's For Reading
Quotes : Create a simple app to resolve a complex work.