Upgrade to vuetify1.0 / login error message

closes #65
closes #59

frontend/package.json

@@ -16,7 +16,7 @@
     "axios": "^0.17.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
-    "vuetify": "^0.16.9",
+    "vuetify": "^0.17.3",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

frontend/src/components/Login.vue

@@ -4,20 +4,30 @@
           <v-flex text-xs-center md4 lg2>
             <img src="../assets/brand.png"/>
             <h3 class="pt-3">Log in</h3>
-            <p>But I corrected them, sir.</p>
-
-            <v-form>
+            <v-alert
+              outline
+              v-if="error"
+              color="error"
+              :value="true"
+              transition="fade-transition"
+            >{{ error }}</v-alert>
+            <p v-else>But I corrected them, sir.</p>
+            <v-form
+              @submit="submit">
               <v-text-field
                 label="Username"
                 v-model="credentials.username"
-                required></v-text-field>
+                required
+                autofocus
+                ></v-text-field>
               <v-text-field
                 label="Password"
                 v-model="credentials.password"
                 type="password"
-                required></v-text-field>
+                required
+                ></v-text-field>
+              <v-btn type="submit" color="primary">Access</v-btn>
             </v-form>
-            <v-btn color="primary" @click="submit()">Access</v-btn>
           </v-flex>
         </v-layout>
       </v-container>
@@ -38,12 +48,10 @@
     },
     methods: {
       submit () {
-        const credentials = {
-          username: this.credentials.username,
-          password: this.credentials.password
-        }
-        this.$store.dispatch('getToken', credentials).then(response => {
+        this.$store.dispatch('getJWTToken', this.credentials).then(response => {
           this.$router.push('/reviewer/')
+        }).catch(_ => {
+          this.error = this.$store.state.error
         })
       }
     }

frontend/src/store/store.js

@@ -8,9 +8,13 @@ const store = new Vuex.Store({
   state: {
     token: '',
     loggedIn: false,
-    username: ''
+    username: '',
+    error: ''
   },
   mutations: {
+    'API_FAIL': function (state, error) {
+      state.error = error
+    },
     'LOGIN': function (state, creds) {
       state.token = creds.token
       state.loggedIn = true
@@ -22,13 +26,24 @@ const store = new Vuex.Store({
     }
   },
   actions: {
-    async getToken (store, credentials) {
-      const response = await ax.post('api-token-auth/', credentials)
-      store.commit('LOGIN', {
-        token: response.data.token,
-        username: credentials.username
-      })
-      ax.defaults.headers.common['Authorization'] = 'JWT ' + response.data.token
+    async getJWTToken (context, credentials) {
+      try {
+        const response = await ax.post('api-token-auth/', credentials)
+        context.commit('LOGIN', {
+          token: response.data.token,
+          username: credentials.username
+        })
+      } catch (error) {
+        if (error.response) {
+          const errorMsg = 'Unable to log in with provided credentials.'
+          context.commit('API_FAIL', errorMsg)
+          throw errorMsg
+        } else {
+          const errorMsg = 'Cannot reach server.'
+          context.commit('API_FAIL', errorMsg)
+          throw errorMsg
+        }
+      }
     },
     logout (store) {
       store.commit('LOGOUT')

frontend/yarn.lock

@@ -5842,9 +5842,9 @@ vue@^2.5.2:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.3.tgz#e1a3b1f49b6e93e574ce040b95cbc873912fecc1"
 
-vuetify@^0.16.9:
-  version "0.16.9"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-0.16.9.tgz#fd61f219e4a40d7afe5e24a803df5658a40b38e4"
+vuetify@^0.17.3:
+  version "0.17.3"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-0.17.3.tgz#66280c5532b12d80c0ce75f4574d1d5a8c2955b9"
 
 vuex@^3.0.1:
   version "3.0.1"