|
5 | 5 | > |
6 | 6 | <div class="flex flex-wrap -mx-3 mb-6"> |
7 | 7 | <div class="input-open"> |
8 | | - <input class="input" id="grid-username" type="text" name="user" aria-labelledby="grid-username" required |
| 8 | + <input class="input" id="grid-username" type="text" name="user" aria-labelledby="grid-username-label" required |
9 | 9 | ref="email" |
10 | 10 | :class="{ 'has-content' : user.email.length > 0 }" |
11 | 11 | :readonly="showSpinner" |
12 | 12 | :value="user.email" |
13 | 13 | v-on:input="updateEmail($event)" |
14 | 14 | /> |
15 | | - <label for="grid-username">{{ $t('strings.user_identifier') }}</label> |
| 15 | + <label id="grid-username-label" for="grid-username">{{ $t('strings.user_identifier') }}</label> |
16 | 16 | </div> |
17 | 17 | </div> |
18 | 18 | <div class="flex flex-wrap -mx-3 mb-6"> |
19 | 19 | <div class="input-open"> |
20 | | - <input class="input" id="grid-password" type="password" name="password" aria-labelledby="grid-password" required |
| 20 | + <input class="input" id="grid-password" type="password" name="password" aria-labelledby="grid-password-label" required |
21 | 21 | ref="password" |
22 | 22 | :class="{ 'has-content' : user.password && user.password.length > 0 }" |
23 | 23 | :readonly="showSpinner" |
24 | 24 | v-model="user.password" |
25 | 25 | /> |
26 | | - <label for="grid-password">{{ $t('strings.password') }}</label> |
| 26 | + <label id="grid-password-label" for="grid-password">{{ $t('strings.password') }}</label> |
27 | 27 | </div> |
28 | 28 | </div> |
29 | 29 | <div> |
30 | | - <button class="btn btn-blue btn-jumbo" type="submit" v-bind:disabled="showSpinner"> |
| 30 | + <button id="grid-login-button" class="btn btn-blue btn-jumbo" type="submit" aria-label="Log in" |
| 31 | + v-bind:disabled="showSpinner"> |
31 | 32 | <span class="spinner white" v-bind:class="{ hidden: ! showSpinner }"> </span> |
32 | 33 | <span v-bind:class="{ hidden: showSpinner }"> |
33 | 34 | {{ $t('auth.sign_in') }} |
34 | 35 | </span> |
35 | 36 | </button> |
36 | 37 | </div> |
37 | 38 | <div class="pt-6 text-center"> |
38 | | - <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" |
| 39 | + <router-link class="text-xs text-grey tracking-wide no-underline uppercase hover:text-grey-dark" aria-label="Forgot password" |
39 | 40 | :to="{ name: 'forgot-password' }"> |
40 | 41 | {{ $t('auth.forgot_password.label') }} |
41 | 42 | </router-link> |
|
81 | 82 | password: this.$props.user.password, |
82 | 83 | }) |
83 | 84 | .then(function (response) { |
| 85 | + // If there is a 302 redirect or some other odd behavior (basically, response that isnt |
| 86 | + // in JSON format) throw an error and don't try to continue with the login. |
| 87 | + if (!(response.data instanceof Object)) { |
| 88 | + throw new Error('An error was encountered while processing this request.'); |
| 89 | + } |
| 90 | +
|
84 | 91 | if (response.data.complete) { |
85 | 92 | localStorage.setItem('token', response.data.token); |
86 | 93 | self.$store.dispatch('login'); |
|
94 | 101 | .catch(function (err) { |
95 | 102 | self.$props.user.password = ''; |
96 | 103 | self.$data.showSpinner = false; |
| 104 | + self.$refs.password.focus(); |
97 | 105 | self.$store.dispatch('logout'); |
98 | 106 |
|
99 | 107 | if (!err.response) { |
|
105 | 113 | response.data.errors.forEach(function (error) { |
106 | 114 | self.error(error.detail); |
107 | 115 | }); |
108 | | - self.$refs.password.focus(); |
109 | 116 | } |
110 | 117 | }); |
111 | 118 | }, |
|
0 commit comments