enub/password_gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: enub:112a2ab093393a37cb3a1a55d7a54d7dd80b4fdb
Branches Tags
enub:main
...
compare: enub:04ef632c10f7caf5193a8b8aebf14491f2ee5454
Branches Tags
enub:main

2 Commits
112a2ab093 ... 04ef632c10

Author SHA1 Message Date
Armin
04ef632c10 Merge pull request 'added existing files' (#1) from start into main 
Reviewed-on: #1
 2025-04-17 16:02:59 +02:00
enub
5f08a1c346 added existing files 
base html
pw/page generator script
basic style
 2025-04-17 16:00:56 +02:00
3 changed files with 196 additions and 0 deletions
Show Stats Expand all files Collapse all files

17
index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Passwort Generator</title>
</head>
<body>
<h1>Passwort Generator</h1>
<div class="password-container"></div>
<script src="script.js"></script>
</body>
</html>

103
script.js Normal file
View File

@ -0,0 +1,103 @@
function generatePassword(len, specialChar) {
// Define character sets for each type of character
const lowercase = 'abcdefghijklmnopqrstuvwxyz';
const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const numbers = '0123456789';
let pool = lowercase + uppercase + numbers;
let password = '';
if (specialChar) {
// Adding special Characters to the pool;
const specialCharInput = specialChar;
pool += specialCharInput;
// Initialize the password with one character of each type
password = lowercase.charAt(Math.floor(Math.random() * lowercase.length)) +
uppercase.charAt(Math.floor(Math.random() * uppercase.length)) +
numbers.charAt(Math.floor(Math.random() * numbers.length)) +
specialCharInput.charAt(Math.floor(Math.random() * specialCharInput.length));
} else {
// Initialize the password with one character of each type
password = lowercase.charAt(Math.floor(Math.random() * lowercase.length)) +
uppercase.charAt(Math.floor(Math.random() * uppercase.length)) +
numbers.charAt(Math.floor(Math.random() * numbers.length));
}
// Fill the rest of the password with random characters
for (let i = password.length; i < len; i++) {
password += pool.charAt(Math.floor(Math.random() * pool.length));
}
// Shuffle the password to randomize the order of characters
return password.split('').sort(() => Math.random() - 0.5).join('');
}
function generatePasswords(n, len, specialChar) {
const passwords = [];
for (let i = 0; i < n; i++) {
passwords.push(generatePassword(len, specialChar));
}
return passwords;
}
const queryParams = new URLSearchParams(window.location.search);
const n = queryParams.get('n') || 4;
const len = queryParams.get('len') || 14;
const specialChar = queryParams.get('specialChar');
const passwords = generatePasswords(n, len, specialChar);
if (!queryParams.get('n')) {
document.querySelector('.password-container').innerHTML = `
<form action="${window.location.href}" method="GET">
<label for="n">Anzahl der Passwörter:</label>
<input type="number" id="n" name="n" value="${n}" min="1" max="128" placeholder="4" value="4" required><br>
<label for="len">Länge der Passwörter:</label>
<input type="number" id="len" name="len" value="${len}" min="4" max="32" placeholder="16" value="16" required><br>
<label for="specialChar">Sonderzeichen:</label>
<input type="checkbox" id="specialBool" checked>
<input type="text" id="specialChar" name="specialChar" value="@%+!#$?:.(){}[]\/\\" required onblur="fillIfEmpty()">
<input type="submit" value="Generieren">
</form>
`;
} else {
const passwordContainer = document.querySelector('.password-container');
passwords.forEach(password => {
const passwordElement = document.createElement('div');
passwordElement.classList.add('password');
passwordElement.innerHTML = `
<span class="password-text">${password}</span>
<button class="copy-button">Kopieren</button>
`;
passwordElement.querySelector('.copy-button').addEventListener('click', () => {
copyToClipboard(passwordElement.querySelector('.password-text'));
});
passwordContainer.appendChild(passwordElement);
});
}
function copyToClipboard(element) {
const textArea = document.createElement('textarea');
textArea.value = element.innerText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
const button = element.parentElement.querySelector('.copy-button');
button.textContent = 'Kopiert!';
button.style.backgroundColor = 'grey';
}
document.getElementById('specialBool').onchange = function() {
document.getElementById('specialChar').disabled = !this.checked;
}
function fillIfEmpty() {
var inputElement = document.getElementById('specialChar');
if (inputElement.value === '') {
inputElement.value = '@%+!#$?:.(){}[]\/\\';
}
}

76
style.css Normal file
View File

@ -0,0 +1,76 @@
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
background-color: #6ea68f;
color: #fff;
padding: 20px;
margin: 0;
}
.password-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.password {
margin-bottom: 10px;
font-weight: bold;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
display: flex;
justify-content: space-between;
}
.password-text {
font-family: 'Courier New', monospace;
}
.copy-button {
background-color: #6ea68f;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
font-size: 12px;
}
label, input {
display: block;
margin-bottom: 10px;
}
label {
font-weight: bold;
}
input[type="number"] {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
background-color: #6ea68f;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #258cd1;
}