add minimum password length check

frontend/src/App.vue

@@ -61,6 +61,26 @@ const companyName = ref(WGPORTAL_SITE_COMPANY_NAME);
 const wgVersion = ref(WGPORTAL_VERSION);
 const currentYear = ref(new Date().getFullYear())
 
+const userDisplayName = computed(() => {
+  let displayName = "Unknown";
+  if (auth.IsAuthenticated) {
+    if (auth.User.Firstname === "" && auth.User.Lastname === "") {
+      displayName = auth.User.Identifier;
+    } else if (auth.User.Firstname === "" && auth.User.Lastname !== "") {
+      displayName = auth.User.Lastname;
+    } else if (auth.User.Firstname !== "" && auth.User.Lastname === "") {
+      displayName = auth.User.Firstname;
+    } else if (auth.User.Firstname !== "" && auth.User.Lastname !== "") {
+      displayName = auth.User.Firstname + " " + auth.User.Lastname;
+    }
+  }
+
+  // pad string to 20 characters so that the menu is always the same size on desktop
+  if (displayName.length < 20 && window.innerWidth > 992) {
+    displayName = displayName.padStart(20, "\u00A0");
+  }
+  return displayName;
+})
 </script>
 
 <template>
@@ -93,10 +113,10 @@ const currentYear = ref(new Date().getFullYear())
         <div class="navbar-nav d-flex justify-content-end">
           <div v-if="auth.IsAuthenticated" class="nav-item dropdown">
             <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
-              href="#" role="button">{{ auth.User.Firstname }} {{ auth.User.Lastname }}</a>
+              href="#" role="button">{{ userDisplayName }}</a>
             <div class="dropdown-menu">
               <RouterLink :to="{ name: 'profile' }" class="dropdown-item"><i class="fas fa-user"></i> {{ $t('menu.profile') }}</RouterLink>
-              <RouterLink :to="{ name: 'settings' }" class="dropdown-item" v-if="auth.IsAdmin || !settings.Setting('ApiAdminOnly')"><i class="fas fa-gears"></i> {{ $t('menu.settings') }}</RouterLink>
+              <RouterLink :to="{ name: 'settings' }" class="dropdown-item" v-if="auth.IsAdmin || !settings.Setting('ApiAdminOnly') || settings.Setting('WebAuthnEnabled')"><i class="fas fa-gears"></i> {{ $t('menu.settings') }}</RouterLink>
               <RouterLink :to="{ name: 'audit' }" class="dropdown-item" v-if="auth.IsAdmin"><i class="fas fa-file-shield"></i> {{ $t('menu.audit') }}</RouterLink>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#" @click.prevent="auth.Logout"><i class="fas fa-sign-out-alt"></i> {{ $t('menu.logout') }}</a>

frontend/src/components/UserEditModal.vue

@@ -5,10 +5,12 @@ import {computed, ref, watch} from "vue";
 import { useI18n } from 'vue-i18n';
 import { notify } from "@kyvg/vue3-notification";
 import {freshUser} from "@/helpers/models";
+import {settingsStore} from "@/stores/settings";
 
 const { t } = useI18n()
 
 const users = userStore()
+const settings = settingsStore()
 
 const props = defineProps({
   userId: String,
@@ -33,6 +35,30 @@ const title = computed(() => {
 
 const formData = ref(freshUser())
 
+const passwordWeak = computed(() => {
+  return formData.value.Password && formData.value.Password.length > 0 && formData.value.Password.length < settings.Setting('MinPasswordLength')
+})
+
+const formValid = computed(() => {
+  if (formData.value.Source !== 'db') {
+    return true // nothing to validate
+  }
+  if (props.userId !== '#NEW#' && passwordWeak.value) {
+    return false
+  }
+  if (props.userId === '#NEW#' && (!formData.value.Password || formData.value.Password.length < 1)) {
+    return false
+  }
+  if (props.userId === '#NEW#' && passwordWeak.value) {
+    return false
+  }
+  if (!formData.value.Identifier || formData.value.Identifier.length < 1) {
+    return false
+  }
+  return true
+})
+
+
 // functions
 
 watch(() => props.visible, async (newValue, oldValue) => {
@@ -109,7 +135,8 @@ async function del() {
         </div>
         <div v-if="formData.Source==='db'" class="form-group">
           <label class="form-label mt-4">{{ $t('modals.user-edit.password.label') }}</label>
-          <input v-model="formData.Password" aria-describedby="passwordHelp" class="form-control" :placeholder="$t('modals.user-edit.password.placeholder')" type="text">
+          <input v-model="formData.Password" aria-describedby="passwordHelp" class="form-control" :class="{ 'is-invalid': passwordWeak,  'is-valid': formData.Password !== '' && !passwordWeak }" :placeholder="$t('modals.user-edit.password.placeholder')" type="password">
+          <div class="invalid-feedback">{{ $t('modals.user-edit.password.too-weak') }}</div>
           <small v-if="props.userId!=='#NEW#'" id="passwordHelp" class="form-text text-muted">{{ $t('modals.user-edit.password.description') }}</small>
         </div>
       </fieldset>
@@ -168,7 +195,7 @@ async function del() {
       <div class="flex-fill text-start">
         <button v-if="props.userId!=='#NEW#'" class="btn btn-danger me-1" type="button" @click.prevent="del">{{ $t('general.delete') }}</button>
       </div>
-      <button class="btn btn-primary me-1" type="button" @click.prevent="save">{{ $t('general.save') }}</button>
+      <button class="btn btn-primary me-1" type="button" @click.prevent="save" :disabled="!formValid">{{ $t('general.save') }}</button>
       <button class="btn btn-secondary" type="button" @click.prevent="close">{{ $t('general.close') }}</button>
     </template>
   </Modal>

frontend/src/lang/translations/de.json

@@ -296,7 +296,8 @@
       "password": {
         "label": "Passwort",
         "placeholder": "Ein super geheimes Passwort",
-        "description": "Lassen Sie dieses Feld leer, um das aktuelle Passwort beizubehalten."
+        "description": "Lassen Sie dieses Feld leer, um das aktuelle Passwort beizubehalten.",
+        "too-weak": "Das Passwort entspricht nicht den Sicherheitsanforderungen."
       },
       "email": {
         "label": "E-Mail",

frontend/src/lang/translations/en.json

@@ -296,7 +296,8 @@
       "password": {
         "label": "Password",
         "placeholder": "A super secret password",
-        "description": "Leave this field blank to keep current password."
+        "description": "Leave this field blank to keep current password.",
+        "too-weak": "The password is too weak. Please use a stronger password."
       },
       "email": {
         "label": "Email",