src/plugins/user/components/Widget.vue

@@ -1,10 +1,10 @@
 <template>
   <q-card style="text-align: center">
     <q-card-section class="row justify-center content-stretch">
-      <div class="col-4">
+      <div v-if="avatar" class="col-4">
         <div style="width: 100%; padding-bottom: 100%; position: relative">
           <q-avatar style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
-            <img :src="avatarLink" />
+            <q-img :src="avatarLink" @error="avatar = false" />
           </q-avatar>
         </div>
       </div>
@@ -39,7 +39,8 @@ export default defineComponent({
     // Ensure users are loaded,so we can query birthdays
     onMounted(() => userStore.getUsers(false));
 
-    const name = ref(mainStore.currentUser.display_name);
+    const avatar = ref(true);
+    const name = ref(mainStore.currentUser.firstname);
     const avatarLink = ref(mainStore.currentUser.avatar_url);
 
     function userHasBirthday(user: FG.User) {
@@ -61,7 +62,7 @@ export default defineComponent({
         .filter((user) => user.userid !== mainStore.currentUser.userid)
     );
 
-    return { avatarLink, name, hasBirthday, birthday };
+    return { avatar, avatarLink, name, hasBirthday, birthday };
   },
 });
 </script>

src/plugins/user/components/settings/MainUserSettings.vue

@@ -38,7 +38,7 @@
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Benutzername"
         :readonly="!newUser"
-        :rules="[isFreeUID, notEmpty]"
+        :rules="newUser ? [isFreeUID, notEmpty] : []"
         autocomplete="username"
         filled
       />
@@ -108,7 +108,7 @@ import { hasPermission } from 'src/utils/permission';
 import { notEmpty, isEmail } from 'src/utils/validators';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
 import PasswordInput from 'src/components/utils/PasswordInput.vue';
-import { defineComponent, computed, ref, onBeforeMount, PropType } from 'vue';
+import { defineComponent, computed, ref, onBeforeMount, PropType, watch } from 'vue';
 import { useUserStore } from '../../store';
 import { useMainStore } from 'src/stores';
 
@@ -142,6 +142,12 @@ export default defineComponent({
     const allRoles = computed(() => userStore.roles.map((role) => role.name));
     const isCurrentUser = computed(() => userModel.value.userid === mainStore.currentUser.userid);
 
+    /* Reset model if props changed */
+    watch(
+      () => props.user,
+      () => (userModel.value = props.user)
+    );
+
     function onAvatarRejected() {
       Notify.create({
         group: false,