From 27ab388636a5b2092ed8e45ed6850913f33b1006 Mon Sep 17 00:00:00 2001
From: rchrist <rchrist@stud.hs-heilbronn.de>
Date: Wed, 15 May 2019 13:45:54 +0200
Subject: [PATCH] login validation completed

---
 frontend/src/pages/Login.vue    | 42 ++++++++++++++++++---------------
 frontend/src/pages/Register.vue |  1 +
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index ebf4457..e0c66b6 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -2,20 +2,21 @@
   <div class="q-pa-md">
     <form class="login">
       <div class="q-pa-md">
+        <p class="text-black text-h5"> Login </p>
         <div class="column q-gutter-lg" style="">
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
-                <q-input outlined filled stack-label v-model="user.email" type="text" label="Email"
-                         autocomplete="username"/>
+                <q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="Email"
+                         autocomplete="username" :rules="[val=>validateEmail(val)||'Bitte gültige E-Mail eingeben!']"/>
               </div>
             </div>
           </div>
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
-                <q-input outlined filled stack-label v-model="user.password" type="password" label="Passwort"
-                         autocomplete="current-password"/>
+                <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password" label="Passwort"
+                         autocomplete="current-password" :rules="[val=>val.length>=8||'Bitte gültiges Passwort eingeben!']"/>
               </div>
             </div>
           </div>
@@ -24,7 +25,7 @@
               <div class="" style="max-width: 440px">
                 <q-btn
                   :outline="userAuthenticated"
-                  :disabled="userAuthenticated"
+                  :disabled="!loginValidation"
                   :loading="loading"
                   label="Login"
                   color="primary"
@@ -34,19 +35,10 @@
                   unelevated
                 >
                   <template v-slot:loading>
-                    <q-spinner-oval class="on-left" />
+                    <q-spinner-oval class="on-left"/>
                     wird eingeloggt...
                   </template>
                 </q-btn>
-                <q-btn
-                  :outline="!userAuthenticated"
-                  :disabled="!userAuthenticated"
-                  label="Logout"
-                  color="red"
-                  class="full-width q-mt-md"
-                  unelevated
-                  @click="logout"
-                />
                 <div class="q-pt-md">
                   <q-btn
                     :disabled="userAuthenticated"
@@ -86,7 +78,15 @@
         console.log("login: userAuthenticated()");
         console.log(this.$store.state.auth.isAuthenticated);
         return this.$store.state.auth.isAuthenticated;
-      }
+      },
+      loginValidation() {
+        if (this.validateEmail(this.user.email)
+          && this.user.password.length>=8
+          && !this.$store.state.auth.isAuthenticated) {
+          return true;
+        }
+        return false;
+      },
     },
     methods: {
       login: function () {
@@ -99,7 +99,7 @@
 
         console.log("GET /api/login/ - json: " + JSON.stringify(data));
 
-        this.$axios.post(process.env.USER_API+'/account/login', data)
+        this.$axios.post(process.env.USER_API + '/account/login', data)
           .then((response) => {
             console.log("GET/POST /api/login/ - response: ");
             console.log(response.data);
@@ -127,8 +127,8 @@
           console.log(error.config);
           this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
         }).finally(() => {
-            this.loading = false;
-            this.evalAuthentication();
+          this.loading = false;
+          this.evalAuthentication();
         })
       },
       evalAuthentication: function () {
@@ -141,6 +141,10 @@
         localStorage.removeItem('userToken');
         this.evalAuthentication();
       },
+      validateEmail(email) {
+        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(String(email).toLowerCase());
+      },
     },
   };
 </script>
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index 868d5b7..1b364ea 100644
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -2,6 +2,7 @@
   <div class="q-pa-md">
     <form class="register" autocomplete="off">
       <div class="q-pa-md">
+        <p class="text-h5 text-black"> Registrierung </p>
         <div class="column q-gutter-lg" style="">
           <div class="col">
             <div class="">