From 319dd896f3a44237e1c26f3887fcb259f80f2714 Mon Sep 17 00:00:00 2001
From: jdlugosz963 <jdlugosz963@gmail.com>
Date: Thu, 11 Nov 2021 23:10:03 +0100
Subject: clean code and add notifications

---
 src/App.vue                 |  1 +
 src/main.js                 |  3 +++
 src/services/AuthService.js | 34 ++++++++++++++++++++++++++++++++--
 src/views/Home.vue          |  2 +-
 src/views/Login.vue         | 25 +++++++++++++------------
 src/views/Register.vue      | 27 +++++++++++++--------------
 6 files changed, 63 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 403eae2..9d9e5ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <router-view/>
+    <notifications />
   </div>
 </template>
 
diff --git a/src/main.js b/src/main.js
index c370aef..95d9800 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,11 +3,14 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import Axios from 'axios'
+import Notifications from 'vue-notification'
 
 Vue.config.productionTip = false
 
 Axios.defaults.headers.common['Authorization'] = store.state.token !== "" && `Token ${store.state.token}`;
 
+Vue.use(Notifications)
+
 new Vue({
   router,
   store,
diff --git a/src/services/AuthService.js b/src/services/AuthService.js
index 626a8fb..402d196 100644
--- a/src/services/AuthService.js
+++ b/src/services/AuthService.js
@@ -1,17 +1,47 @@
 import axios from "axios";
+import Vue from 'vue'
 
 const url = 'http://localhost:8000/api/auth/'
 
+const error_notify = (error) => {
+    for (const [key, values] of Object.entries(error.response.data)) {
+        values.forEach(value => {
+            Vue.notify({
+                type: 'error',
+                title: value,
+                text: key
+            })
+        })
+    }
+    return {
+        data: error.response.data,
+        status: error.response.status
+    }
+}
+
 export default {
     async login(data) {
         return await axios
         .post(url+'login/', data)
-        .then(res => res.data)
+        .then(res => {
+            return {
+                data: res.data,
+                status: res.status
+            }
+        })
+        .catch(error => error_notify(error))
     },
 
     async register(data) { 
         return await axios
         .post(url+'register/', data)
-        .then(res => res.data)
+        .then(res => {
+            return {
+                data: res.data,
+                status: res.status
+            }
+        })
+        .catch(error => error_notify(error))
+
     }
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e5b446b..5a2a903 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -16,7 +16,7 @@ export default {
 
   computed: {
     get_username() {
-      return this.$store.getters.get_user.username
+      return this.$store.getters['get_user'].username
     }
   },
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index ae43ecd..cb5c8d8 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -6,9 +6,8 @@
 
         <input type="submit" value="Login!">
       </form>
-      <p v-for="(mess, key) in messages" :key="key">{{mess}}</p>
 
-      <router-link to="/register"> Still don't have account? </router-link>
+      <router-link to="/register"> Still don't have an account? </router-link>
       
     </div>
 </template>
@@ -21,25 +20,27 @@ export default {
         return {
             login: "",
             password: "",
-            messages: []
         }
     },
     methods: {
         async log_in(e) {
             e.preventDefault()
 
-            const data = {
+            const login_data = {
                 "username": this.login,
                 "password": this.password
             }
-            try{
-                const res = await AuthService.login(data)
-                this.$store.dispatch('login', {token: res.token, user: res.user})
-                this.$router.push('/') 
-            } catch (error) {
-                console.log(error.response.data)
-                this.messages.push('Wrong username or password!')
-            }
+
+            const {data, status} = await AuthService.login(login_data)
+
+            if (status === 200) {
+                this.$store.dispatch('login', {token: data.token, user: data.user})
+                this.$notify({
+                    type: 'success',
+                    text: 'Success!'
+                })
+                this.$router.push('/')
+            } 
         }
     },
     created() {
diff --git a/src/views/Register.vue b/src/views/Register.vue
index c03f5fd..eb382c5 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -7,9 +7,8 @@
 
         <input type="submit" value="Register!">
       </form>
-      <p v-for="(mess, key) in messages" :key="key">{{mess}}</p>
 
-      <router-link to="/login">Already have account?</router-link>
+      <router-link to="/login">Already have an account?</router-link>
       
     </div>
 </template>
@@ -23,7 +22,6 @@ export default {
             login: "",
             password: "",
             repeat_password: "",
-            messages: []
         }
     },
     methods: {
@@ -32,27 +30,28 @@ export default {
 
             e.preventDefault()
             if(this.password !== this.repeat_password){
-                this.messages.push("Passwords not equals")
+                this.$notify({
+                    type: 'warn',
+                    text: 'Passwords not equals',
+                })
                 this.password = ""
                 this.repeat_password = ""
 
                 return null
             }
 
-            const data = {
+            const register_data = {
                 "username": this.login,
                 "password": this.password
             }
 
-            try {
-                await AuthService.register(data)
-                this.messages.push("Success!")
-            }catch (error) {
-                if(error.response.data.username)
-                    this.messages.push(error.response.data.username[0])
-                if (error.response.data.password)
-                    this.messages.push(error.response.data.password[0])
-
+            const { status } = await AuthService.register(register_data)
+            if (status === 200) {
+                this.$notify({
+                    type: 'success',
+                    text:'Register success, you can now login.!'
+                })
+                this.$router.push('/login')
             }
         }
     },
-- 
cgit v1.2.3