add GroupCreate view and mutation

app/src/helpers/dataStore.js

@@ -20,7 +20,7 @@ export default {
     },
 
     'ADD_USERS' (state, user) {
-      // FIXME will trigger an error if first created user
+      if (state.users === undefined) state.users = {}
       Vue.set(state.users, user.username, user)
     },
 
@@ -47,6 +47,12 @@ export default {
       state.groups = groups
     },
 
+    'ADD_GROUPS' (state, { name }) {
+      if (state.groups !== undefined) {
+        Vue.set(state.groups, name, { members: [], permissions: [] })
+      }
+    },
+
     'SET_PERMISSIONS' (state, permissions) {
       state.permissions = permissions
     }
@@ -68,7 +74,7 @@ export default {
     'FETCH_ALL' ({ state, commit }, queries) {
       return Promise.all(queries.map(({ uri, param, storeKey = uri, force = false }) => {
         const currentState = param ? state[storeKey][param] : state[storeKey]
-        // if data has already been queried, simply return
+        // if data has already been queried, simply return the state as cached
         if (currentState !== undefined && !force) {
           return { cached: true, responseData: currentState }
         }

app/src/locales/en.json

@@ -120,9 +120,10 @@
     "firewall": "Firewall",
     "footer_version": "Powered by {ynh} {version} ({repo}).",
     "form_errors": {
-        "username_syntax": "Invalid username: Must be lower-case alphanumeric and underscore characters only",
-        "username_exists": "The user '{user}' already exists",
-        "email_syntax": "Invalid email: Must be alphanumeric, underscore and dash characters only (e.g. someone@example.com, s0me-1@example.com)"
+        "email_syntax": "Invalid email: Must be alphanumeric, underscore and dash characters only (e.g. someone@example.com, s0me-1@example.com)",
+        "groupname_syntax": "Invalid group name: Must be alphanumeric, underscore and space characters only",
+        "username_exists": "The user '{name}' already exists",
+        "username_syntax": "Invalid username: Must be lower-case alphanumeric and underscore characters only"
     },
     "form_input_example": "Example: %s",
     "from_to": "from %s to %s",
@@ -223,7 +224,8 @@
     "placeholder": {
         "username": "johndoe",
         "firstname": "John",
-        "lastname": "Doe"
+        "lastname": "Doe",
+        "groupname": "My group name"
     },
     "logs": "Logs",
     "logs_operation": "Operations made on system with YunoHost",

app/src/views/group/GroupCreate.vue

@@ -1,11 +1,81 @@
 <template lang="html">
   <div class="group-create">
+    <b-card :header="$t('group_new')" header-tag="h2">
+      <b-form id="group-create" @submit.prevent="onSubmit">
+        <!-- GROUP NAME -->
+        <b-form-group
+          label-cols="auto"
+          :label="$t('group_name')" label-for="input-groupname"
+          :description="$t('group_format_name_help')"
+        >
+          <b-input
+            id="input-groupname" :placeholder="$t('placeholder.groupname')"
+            aria-describedby="groupname-feedback" required
+            v-model="form.groupname" :state="isValid.groupname"
+            @input="validateGroupname"
+          />
+          <b-form-invalid-feedback id="groupname-feedback" :state="isValid.groupname">
+            {{ this.error.groupname }}
+          </b-form-invalid-feedback>
+        </b-form-group>
+      </b-form>
+
+      <template v-slot:footer>
+        <div class="d-flex d-flex justify-content-end">
+          <b-button type="submit" form="group-create" variant="success">
+            {{ $t('save') }}
+          </b-button>
+        </div>
+      </template>
+    </b-card>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'GroupCreate'
+  name: 'GroupCreate',
+
+  data () {
+    return {
+      form: {
+        groupname: ''
+      },
+      isValid: {
+        groupname: null
+      },
+      error: {
+        groupname: ''
+      }
+    }
+  },
+
+  methods: {
+    onSubmit () {
+      for (const key in this.isValid) {
+        if (this.isValid[key] === false) return
+      }
+      const data = { groupname: this.form.groupname.replaceAll(' ', '_').toLowerCase() }
+
+      this.$store.dispatch(
+        'POST', { uri: 'users/groups', data, storeKey: 'groups' }
+      ).then(() => {
+        this.$router.push({ name: 'group-list' })
+      }).catch(error => {
+        this.error.groupname = error.message
+        this.isValid.groupname = false
+      })
+    },
+
+    validateGroupname () {
+      const groupname = this.form.groupname
+      let error = ''
+      if (!groupname.match('^[A-Za-z0-9_ ]+$')) {
+        error = this.$i18n.t('form_errors.groupname_syntax')
+      }
+      this.error.groupname = error
+      this.isValid.groupname = error === '' ? null : false
+    }
+  }
 }
 </script>
 

app/src/views/user/UserCreate.vue

@@ -127,6 +127,8 @@
 import SplittedMailInput from '@/components/SplittedMailInput'
 
 export default {
+  name: 'UserCreate',
+
   data () {
     return {
       form: {
@@ -194,7 +196,7 @@ export default {
         // FIXME check allowed characters
         error = this.$i18n.t('form_errors.username_syntax')
       } else if (Object.keys(this.$store.state.data.users).includes(username)) {
-        error = this.$i18n.t('form_errors.username_exists', { user: username })
+        error = this.$i18n.t('form_errors.username_exists', { name: username })
       }
       this.error.username = error
       this.isValid.username = error === '' ? null : false