Enter key submits form

changelog/unreleased/enhancement-group-and-user-creation-forms-submit-on-enter

@@ -0,0 +1,6 @@
+Enhancement: Group and user creation forms submit on enter
+
+Group and User creation forms can now be submitted by pressing enter.
+
+https://github.com/owncloud/web/pull/7968
+https://github.com/owncloud/web/issues/7937

packages/web-app-user-management/src/components/Groups/CreateGroupModal.vue

@@ -3,13 +3,13 @@
     :title="$gettext('Create group')"
     :button-cancel-text="$gettext('Cancel')"
     :button-confirm-text="$gettext('Create')"
-    :button-confirm-disabled="buttonConfirmDisabled"
+    :button-confirm-disabled="isFormInvalid"
     focus-trap-initial="#create-group-input-display-name"
     @cancel="$emit('cancel')"
     @confirm="$emit('confirm', group)"
   >
     <template #content>
-      <form autocomplete="off">
+      <form autocomplete="off" @submit.prevent="onFormSubmit">
         <oc-text-input
           id="create-group-input-display-name"
           v-model="group.displayName"
@@ -19,6 +19,7 @@
           :fix-message-line="true"
           @input="validateDisplayName"
         />
+        <input type="submit" class="oc-hidden" />
       </form>
     </template>
   </oc-modal>
@@ -50,7 +51,7 @@ export default {
     }
   },
   computed: {
-    buttonConfirmDisabled() {
+    isFormInvalid() {
       return Object.keys(this.formData)
         .map((k) => !!this.formData[k].valid)
         .includes(false)
@@ -80,6 +81,12 @@ export default {
       this.formData.displayName.errorMessage = ''
       this.formData.displayName.valid = true
       return true
+    },
+    onFormSubmit() {
+      if (this.isFormInvalid) {
+        return
+      }
+      this.$emit('confirm', this.group)
     }
   }
 }

packages/web-app-user-management/src/components/Users/CreateUserModal.vue

@@ -3,13 +3,13 @@
     :title="$gettext('Create user')"
     :button-cancel-text="$gettext('Cancel')"
     :button-confirm-text="$gettext('Create')"
-    :button-confirm-disabled="buttonConfirmDisabled"
+    :button-confirm-disabled="isFormInvalid"
     focus-trap-initial="#create-user-input-display-name"
     @cancel="$emit('cancel')"
     @confirm="$emit('confirm', user)"
   >
     <template #content>
-      <form autocomplete="off">
+      <form autocomplete="off" @submit.prevent="onFormSubmit">
         <oc-text-input
           id="create-user-input-display-name"
           v-model="user.onPremisesSamAccountName"
@@ -46,6 +46,7 @@
           :fix-message-line="true"
           @input="validatePassword"
         />
+        <input type="submit" class="oc-hidden" />
       </form>
     </template>
   </oc-modal>
@@ -96,7 +97,7 @@ export default {
     }
   },
   computed: {
-    buttonConfirmDisabled() {
+    isFormInvalid() {
       return Object.keys(this.formData)
         .map((k) => !!this.formData[k].valid)
         .includes(false)
@@ -149,7 +150,6 @@ export default {
       this.formData.userName.valid = true
       return true
     },
-
     validateDisplayName() {
       this.formData.displayName.valid = false
 
@@ -162,7 +162,6 @@ export default {
       this.formData.displayName.valid = true
       return true
     },
-
     validateEmail() {
       this.formData.email.valid = false
 
@@ -186,6 +185,12 @@ export default {
       this.formData.password.errorMessage = ''
       this.formData.password.valid = true
       return true
+    },
+    onFormSubmit() {
+      if (this.isFormInvalid) {
+        return
+      }
+      this.$emit('confirm', this.user)
     }
   }
 }

packages/web-app-user-management/tests/unit/components/Groups/CreateGroupModal.spec.js

@@ -8,19 +8,19 @@ localVue.use(Vuex)
 afterEach(() => jest.clearAllMocks())
 
 describe('CreateGroupModal', () => {
-  describe('computed method "buttonConfirmDisabled"', () => {
+  describe('computed method "isFormInvalid"', () => {
     it('should be true if any data set is invalid', () => {
       const wrapper = getWrapper()
       wrapper.vm.formData.displayName.valid = false
-      expect(wrapper.vm.buttonConfirmDisabled).toBeTruthy()
+      expect(wrapper.vm.isFormInvalid).toBeTruthy()
     })
   })
   it('should be false if no data set is invalid', () => {
     const wrapper = getWrapper()
     Object.keys(wrapper.vm.formData).forEach((key) => {
       wrapper.vm.formData[key].valid = true
     })
-    expect(wrapper.vm.buttonConfirmDisabled).toBeFalsy()
+    expect(wrapper.vm.isFormInvalid).toBeFalsy()
   })
 
   describe('method "validateDisplayName"', () => {

packages/web-app-user-management/tests/unit/components/Users/CreateUserModal.spec.js

@@ -8,19 +8,19 @@ localVue.use(Vuex)
 afterEach(() => jest.clearAllMocks())
 
 describe('CreateUserModal', () => {
-  describe('computed method "buttonConfirmDisabled"', () => {
+  describe('computed method "isFormInvalid"', () => {
     it('should be true if any data set is invalid', () => {
       const wrapper = getWrapper()
       wrapper.vm.formData.userName.valid = false
-      expect(wrapper.vm.buttonConfirmDisabled).toBeTruthy()
+      expect(wrapper.vm.isFormInvalid).toBeTruthy()
     })
   })
   it('should be false if no data set is invalid', () => {
     const wrapper = getWrapper()
     Object.keys(wrapper.vm.formData).forEach((key) => {
       wrapper.vm.formData[key].valid = true
     })
-    expect(wrapper.vm.buttonConfirmDisabled).toBeFalsy()
+    expect(wrapper.vm.isFormInvalid).toBeFalsy()
   })
 
   describe('method "validateUserName"', () => {