fix(web): enforce password strength in auth forms

Apply the same password policy to registration and password
changes so operators cannot replace default credentials with
another weak password and users see consistent guidance.

easytier-web/frontend/src/components/ChangePassword.vue

@@ -6,6 +6,7 @@ import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import ApiClient from '../modules/api';
 import { clearMustChangePasswordFlag } from '../modules/auth-status';
+import { validatePasswordStrength } from '../modules/password-policy';
 
 const dialogRef = inject<any>('dialogRef');
 
@@ -15,14 +16,21 @@ const password = ref('');
 const toast = useToast();
 const router = useRouter();
 const { t } = useI18n();
-const passwordIsEmpty = computed(() => password.value.trim().length === 0);
+const passwordValidation = computed(() => validatePasswordStrength(password.value));
+const passwordErrorMessage = computed(() => {
+    if (password.value.length === 0 || passwordValidation.value.valid) {
+        return '';
+    }
+
+    return t(passwordValidation.value.reasonKey!);
+});
 
 const changePassword = async () => {
-    if (passwordIsEmpty.value) {
+    if (!passwordValidation.value.valid) {
         toast.add({
             severity: 'warn',
             summary: t('web.common.warning'),
-            detail: t('web.settings.new_password_empty'),
+            detail: t(passwordValidation.value.reasonKey!),
             life: 3000,
         });
         return;
@@ -61,8 +69,14 @@ const changePassword = async () => {
                 <div class="flex flex-col space-y-4">
                     <Password v-model="password" :placeholder="t('web.settings.new_password')" :feedback="false"
                         toggleMask />
+                    <small class="text-surface-500 dark:text-surface-400">
+                        {{ t('web.common.password_strength_hint') }}
+                    </small>
+                    <small v-if="passwordErrorMessage" class="text-red-500 dark:text-red-400">
+                        {{ passwordErrorMessage }}
+                    </small>
                     <Button @click="changePassword" :label="t('web.common.confirm')"
-                        :disabled="passwordIsEmpty" />
+                        :disabled="!passwordValidation.valid" />
                 </div>
             </template>
         </Card>

easytier-web/frontend/src/components/Login.vue

@@ -8,6 +8,7 @@ import { getInitialApiHost, cleanAndLoadApiHosts, saveApiHost } from "../modules
 import { useI18n } from 'vue-i18n'
 import ApiClient, { Credential, RegisterData } from '../modules/api';
 import { setMustChangePasswordFlag } from '../modules/auth-status';
+import { validatePasswordStrength } from '../modules/password-policy';
 
 const { t } = useI18n()
 
@@ -25,6 +26,14 @@ const registerUsername = ref('');
 const registerPassword = ref('');
 const captcha = ref('');
 const captchaSrc = computed(() => api.value.captcha_url());
+const registerPasswordValidation = computed(() => validatePasswordStrength(registerPassword.value));
+const registerPasswordErrorMessage = computed(() => {
+    if (registerPassword.value.length === 0 || registerPasswordValidation.value.valid) {
+        return '';
+    }
+
+    return t(registerPasswordValidation.value.reasonKey!);
+});
 
 
 const onSubmit = async () => {
@@ -45,6 +54,16 @@ const onSubmit = async () => {
 };
 
 const onRegister = async () => {
+    if (!registerPasswordValidation.value.valid) {
+        toast.add({
+            severity: 'warn',
+            summary: t('web.common.warning'),
+            detail: t(registerPasswordValidation.value.reasonKey!),
+            life: 3000,
+        });
+        return;
+    }
+
     saveApiHost(apiHost.value);
     const credential: Credential = { username: registerUsername.value, password: registerPassword.value };
     const registerReq: RegisterData = { credentials: credential, captcha: captcha.value };
@@ -158,6 +177,12 @@ onBeforeUnmount(() => {
                             }}</label>
                         <Password id="register-password" v-model="registerPassword" required toggleMask
                             :feedback="false" class="w-full" />
+                        <small class="text-surface-500 dark:text-surface-400">
+                            {{ t('web.common.password_strength_hint') }}
+                        </small>
+                        <small v-if="registerPasswordErrorMessage" class="block text-red-500 dark:text-red-400">
+                            {{ registerPasswordErrorMessage }}
+                        </small>
                     </div>
                     <div class="p-field">
                         <label for="captcha" class="block text-sm font-medium">{{ t('web.login.captcha') }}</label>
@@ -165,7 +190,8 @@ onBeforeUnmount(() => {
                         <img :src="captchaSrc" alt="Captcha" class="mt-2 mb-2" />
                     </div>
                     <div class="flex items-center justify-between">
-                        <Button :label="t('web.login.register')" type="submit" class="w-full" />
+                        <Button :label="t('web.login.register')" type="submit" class="w-full"
+                            :disabled="!registerPasswordValidation.valid" />
                     </div>
                     <div class="flex items-center justify-between">
                         <Button :label="t('web.login.back_to_login')" type="button" class="w-full"

easytier-web/frontend/src/modules/password-policy.ts

@@ -0,0 +1,55 @@
+export type PasswordValidationReasonKey =
+    | 'web.common.password_empty'
+    | 'web.common.password_min_length'
+    | 'web.common.password_too_weak';
+
+export interface PasswordValidationResult {
+    valid: boolean;
+    reasonKey?: PasswordValidationReasonKey;
+}
+
+const PASSWORD_MIN_LENGTH = 8;
+
+export const countPasswordClasses = (password: string) => {
+    let count = 0;
+
+    if (/[a-z]/.test(password)) {
+        count += 1;
+    }
+    if (/[A-Z]/.test(password)) {
+        count += 1;
+    }
+    if (/\d/.test(password)) {
+        count += 1;
+    }
+    if (/[^A-Za-z0-9\s]/.test(password)) {
+        count += 1;
+    }
+
+    return count;
+};
+
+export const validatePasswordStrength = (password: string): PasswordValidationResult => {
+    if (password.trim().length === 0) {
+        return {
+            valid: false,
+            reasonKey: 'web.common.password_empty',
+        };
+    }
+
+    if (password.length < PASSWORD_MIN_LENGTH) {
+        return {
+            valid: false,
+            reasonKey: 'web.common.password_min_length',
+        };
+    }
+
+    if (countPasswordClasses(password) < 2) {
+        return {
+            valid: false,
+            reasonKey: 'web.common.password_too_weak',
+        };
+    }
+
+    return { valid: true };
+};