From 8de6f1070d5bd3dff6a9051ce90dd5c701354850 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Mon, 3 Aug 2020 15:07:08 +0200
Subject: [PATCH] Add BasicForm helper component and reflect changes

---
 app/src/components/BasicForm.vue    |  38 +++++
 app/src/views/group/GroupCreate.vue |  54 +++---
 app/src/views/user/UserCreate.vue   | 232 ++++++++++++-------------
 app/src/views/user/UserEdit.vue     | 255 ++++++++++++++--------------
 4 files changed, 297 insertions(+), 282 deletions(-)
 create mode 100644 app/src/components/BasicForm.vue

diff --git a/app/src/components/BasicForm.vue b/app/src/components/BasicForm.vue
new file mode 100644
index 00000000..e7c5a919
--- /dev/null
+++ b/app/src/components/BasicForm.vue
@@ -0,0 +1,38 @@
+<template>
+  <b-card :header="header" header-tag="h2" class="basic-form">
+    <b-form :id="id" @submit="$emit('submit', $event)">
+      <slot />
+    </b-form>
+
+    <template v-slot:footer>
+      <slot name="buttons">
+        <b-button type="submit" :form="id" variant="success">
+          {{ submit ? submit : $t('save') }}
+        </b-button>
+      </slot>
+    </template>
+  </b-card>
+</template>
+
+<script>
+export default {
+  name: 'BasicForm',
+
+  props: {
+    header: { type: String, required: true },
+    id: { type: String, default: 'ynh-form' },
+    submit: { type: String, default: null }
+  }
+}
+</script>
+
+<style lang="scss">
+.basic-form .card-footer {
+  display: flex;
+  justify-content: flex-end;
+
+  & > *:not(:first-child) {
+    margin-left: .5rem;
+  }
+}
+</style>
diff --git a/app/src/views/group/GroupCreate.vue b/app/src/views/group/GroupCreate.vue
index 645eb15c..b0c9db97 100644
--- a/app/src/views/group/GroupCreate.vue
+++ b/app/src/views/group/GroupCreate.vue
@@ -1,37 +1,27 @@
 <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>
+  <basic-form :header="$t('group_new')" @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>
+  </basic-form>
 </template>
 
 <script>
+import BasicForm from '@/components/BasicForm'
+
 export default {
   name: 'GroupCreate',
 
@@ -75,6 +65,10 @@ export default {
       this.error.groupname = error
       this.isValid.groupname = error === '' ? null : false
     }
+  },
+
+  components: {
+    BasicForm
   }
 }
 </script>
diff --git a/app/src/views/user/UserCreate.vue b/app/src/views/user/UserCreate.vue
index 2fc5c72e..6cf9d748 100644
--- a/app/src/views/user/UserCreate.vue
+++ b/app/src/views/user/UserCreate.vue
@@ -1,129 +1,118 @@
 <template lang="html">
-  <div class="user-create">
-    <b-card :header="$t('users_new')" header-tag="h2">
-      <b-form id="user-create" @submit.prevent="onSubmit">
-        <!-- USER NAME -->
-        <b-form-group label-cols="auto" :label="$t('user_username')" label-for="input-username">
-          <b-input
-            id="input-username" :placeholder="$t('placeholder.username')"
-            aria-describedby="username-feedback" required
-            v-model="form.username" :state="isValid.username"
-            @input="validateUsername" @blur="populateEmail"
-          />
-          <b-form-invalid-feedback id="username-feedback" :state="isValid.username">
-            {{ this.error.username }}
-          </b-form-invalid-feedback>
-        </b-form-group>
+  <basic-form :header="$t('users_new')" @submit.prevent="onSubmit">
+    <!-- USER NAME -->
+    <b-form-group label-cols="auto" :label="$t('user_username')" label-for="input-username">
+      <b-input
+        id="input-username" :placeholder="$t('placeholder.username')"
+        aria-describedby="username-feedback" required
+        v-model="form.username" :state="isValid.username"
+        @input="validateUsername" @blur="populateEmail"
+      />
+      <b-form-invalid-feedback id="username-feedback" :state="isValid.username">
+        {{ this.error.username }}
+      </b-form-invalid-feedback>
+    </b-form-group>
 
-        <!-- USER FULLNAME -->
-        <b-form-group label-cols="auto">
-          <template v-slot:label aria-hidden="true">
-            {{ $t('user_fullname') }}
-          </template>
-
-          <div class="input-double">
-            <b-input-group>
-              <b-input-group-prepend
-                tag="label" class="ssr-only" is-text
-                for="input-firstname"
-              >
-                {{ $t('common.firstname') }}
-              </b-input-group-prepend>
-
-              <b-input
-                id="input-firstname" :placeholder="$t('placeholder.firstname')"
-                v-model="form.firstname" required
-              />
-            </b-input-group>
-
-            <b-input-group>
-              <b-input-group-prepend
-                tag="label" class="ssr-only" is-text
-                for="input-lastname"
-              >
-                {{ $t('common.lastname') }}
-              </b-input-group-prepend>
-
-              <b-input
-                id="input-firstname" :placeholder="$t('placeholder.lastname')"
-                v-model="form.lastname" required
-              />
-            </b-input-group>
-          </div>
-        </b-form-group>
-
-        <!-- USER EMAIL -->
-        <b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
-          <splitted-mail-input
-            id="input-email" feedback="email-feedback"
-            v-model="form.mail" :domains="domains"
-            :state="isValid.mail" @input="validateEmail"
-          />
-
-          <b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
-            {{ this.error.mail }}
-          </b-form-invalid-feedback>
-        </b-form-group>
-
-        <!-- MAILBOX QUOTA -->
-        <b-form-group
-          label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
-          :description="$t('mailbox_quota_description')"
-        >
-          <b-input-group append="M">
-            <b-input
-              id="input-mailbox-quota" :placeholder="$t('mailbox_quota_placeholder')"
-              v-model="form.mailbox_quota" type="number" min="0"
-            />
-          </b-input-group>
-        </b-form-group>
-
-        <!-- USER PASSWORD -->
-        <b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
-          <b-input
-            id="input-password" placeholder="••••••••"
-            aria-describedby="password-feedback" required
-            v-model="form.password" type="password"
-            :state="isValid.password" @input="validatePassword"
-          />
-          <b-form-invalid-feedback id="password-feedback" :state="isValid.password">
-            {{ $t('passwords_too_short') }}
-          </b-form-invalid-feedback>
-        </b-form-group>
-
-        <!-- USER PASSWORD CONFIRMATION -->
-        <b-form-group
-          label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
-          :description="$t('good_practices_about_user_password')"
-        >
-          <b-input
-            id="input-confirmation" placeholder="••••••••"
-            aria-describedby="confirmation-feedback" required
-            v-model="form.confirmation" type="password"
-            :state="isValid.confirmation" @input="validatePassword"
-          />
-          <b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
-            {{ $t('passwords_dont_match') }}
-          </b-form-invalid-feedback>
-        </b-form-group>
-
-        <b-form-invalid-feedback id="global-feedback" :state="server.isValid">
-          {{ this.server.error }}
-        </b-form-invalid-feedback>
-      </b-form>
-
-      <template v-slot:footer>
-        <div class="d-flex d-flex justify-content-end">
-          <b-button type="submit" form="user-create" variant="success">
-            {{ $t('save') }}
-          </b-button>
-        </div>
+    <!-- USER FULLNAME -->
+    <b-form-group label-cols="auto">
+      <template v-slot:label aria-hidden="true">
+        {{ $t('user_fullname') }}
       </template>
-    </b-card>
-  </div>
+
+      <div class="input-double">
+        <b-input-group>
+          <b-input-group-prepend
+            tag="label" class="ssr-only" is-text
+            for="input-firstname"
+          >
+            {{ $t('common.firstname') }}
+          </b-input-group-prepend>
+
+          <b-input
+            id="input-firstname" :placeholder="$t('placeholder.firstname')"
+            v-model="form.firstname" required
+          />
+        </b-input-group>
+
+        <b-input-group>
+          <b-input-group-prepend
+            tag="label" class="ssr-only" is-text
+            for="input-lastname"
+          >
+            {{ $t('common.lastname') }}
+          </b-input-group-prepend>
+
+          <b-input
+            id="input-firstname" :placeholder="$t('placeholder.lastname')"
+            v-model="form.lastname" required
+          />
+        </b-input-group>
+      </div>
+    </b-form-group>
+
+    <!-- USER EMAIL -->
+    <b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
+      <splitted-mail-input
+        id="input-email" feedback="email-feedback"
+        v-model="form.mail" :domains="domains"
+        :state="isValid.mail" @input="validateEmail"
+      />
+
+      <b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
+        {{ this.error.mail }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+
+    <!-- MAILBOX QUOTA -->
+    <b-form-group
+      label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
+      :description="$t('mailbox_quota_description')"
+    >
+      <b-input-group append="M">
+        <b-input
+          id="input-mailbox-quota" :placeholder="$t('mailbox_quota_placeholder')"
+          v-model="form.mailbox_quota" type="number" min="0"
+        />
+      </b-input-group>
+    </b-form-group>
+
+    <!-- USER PASSWORD -->
+    <b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
+      <b-input
+        id="input-password" placeholder="••••••••"
+        aria-describedby="password-feedback" required
+        v-model="form.password" type="password"
+        :state="isValid.password" @input="validatePassword"
+      />
+      <b-form-invalid-feedback id="password-feedback" :state="isValid.password">
+        {{ $t('passwords_too_short') }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+
+    <!-- USER PASSWORD CONFIRMATION -->
+    <b-form-group
+      label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
+      :description="$t('good_practices_about_user_password')"
+    >
+      <b-input
+        id="input-confirmation" placeholder="••••••••"
+        aria-describedby="confirmation-feedback" required
+        v-model="form.confirmation" type="password"
+        :state="isValid.confirmation" @input="validatePassword"
+      />
+      <b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
+        {{ $t('passwords_dont_match') }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+
+    <b-form-invalid-feedback id="global-feedback" :state="server.isValid">
+      {{ this.server.error }}
+    </b-form-invalid-feedback>
+  </basic-form>
 </template>
 
 <script>
+import BasicForm from '@/components/BasicForm'
 import SplittedMailInput from '@/components/SplittedMailInput'
 
 export default {
@@ -220,7 +209,8 @@ export default {
     this.$store.dispatch('FETCH_ALL', [{ uri: 'domains' }, { uri: 'users' }])
   },
   components: {
-    SplittedMailInput
+    SplittedMailInput,
+    BasicForm
   }
 }
 </script>
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 761ca871..77016545 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -1,138 +1,130 @@
 <template lang="html">
-  <div class="user-edit">
-    <b-card v-if="this.form.firstname" :header="user ? $t('user_username_edit', { name: user.username }) : ''" header-tag="h2">
-      <b-form id="user-edit" @submit.prevent="onSubmit">
-        <!-- USER FULLNAME -->
-        <b-form-group label-cols="auto">
-          <template v-slot:label aria-hidden="true">
-            {{ $t('user_fullname') }}
-          </template>
-
-          <div class="input-double">
-            <b-input-group>
-              <b-input-group-prepend
-                tag="label" class="ssr-only" is-text
-                for="input-firstname"
-              >
-                {{ $t('common.firstname') }}
-              </b-input-group-prepend>
-
-              <b-input
-                id="input-firstname" :placeholder="$t('placeholder.firstname')"
-                v-model="form.firstname"
-              />
-            </b-input-group>
-
-            <b-input-group>
-              <b-input-group-prepend
-                tag="label" class="ssr-only" is-text
-                for="input-lastname"
-              >
-                {{ $t('common.lastname') }}
-              </b-input-group-prepend>
-
-              <b-input
-                id="input-firstname" :placeholder="$t('placeholder.lastname')"
-                v-model="form.lastname"
-              />
-            </b-input-group>
-          </div>
-        </b-form-group>
-
-        <!-- USER EMAIL -->
-        <b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
-          <splitted-mail-input
-            id="input-email" feedback="email-feedback"
-            v-model="form.mail" :domains="domains"
-            :state="isValid.mail" @input="validateEmail"
-          />
-
-          <b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
-            {{ this.error.mail }}
-          </b-form-invalid-feedback>
-        </b-form-group>
-
-        <!-- MAILBOX QUOTA -->
-        <hr>
-        <b-form-group
-          label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
-          :description="$t('mailbox_quota_description')"
-        >
-          <b-input-group append="M">
-            <b-input
-              id="input-mailbox-quota" :placeholder="$t('mailbox_quota_placeholder')"
-              v-model="form['mailbox-quota']" type="number" min="0"
-            />
-          </b-input-group>
-        </b-form-group>
-
-        <!-- MAIL ALIASES -->
-        <hr>
-        <b-form-group label-cols="auto" :label="$t('user_emailaliases')" class="mail-list">
-          <splitted-mail-input
-            v-for="(alias, index) in form['mail-aliases']" :key="index"
-            feedback="mail-aliases-feedback"
-            v-model="form['mail-aliases'][index]" :domains="domains"
-          />
-        </b-form-group>
-
-        <!-- MAIL FORWARD -->
-        <hr>
-        <b-form-group label-cols="auto" :label="$t('user_emailforward')" class="mail-list">
-          <b-input
-            v-for="(forward, index) in form['mail-forward']" :key="index"
-            id="input-mailbox-quota" :placeholder="$t('user_new_forward')"
-            v-model="form['mail-forward'][index]" type="email"
-          />
-        </b-form-group>
-
-        <!-- USER PASSWORD -->
-        <hr>
-        <b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
-          <b-input
-            id="input-password" placeholder="••••••••"
-            aria-describedby="password-feedback"
-            v-model="form.password" type="password"
-            :state="isValid.password" @input="validatePassword"
-          />
-          <b-form-invalid-feedback id="password-feedback" :state="isValid.password">
-            {{ $t('passwords_too_short') }}
-          </b-form-invalid-feedback>
-        </b-form-group>
-
-        <!-- USER PASSWORD CONFIRMATION -->
-        <b-form-group
-          label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
-          :description="$t('good_practices_about_user_password')"
-        >
-          <b-input
-            id="input-confirmation" placeholder="••••••••"
-            aria-describedby="confirmation-feedback"
-            v-model="form.confirmation" type="password"
-            :state="isValid.confirmation" @input="validatePassword"
-          />
-          <b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
-            {{ $t('passwords_dont_match') }}
-          </b-form-invalid-feedback>
-        </b-form-group>
-
-        <b-form-invalid-feedback id="global-feedback" :state="server.isValid">
-          {{ this.server.error }}
-        </b-form-invalid-feedback>
-      </b-form>
-
-      <template v-slot:footer>
-        <div class="d-flex d-flex justify-content-end">
-          <b-button type="submit" form="user-edit" variant="success">
-            {{ $t('save') }}
-          </b-button>
-        </div>
+  <basic-form
+    v-if="user" :header="$t('user_username_edit', { name: user.username })"
+    @submit.prevent="onSubmit"
+  >
+    <!-- USER FULLNAME -->
+    <b-form-group label-cols="auto">
+      <template v-slot:label aria-hidden="true">
+        {{ $t('user_fullname') }}
       </template>
-    </b-card>
-  </div>
+
+      <div class="input-double">
+        <b-input-group>
+          <b-input-group-prepend
+            tag="label" class="ssr-only" is-text
+            for="input-firstname"
+          >
+            {{ $t('common.firstname') }}
+          </b-input-group-prepend>
+
+          <b-input
+            id="input-firstname" :placeholder="$t('placeholder.firstname')"
+            v-model="form.firstname"
+          />
+        </b-input-group>
+
+        <b-input-group>
+          <b-input-group-prepend
+            tag="label" class="ssr-only" is-text
+            for="input-lastname"
+          >
+            {{ $t('common.lastname') }}
+          </b-input-group-prepend>
+
+          <b-input
+            id="input-firstname" :placeholder="$t('placeholder.lastname')"
+            v-model="form.lastname"
+          />
+        </b-input-group>
+      </div>
+    </b-form-group>
+
+    <!-- USER EMAIL -->
+    <b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
+      <splitted-mail-input
+        id="input-email" feedback="email-feedback"
+        v-model="form.mail" :domains="domains"
+        :state="isValid.mail" @input="validateEmail"
+      />
+
+      <b-form-invalid-feedback id="email-feedback" :state="isValid.mail">
+        {{ this.error.mail }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+
+    <!-- MAILBOX QUOTA -->
+    <hr>
+    <b-form-group
+      label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
+      :description="$t('mailbox_quota_description')"
+    >
+      <b-input-group append="M">
+        <b-input
+          id="input-mailbox-quota" :placeholder="$t('mailbox_quota_placeholder')"
+          v-model="form['mailbox-quota']" type="number" min="0"
+        />
+      </b-input-group>
+    </b-form-group>
+
+    <!-- MAIL ALIASES -->
+    <hr>
+    <b-form-group label-cols="auto" :label="$t('user_emailaliases')" class="mail-list">
+      <splitted-mail-input
+        v-for="(alias, index) in form['mail-aliases']" :key="index"
+        feedback="mail-aliases-feedback"
+        v-model="form['mail-aliases'][index]" :domains="domains"
+      />
+    </b-form-group>
+
+    <!-- MAIL FORWARD -->
+    <hr>
+    <b-form-group label-cols="auto" :label="$t('user_emailforward')" class="mail-list">
+      <b-input
+        v-for="(forward, index) in form['mail-forward']" :key="index"
+        id="input-mailbox-quota" :placeholder="$t('user_new_forward')"
+        v-model="form['mail-forward'][index]" type="email"
+      />
+    </b-form-group>
+
+    <!-- USER PASSWORD -->
+    <hr>
+    <b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
+      <b-input
+        id="input-password" placeholder="••••••••"
+        aria-describedby="password-feedback"
+        v-model="form.password" type="password"
+        :state="isValid.password" @input="validatePassword"
+      />
+      <b-form-invalid-feedback id="password-feedback" :state="isValid.password">
+        {{ $t('passwords_too_short') }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+
+    <!-- USER PASSWORD CONFIRMATION -->
+    <b-form-group
+      label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
+      :description="$t('good_practices_about_user_password')"
+    >
+      <b-input
+        id="input-confirmation" placeholder="••••••••"
+        aria-describedby="confirmation-feedback"
+        v-model="form.confirmation" type="password"
+        :state="isValid.confirmation" @input="validatePassword"
+      />
+      <b-form-invalid-feedback id="confirmation-feedback" :state="isValid.confirmation">
+        {{ $t('passwords_dont_match') }}
+      </b-form-invalid-feedback>
+    </b-form-group>
+
+    <b-form-invalid-feedback id="global-feedback" :state="server.isValid">
+      {{ this.server.error }}
+    </b-form-invalid-feedback>
+  </basic-form>
 </template>
 
 <script>
+import BasicForm from '@/components/BasicForm'
 import SplittedMailInput from '@/components/SplittedMailInput'
 
 export default {
@@ -249,7 +241,8 @@ export default {
     })
   },
   components: {
-    SplittedMailInput
+    SplittedMailInput,
+    BasicForm
   }
 }
 </script>