From 6707f6acc9e14f5097e351bf3490199e40bd3b89 Mon Sep 17 00:00:00 2001
From: "robinwilliam.hundt" <robinwilliam.hundt@stud.uni-goettingen.de>
Date: Sun, 3 Dec 2017 22:56:41 +0100
Subject: [PATCH] Upgrade to vuetify1.0 / login error message
closes #65
closes #59
---
frontend/package.json | 2 +-
frontend/src/components/Login.vue | 30 +++++++++++++++++++-----------
frontend/src/store/store.js | 31 +++++++++++++++++++++++--------
frontend/yarn.lock | 6 +++---
4 files changed, 46 insertions(+), 23 deletions(-)
diff --git a/frontend/package.json b/frontend/package.json
index e657774d..9a8b2be5 100644
--- a/frontend/package.json
+++ b/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": {
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 22dd0f09..fddc17ee 100644
--- a/frontend/src/components/Login.vue
+++ b/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
})
}
}
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index 150521a0..3eb032bf 100644
--- a/frontend/src/store/store.js
+++ b/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')
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a73065fa..7fac4471 100644
--- a/frontend/yarn.lock
+++ b/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"
--
GitLab