changeset 619:6af5f8fee3a3

fix: No toast for unauthorized login In case username and password did not match, an error message as well as a toast was shown. In case of NOT AUTHORIZED (401) the toast is omitted now
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 11 Sep 2018 11:40:31 +0200
parents b7b69d25cafe
children ef00684e021f
files client/src/login/Login.vue
diffstat 1 files changed, 56 insertions(+), 51 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/login/Login.vue	Tue Sep 11 11:27:42 2018 +0200
+++ b/client/src/login/Login.vue	Tue Sep 11 11:40:31 2018 +0200
@@ -1,53 +1,53 @@
 (<template>
-  <div class="d-flex flex-column login shadow-lg">
-    <div class="loginmask">
-      <!-- logo section -->
-      <div class="d-flex flex-row justify-content-center mb-3">
-        <div class="logo"><img src="../application/assets/logo.png"></div>
-        <div class="title">
-          <h1>{{ appTitle }}</h1>
-        </div>
-      </div>
-      <!-- end logo section -->
-      <form class="loginform" @submit.prevent="login">
-        <div id="alert" :style="errorMessageStyle" :class="errorMessageClass" role="alert">
-          <span>{{ errorMessage }}</span>
-        </div>
-        <div class="input-group mb-3">
-          <input type="text" v-model="user" id="inputUsername" class="form-control shadow-sm" :placeholder="usernameLabel" required autofocus>
+    <div class="d-flex flex-column login shadow-lg">
+        <div class="loginmask">
+            <!-- logo section -->
+            <div class="d-flex flex-row justify-content-center mb-3">
+                <div class="logo"><img src="../application/assets/logo.png"></div>
+                <div class="title">
+                    <h1>{{ appTitle }}</h1>
+                </div>
+            </div>
+            <!-- end logo section -->
+            <form class="loginform" @submit.prevent="login">
+                <div id="alert" :style="errorMessageStyle" :class="errorMessageClass" role="alert">
+                    <span>{{ errorMessage }}</span>
+                </div>
+                <div class="input-group mb-3">
+                    <input type="text" v-model="user" id="inputUsername" class="form-control shadow-sm" :placeholder="usernameLabel" required autofocus>
+                </div>
+                <div class="input-group mb-3">
+                    <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control shadow-sm" :placeholder='passwordLabel' :required='!showPasswordReset' :disabled='showPasswordReset'>
+                    <div class="input-group-append">
+                        <span class="input-group-text disabled" id="basic-addon2" @click="showPassword">
+                            <i :class="eyeIcon"></i>
+                        </span>
+                    </div>
+                </div>
+                <button v-if="showPasswordReset==false" class="btn btn-primary btn-block shadow-sm" :disabled="submitted || showPasswordReset" type="submit">
+                    <translate>Login</translate>
+                </button>
+                <div v-if="showPasswordReset" class="passwordreset">
+                    <button class="btn btn-block btn-info" type="button" @click="resetPassword">
+                        <translate>Request password reset!</translate>
+                    </button>
+                    <div class="pull-right">
+                        <a href="#" @click.prevent="togglePasswordReset">
+                            <translate>back to login</translate>
+                        </a>
+                    </div>
+                </div>
+                <div v-else class="pull-right">
+                    <a href="#" @click.prevent="togglePasswordReset">
+                        <translate>Forgot password</translate>
+                    </a>
+                </div>
+            </form>
+
+            <!-- bottom logo section -->
+            <div class="mb-3 secondary-logo"><img :src="secondaryLogo"></div>
         </div>
-        <div class="input-group mb-3">
-          <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control shadow-sm" :placeholder='passwordLabel' :required='!showPasswordReset' :disabled='showPasswordReset'>
-          <div class="input-group-append">
-            <span class="input-group-text disabled" id="basic-addon2" @click="showPassword">
-              <i :class="eyeIcon"></i>
-            </span>
-          </div>
-        </div>
-        <button v-if="showPasswordReset==false" class="btn btn-primary btn-block shadow-sm" :disabled="submitted || showPasswordReset" type="submit">
-          <translate>Login</translate>
-        </button>
-        <div v-if="showPasswordReset" class="passwordreset">
-          <button class="btn btn-block btn-info" type="button" @click="resetPassword">
-            <translate>Request password reset!</translate>
-          </button>
-          <div class="pull-right">
-            <a href="#" @click.prevent="togglePasswordReset">
-              <translate>back to login</translate>
-            </a>
-          </div>
-        </div>
-        <div v-else class="pull-right">
-          <a href="#" @click.prevent="togglePasswordReset">
-            <translate>Forgot password</translate>
-          </a>
-        </div>
-      </form>
-
-      <!-- bottom logo section -->
-      <div class="mb-3 secondary-logo"><img :src="secondaryLogo"></div>
     </div>
-  </div>
 </template>)
 
 <style lang="scss">
@@ -98,6 +98,8 @@
 import { HTTP } from "../application/lib/http.js";
 import { displayError } from "../application/lib/errors.js";
 
+const UNAUTHORIZED = 401;
+
 export default {
   name: "login",
   data() {
@@ -172,10 +174,13 @@
           this.loginFailed = true;
           this.submitted = false;
           const { status, data } = error.response;
-          displayError({
-            title: "Backend Error",
-            message: `${status}: ${data.message || data}`
-          });
+          if (status !== UNAUTHORIZED) {
+            //Unauthorized is handled in alert-div
+            displayError({
+              title: "Backend Error",
+              message: `${status}: ${data.message || data}`
+            });
+          }
         });
     },
     showPassword() {