Merge branch 'develop' into mobile-optimisations

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -9,6 +9,7 @@ import {
   projectRoleTagColors,
   projectRoles,
   ref,
+  useActiveKeyupListener,
   useCopy,
   useDashboard,
   useI18n,
@@ -46,7 +47,7 @@ const { copy } = useCopy()
 
 const { dashboardUrl } = $(useDashboard())
 
-const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Viewer, invitationToken: undefined })
+let usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Viewer, invitationToken: undefined })
 
 const formRef = ref()
 
@@ -82,6 +83,11 @@ onMounted(() => {
   }
 })
 
+const close = () => {
+  emit('closed')
+  usersData = { role: ProjectRole.Viewer }
+}
+
 const saveUser = async () => {
   $e('a:user:invite', { role: usersData.role })
 
@@ -97,7 +103,7 @@ const saveUser = async () => {
         project_id: project.value.id,
         projectName: project.value.title,
       })
-      emit('closed')
+      close()
     } else {
       const res = await $api.auth.projectUserAdd(project.value.id, {
         roles: usersData.role,
@@ -121,12 +127,14 @@ const inviteUrl = $computed(() => (usersData.invitationToken ? `${dashboardUrl}#
 
 const copyUrl = async () => {
   if (!inviteUrl) return
+  try {
+    await copy(inviteUrl)
 
-  await copy(inviteUrl)
-
-  // Copied shareable base url to clipboard!
-  message.success(t('msg.success.shareableURLCopied'))
-
+    // Copied shareable base url to clipboard!
+    message.success(t('msg.success.shareableURLCopied'))
+  } catch (e) {
+    message.error(e.message)
+  }
   $e('c:shared-base:copy-url')
 }
 
@@ -137,9 +145,28 @@ const clickInviteMore = () => {
   usersData.emails = undefined
 }
 
-const emailField = (inputEl: typeof Input) => {
-  inputEl?.$el?.focus()
-}
+const emailField = ref<typeof Input>()
+
+useActiveKeyupListener(
+  computed(() => show),
+  (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      close()
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => show,
+  async (val) => {
+    if (val) {
+      await nextTick()
+      emailField.value?.$el?.focus()
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
@@ -151,7 +178,7 @@ const emailField = (inputEl: typeof Input) => {
     :closable="false"
     width="max(50vw, 44rem)"
     wrap-class-name="nc-modal-invite-user-and-share-base"
-    @cancel="emit('closed')"
+    @cancel="close"
   >
     <div class="flex flex-col" data-testid="invite-user-and-share-base-modal">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
@@ -161,7 +188,7 @@ const emailField = (inputEl: typeof Input) => {
           type="text"
           class="!rounded-md mr-1 -mt-1.5"
           data-testid="invite-user-and-share-base-modal-close-btn"
-          @click="emit('closed')"
+          @click="close"
         >
           <template #icon>
             <MaterialSymbolsCloseRounded class="flex mx-auto" />
@@ -235,7 +262,7 @@ const emailField = (inputEl: typeof Input) => {
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('datatype.Email') }}:</div>
 
                     <a-input
-                      :ref="emailField"
+                      ref="emailField"
                       v-model:value="usersData.emails"
                       validate-trigger="onBlur"
                       :placeholder="$t('labels.email')"