From a1480d660289e6b0d3a966fea9eb7a0f7acb738c Mon Sep 17 00:00:00 2001
From: "severin.plewe@googlemail.com" <severin.plewe@googlemail.com>
Date: Wed, 22 Jan 2025 11:26:08 +0100
Subject: [PATCH] Changed zxcvbn to zxcvbn and modified button for password
 guidelines

---
 client/package.json                           |  6 ++--
 .../src/components/Login/PasswordStrength.vue | 34 +++++++++++++++----
 client/src/components/Login/RegisterForm.vue  | 10 +++---
 client/yarn.lock                              | 24 +++++++++----
 4 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/client/package.json b/client/package.json
index 75bd3f18aabd..2e9129365424 100644
--- a/client/package.json
+++ b/client/package.json
@@ -45,6 +45,9 @@
     "@types/jest": "^29.5.12",
     "@vueuse/core": "^10.5.0",
     "@vueuse/math": "^10.9.0",
+    "@zxcvbn-ts/core": "^3.0.4",
+    "@zxcvbn-ts/language-common": "^3.0.4",
+    "@zxcvbn-ts/language-en": "^3.0.2",
     "assert": "^2.1.0",
     "axios": "^1.6.2",
     "babel-runtime": "^6.26.0",
@@ -117,8 +120,7 @@
     "vue2-teleport": "^1.0.1",
     "vuedraggable": "^2.24.3",
     "winbox": "^0.2.82",
-    "xml-beautifier": "^0.5.0",
-    "zxcvbn": "^4.4.2"
+    "xml-beautifier": "^0.5.0"
   },
   "scripts": {
     "develop": "NODE_ENV=development gulp && webpack-dev-server",
diff --git a/client/src/components/Login/PasswordStrength.vue b/client/src/components/Login/PasswordStrength.vue
index 1d3de2799881..971c2dace7dd 100644
--- a/client/src/components/Login/PasswordStrength.vue
+++ b/client/src/components/Login/PasswordStrength.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { zxcvbn } from '@zxcvbn-ts/core';
 import { type PropType, type Ref, ref, watch } from "vue";
-import zxcvbn from "zxcvbn";
 
 const props = defineProps({
     password: {
@@ -24,18 +24,40 @@ function evaluatePasswordStrength(newPassword: string) {
 
     const result = zxcvbn(newPassword);
     strengthScore.value = result.score;
+    const crackTimeInSeconds = result.crackTimesSeconds.onlineNoThrottling10PerSecond;
+    crackTime.value = formatCrackTime(crackTimeInSeconds);
 
-    crackTime.value = String(result.crack_times_display.online_no_throttling_10_per_second || "N/A");
-
-    if (strengthScore.value === 0 || strengthScore.value === 1) {
+    if (strengthScore.value <= 1) {
         passwordStrength.value = "weak";
-    } else if (strengthScore.value === 2 || strengthScore.value === 3) {
+    } else if (strengthScore.value <= 3) {
         passwordStrength.value = "medium";
     } else {
         passwordStrength.value = "strong";
     }
 }
 
+function formatCrackTime(seconds: number){
+    const secondsInMinute = 60;
+    const secondsInHour = 3600;
+    const secondsInDay = 86400;
+    const secondsInYear = 31536000;
+    const secondsInCentury = 100 * secondsInYear;
+
+    if (seconds >= secondsInCentury) {
+        return "centuries";
+    } else if (seconds >= secondsInYear) {
+        return `${Math.round(seconds / secondsInYear)} years`;
+    } else if (seconds >= secondsInDay) {
+        return `${Math.round(seconds / secondsInDay)} days`;
+    } else if (seconds >= secondsInHour) {
+        return `${Math.round(seconds / secondsInHour)} hours`;
+    } else if (seconds >= secondsInMinute) {
+        return `${Math.round(seconds / secondsInMinute)} minutes`;
+    } else {
+        return `${Math.round(seconds)} seconds`;
+    }
+}
+
 watch(
     () => props.password,
     (newPassword) => {
@@ -67,7 +89,7 @@ watch(
             <span :class="passwordStrength"> {{ crackTime }}</span>
         </div>
 
-        <BButton variant="secondary" class="mt-3" @click="showPasswordGuidelines = true"> Password Guidelines </BButton>
+        <BButton variant="secondary" class="ui-link mt-3" @click="showPasswordGuidelines = true"> Password Guidelines </BButton>
 
         <div>
             <BModal v-model="showPasswordGuidelines" title="Tips for a secure Password">
diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue
index 78d20ce83f7d..e522af33e880 100644
--- a/client/src/components/Login/RegisterForm.vue
+++ b/client/src/components/Login/RegisterForm.vue
@@ -155,14 +155,12 @@ async function submit() {
                                             :type="showPassword ? 'text' : 'password'"
                                             autocomplete="new-password"
                                             required />
-                                        <span
+                                        <button
+                                            type="button"
                                             class="input-group-text password-toggle-icon"
-                                            role="button"
-                                            tabindex="0"
-                                            @click.prevent="togglePasswordVisibility"
-                                            @keydown.enter="togglePasswordVisibility">
+                                            @click.prevent="togglePasswordVisibility">
                                             <FontAwesomeIcon :icon="showPassword ? faEyeSlash : faEye" />
-                                        </span>
+                                        </button>
                                     </div>
                                     <PasswordStrength :password="password" />
                                 </BFormGroup>
diff --git a/client/yarn.lock b/client/yarn.lock
index 74668417271c..458543c16a2b 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3137,6 +3137,23 @@
   resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@zxcvbn-ts/core@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@zxcvbn-ts/core/-/core-3.0.4.tgz#c5bde72235eb6c273cec78b672bb47c0d7045cad"
+  integrity sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==
+  dependencies:
+    fastest-levenshtein "1.0.16"
+
+"@zxcvbn-ts/language-common@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@zxcvbn-ts/language-common/-/language-common-3.0.4.tgz#fa1d2a42f8c8a589555859795da90d6b8027b7c4"
+  integrity sha512-viSNNnRYtc7ULXzxrQIVUNwHAPSXRtoIwy/Tq4XQQdIknBzw4vz36lQLF6mvhMlTIlpjoN/Z1GFu/fwiAlUSsw==
+
+"@zxcvbn-ts/language-en@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@zxcvbn-ts/language-en/-/language-en-3.0.2.tgz#162ada6b2b556444efd5a7700e70845cfde6d6ec"
+  integrity sha512-Zp+zL+I6Un2Bj0tRXNs6VUBq3Djt+hwTwUz4dkt2qgsQz47U0/XthZ4ULrT/RxjwJRl5LwiaKOOZeOtmixHnjg==
+
 abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -6152,7 +6169,7 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
-fastest-levenshtein@^1.0.12:
+fastest-levenshtein@1.0.16, fastest-levenshtein@^1.0.12:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
@@ -12997,8 +13014,3 @@ zrender@5.6.0:
   integrity sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==
   dependencies:
     tslib "2.3.0"
-
-zxcvbn@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
-  integrity sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==