From bd4b354f86f4072cc3f865e811d1534fd6e527bf Mon Sep 17 00:00:00 2001
From: Jonathan Baecker <jb@pixelcrusher.de>
Date: Tue, 12 May 2020 18:07:53 +0200
Subject: [PATCH] warn about wrong credentials, fix #9

---
 ffplayout/frontend/pages/index.vue | 26 +++++++++++++++++++-------
 ffplayout/frontend/store/auth.js   |  7 ++++++-
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/ffplayout/frontend/pages/index.vue b/ffplayout/frontend/pages/index.vue
index 3bddc13a..0caf55b6 100644
--- a/ffplayout/frontend/pages/index.vue
+++ b/ffplayout/frontend/pages/index.vue
@@ -8,18 +8,24 @@
                         <h1>ffplayout</h1>
                     </div>
                     <b-form class="login-form" @submit.prevent="login">
-                        <p v-if="formError" class="error">
-                            {{ formError }}
-                        </p>
                         <b-form-group id="input-group-1" label="User:" label-for="input-user">
                             <b-form-input id="input-user" v-model="formUsername" type="text" required placeholder="Username" />
                         </b-form-group>
                         <b-form-group id="input-group-1" label="Password:" label-for="input-pass">
                             <b-form-input id="input-pass" v-model="formPassword" type="password" required placeholder="Password" />
                         </b-form-group>
-                        <b-button type="submit" variant="primary">
-                            Login
-                        </b-button>
+                        <b-row>
+                            <b-col cols="3">
+                                <b-button type="submit" variant="primary">
+                                    Login
+                                </b-button>
+                            </b-col>
+                            <b-col cols="9">
+                                <b-alert variant="danger" :show="showError" dismissible @dismissed="showError=false">
+                                    {{ formError }}
+                                </b-alert>
+                            </b-col>
+                        </b-row>
                     </b-form>
                 </div>
             </b-container>
@@ -160,6 +166,7 @@ export default {
 
     data () {
         return {
+            showError: false,
             formError: null,
             formUsername: '',
             formPassword: '',
@@ -180,7 +187,7 @@ export default {
         },
         async login () {
             try {
-                await this.$store.dispatch('auth/obtainToken', {
+                const status = await this.$store.dispatch('auth/obtainToken', {
                     username: this.formUsername,
                     password: this.formPassword
                 })
@@ -188,6 +195,11 @@ export default {
                 this.formPassword = ''
                 this.formError = null
 
+                if (status === 401) {
+                    this.formError = 'Wrong user or password!'
+                    this.showError = true
+                }
+
                 this.checkLogin()
             } catch (e) {
                 this.formError = e.message
diff --git a/ffplayout/frontend/store/auth.js b/ffplayout/frontend/store/auth.js
index ea79a418..005031da 100644
--- a/ffplayout/frontend/store/auth.js
+++ b/ffplayout/frontend/store/auth.js
@@ -33,6 +33,7 @@ export const actions = {
             username,
             password
         }
+        let code = null
         await this.$axios.post('auth/token/', payload)
             .then((response) => {
                 commit('UPADTE_TOKEN', { token: response.data.access, refresh: response.data.refresh })
@@ -47,10 +48,14 @@ export const actions = {
                     maxAge: 60 * 60 * 24 * 365,
                     sameSite: 'lax'
                 })
+
+                code = response.status
             })
             .catch((error) => {
-                console.log(error)
+                code = error.response.status
             })
+
+        return code
     },
     async refreshToken ({ commit, state }) {
         const payload = {