API tools faq
paste
nurjns

Simple Passwort Generator Website

nurjns
Dec 19th, 2024 (edited)
617
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="de">
  3. <head>
  4.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  5.     <title>Passwort-Generator</title>
  6.     <style>
  7.         body {
  8.             font-family: Arial, sans-serif;
  9.             background-color: #f4f4f9;
  10.             color: #333;
  11.             display: flex;
  12.             justify-content: center;
  13.             align-items: flex-start;
  14.             margin: 0;
  15.             padding-top: 200px;
  16.         }
  17.  
  18.         #length-slider {
  19.             width: 300px;
  20.         }
  21.  
  22.         .container {
  23.             text-align: center;
  24.             background-color: #ffffff;
  25.             border-radius: 10px;
  26.             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  27.             padding: 20px;
  28.             width: 350px;
  29.         }
  30.  
  31.         label, #length-display {
  32.             font-size: 18px;
  33.             font-weight: bold;
  34.             margin-bottom: 10px;
  35.             display: block;
  36.         }
  37.  
  38.         label {
  39.             font-weight: normal;
  40.         }
  41.  
  42.         #generate-button {
  43.             background-color: #007bff;
  44.             color: #fff;
  45.             border: none;
  46.             border-radius: 5px;
  47.             padding: 10px 20px;
  48.             font-size: 16px;
  49.             cursor: pointer;
  50.             transition: background-color 0.3s ease;
  51.         }
  52.  
  53.         #generate-button:hover {
  54.             background-color: #0056b3;
  55.         }
  56.  
  57.         #password-field {
  58.             text-align: center;
  59.             width: 80%;
  60.             margin: 15px auto;
  61.             border: 1px solid #ccc;
  62.             border-radius: 5px;
  63.             padding: 10px;
  64.             box-sizing: border-box;
  65.             background-color: #f9f9f9;
  66.             font-family: monospace;
  67.             font-size: 14px;
  68.         }
  69.  
  70.         #copied-text {
  71.             font-size: 16px;
  72.             color: #28a745;
  73.             display: none;
  74.         }
  75.  
  76.         #copied-text.active {
  77.             display: block;
  78.         }
  79.     </style>
  80. </head>
  81. <body>
  82.     <div class="container">
  83.         <label>Passwortlänge:</label>
  84.         <input type="range" min="8" max="30" value="12" class="slider" id="length-slider">
  85.         <span id="length-display">12</span><br>
  86.         <label><input type="checkbox" id="simple-specials"> Nur einfache Sonderzeichen</label><br><br>
  87.         <button id="generate-button">Passwort generieren</button>
  88.         <input type="text" id="password-field" value="" readonly>
  89.         <div id="copied-text">Passwort kopiert!</div>
  90.     </div>
  91.  
  92.     <script>
  93.     function generatePassword() {
  94.         const useSimpleSpecials = document.querySelector('#simple-specials').checked;
  95.         const simpleSpecials = ['!', '-'];
  96.         const fullSpecials = ['!', '$', '&', '-', ';', '*'];
  97.         const specialCharacters = useSimpleSpecials ? simpleSpecials : fullSpecials;
  98.         const numberCharacters = [...'234678'];
  99.         const upperLetterCharacters = [...'ACDEFHJKMNPQRTUWX'];
  100.         const lowerLetterCharacters = [...'abcdefhjkmnpqrtuwx'];
  101.         const letterCharacters = [...upperLetterCharacters, ...lowerLetterCharacters];
  102.         const possibleCharacters = [
  103.             ...numberCharacters,
  104.             ...letterCharacters,
  105.             ...specialCharacters
  106.         ];
  107.  
  108.         const passwordLength = document.querySelector('#length-slider').value;
  109.         const password = new Array(passwordLength);
  110.         const randomFrom = (arr, filterFn = null) => {
  111.             let filtered = filterFn ? arr.filter(filterFn) : arr;
  112.             return filtered[Math.floor(Math.random() * filtered.length)];
  113.         };
  114.  
  115.         // Anfang und Ende sind keine Sonderzeichen
  116.         const isAlphanumeric = c => /[a-zA-Z0-9]/.test(c);
  117.         password[0] = randomFrom(possibleCharacters, isAlphanumeric);
  118.         password[passwordLength - 1] = randomFrom(possibleCharacters, isAlphanumeric);
  119.         for (let i = 1; i < passwordLength - 1; i++) {
  120.             const prevCharIsSpecial = specialCharacters.includes(password[i - 1]);
  121.             password[i] = prevCharIsSpecial
  122.                 ? randomFrom(possibleCharacters, isAlphanumeric)
  123.                 : randomFrom(possibleCharacters);
  124.         }
  125.  
  126.         // Mindestanzahl Sonderzeichen: 1 bei einfachen, sonst 2 ab 10 Zeichen, 3 ab 15, usw.
  127.         const minSpecials = useSimpleSpecials ? 1 : Math.max(1, Math.floor(passwordLength / 5));
  128.         const isSpecial = c => specialCharacters.includes(c);
  129.         let specialsCount = password.filter(isSpecial).length;
  130.         let attempts = 0;
  131.  
  132.         while (specialsCount < minSpecials && attempts < passwordLength * 10) {
  133.             const index = Math.floor(Math.random() * (passwordLength - 2)) + 1;
  134.             const neighborIsSpecial = isSpecial(password[index - 1]) || isSpecial(password[index + 1]);
  135.             if (!isSpecial(password[index]) && !neighborIsSpecial) {
  136.                 password[index] = randomFrom(specialCharacters);
  137.                 specialsCount++;
  138.             }
  139.             attempts++;
  140.         }
  141.  
  142.         // Sicherstellen, dass mindestens ein Buchstabe und eine Zahl vorhanden sind
  143.         const nonSpecialIndexes = () => password.map((c, i) => i).filter(i => !isSpecial(password[i]));
  144.         if (!password.some(c => letterCharacters.includes(c))) {
  145.             password[randomFrom(nonSpecialIndexes())] = randomFrom(letterCharacters);
  146.         }
  147.  
  148.         if (!password.some(c => numberCharacters.includes(c))) {
  149.             password[randomFrom(nonSpecialIndexes())] = randomFrom(numberCharacters);
  150.         }
  151.  
  152.         return password.join('');
  153.     }
  154.  
  155.     document.querySelector('#generate-button').addEventListener('click', () => {
  156.         document.querySelector('#password-field').value = generatePassword();
  157.     });
  158.  
  159.     document.addEventListener('DOMContentLoaded', () => {
  160.         document.querySelector('#password-field').value = generatePassword();
  161.     });
  162.  
  163.     document.querySelector('#length-slider').addEventListener('input', () => {
  164.         document.querySelector('#length-display').textContent = document.querySelector('#length-slider').value;
  165.         document.querySelector('#password-field').value = generatePassword();
  166.     });
  167.  
  168.     document.querySelector('#simple-specials').addEventListener('change', () => {
  169.         document.querySelector('#password-field').value = generatePassword();
  170.     });
  171.  
  172.     document.querySelector('#password-field').addEventListener('click', () => {
  173.         document.querySelector('#password-field').select();
  174.         document.execCommand('copy');
  175.         $('#copied-text').slideDown(250).delay(1000).slideUp(250);
  176.     });
  177.     </script>
  178.     <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  179. </body>
  180. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!