popup added

niirmaaltwaatii · Jul 25, 2022 · acb4a5f · acb4a5f
1 parent aea69c1
commit acb4a5f
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 0 deletions.
diff --git a/popup/popup.html b/popup/popup.html
@@ -0,0 +1,41 @@
+<!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>Random Password Genarator</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<div class="well">
+		<label for="len">Password Length</label><br />
+		<input id="len" value="13" type="number" onKeyDown="if(this.value.length==4) return false;" class="form-control" />
+
+		<div>
+			<label for="upper">Contain Uppercase Letters</label>
+			<input id="upper" type="checkbox" checked />
+		</div>
+
+		<div>
+			<label for="lower">Contain Lowercase Letters</label>
+			<input id="lower" type="checkbox" checked />
+		</div>
+
+		<div>
+			<label for="number">Contain Numbers</label> <input id="number" type="checkbox" checked />
+		</div>
+
+		<div>
+			<label for="symbol">Contain Symbols</label>
+			<input id="symbol" type="checkbox" checked />
+		</div>
+
+		<div style="text-align: center;">
+			<button class="btn" id="generate">Generate Password</button><br/><span id="pword"></span><br/>
+			<button id="copy" class="btn">Copy</button>
+		</div>
+
+	</div>
+	<script src="script.js"></script>
+</body>
+</html>
diff --git a/popup/script.js b/popup/script.js
@@ -0,0 +1,72 @@
+    const pwEl = document.getElementById("pword");
+    const copyEl = document.getElementById("copy");
+    const lenEl = document.getElementById("len");
+    const upperEl = document.getElementById("upper");
+    const lowerEl = document.getElementById("lower");
+    const numberEl = document.getElementById("number");
+    const symbolEl = document.getElementById("symbol");
+    const generateEl = document.getElementById("generate");
+
+    const upperLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const lowerLetters = "abcdefghijklmnopqrstuvwxyz";
+    const numbers = "0123456789";
+    const symbols = "!@#$%^&*()_+=[]";
+
+    function getLowercase() {
+        return lowerLetters[Math.floor(Math.random() * lowerLetters.length)];
+    }
+
+    function getUppercase() {
+        return upperLetters[Math.floor(Math.random() * upperLetters.length)];
+    }
+
+    function getNumber() {
+        return numbers[Math.floor(Math.random() * numbers.length)];
+    }
+
+    function getSymbol() {
+        return symbols[Math.floor(Math.random() * symbols.length)];
+    }
+
+    function generatePassword() {
+        const len = lenEl.value;
+        let password = "";
+
+        for (let i = 0; i < len; i++) {
+            const x = generateX();
+            password += x;
+        }
+
+        pwEl.innerText = password;
+    }
+
+    function generateX() {
+        const xs = [];
+        upperEl.checked && xs.push(getUppercase());
+        lowerEl.checked && xs.push(getLowercase());
+        numberEl.checked && xs.push(getNumber());
+        symbolEl.checked && xs.push(getSymbol());
+
+        if (xs.length === 0)
+            return "";
+
+        return xs[Math.floor(Math.random() * xs.length)];
+    }
+
+    generateEl.addEventListener("click", generatePassword);
+
+    copyEl.addEventListener("click", () => {
+        const textarea = document.createElement("textarea");
+        const password = pwEl.innerText;
+
+        if (!password) {
+            return;
+        }
+
+        textarea.value = password;
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        textarea.remove();
+        alert("Password copied to clipboard");
+    });
diff --git a/popup/style.css b/popup/style.css
@@ -0,0 +1,33 @@
+<style>
+    input[type=number],
+    span {
+        width: 100%;
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    .btn {
+        width: 60%;
+        background-color: #4CAF50;
+        color: white;
+        padding: 14px 20px;
+        margin: 8px 0;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    .btn:hover {
+        background-color: #45a049;
+    }
+
+    .well {
+        border-radius: 5px;
+        background-color: #f2f2f2;
+        padding: 20px;
+    }