From be17a36619dca806fb6345e44d89c0b195a83507 Mon Sep 17 00:00:00 2001
From: Bruno Kraychete da Costa <1355373+brunokc@users.noreply.github.com>
Date: Fri, 27 Oct 2023 12:50:21 -0700
Subject: [PATCH] Rework the generator form

- Lots of improvements to the layout.
- It is now more responsive.
- Added password generator criteria.
- Options button for password becomes a caret (gets smaller) for better
visibility of the whole password on mobile.

Also:

- Renamed style.css to connectify.css.
- Moved GitHub ribbon to the right on mobile.
- JavaScript cleanup.
- Normalized password strength meter to the 0-100 range.
- Added a couple of additional password strength calculation algorithms
to play with (not being used yet).
---
 css/connectify.css       | 126 ++++++++++++++++++
 css/style.css            | 109 ----------------
 index.html               | 273 +++++++++++++++++++++++++--------------
 js/connectify.js         |  45 +++----
 js/password-generator.js |  34 +++--
 js/password-meter.js     | 119 +++++++++++++++--
 6 files changed, 454 insertions(+), 252 deletions(-)
 create mode 100644 css/connectify.css
 delete mode 100644 css/style.css

diff --git a/css/connectify.css b/css/connectify.css
new file mode 100644
index 0000000..718541b
--- /dev/null
+++ b/css/connectify.css
@@ -0,0 +1,126 @@
+#title,
+#linkcard,
+.linkcard-buttons,
+#exampleContainer {
+    text-align: center;
+}
+
+#about,
+#contact {
+    max-width: 85%;
+    margin: 0 auto;
+}
+
+/* Don't let the form get so wide and keep it centered */
+#generator {
+    min-width: 20rem;
+    max-width: 60rem;
+    margin: auto;
+}
+
+.linkcard {
+    margin: 1em;
+}
+
+.footer {
+    text-align: center;
+    padding: 30px 0;
+    margin-top: 70px;
+    border-top: 1px solid #e5e5e5;
+    background-color: #f5f5f5;
+}
+
+.footer p {
+    margin-bottom: 0;
+    color: #777;
+}
+
+.footer-links {
+    margin: 10px 0;
+}
+
+.footer-links li {
+    display: inline;
+    padding: 0 2px;
+}
+
+.footer-links li:first-child {
+    padding-left: 0;
+}
+
+.footer .qrcode-copyright {
+    color: #999999;
+}
+
+.form-label {
+    font-weight: bold;
+}
+
+/*  */
+/* .navbar a, */
+.navbar object {
+    /* --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
+    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
+    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
+    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
+    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
+    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1); */
+
+    /* --bs-emphasis-color-rgb: 0, 0, 0; */
+    /* --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65); */
+    /* --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8); */
+    /* --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3); */
+    /* --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1); */
+    /* --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1); */
+    /* --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1); */
+
+    background-color: rgba(var(--bs-dark-rgb), 1);
+    /* color: rgba(var(--bs-dark-rgb), 1); */
+    /* --bs-navbar-active-color: #fff; */
+    /* --bs-navbar-brand-color: #fff; */
+    /* --bs-navbar-brand-hover-color: #fff; */
+
+    /* --bs-nav-link-color: #fff; */
+    /* --bs-nav-link-hover-color: var(--bs-navbar-hover-color); */
+
+    /* Dark */
+    /* --bs-navbar-color: rgba(255, 255, 255, 0.55);
+    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
+    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
+    --bs-navbar-active-color: #fff;
+    --bs-navbar-brand-color: #fff;
+    --bs-navbar-brand-hover-color: #fff;
+    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1); */
+}
+
+/* Make carousel wide enough so navigation arrows don't clobber content */
+#templateCarousel {
+    min-width: 320px;
+    width: 320px;
+}
+
+.col-centered {
+    float: none;
+    margin: 0 auto;
+ }
+
+.modal-backdrop {
+    opacity: 0.75 !important;
+}
+
+/*
+    Make the text on labels inlined into text controls smaller.
+    This should affects just the inlined checkbox labels we use with textboxes
+*/
+.input-group-text label,
+.dropdown-menu label {
+    font-size: calc(var(--bs-body-font-size) * 0.8);
+}
+
+/*
+.dropdown-menu .input-group-text {
+    border: 0;
+    background-color: inherit;
+    align-items:start;
+    text-align: start;
+} */
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 2b166f8..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,109 +0,0 @@
-#title,
-#linkcard,
-.linkcard-buttons,
-#exampleContainer {
-    text-align: center;
-}
-
-#about,
-#contact,
-#generator {
-    width: 80%;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.linkcard {
-    margin: 1em;
-}
-
-#qrcode,
-#download,
-#print {
-    display: none;
-}
-
-.footer {
-    text-align: center;
-    padding: 30px 0;
-    margin-top: 70px;
-    border-top: 1px solid #e5e5e5;
-    background-color: #f5f5f5;
-}
-
-.footer p {
-    margin-bottom: 0;
-    color: #777;
-}
-
-.footer-links {
-    margin: 10px 0;
-}
-
-.footer-links li {
-    display: inline;
-    padding: 0 2px;
-}
-
-.footer-links li:first-child {
-    padding-left: 0;
-}
-
-.footer .qrcode-copyright {
-    color: #999999;
-}
-
-.form-label {
-    font-weight: bold;
-}
-
-/* Make carousel wide enough so navigation arrows don't clobber content */
-#templateCarousel {
-    width: 320px;
-}
-
-/* Center elements inside the carousel */
-.carousel-item {
-    text-align: center;
-}
-
-/* Dark arrows for the carousel */
-#templateCarousel .carousel-control-prev,
-.carousel-control-next {
-    filter: invert(100%);
-}
-
-.modal-backdrop {
-    opacity: 0.75 !important;
-}
-
-/*
-    Make the text on labels inlined into text controls smaller.
-    This should affects just the inlined checkbox labels we use with textboxes
-*/
-.input-group-text label {
-    font-size: calc(var(--bs-body-font-size) * 0.8);
-}
-
-/*
-@media (min-width: 768px) and (max-width: 979px) {
-    #about,
-    #contact,
-    #generator {
-        width: 60%;
-    }
-}
-
-@media (max-width: 767px) {
-    #about,
-    #contact,
-    #generator {
-        width: 80%;
-    }
-
-    .footer {
-        margin-left: -20px;
-        margin-right: -20px;
-    }
-}
-*/
\ No newline at end of file
diff --git a/index.html b/index.html
index 79529d6..cba1652 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
   <title>ConnectiFy</title>
   <link rel="stylesheet" type="text/css" media="all" href="./css/bootstrap-5.3.2.min.css">
   <link rel="stylesheet" href="./css/bootstrap-icons-1.11.1.min.css">
-  <link rel="stylesheet" type="text/css" media="all" href="./css/style.css">
+  <link rel="stylesheet" type="text/css" media="all" href="./css/connectify.css">
   <link rel="stylesheet" type="text/css" media="all" href="./css/forkongithub.css">
   <link rel="stylesheet" type="text/css" media="all" href="./css/password-meter.css">
   <link rel="stylesheet" type="text/css" media="all" href="./css/advanced-bootstrap-range.css">
@@ -20,10 +20,11 @@
 </head>
 
 <body>
-  <nav class="navbar bg-dark navbar-expand-lg d-print-none" data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg bg-dark d-print-none" data-bs-theme="dark">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">
         <img alt="connectify logo" widht="60" height="40" src="./images/connectify-logo-xxs.png">
+        <!-- <object class="align-middle" width="60" height="40" data="./images/connectify-logo.svg"></object> -->
         ConnectiFy
       </a>
       <div id="navbar" class="collapse navbar-collapse">
@@ -39,7 +40,7 @@
     </div>
   </nav>
 
-  <div class="fork-github-ribbon float-end d-print-none">
+  <div class="fork-github-ribbon text-end d-print-none">
     <span id="forkongithub">
       <a href="https://github.com/brunokc/connectify/">Fork me on GitHub</a>
     </span>
@@ -49,106 +50,166 @@
     <section id="generator">
       <h1 id="title" class="my-4 d-print-none">ConnectiFy</h1>
       <form id="form" class="d-print-none">
-        <div class="row">
-          <div class="col my-auto">
-            <div class="form-group has-feedback">
-              <label for="ssid" class="form-label">SSID</label>
-              <div class="input-group mb-3">
-                <span id="basic-addon-ssid" class="input-group-text"><i class="bi bi-reception-4"></i></span>
-                <input type="text" id="ssid" name="ssid" class="form-control" placeholder="SSID"
-                  aria-describedby="basic-addon-ssid" required>
-                <div class="input-group-text" data-toggle="tooltip" title="Is your network hidden?">
-                  <input class="form-check-input m-auto me-1" type="checkbox" id="hidden">
-                  <label class="form-label m-auto" for="hidden">Hidden</label>
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-md-8">
+              <div class="form-group">
+                <label for="ssid" class="form-label">SSID</label>
+                <div class="input-group mb-3">
+                  <span id="basic-addon-ssid" class="input-group-text"><i class="bi bi-reception-4"></i></span>
+                  <input type="text" id="ssid" name="ssid" class="form-control" placeholder="SSID"
+                    aria-describedby="basic-addon-ssid" required>
+                  <div class="input-group-text" data-toggle="tooltip" title="Is your network hidden?">
+                    <input class="form-check-input m-auto me-1" type="checkbox" id="hidden">
+                    <label class="form-label m-auto" for="hidden">Hidden</label>
+                  </div>
                 </div>
               </div>
-            </div>
 
-            <div class="form-group mb-3">
-              <label for="encryption" class="form-label">Encryption</label>
-              <div class="input-group">
-                <select name="encryption" id="encryption" class="form-select">
-                  <option value="WPA">WPA/WPA2/WPA3</option>
-                  <option value="WEP">WEP</option>
-                  <option value="nopass">None</option>
-                </select>
+              <div class="form-group mb-3">
+                <label for="encryption" class="form-label">Encryption</label>
+                <div class="input-group">
+                  <select name="encryption" id="encryption" class="form-select">
+                    <option value="WPA">WPA/WPA2/WPA3</option>
+                    <option value="WEP">WEP</option>
+                    <option value="nopass">None</option>
+                  </select>
+                </div>
               </div>
-            </div>
 
-            <div class="form-group has-feedback mb-3" id="password-p">
-              <label for="password" class="form-label">Password</label>
-              <div class="input-group">
-                <span id="basic-addon-password" class="input-group-text"><i class="bi bi-lock-fill"></i></span>
-                <input type="password" id="password" name="password" class="form-control font-monospace"
-                  placeholder="Password" autocomplete="off" aria-describedby="passwordHelp" required>
-                <div class="input-group-text" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
-                  <input class="form-check-input m-auto me-1" type="checkbox" id="autogenpass" checked>
-                  <label class="form-label m-auto" for="autogenpass">Autogenerate</label>
+              <div class="form-group mb-3" id="password-p">
+                <label for="password" class="form-label">Password</label>
+                <div class="input-group">
+                  <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+                  <input type="password" id="password" name="password" class="form-control font-monospace"
+                    placeholder="Password" autocomplete="off" aria-describedby="passwordHelp" required>
+                    <!--
+                  <div class="input-group-text" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
+                  <!-- <div class="textbox-inline-checkbox" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
+                    <input class="form-check-input m-auto me-1" type="checkbox" id="autogenpass" checked>
+                    <label class="form-label m-auto" for="autogenpass">Autogenerate</label>
+                  </div>
+                -->
+                  <button class="btn btn-outline-secondary dropdown-toggle rounded-end d-none d-sm-block"
+                    type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                    Options
+                  </button>
+                  <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split d-sm-none"
+                    type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
+                    aria-expanded="false">
+                      <span class="visually-hidden">Toggle Dropdown</span>
+                    </button>
+                  <ul class="dropdown-menu dropdown-menu-end">
+                    <li>
+                      <div class="dropdown-item" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
+                        <input class="form-check-input me-1" type="checkbox" id="autogenpass" checked>
+                        <label class="form-label" for="autogenpass">Autogenerate</label>
+                      </div>
+                    </li>
+                    <li><hr class="dropdown-divider"></li>
+                    <li>
+                      <div class="dropdown-item ms-3" data-toggle="tooltip" title="Use lowercase characters">
+                        <input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
+                          id="passUseLowercase" checked>
+                        <label class="form-label" for="passUseLowercase">Use lowercase</label>
+                      </div>
+                    </li>
+                    <li>
+                      <div class="dropdown-item ms-3" data-toggle="tooltip" title="Use uppercase characters">
+                        <input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
+                          id="passUseUppercase" checked>
+                        <label class="form-label" for="passUseUppercase">Use uppercase</label>
+                      </div>
+                    </li>
+                    <li>
+                      <div class="dropdown-item ms-3" data-toggle="tooltip" title="Use digits">
+                        <input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
+                          id="passUseDigits" checked>
+                        <label class="form-label" for="passUseDigits">Use digits</label>
+                      </div>
+                    </li>
+                    <li>
+                      <div class="dropdown-item ms-3" data-toggle="tooltip" title="Use symbols">
+                        <input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
+                          id="passUseSymbols" checked>
+                        <label class="form-label" for="passUseSymbols">Use symbols</label>
+                      </div>
+                    </li>
+                    <li>
+                      <div class="dropdown-item ms-3" data-toggle="tooltip" title="Use brackets">
+                        <input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
+                          id="passUseBrackets" checked>
+                        <label class="form-label" for="passUseBrackets">Use brackets</label>
+                      </div>
+                    </li>
+                  </ul>
                 </div>
-              </div>
-              <div class="form-group">
-                <!-- <label for="passwordLength" class="form-label">Password Length</label> -->
-                <input id="passwordLength" type="range" class="form-range range-with-labels"
-                  title="Password length" min="12" max="22" step="1" value="16">
-                <div class="range-labels text-body-tertiary"></div>
-              </div>
-              <div>
-                <div class="password-meter">
-                  <div class="meter-section rounded me-2"></div>
-                  <div class="meter-section rounded me-2"></div>
-                  <div class="meter-section rounded me-2"></div>
-                  <div class="meter-section rounded"></div>
+
+                <div class="form-group">
+                  <!-- <label for="passwordLength" class="form-label">Password Length</label> -->
+                  <input id="passwordLength" type="range" title="Password length"
+                    min="12" max="22" step="1" value="16"
+                    class="form-range range-with-labels range-with-notches pass-auto-gen-control">
+                  <!-- <div class="range-notches text-body-tertiary"></div> -->
+                  <div class="range-labels text-body-tertiary"></div>
                 </div>
-                <div id="passwordHelp" class="form-text text-muted">
-                  Use 12 or more characters with a mix of letters, numbers & symbols.
+                <div>
+                  <div class="password-meter">
+                    <div class="meter-section rounded me-2" data-toogle="tooltip" title="Weak"></div>
+                    <div class="meter-section rounded me-2" data-toogle="tooltip" title="Medium"></div>
+                    <div class="meter-section rounded me-2" data-toogle="tooltip" title="Good"></div>
+                    <div class="meter-section rounded" data-toogle="tooltip" title="Very good"></div>
+                  </div>
+                  <div id="passwordHelp" class="form-text text-muted">
+                    Use 12 or more characters with a mix of letters, numbers & symbols.
+                  </div>
                 </div>
+                <!-- <div class="input-group" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
+                  <input class="form-check-input me-1" type="checkbox" id="autogenpass" checked>
+                  <label class="form-label" for="autogenpass">Autogenerate Password</label>
+                </div> -->
               </div>
-              <!-- <div class="input-group" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
-                <input class="form-check-input me-1" type="checkbox" id="autogenpass" checked>
-                <label class="form-label" for="autogenpass">Autogenerate Password</label>
-              </div> -->
             </div>
-            <!-- <div class="form-check mb-3">
-            </div> -->
-          </div>
 
-          <div class="col-auto">
-            <div class="form-group has-feedback mb-3" id="template-p">
-              <label class="form-label">LinkCard Template</label>
-              <div class="input-group">
-                <div id="templateCarousel" class="carousel slide p-2">
-                  <div class="carousel-inner">
-                    <div class="carousel-item active">
-                      <object type="image/svg+xml" data="./templates/card.svg"></object>
-                    </div>
-                    <div class="carousel-item">
-                      <object type="image/svg+xml" data="./templates/card2-black.svg"></object>
-                    </div>
-                    <div class="carousel-item">
-                      <object type="image/svg+xml" data="./templates/card2-white.svg"></object>
-                    </div>
-                    <div class="carousel-item">
-                      <object type="image/svg+xml" data="./templates/card3.svg"></object>
-                    </div>
-                    <div class="carousel-item">
-                      <object type="image/svg+xml" data="./templates/card4.svg"></object>
+            <div class="col-md-4">
+              <div class="form-group mb-3 text-center" id="template-p">
+                <label class="form-label">LinkCard Template</label>
+                <div class="input-group">
+                  <!-- Using dark theme to get dark previous/next arrows -->
+                  <div id="templateCarousel" class="carousel slide p-2 col-centered" data-bs-theme="dark">
+                    <div class="carousel-inner">
+                      <div class="carousel-item active">
+                        <object type="image/svg+xml" data="./templates/card.svg"></object>
+                      </div>
+                      <div class="carousel-item">
+                        <object type="image/svg+xml" data="./templates/card2-black.svg"></object>
+                      </div>
+                      <div class="carousel-item">
+                        <object type="image/svg+xml" data="./templates/card2-white.svg"></object>
+                      </div>
+                      <div class="carousel-item">
+                        <object type="image/svg+xml" data="./templates/card3.svg"></object>
+                      </div>
+                      <div class="carousel-item">
+                        <object type="image/svg+xml" data="./templates/card4.svg"></object>
+                      </div>
                     </div>
+                    <button class="carousel-control-prev" type="button" data-bs-target="#templateCarousel" data-bs-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                      <span class="visually-hidden">Previous</span>
+                    </button>
+                    <button class="carousel-control-next" type="button" data-bs-target="#templateCarousel" data-bs-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="visually-hidden">Next</span>
+                    </button>
                   </div>
-                  <button class="carousel-control-prev" type="button" data-bs-target="#templateCarousel" data-bs-slide="prev">
-                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                    <span class="visually-hidden">Previous</span>
-                  </button>
-                  <button class="carousel-control-next" type="button" data-bs-target="#templateCarousel" data-bs-slide="next">
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                    <span class="visually-hidden">Next</span>
-                  </button>
                 </div>
               </div>
             </div>
-          </div>
 
-          <div class="form-group text-center">
-            <button id="generate" type="submit" class="btn btn-primary">Generate LinkCard</button>
+            <div class="form-group text-center">
+              <button id="generate" type="submit" class="btn btn-primary">Generate LinkCard</button>
+            </div>
           </div>
         </div>
       </form>
@@ -167,7 +228,7 @@ <h5 class="modal-title">Your LinkCard</h5>
               </p>
             </div>
             <div class="modal-footer d-print-none">
-              <a href="#" id="download" class="btn btn-primary" target="_blank" mime-type="image/svg+xml"
+              <a href="#" id="download" class="btn btn-primary" target="_blank" type="image/svg+xml"
                 data-toggle="tooltip" title="Download your LinkCard as an SVG image">Download</a>
               <a href="javascript:window.print()" class="btn btn-primary" data-toggle="tooltip"
                 title="Print the QR code">Print</a>
@@ -257,6 +318,7 @@ <h1 class="anchor mt-3">Contact</h1>
 
   <script type="text/javascript">
     let oldpassvalue = "";
+
     $(document).ready(() => {
       $('#form').on("submit", function() {
         generateCardAsync();
@@ -291,24 +353,33 @@ <h1 class="anchor mt-3">Contact</h1>
       }
 
       $("#autogenpass").on("change", function() {
-        const pwd = $("#password");
-        if ($(this).is(":checked")) {
-          const length = parseInt($("#passwordLength").val());
-          const password = generatePassword(length);
+        const autogenDisabled = !$(this).is(":checked");
 
-          // Save any previous typed password
-          oldpassvalue = pwd.val();
-          pwd.val(password);
-          pwd.attr("type", "text");
+        // Enable/disable subordinate controls
+        $(".pass-auto-gen-control")
+          .prop({ disabled: autogenDisabled })
+          .parent().toggleClass("disabled", autogenDisabled);
 
-          $("#passwordLength").prop("disabled", false);
-        } else {
+        const pwd = $("#password");
+        if (autogenDisabled) {
           // Restore any previous typed password
           pwd.attr("type", "password");
           pwd.val(oldpassvalue);
           oldpassvalue = "";
+        } else {
+          const length = parseInt($("#passwordLength").val());
+          const password = generatePassword(length, {
+            useLowercase: $("#passUseLowercase").is(":checked"),
+            useUppercase: $("#passUseUppercase").is(":checked"),
+            useDigits: $("#passUseDigits").is(":checked"),
+            useSymbols: $("#passUseSymbols").is(":checked"),
+            useBrackets: $("#passUseBrackets").is(":checked"),
+          });
 
-          $("#passwordLength").prop("disabled", true);
+          // Save any previous typed password
+          oldpassvalue = pwd.val();
+          pwd.val(password);
+          pwd.attr("type", "text");
         }
 
         // For some reason, $("#password").trigger("input") is not working, so
@@ -317,9 +388,11 @@ <h1 class="anchor mt-3">Contact</h1>
         triggerInput("password");
       });
 
+      $(".pass-auto-gen-control").on("change", function() {
+        $("#autogenpass").trigger("change");
+      });
+
       $("#passwordLength").on("input", function() {
-        const newLength = $(this).val();
-        $("#passwordLengthDisplay").text(newLength);
         // Trigger 'change' event on the autogenerate checkbox so a new password
         // is generated and its strength is re-evaluated.
         $("#autogenpass").trigger("change");
diff --git a/js/connectify.js b/js/connectify.js
index a9d74e6..720a62c 100644
--- a/js/connectify.js
+++ b/js/connectify.js
@@ -1,12 +1,11 @@
 function escapeString(string) {
-    var to_escape = ['\\', ';', ',', ':', '"'];
-    var hex_only = /^[0-9a-f]+$/i;
-    var output = "";
-    for (var i = 0; i < string.length; i++) {
+    const to_escape = ['\\', ';', ',', ':', '"'];
+    const hex_only = /^[0-9a-f]+$/i;
+    let output = "";
+    for (let i = 0; i < string.length; i++) {
         if ($.inArray(string[i], to_escape) != -1) {
             output += '\\' + string[i];
-        }
-        else {
+        } else {
             output += string[i];
         }
     }
@@ -15,16 +14,16 @@ function escapeString(string) {
 
 function generateQRCode(ssid, encryption, password, hidden) {
     // https://github.com/zxing/zxing/wiki/Barcode-Contents#wi-fi-network-config-android-ios-11
-    var qrstring = 'WIFI:S:' + escapeString(ssid) + ';T:' + encryption +
+    let qrstring = 'WIFI:S:' + escapeString(ssid) + ';T:' + encryption +
         ';P:' + escapeString(password) + ';';
     if (hidden) {
         qrstring += 'H:true';
     }
     qrstring += ';';
 
-    var typeNumber = 0; // autodetect
-    var errorCorrectionLevel = 'L';
-    var qr = qrcode(typeNumber, errorCorrectionLevel);
+    const typeNumber = 0; // autodetect
+    const errorCorrectionLevel = 'L';
+    const qr = qrcode(typeNumber, errorCorrectionLevel);
     qr.addData(qrstring);
     qr.make();
     return qr.createSvgTag();
@@ -45,22 +44,22 @@ async function urlContentToBase64(url) {
     });
 }
 
-// Find any external SVG and inline them into the primary one.
-// Currently we only look for external SVGs onlin in <image> tags.
+// Find any external resources (SVGs and PNGs for now) and inline them into the SVG.
+// Currently we only look for external resources in <image> elements.
 async function inlineSVGAsync(svg, relativePath) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(svg, "text/xml");
     const images = doc.getElementsByTagName("image");
-    for (var i = 0; i < images.length; i++) {
-        let innerImg = images[i].href.baseVal;
+    for (let img of images) {
+        let innerImg = img.href.baseVal;
         const path = relativePath + "/" + innerImg;
         if (innerImg.endsWith(".svg")) {
             const innerElement = await fetch(path);
             const innerContent = await innerElement.text();
-            images[i].setAttribute("href", encodeSVG(innerContent));
+            img.setAttribute("href", encodeSVG(innerContent));
         } else if (innerImg.endsWith(".png")) {
             const innerContentDataUrl = await urlContentToBase64(path);
-            images[i].setAttribute("href", innerContentDataUrl);
+            img.setAttribute("href", innerContentDataUrl);
         }
     }
 
@@ -98,22 +97,16 @@ async function generateCardAsync() {
     objtag.data = encodedSVG;
     $('#linkcard').html(objtag);
 
-    // $('#showssid').text('SSID: ' + ssid);
-    // $('#save').show();
-    // $('#print').css('display', 'inline-block');
-
-    var e = $('#download');
+    const e = $('#download');
     e.attr('href', encodedSVG);
-    e.attr('download', 'connectify-' + ssid + '.svg');
-    e.css('display', 'inline-block');
+    e.attr('download', 'connectify-linkcard-' + ssid + '.svg');
 }
 
 async function generateCardFromTemplateAsync(cardData) {
-    var req = await fetch(cardData.templateUrl);
-    var contents = await req.text();
+    const req = await fetch(cardData.templateUrl);
+    let contents = await req.text();
     contents = contents
         .replace("connectify-qrcode-placeholder.png", encodeSVG(cardData.qrcodeData))
-        // .replace("{svg_qrcode_placeholder}", cardData.qrcodeData)
         .replace("{network_name}", cardData.ssid)
         .replace("{network_password}", cardData.password)
 
diff --git a/js/password-generator.js b/js/password-generator.js
index 6bdb9e8..ccfa1ab 100644
--- a/js/password-generator.js
+++ b/js/password-generator.js
@@ -8,7 +8,7 @@ function genRandom(max) {
 }
 
 // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
-//  Fisher-Yates (aka Knuth) Shuffle.
+// Fisher-Yates (aka Knuth) Shuffle.
 function shuffle(str) {
     let array = str.split("");
     let index = array.length;
@@ -24,17 +24,35 @@ function shuffle(str) {
     return array.join("");
 }
 
-function generatePassword(length) {
-    const specials = '!@#$%^&*()_+{}:"<>?|[];\',./`~';
+function generatePassword(length, options) {
+    if (!options) {
+        options = {
+            useLowercase: true,
+            useUppercase: true,
+            useDigits: true,
+            useSymbols: true,
+            useBrackets: true,
+        };
+    }
+    // All symbols: '`~!@#$%^&*()-_=+[{]}\|;:\'",<.>/?'
+    const symbols = '`~!@#$%^&*-_=+\|;:\'",./?';
+    const brackets = '(){}<>[]';
     const lowercase = 'abcdefghijklmnopqrstuvwxyz';
     const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-    const numbers = '0123456789';
-    const all = shuffle(specials + lowercase + uppercase + numbers);
+    const digits = '0123456789';
+    let pool = (options.useLowercase ? lowercase : "" )
+        + (options.useUppercase ? uppercase : "" )
+        + (options.useDigits ? digits : "")
+        + (options.useSymbols ? symbols : "")
+        + (options.useBrackets ? brackets : "");
+    pool = shuffle(pool);
 
     let password = "";
-    for (var i = 0; i < length; i++) {
-        var idx = genRandom(all.length);
-        password += all[idx];
+    if (pool.length) {
+        for (var i = 0; i < length; i++) {
+            var idx = genRandom(pool.length);
+            password += pool[idx];
+        }
     }
 
     return password;
diff --git a/js/password-meter.js b/js/password-meter.js
index bdc8139..60b57c0 100644
--- a/js/password-meter.js
+++ b/js/password-meter.js
@@ -1,5 +1,6 @@
 //
 // From: https://www.codehim.com/bootstrap/bootstrap-5-password-strength-meter/
+// Password strength normalized to 0-100
 //
 const passwordInput = document.getElementById('password');
 const meterSections = document.querySelectorAll('.meter-section');
@@ -16,26 +17,26 @@ function updateMeter(event) {
     });
 
     // Add the appropriate strength class based on the strength value
-    if (strength >= 1) {
+    if (strength >= 20) {
         meterSections[0].classList.add('weak');
     }
-    if (strength >= 2) {
+    if (strength >= 40) {
         meterSections[1].classList.add('medium');
     }
-    if (strength >= 3) {
+    if (strength >= 60) {
         meterSections[2].classList.add('strong');
     }
-    if (strength >= 4) {
+    if (strength >= 80) {
         meterSections[3].classList.add('very-strong');
     }
 }
 
 function calculatePasswordStrength(password) {
-    const lengthWeight = 0.2;
-    const uppercaseWeight = 0.25;
-    const lowercaseWeight = 0.25;
-    const numberWeight = 0.35;
-    const symbolWeight = 0.5;
+    const lengthWeight = 3;
+    const uppercaseWeight = 3.75;
+    const lowercaseWeight = 3.75;
+    const numberWeight = 5.25;
+    const symbolWeight = 7.5;
 
     let strength = 0;
 
@@ -64,3 +65,103 @@ function calculatePasswordStrength(password) {
 
     return strength;
 }
+
+
+$.updatePasswordMeter = function(password,username,target) {
+    $.updatePasswordMeter._checkRepetition = function(pLen,str) {
+        res = ""
+        for ( i=0; i<str.length ; i++ ) {
+            repeated=true;
+            for (j=0;j < pLen && (j+i+pLen) < str.length;j++)
+                repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen));
+            if (j<pLen) repeated=false;
+            if (repeated) {
+                i+=pLen-1;
+                repeated=false;
+            }
+            else {
+                res+=str.charAt(i);
+            };
+        };
+
+        return res;
+    };
+
+    var score = 0;
+    var r_class = 'weak-password';
+
+    // password < 4
+    if (password.length < 4 || password.toLowerCase() == username.toLowerCase()) {
+        target.width(score + '%').removeClass("weak-password okay-password good-password strong-password"
+            ).addClass(r_class);
+        return true;
+    }
+
+    // password length
+    score += password.length * 4;
+    score += ($.updatePasswordMeter._checkRepetition(1, password).length - password.length) * 1;
+    score += ($.updatePasswordMeter._checkRepetition(2, password).length - password.length) * 1;
+    score += ($.updatePasswordMeter._checkRepetition(3, password).length - password.length) * 1;
+    score += ($.updatePasswordMeter._checkRepetition(4, password).length - password.length) * 1;
+
+    // password has 3 numbers
+    if (password.match(/(.*[0-9].*[0-9].*[0-9])/)) score += 5;
+
+    // password has 2 symbols
+    if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)) score += 5;
+
+    // password has Upper and Lower chars
+    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) score += 10;
+
+    // password has number and chars
+    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) score += 15;
+    //
+    // password has number and symbol
+    if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)) score += 15;
+
+    // password has char and symbol
+    if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)) score += 15;
+
+    // password is just a nubers or chars
+    if (password.match(/^\w+$/) || password.match(/^\d+$/)) score -= 10;
+
+    // verifing 0 < score < 100
+    score = score * 2;
+    if (score < 0) score = 0;
+    if (score > 100) score = 100;
+    if (score > 25) r_class = 'okay-password';
+    if (score > 50) r_class = 'good-password';
+    if (score > 75) r_class = 'strong-password';
+    target.width(score + '%').removeClass("weak-password okay-password good-password strong-password")
+        .addClass(r_class);
+    return true;
+};
+
+function scorePassword(pass) {
+    let score = 0;
+    if (!pass)
+        return score;
+
+    // award every unique letter until 5 repetitions
+    let letters = new Object();
+    for (let i = 0; i < pass.length; i++) {
+        letters[pass[i]] = (letters[pass[i]] || 0) + 1;
+        score += 5.0 / letters[pass[i]];
+    }
+
+    // bonus points for mixing it up
+    const variations = {
+        digits: /\d/.test(pass),
+        lower: /[a-z]/.test(pass),
+        upper: /[A-Z]/.test(pass),
+        nonWords: /\W/.test(pass),
+    };
+
+    let variationCount = 0;
+    for (var check in variations) {
+        variationCount += (variations[check] == true) ? 1 : 0;
+    }
+    score += (variationCount - 1) * 10;
+
+    return score;
+}