summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorjdlugosz963 <jdlugosz963@gmail.com>2021-11-11 23:10:03 +0100
committerjdlugosz963 <jdlugosz963@gmail.com>2021-11-11 23:10:03 +0100
commit319dd896f3a44237e1c26f3887fcb259f80f2714 (patch)
tree7cca77696e363b614a8b1de20623c7bffccfbba0 /src
parent584275e57f57871ce1a3095be59c4ecb284a3c77 (diff)
downloadlom_frontend-319dd896f3a44237e1c26f3887fcb259f80f2714.tar.gz
lom_frontend-319dd896f3a44237e1c26f3887fcb259f80f2714.zip
clean code and add notifications
Diffstat (limited to 'src')
-rw-r--r--src/App.vue1
-rw-r--r--src/main.js3
-rw-r--r--src/services/AuthService.js34
-rw-r--r--src/views/Home.vue2
-rw-r--r--src/views/Login.vue25
-rw-r--r--src/views/Register.vue27
6 files changed, 63 insertions, 29 deletions
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 @@
1<template> 1<template>
2 <div id="app"> 2 <div id="app">
3 <router-view/> 3 <router-view/>
4 <notifications />
4 </div> 5 </div>
5</template> 6</template>
6 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'
3import router from './router' 3import router from './router'
4import store from './store' 4import store from './store'
5import Axios from 'axios' 5import Axios from 'axios'
6import Notifications from 'vue-notification'
6 7
7Vue.config.productionTip = false 8Vue.config.productionTip = false
8 9
9Axios.defaults.headers.common['Authorization'] = store.state.token !== "" && `Token ${store.state.token}`; 10Axios.defaults.headers.common['Authorization'] = store.state.token !== "" && `Token ${store.state.token}`;
10 11
12Vue.use(Notifications)
13
11new Vue({ 14new Vue({
12 router, 15 router,
13 store, 16 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 @@
1import axios from "axios"; 1import axios from "axios";
2import Vue from 'vue'
2 3
3const url = 'http://localhost:8000/api/auth/' 4const url = 'http://localhost:8000/api/auth/'
4 5
6const error_notify = (error) => {
7 for (const [key, values] of Object.entries(error.response.data)) {
8 values.forEach(value => {
9 Vue.notify({
10 type: 'error',
11 title: value,
12 text: key
13 })
14 })
15 }
16 return {
17 data: error.response.data,
18 status: error.response.status
19 }
20}
21
5export default { 22export default {
6 async login(data) { 23 async login(data) {
7 return await axios 24 return await axios
8 .post(url+'login/', data) 25 .post(url+'login/', data)
9 .then(res => res.data) 26 .then(res => {
27 return {
28 data: res.data,
29 status: res.status
30 }
31 })
32 .catch(error => error_notify(error))
10 }, 33 },
11 34
12 async register(data) { 35 async register(data) {
13 return await axios 36 return await axios
14 .post(url+'register/', data) 37 .post(url+'register/', data)
15 .then(res => res.data) 38 .then(res => {
39 return {
40 data: res.data,
41 status: res.status
42 }
43 })
44 .catch(error => error_notify(error))
45
16 } 46 }
17} \ No newline at end of file 47} \ 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 {
16 16
17 computed: { 17 computed: {
18 get_username() { 18 get_username() {
19 return this.$store.getters.get_user.username 19 return this.$store.getters['get_user'].username
20 } 20 }
21 }, 21 },
22 22
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 @@
6 6
7 <input type="submit" value="Login!"> 7 <input type="submit" value="Login!">
8 </form> 8 </form>
9 <p v-for="(mess, key) in messages" :key="key">{{mess}}</p>
10 9
11 <router-link to="/register"> Still don't have account? </router-link> 10 <router-link to="/register"> Still don't have an account? </router-link>
12 11
13 </div> 12 </div>
14</template> 13</template>
@@ -21,25 +20,27 @@ export default {
21 return { 20 return {
22 login: "", 21 login: "",
23 password: "", 22 password: "",
24 messages: []
25 } 23 }
26 }, 24 },
27 methods: { 25 methods: {
28 async log_in(e) { 26 async log_in(e) {
29 e.preventDefault() 27 e.preventDefault()
30 28
31 const data = { 29 const login_data = {
32 "username": this.login, 30 "username": this.login,
33 "password": this.password 31 "password": this.password
34 } 32 }
35 try{ 33
36 const res = await AuthService.login(data) 34 const {data, status} = await AuthService.login(login_data)
37 this.$store.dispatch('login', {token: res.token, user: res.user}) 35
38 this.$router.push('/') 36 if (status === 200) {
39 } catch (error) { 37 this.$store.dispatch('login', {token: data.token, user: data.user})
40 console.log(error.response.data) 38 this.$notify({
41 this.messages.push('Wrong username or password!') 39 type: 'success',
42 } 40 text: 'Success!'
41 })
42 this.$router.push('/')
43 }
43 } 44 }
44 }, 45 },
45 created() { 46 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 @@
7 7
8 <input type="submit" value="Register!"> 8 <input type="submit" value="Register!">
9 </form> 9 </form>
10 <p v-for="(mess, key) in messages" :key="key">{{mess}}</p>
11 10
12 <router-link to="/login">Already have account?</router-link> 11 <router-link to="/login">Already have an account?</router-link>
13 12
14 </div> 13 </div>
15</template> 14</template>
@@ -23,7 +22,6 @@ export default {
23 login: "", 22 login: "",
24 password: "", 23 password: "",
25 repeat_password: "", 24 repeat_password: "",
26 messages: []
27 } 25 }
28 }, 26 },
29 methods: { 27 methods: {
@@ -32,27 +30,28 @@ export default {
32 30
33 e.preventDefault() 31 e.preventDefault()
34 if(this.password !== this.repeat_password){ 32 if(this.password !== this.repeat_password){
35 this.messages.push("Passwords not equals") 33 this.$notify({
34 type: 'warn',
35 text: 'Passwords not equals',
36 })
36 this.password = "" 37 this.password = ""
37 this.repeat_password = "" 38 this.repeat_password = ""
38 39
39 return null 40 return null
40 } 41 }
41 42
42 const data = { 43 const register_data = {
43 "username": this.login, 44 "username": this.login,
44 "password": this.password 45 "password": this.password
45 } 46 }
46 47
47 try { 48 const { status } = await AuthService.register(register_data)
48 await AuthService.register(data) 49 if (status === 200) {
49 this.messages.push("Success!") 50 this.$notify({
50 }catch (error) { 51 type: 'success',
51 if(error.response.data.username) 52 text:'Register success, you can now login.!'
52 this.messages.push(error.response.data.username[0]) 53 })
53 if (error.response.data.password) 54 this.$router.push('/login')
54 this.messages.push(error.response.data.password[0])
55
56 } 55 }
57 } 56 }
58 }, 57 },