login: add card-form with admin username input to login

app/src/i18n/locales/en.json

@@ -551,7 +551,7 @@
         "none": "None",
         "separator": ", "
     },
-    "wrong_password": "Wrong password",
+    "wrong_password_or_username": "Wrong password or username",
     "yes": "Yes",
     "yunohost_admin": "YunoHost Admin",
     "certificate_manage": "Manage SSL certificate",

app/src/store/info.js

@@ -142,8 +142,8 @@ export default {
       })
     },
 
-    'LOGIN' ({ dispatch }, password) {
+    'LOGIN' ({ dispatch }, credentials) {
-      return api.post('login', { credentials: password }, null, { websocket: false }).then(() => {
+      return api.post('login', { credentials }, null, { websocket: false }).then(() => {
         dispatch('CONNECT')
       })
     },

app/src/views/Login.vue

@@ -1,37 +1,35 @@
 <template>
-  <b-form @submit.prevent="login">
+  <card-form
-    <b-input-group>
+    :title="$t('login')" icon="lock"
-      <template v-slot:prepend>
+    :validation="$v" :server-error="serverError"
-        <b-input-group-text>
+    @submit.prevent="login"
-          <label class="sr-only" for="input-password">{{ $t('password') }}</label>
+  >
-          <icon iname="lock" class="sm" />
+    <!-- ADMIN USERNAME -->
-        </b-input-group-text>
+    <form-field v-bind="fields.username" v-model="form.username" :validation="$v.form.username" />
-      </template>
 
-      <b-form-input
+    <!-- ADMIN PASSWORD -->
-        id="input-password"
+    <form-field v-bind="fields.password" v-model="form.password" :validation="$v.form.password" />
-        required type="password"
-        v-model="password"
-        :placeholder="$t('administration_password')" :state="isValid"
-      />
 
-      <template v-slot:append>
+    <template #buttons>
-        <b-button type="submit" variant="success" :disabled="disabled">
+      <b-button
+        type="submit" variant="success"
+        :disabled="disabled" form="ynh-form"
+      >
         {{ $t('login') }}
       </b-button>
     </template>
-    </b-input-group>
+  </card-form>
-
-    <b-form-invalid-feedback :state="isValid">
-      {{ $t('wrong_password') }}
-    </b-form-invalid-feedback>
-  </b-form>
 </template>
 
 <script>
+import { validationMixin } from 'vuelidate'
+import { alphalownum_, required, minLength } from '@/helpers/validators'
+
 export default {
   name: 'Login',
 
+  mixins: [validationMixin],
+
   props: {
     skipInstallCheck: { type: Boolean, default: false },
     forceReload: { type: Boolean, default: false }
@@ -40,15 +38,42 @@ export default {
   data () {
     return {
       disabled: !this.skipInstallCheck,
-      password: '',
+      serverError: '',
-      isValid: null,
+      form: {
-      apiError: undefined
+        username: '',
+        password: ''
+      },
+      fields: {
+        username: {
+          label: this.$i18n.t('user_username'),
+          props: {
+            id: 'username'
+          }
+        },
+        password: {
+          label: this.$i18n.t('password'),
+          props: {
+            id: 'password',
+            type: 'password'
+          }
+        }
+      }
+    }
+  },
+
+  validations () {
+    return {
+      form: {
+        username: { required, alphalownum_ },
+        password: { required, passwordLenght: minLength(8) }
+      }
     }
   },
 
   methods: {
     login () {
-      this.$store.dispatch('LOGIN', this.password).then(() => {
+      const credentials = [this.form.username, this.form.password].join(':')
+      this.$store.dispatch('LOGIN', credentials).then(() => {
         if (this.forceReload) {
           window.location.href = '/yunohost/admin/'
         } else {
@@ -56,7 +81,7 @@ export default {
         }
       }).catch(err => {
         if (err.name !== 'APIUnauthorizedError') throw err
-        this.isValid = false
+        this.serverError = this.$i18n.t('wrong_password_or_username')
       })
     }
   },