1 files changed, 112 insertions, 0 deletions
diff --git a/pse-dashboard/src/components/PasswordValidator.vue b/pse-dashboard/src/components/PasswordValidator.vue
new file mode 100644
index 0000000..a269426
--- /dev/null
+++ b/pse-dashboard/src/components/PasswordValidator.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { PasswordInput } from '@/components';
+import { computed, watch, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        default: undefined
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { t } = useI18n();
+
+const password1 = ref("");
+const password2 = ref("");
+
+// Überprüft, ob Passwort und Wiederholungspasswort identisch sind
+const passwordMatch = computed(() => {
+    return password1.value === password2.value;
+});
+
+watch(() => props.modelValue, (newVal) => {
+    if ( newVal.password == "" ) {
+        password1.value = "";
+        password2.value = "";
+    }
+});
+
+// Überprüft, ob Passwort lang genug ist
+const passwordLength = computed(() => {
+    return password1.value.length >= 8;
+});
+
+// Überprüft, ob das Passwort ein Sonderzeichen enthält
+const passwordSpecialChar = computed(() => {
+    const specialCharRegex = /[!@#$%^&*()_+\-=\[\]{});':"`\\|,.<>\/?$§€°~`´]/;
+    return specialCharRegex.test(password1.value);
+});
+
+// Überprüft, ob das Passwort Zahlen enthält
+const passwordNumbers = computed(() => {
+    const numbersRegex = /[0-9]/;
+    return numbersRegex.test(password1.value);
+});
+
+// Überprüft ob das Passwort Groß- und Kleinschreibung enthält
+const passwordUpperLower = computed(() => {
+    const upperLowerRegex = /^(?=.*[A-Z])(?=.*[a-z]).+$/;
+    return upperLowerRegex.test(password1.value);
+});
+
+// Wahr, falls das Passwort alle Eigenschaften für ein sicheres Passwort erfüllt
+const isPasswordValidArray = computed(() => [
+    { rule: passwordLength, text: t("passwordRequirements.passwordLength", 8) },
+    { rule: passwordSpecialChar, text: t("passwordRequirements.passwordSpecialChar") },
+    { rule: passwordNumbers, text: t("passwordRequirements.passwordNumbers") },
+    { rule: passwordUpperLower, text: t("passwordRequirements.passwordUpperLower") },
+    { rule: passwordMatch, text: t("passwordRequirements.passwordMatch") },
+]);
+
+watch(password1, emitPassword);
+watch(password2, emitPassword);
+
+// emit password object with password and valid whenever passwort1 or 2 changes
+function emitPassword() {
+    emit('update:modelValue', {
+        password: password1.value,
+        valid: isPasswordValidArray.value.every(({rule}) => rule.value)
+    });
+};
+
+// Nimmt eine Funktion entgegen,
+// falls diese wahr auswertet, wird ein Häckchen Emoji zurückgegeben,
+// falls diese falsch auswertet, wird ein Kreuz Emoji zurückgegeben
+function returnEmoji(fn) {
+    return fn ? '✅' : '❌';
+};
+
+</script>
+<template>
+    <!-- Eingabefeld für Passwort -->
+    <PasswordInput
+        v-model="password1"
+        :label="$t('form.password')"
+    />
+
+    <!-- Eingabefeld für Passwortwiederholung -->
+    <PasswordInput
+        v-model="password2"
+        :label="$t('message.repeatPassword')"
+    />
+
+    <!-- Liste mit allen Anforderungen für ein sicheres Passwort -->
+    <!-- Falls Anforderung erfüllt, wird ein Häckchen Emoji vor der Anforderung angezeigt, -->
+    <!-- falls nicht, ein Kreuz -->
+    <ul>
+        <li
+            v-for="(rule, index) in isPasswordValidArray"
+            :key="index"
+            class="d-flex"
+        >
+            {{ returnEmoji(rule.rule.value) }} {{ rule.text }}
+        </li>
+    </ul>
+</template>
+<style>
+
+</style>
+