From 10edeafa4620a63156dfcf3f8e56c052ec602c5c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 10 Sep 2024 17:44:52 +0200
Subject: [PATCH] fix(password): validate password before sending request to
 api

(cherry picked from commit eb95caf757c05f61d8bc705df62e595903e509d5)
---
 frontend/src/components/input/Password.vue | 19 +++----------------
 frontend/src/helpers/validatePasswort.ts   | 15 +++++++++++++++
 frontend/src/views/user/Register.vue       |  3 ++-
 3 files changed, 20 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/helpers/validatePasswort.ts

diff --git a/frontend/src/components/input/Password.vue b/frontend/src/components/input/Password.vue
index 0e1e49cdf..ed1a0700c 100644
--- a/frontend/src/components/input/Password.vue
+++ b/frontend/src/components/input/Password.vue
@@ -36,6 +36,7 @@ import {ref, watchEffect} from 'vue'
 import {useDebounceFn} from '@vueuse/core'
 import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
+import {validatePassword} from '@/helpers/validatePasswort';
 
 const props = withDefaults(defineProps<{
 	modelValue: string,
@@ -60,22 +61,8 @@ const validateAfterFirst = ref(false)
 watchEffect(() => props.validateInitially && validate())
 
 const validate = useDebounceFn(() => {
-	if (password.value === '') {
-		isValid.value = t('user.auth.passwordRequired')
-		return
-	}
-
-	if (props.validateMinLength && password.value.length < 8) {
-		isValid.value = t('user.auth.passwordNotMin')
-		return
-	}
-	
-	if (props.validateMinLength && password.value.length > 250) {
-		isValid.value = t('user.auth.passwordNotMax')
-		return
-	}
-	
-	isValid.value = true
+	const valid = validatePassword(password.value, props.validateMinLength)
+	isValid.value = valid === true ? true : t(valid)
 }, 100)
 
 function togglePasswordFieldType() {
diff --git a/frontend/src/helpers/validatePasswort.ts b/frontend/src/helpers/validatePasswort.ts
new file mode 100644
index 000000000..0414d5ee3
--- /dev/null
+++ b/frontend/src/helpers/validatePasswort.ts
@@ -0,0 +1,15 @@
+export function validatePassword(password: string, validateMinLength: boolean = true): string | true {
+	if (password === '') {
+		return 'user.auth.passwordRequired'
+	}
+
+	if (validateMinLength && password.length < 8) {
+		return 'user.auth.passwordNotMin'
+	}
+	
+	if (validateMinLength && password.length > 250) {
+		return 'user.auth.passwordNotMax'
+	}
+	
+	return true
+}
\ No newline at end of file
diff --git a/frontend/src/views/user/Register.vue b/frontend/src/views/user/Register.vue
index e03493e5c..72151e5b3 100644
--- a/frontend/src/views/user/Register.vue
+++ b/frontend/src/views/user/Register.vue
@@ -127,6 +127,7 @@ import Password from '@/components/input/Password.vue'
 
 import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'
+import {validatePassword} from '@/helpers/validatePasswort'
 
 const {t} = useI18n()
 const authStore = useAuthStore()
@@ -183,7 +184,7 @@ const validateUsername = useDebounceFn(() => {
 const everythingValid = computed(() => {
 	return credentials.username !== '' &&
 		credentials.email !== '' &&
-		credentials.password !== '' &&
+		validatePassword(credentials.password) === true &&
 		emailValid.value &&
 		usernameValid.value
 })