feat: new users UI (#576)

* feat: users table added * feat: add and edit user in a dialog * feat: add user with password * feat: update user password * feat: disable user otp * fix: case user is undefined
obiba · Jan 3, 2025 · 59c0f51 · 59c0f51
1 parent ea31cb4
commit 59c0f51
Show file tree

Hide file tree

Showing 17 changed files with 1,015 additions and 82 deletions.
diff --git a/agate-rest/src/main/java/org/obiba/agate/web/rest/user/UsersResource.java b/agate-rest/src/main/java/org/obiba/agate/web/rest/user/UsersResource.java
@@ -98,7 +98,7 @@ public Response create(Agate.UserCreateFormDto userCreateFormDto) {
 
     if(RESERVED_USER_NAMES.contains(username)) throw new BadRequestException("Reserved user name");
 
-    if (AgateRealm.AGATE_USER_REALM.name().equals(userDto.getRealm()) && Strings.isNullOrEmpty(userCreateFormDto.getPassword()))
+    if (AgateRealm.AGATE_USER_REALM.getName().equals(userDto.getRealm()) && Strings.isNullOrEmpty(userCreateFormDto.getPassword()))
       throw new BadRequestException("User requires a password");
 
     user = userService.createUser(dtos.fromDto(userDto), userCreateFormDto.getPassword());

diff --git a/agate-ui/src/components/ConfirmDialog.vue b/agate-ui/src/components/ConfirmDialog.vue
@@ -21,11 +21,6 @@
   </q-dialog>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'ConfirmDialog',
-});
-</script>
 <script setup lang="ts">
 const { t } = useI18n();
 

diff --git a/agate-ui/src/components/EssentialLink.vue b/agate-ui/src/components/EssentialLink.vue
@@ -11,11 +11,6 @@
   </q-item>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'EssentialLink',
-});
-</script>
 <script setup lang="ts">
 export interface EssentialLinkProps {
   title: string;

diff --git a/agate-ui/src/components/GroupDialog.vue b/agate-ui/src/components/GroupDialog.vue
@@ -11,10 +11,14 @@
         <q-form>
           <q-input
             v-model="selected.name"
-            :label="t('name')"
+            :label="t('name') + ' *'"
             :disable="editMode"
             dense
-            :rules="[(val) => !!val || t('name_required')]"
+            lazy-rules
+            :rules="[
+              (val) => !!val || t('name_required'),
+              (val) => (val?.trim().length ?? 0) >= 3 || t('name_min_length', { min: 3 }),
+            ]"
           />
           <q-input v-model="selected.description" :label="t('description')" dense class="q-mb-md" />
           <q-select
@@ -36,17 +40,12 @@
 
       <q-card-actions align="right" class="bg-grey-3">
         <q-btn flat :label="t('cancel')" color="secondary" @click="onCancel" v-close-popup />
-        <q-btn flat :label="t('confirm')" color="primary" @click="onSave" />
+        <q-btn flat :label="t('save')" :disable="!isValid" color="primary" @click="onSave" />
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'ConfirmDialog',
-});
-</script>
 <script setup lang="ts">
 import type { GroupDto } from 'src/models/Agate';
 import { notifyError, notifySuccess } from 'src/utils/notify';
@@ -70,6 +69,7 @@ const editMode = ref(false);
 const applicationOptions = computed(
   () => applicationStore.applications?.map((app) => ({ label: app.name, value: app.id })) ?? [],
 );
+const isValid = computed(() => selected.value.name && selected.value.name.trim().length >= 3);
 
 onMounted(() => {
   applicationStore.init();

diff --git a/agate-ui/src/components/GroupsTable.vue b/agate-ui/src/components/GroupsTable.vue
@@ -69,11 +69,6 @@
   </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'GroupsTable',
-});
-</script>
 <script setup lang="ts">
 import type { GroupDto } from 'src/models/Agate';
 import GroupDialog from 'src/components/GroupDialog.vue';

diff --git a/agate-ui/src/components/MainDrawer.vue b/agate-ui/src/components/MainDrawer.vue
@@ -74,11 +74,6 @@
   </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'MainDrawer',
-});
-</script>
 <script setup lang="ts">
 import EssentialLink from 'components/EssentialLink.vue';
 import type { EssentialLinkProps } from 'components/EssentialLink.vue';

diff --git a/agate-ui/src/components/SchemaForm.vue b/agate-ui/src/components/SchemaForm.vue
@@ -4,23 +4,13 @@
       <div v-if="schema.title" class="text-help">{{ schema.title }}</div>
       <div v-if="schema.description" class="text-hint q-mb-sm">{{ schema.description }}</div>
       <div v-for="item in schema.items" :key="item.key">
-        <schema-form-item
-          v-model="data[item.key]"
-          :field="item"
-          :disable="disable"
-          @update:model-value="onUpdate(item.key)"
-        />
+        <schema-form-item v-model="data[item.key]" :field="item" :disable="disable" @update:model-value="onUpdate" />
       </div>
     </form>
   </div>
   <span v-if="!isFormValid" class="text-negative text-caption">{{ t('validation.missing_required_fields') }}</span>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'SchemaForm',
-});
-</script>
 <script setup lang="ts">
 import type { FormObject, SchemaFormObject } from 'src/components/models';
 import SchemaFormItem from 'src/components/SchemaFormItem.vue';
@@ -68,7 +58,7 @@ function validate() {
   return isFormValid.value;
 }
 
-function onUpdate(key: string) {
+function onUpdate() {
   validate();
   if (!isFormValid.value) emit('update:modelValue', undefined);
   else emit('update:modelValue', data.value);

diff --git a/agate-ui/src/components/SchemaFormItem.vue b/agate-ui/src/components/SchemaFormItem.vue
@@ -114,11 +114,6 @@
   </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  name: 'SchemaFormItem',
-});
-</script>
 <script setup lang="ts">
 import type { FileObject, FormObject, SchemaFormField, EnumOption } from 'src/components/models';
 

diff --git a/agate-ui/src/components/UpdatePasswordDialog.vue b/agate-ui/src/components/UpdatePasswordDialog.vue
@@ -0,0 +1,134 @@
+<template>
+  <q-dialog v-model="showDialog" persistent @hide="onHide">
+    <q-card class="dialog-md">
+      <q-card-section>
+        <div class="text-h6">{{ t('user.update_password') }}</div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section>
+        <q-form>
+          <q-input
+            v-model="password"
+            :label="t('user.password') + ' *'"
+            :type="passwordVisible ? 'text' : 'password'"
+            dense
+            lazy-rules
+            :rules="[
+              (val) => !!val || t('user.password_required'),
+              (val) => (val?.trim().length ?? 0) >= 8 || t('user.password_min_length', { min: 8 }),
+            ]"
+          >
+            <template v-slot:after>
+              <q-btn
+                round
+                dense
+                size="sm"
+                :title="t('user.show_password')"
+                flat
+                icon="visibility"
+                @click="passwordVisible = !passwordVisible"
+              />
+              <q-btn
+                round
+                dense
+                size="sm"
+                :title="t('user.copy_password')"
+                flat
+                icon="content_copy"
+                @click="copyPasswordToClipboard"
+              />
+              <q-btn
+                round
+                dense
+                size="sm"
+                :title="t('user.generate_password')"
+                flat
+                icon="lock_reset"
+                @click="generatePassword"
+              />
+            </template>
+          </q-input>
+          <div class="text-hint">{{ t('user.password_hint') }}</div>
+        </q-form>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-grey-3">
+        <q-btn flat :label="t('cancel')" color="secondary" @click="onCancel" v-close-popup />
+        <q-btn flat :label="t('save')" :disable="!isValid" color="primary" @click="onSave" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import type { UserDto } from 'src/models/Agate';
+import { notifyError, notifyInfo, notifySuccess } from 'src/utils/notify';
+import { copyToClipboard } from 'quasar';
+
+const { t } = useI18n();
+const userStore = useUserStore();
+
+interface DialogProps {
+  modelValue: boolean;
+  user: UserDto | undefined;
+}
+
+const props = defineProps<DialogProps>();
+const emit = defineEmits(['update:modelValue', 'saved', 'cancel']);
+
+const showDialog = ref(props.modelValue);
+const password = ref('');
+const passwordVisible = ref(false);
+const isValid = computed(() => password.value && password.value.trim().length >= 8);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    showDialog.value = value;
+    password.value = '';
+    passwordVisible.value = false;
+  },
+);
+
+function onHide() {
+  emit('update:modelValue', false);
+}
+
+function onCancel() {
+  emit('cancel');
+}
+
+function onSave() {
+  if (!props.user) {
+    return;
+  }
+  userStore
+    .updatePassword(props.user, password.value)
+    .then(() => {
+      notifySuccess(t('user.password_updated'));
+      emit('saved');
+    })
+    .catch(() => {
+      notifyError(t('user.password_update_failed'));
+    })
+    .finally(() => {
+      emit('update:modelValue', false);
+    });
+}
+
+function generatePassword() {
+  password.value = userStore.generatePassword();
+}
+
+function copyPasswordToClipboard() {
+  if (password.value) {
+    copyToClipboard(password.value).then(() => {
+      notifyInfo(t('user.password_copied'));
+    });
+  }
+}
+</script>