From 319dd896f3a44237e1c26f3887fcb259f80f2714 Mon Sep 17 00:00:00 2001 From: jdlugosz963 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 @@ 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 @@ -

{{mess}}

- Still don't have account? + Still don't have an account? @@ -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 @@ -

{{mess}}

- Already have account? + Already have an account? @@ -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