Fix accessibility violations and use b-form-group

- Update authError to be set to false in order to hide the error
message when the user logs in. This is needed if the user name
or password are incorrect multiple times. If it is not hidden
between login attempts, the user will only be notified on the
first attempt.
- Use the b-form-group component for consistency.
- Add id attributes to the required field error messages so that
the error can be added to the input field's aria-describedby attribute

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I86902cc2c85b3bbf156c2920ec2031ee4dccd2ef

2 files changed, 17 insertions, 12 deletions

diff --git a/src/store/modules/Authentication/AuthenticanStore.js b/src/store/modules/Authentication/AuthenticanStore.js
index 975f258b..d64c7308 100644
--- a/src/store/modules/Authentication/AuthenticanStore.js
+++ b/src/store/modules/Authentication/AuthenticanStore.js
@@ -17,8 +17,8 @@ const AuthenticationStore = {
       state.authError = false;
       state.cookie = Cookies.get('XSRF-TOKEN');
     },
-    authError(state) {
-      state.authError = true;
+    authError(state, authError = true) {
+      state.authError = authError;
     },
     logout() {
       Cookies.remove('XSRF-TOKEN');
@@ -26,6 +26,7 @@ const AuthenticationStore = {
   },
   actions: {
     login({ commit }, auth) {
+      commit('authError', false);
       return api
         .post('/login', { data: auth })
         .then(() => commit('authSuccess'))
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 2018720c..da96844a 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -21,44 +21,48 @@
                 <span>{{ $t('pageLogin.alert.action') }}</span>
               </p>
             </b-alert>
-            <div class="login-form__section">
-              <label for="language">{{ $t('pageLogin.language') }}</label>
+            <b-form-group
+              label-for="language"
+              :label="$t('pageLogin.language')"
+            >
               <b-form-select
                 id="language"
                 v-model="$i18n.locale"
                 :options="languages"
               ></b-form-select>
-            </div>
-            <div class="login-form__section">
-              <label for="username">{{ $t('pageLogin.username') }}</label>
+            </b-form-group>
+            <b-form-group
+              label-for="username"
+              :label="$t('pageLogin.username')"
+            >
               <b-form-input
                 id="username"
                 v-model="userInfo.username"
-                :aria-describedby="authError ? 'login-error-alert' : ''"
+                aria-describedby="login-error-alert username-required"
                 :state="getValidationState($v.userInfo.username)"
                 type="text"
                 autofocus="autofocus"
                 @input="$v.userInfo.username.$touch()"
               >
               </b-form-input>
-              <b-form-invalid-feedback role="alert">
+              <b-form-invalid-feedback id="username-required" role="alert">
                 <template v-if="!$v.userInfo.username.required">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
               </b-form-invalid-feedback>
-            </div>
+            </b-form-group>
             <div class="login-form__section">
               <label for="password">{{ $t('pageLogin.password') }}</label>
               <b-form-input
                 id="password"
                 v-model="userInfo.password"
-                :aria-describedby="authError ? 'login-error-alert' : ''"
+                aria-describedby="login-error-alert password-required"
                 :state="getValidationState($v.userInfo.password)"
                 type="password"
                 @input="$v.userInfo.password.$touch()"
               >
               </b-form-input>
-              <b-form-invalid-feedback role="alert">
+              <b-form-invalid-feedback id="password-required" role="alert">
                 <template v-if="!$v.userInfo.password.required">
                   {{ $t('global.form.fieldRequired') }}
                 </template>