Fix various user related add/edit/display issues

dashboard/src/components/UserDialog.vue

@@ -7,10 +7,12 @@ const t = i18n.t;
 import { ref, useTemplateRef } from 'vue';
 import { Dialog, TextInput, FormGroup, Checkbox, MultiSelect, SingleSelect } from 'pankow';
 import { ROLES } from '../constants.js';
+import DashboardModel from '../models/DashboardModel.js';
 import ProfileModel from '../models/ProfileModel.js';
 import UsersModel from '../models/UsersModel.js';
 import GroupsModel from '../models/GroupsModel.js';
 
+const dashboardModel = DashboardModel.create();
 const profileModel = ProfileModel.create();
 const usersModel = UsersModel.create();
 const groupsModel = GroupsModel.create();
@@ -18,13 +20,14 @@ const groupsModel = GroupsModel.create();
 const emit = defineEmits([ 'success' ]);
 
 const dialog = useTemplateRef('dialog');
+const form = useTemplateRef('form');
 
 // also determines if new or edit mode
 const user = ref(null);
 const roles = ref([]);
 const profile = ref({});
 const busy = ref(false);
-const profileLocked = ref(false); // TODO
+const profileLocked = ref(false);
 const formError = ref({});
 const displayName = ref('');
 const email = ref('');
@@ -40,6 +43,8 @@ const sendInvite = ref(false);
 const isSelf = ref(false);
 
 async function onSubmit() {
+  if (!form.value.reportValidity()) return;
+
   busy.value = true;
   formError.value = {};
 
@@ -55,9 +60,12 @@ async function onSubmit() {
   // can only be set not updated
   if (!user.value) data.username = username.value || null;
 
-  if (!user.value.source) {
+  const isExternal = user.value && user.value.source;
+
+  // update or add
+  if (!isExternal) {
     let error, result;
-    if (user.value) [error, result] = await usersModel.update(user.value.id, data);
+    if (user.value) [error] = await usersModel.update(user.value.id, data);
     else [error, result] = await usersModel.add(data);
     if (error) {
       const message = error.body ? error.body.message : '';
@@ -87,7 +95,7 @@ async function onSubmit() {
       return;
     }
 
-    userId = result.id;
+    userId = user.value ? user.value.id : result.id;
   }
 
   // for some reason only user adding supports role setting directly, but not user edit, so we have to do this separately
@@ -164,6 +172,10 @@ defineExpose({
       { id: ROLES.OWNER, name: t('users.role.owner'), disabled: !profile.value.isAtLeastOwner },
     ];
 
+    [error, result] = await dashboardModel.config();
+    if (error) return console.error(error);
+    profileLocked.value = result.profileLocked;
+
     dialog.value.open();
   }
 });
@@ -184,7 +196,7 @@ defineExpose({
 
     <div class="text-danger" v-if="formError.generic">{{ formError.generic }}</div>
 
-    <form @submit.prevent="onSubmit()" autocomplete="off">
+    <form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
       <fieldset :disabled="busy">
         <input type="submit" style="display: none;" />
 
@@ -204,9 +216,10 @@ defineExpose({
           <TextInput id="fallbackEmailInput" v-model="fallbackEmail" :placeholder="$t('users.user.fallbackEmailPlaceholder')" />
         </FormGroup>
 
+        <!-- if profile edit is locked a user has to be set here -->
         <FormGroup v-if="!user" :has-error="formError.username">
           <label for="usernameInput">{{ $t('users.user.username') }}</label>
-          <TextInput id="usernameInput" v-model="username" :placeholder="profileLocked ? '' : $t('users.user.usernamePlaceholder')" />
+          <TextInput id="usernameInput" v-model="username" :required="profileLocked ? true : null" :placeholder="profileLocked ? '' : $t('users.user.usernamePlaceholder')" />
           <div class="text-danger" v-if="formError.username">{{ formError.username }}</div>
         </FormGroup>
 
@@ -223,7 +236,7 @@ defineExpose({
           <MultiSelect v-if="allLocalGroups.length" v-model="localGroups" :options="allLocalGroups" />
         </FormGroup>
 
-        <Checkbox v-model="active" :disabled="isSelf" :label="$t('users.user.activeCheckbox')" /><sup><a href="https://docs.cloudron.io/user-management/#disable-user" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup><br/>
+        <Checkbox v-model="active" :disabled="isSelf" :label="$t('users.user.activeCheckbox')" style="display: inline-flex; margin-right: 6px;" /><sup><a href="https://docs.cloudron.io/user-management/#disable-user" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup><br/>
         <Checkbox v-if="!user" v-model="sendInvite" :label="$t('users.addUserDialog.sendInviteCheckbox')" />
       </fieldset>
     </form>