<%= htmlWebpackPlugin.options.title %>

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 --- package-lock.json | 15 +++++++++++++++ package.json | 1 + public/index.html | 2 +- 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 +++++++++++++-------------- 9 files changed, 80 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index f977a93..e43eb2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "axios": "^0.24.0", "core-js": "^3.6.5", "vue": "^2.6.11", + "vue-notification": "^1.3.20", "vue-router": "^3.2.0", "vuex": "^3.4.0", "vuex-persistedstate": "^4.1.0" @@ -14033,6 +14034,14 @@ "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=", "dev": true }, + "node_modules/vue-notification": { + "version": "1.3.20", + "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz", + "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==", + "peerDependencies": { + "vue": "^2.0.0" + } + }, "node_modules/vue-router": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz", @@ -26477,6 +26486,12 @@ } } }, + "vue-notification": { + "version": "1.3.20", + "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz", + "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==", + "requires": {} + }, "vue-router": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz", diff --git a/package.json b/package.json index 5673ddf..670f685 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "axios": "^0.24.0", "core-js": "^3.6.5", "vue": "^2.6.11", + "vue-notification": "^1.3.20", "vue-router": "^3.2.0", "vuex": "^3.4.0", "vuex-persistedstate": "^4.1.0" diff --git a/public/index.html b/public/index.html index fb5db08..9ae317a 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ <%= htmlWebpackPlugin.options.title %> - + 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 @@ -

- 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 @@ -

- 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