Added a Passwort Strength Component for User Registration

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,7 +120,8 @@
     "vue2-teleport": "^1.0.1",
     "vuedraggable": "^2.24.3",
     "winbox": "^0.2.82",
-    "xml-beautifier": "^0.5.0"
+    "xml-beautifier": "^0.5.0",
+    "zxcvbn": "^4.4.2"
   },
   "scripts": {
     "develop": "NODE_ENV=development gulp && webpack-dev-server",
@@ -213,7 +217,8 @@
     "xml-js": "^1.6.11",
     "xml2js": "^0.6.2",
     "yaml-jest": "^1.2.0",
-    "yaml-loader": "^0.8.0"
+    "yaml-loader": "^0.8.0",
+    "@types/zxcvbn": "^4.4.5"
   },
   "peerDependencies": {
     "postcss": "^8.4.6"

client/src/components/Login/PasswordStrength.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { watch, type PropType, type Ref, ref } from "vue";
+import zxcvbn from "zxcvbn";
+
+const props = defineProps({
+    password: {
+        type: String as PropType<string | null>,
+        required: true,
+    },
+});
+
+const passwordStrength = ref<string>("empty");
+const strengthScore = ref<number>(0);
+const showPasswordGuidelines: Ref<boolean> = ref(false);
+
+const passwordRules = ref({
+    minLength: false,
+    hasNumber: false,
+    hasUppercase: false,
+    hasSpecialChar: false,
+});
+
+function evaluatePasswordStrength(newPassword: string) {
+    if (newPassword.length === 0) {
+        passwordStrength.value = "empty";
+        strengthScore.value = 0;
+        return;
+    }
+
+    const result = zxcvbn(newPassword);
+    strengthScore.value = result.score;
+
+    if (strengthScore.value === 0 || strengthScore.value === 1) {
+        passwordStrength.value = "weak";
+    } else if (strengthScore.value === 2 || strengthScore.value === 3) {
+        passwordStrength.value = "medium";
+    } else {
+        passwordStrength.value = "strong";
+    }
+}
+
+// Function to validate password rules
+function validatePasswordRules(password: string) {
+    passwordRules.value.minLength = password.length >= 12;
+    passwordRules.value.hasNumber = /\d/.test(password);
+    passwordRules.value.hasUppercase = /[A-Z]/.test(password);
+    passwordRules.value.hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+}
+
+watch(
+    () => props.password,
+    (newPassword) => {
+        if (typeof newPassword === "string") {
+            evaluatePasswordStrength(newPassword);
+            validatePasswordRules(newPassword || "");
+        }
+    }
+);
+</script>
+
+<template>
+    <div>
+        <BButton variant="info" class="mt-3" @click="showPasswordGuidelines = true"> Password Guidelines </BButton>
+
+        <div>
+            <BModal v-model="showPasswordGuidelines" title="Tips for a secure Password">
+                <p>A good password should meet the following criteria:</p>
+                <ul>
+                    <li>At least 12 characters long.</li>
+                    <li>Use uppercase and lowercase letters.</li>
+                    <li>At least one number and one special character.</li>
+                    <li>Avoid common passwords like <code>123456</code> or <code>password</code>.</li>
+                    <li>No repeated patterns like <code>aaaa</code> or <code>123123</code>.</li>
+                </ul>
+                <p>
+                    Learn more about:
+                    <a
+                        href="https://www.cisa.gov/secure-our-world/use-strong-passwords target="
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >strong passwords</a
+                    >.
+                </p>
+                <template v-slot:modal-footer>
+                    <BButton variant="secondary" @click="showPasswordGuidelines = false">Schließen</BButton>
+                </template>
+            </BModal>
+        </div>
+        <div class="password-strength-bar-container mt-2">
+            <div
+                class="password-strength-bar"
+                :class="passwordStrength"
+                :style="{ width: `${(strengthScore / 4) * 100}%` }"></div>
+        </div>
+
+        <div :class="['password-strength', passwordStrength]" class="mt-2">
+            <span v-if="passwordStrength === 'empty'"></span>
+            <span v-else-if="passwordStrength === 'weak'">Weak Password</span>
+            <span v-else-if="passwordStrength === 'medium'">Medium Password</span>
+            <span v-else>Strong Password</span>
+        </div>
+
+        <div class="password-help">
+            <ul>
+                <li :class="{ 'rule-met': passwordRules.minLength }">
+                    <i class="fa" :class="passwordRules.minLength ? 'fa-check' : 'fa-times'"></i>
+                    At least 12 characters
+                </li>
+                <li :class="{ 'rule-met': passwordRules.hasNumber }">
+                    <i class="fa" :class="passwordRules.hasNumber ? 'fa-check' : 'fa-times'"></i>
+                    Contains a number
+                </li>
+                <li :class="{ 'rule-met': passwordRules.hasUppercase }">
+                    <i class="fa" :class="passwordRules.hasUppercase ? 'fa-check' : 'fa-times'"></i>
+                    Contains an uppercase letter
+                </li>
+                <li :class="{ 'rule-met': passwordRules.hasSpecialChar }">
+                    <i class="fa" :class="passwordRules.hasSpecialChar ? 'fa-check' : 'fa-times'"></i>
+                    Contains a special character
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.password-strength-bar-container {
+    background-color: $gray-200;
+    height: 8px;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 5px;
+}
+
+.password-strength-bar {
+    height: 100%;
+    transition: width 0.3s ease;
+
+    &.weak {
+        background-color: $brand-danger;
+    }
+
+    &.medium {
+        background-color: $brand-warning;
+    }
+
+    &.strong {
+        background-color: $brand-success;
+    }
+}
+
+.password-strength {
+    &.weak {
+        color: $brand-danger;
+    }
+
+    &.medium {
+        color: $brand-warning;
+    }
+
+    &.strong {
+        color: $brand-success;
+    }
+}
+
+.password-help ul {
+    list-style: none;
+    padding: 0;
+}
+
+.password-help li {
+    display: flex;
+    align-items: center;
+    margin: 0.2rem;
+}
+
+.password-help li.rule-met {
+    color: $brand-success;
+}
+
+.password-help li .fa {
+    margin-right: 0.5rem;
+}
+</style>

client/src/components/Login/RegisterForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
 import axios from "axios";
 import {
     BAlert,
     BButton,
@@ -22,6 +22,7 @@
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import ExternalLogin from "@/components/User/ExternalIdentities/ExternalLogin.vue";
+import PasswordStrength from "@/components/Login/PasswordStrength.vue";
 
 interface Props {
     sessionCsrfToken: string;
@@ -36,14 +37,15 @@
 }
 
 const props = defineProps<Props>();
+const showPassword = ref(false);
 
 const emit = defineEmits<{
     (e: "toggle-login"): void;
 }>();
 
 const email = ref(null);
 const confirm = ref(null);
-const password = ref(null);
+const password = ref<string | null>(null);
 const username = ref(null);
 const subscribe = ref(null);
 const messageText: Ref<string | null> = ref(null);
@@ -62,6 +64,10 @@
     emit("toggle-login");
 }
 
+function togglePasswordVisibility() {
+    showPassword.value = !showPassword.value;
+}
+
 async function submit() {
     disableCreate.value = true;
 
@@ -143,9 +149,20 @@
                                         id="register-form-password"
                                         v-model="password"
                                         name="password"
-                                        type="password"
+                                        :type="showPassword ? 'text' : 'password'"
                                         autocomplete="new-password"
                                         required />
+                                    <!-- Eye Icon to show Password -->
+                                    <button
+                                        type="button"
+                                        class="password-toggle-icon"
+                                        aria-label="Toggle password visibility"
+                                        @click="togglePasswordVisibility">
+                                        <i :class="showPassword ? 'fa fa-eye-slash' : 'fa fa-eye'"></i>
+                                    </button>
+
+                                    <!-- Password Strength Component -->
+                                    <PasswordStrength :password="password" />
                                 </BFormGroup>
 
                                 <BFormGroup :label="labelConfirmPassword" label-for="register-form-confirm">
@@ -217,7 +234,10 @@
         </div>
     </div>
 </template>
+
 <style scoped lang="scss">
+@import "theme/blue.scss";
+
 .embed-container {
     position: relative;
 
@@ -239,4 +259,18 @@
         border-radius: 4px;
     }
 }
+
+.password-toggle-icon {
+    position: absolute;
+    right: 0.75rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: $gray-600;
+    font-size: 1rem;
+}
+
+.password-toggle-icon:hover {
+    color: $gray-900;
+}
 </style>

client/tsconfig.json

@@ -28,5 +28,5 @@
     "vueCompilerOptions": {
         "target": 2.7
     },
-    "include": ["./types/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.vue", "./tests/**/*.ts"]
+    "include": ["./types/*.d.ts", "./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.vue", "./tests/**/*.ts", "types/zxcvbn.ts"]
 }

client/types/zxcvbn.ts

@@ -0,0 +1,18 @@
+declare module "zxcvbn" {
+    interface ZxcvbnFeedback {
+        warning: string;
+        suggestions: string[];
+    }
+
+    interface ZxcvbnResult {
+        crack_times_display: any;
+        score: number; // Password strength score (0-4)
+        feedback: ZxcvbnFeedback; // Feedback about the password
+        guesses: number; // Estimated number of guesses to crack the password
+        guesses_log10: number; // Log10 of the guesses
+        calc_time: number; // Time taken for the calculation (in milliseconds)
+        sequence: any[]; // Sequence of patterns used to match the password
+    }
+
+    export default function zxcvbn(password: string): ZxcvbnResult;
+}

client/yarn.lock

@@ -2808,6 +2808,11 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/zxcvbn@^4.4.5":
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/@types/zxcvbn/-/zxcvbn-4.4.5.tgz#8ce8623ed7a36e3a76d1c0b539708dfb2e859bc0"
+  integrity sha512-FZJgC5Bxuqg7Rhsm/bx6gAruHHhDQ55r+s0JhDh8CQ16fD7NsJJ+p8YMMQDhSQoIrSmjpqqYWA96oQVMNkjRyA==
+
 "@typescript-eslint/eslint-plugin@^6.8.0":
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.8.0.tgz#06abe4265e7c82f20ade2dcc0e3403c32d4f148b"
@@ -3137,6 +3142,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,9 +6174,9 @@ 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.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
 
 fastq@^1.6.0:
@@ -12997,3 +13019,8 @@ [email protected]:
   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==