Added a Passwort Strength Component for User Registration

client/src/components/Login/PasswordStrength.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref, watch, type PropType } from "vue";
+import zxcvbn from "zxcvbn"; // Import the zxcvbn library
+
+// Props to receive the password input
+const props = defineProps({
+  password: {
+    type: String as PropType<string | null>,
+    required: true,
+  },
+});
+
+const passwordStrength = ref<string>("empty");
+const strengthScore = ref<number>(0);
+
+const passwordRules = ref({
+    minLength: false,
+    hasNumber: false,
+    hasUppercase: false,
+    hasSpecialChar: false,
+});
+
+// Evaluate password strength using zxcvbn
+function evaluatePasswordStrength(newPassword: string) {
+  if (newPassword.length === 0) {
+    passwordStrength.value = "empty";
+    strengthScore.value = 0;
+    return;
+  }
+
+  const result = zxcvbn(newPassword); // Analyze the password with zxcvbn
+  strengthScore.value = result.score; // zxcvbn returns a score from 0 to 4
+
+  // Map zxcvbn scores to strength labels
+  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 for changes in the password prop
+watch(() => props.password, (newPassword) => {
+  if (typeof newPassword === "string") {
+    evaluatePasswordStrength(newPassword);
+    validatePasswordRules(newPassword || "");
+  }
+});
+</script>
+
+<template>
+    <div>
+        <!-- Password Guidelines Button -->
+        <BButton variant="info" class="mt-3" href="https://www.cisa.gov/secure-our-world/use-strong-passwords" target="_blank" rel="noopener noreferrer">
+            Password Guidelines
+        </BButton>
+
+        <!-- Password Strength Bar -->
+        <div class="password-strength-bar-container mt-2">
+            <div
+                class="password-strength-bar"
+                :class="passwordStrength"
+                :style="{ width: `${(strengthScore / 4) * 100}%` }"
+            ></div>
+        </div>
+
+        <!-- Password Strength Text -->
+        <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>
+
+        <!-- Password Guidelines with check marker-->
+        <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

@@ -13,6 +13,7 @@ import {
     BFormGroup,
     BFormInput,
     BFormText,
+    BModal,
 } from "bootstrap-vue";
 import { computed, type Ref, ref } from "vue";
 
@@ -22,6 +23,7 @@ import { withPrefix } from "@/utils/redirect";
 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 +38,15 @@ interface Props {
 }
 
 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 +65,10 @@ function toggleLogin() {
     emit("toggle-login");
 }
 
+function togglePasswordVisibility() {
+    showPassword.value = !showPassword.value;
+}
+
 async function submit() {
     disableCreate.value = true;
 
@@ -143,9 +150,22 @@ async function submit() {
                                         id="register-form-password"
                                         v-model="password"
                                         name="password"
-                                        type="password"
+                                        :type="showPassword ? 'text' : 'password'"
                                         autocomplete="new-password"
-                                        required />
+                                        required
+                                    />
+                                    <!-- Eye Icon to show Password -->
+                                    <button
+                                        type="button"
+                                        class="password-toggle-icon"
+                                        @click="togglePasswordVisibility"
+                                        aria-label="Toggle password visibility"
+                                    >
+                                        <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 +237,10 @@ async function submit() {
         </div>
     </div>
 </template>
+
 <style scoped lang="scss">
+@import "theme/blue.scss";
+
 .embed-container {
     position: relative;
 
@@ -237,6 +260,21 @@ async function submit() {
         border: 1px solid #ccc;
         padding: 2px 5px;
         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/types/zxcvbn.d.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;
+}