summaryrefslogtreecommitdiffstats
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
parent584275e57f57871ce1a3095be59c4ecb284a3c77 (diff)
downloadlom_frontend-319dd896f3a44237e1c26f3887fcb259f80f2714.tar.gz
lom_frontend-319dd896f3a44237e1c26f3887fcb259f80f2714.zip
clean code and add notifications
Diffstat
-rw-r--r--package-lock.json15
-rw-r--r--package.json1
-rw-r--r--public/index.html2
-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
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 @@
11 "axios": "^0.24.0", 11 "axios": "^0.24.0",
12 "core-js": "^3.6.5", 12 "core-js": "^3.6.5",
13 "vue": "^2.6.11", 13 "vue": "^2.6.11",
14 "vue-notification": "^1.3.20",
14 "vue-router": "^3.2.0", 15 "vue-router": "^3.2.0",
15 "vuex": "^3.4.0", 16 "vuex": "^3.4.0",
16 "vuex-persistedstate": "^4.1.0" 17 "vuex-persistedstate": "^4.1.0"
@@ -14033,6 +14034,14 @@
14033 "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=", 14034 "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
14034 "dev": true 14035 "dev": true
14035 }, 14036 },
14037 "node_modules/vue-notification": {
14038 "version": "1.3.20",
14039 "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
14040 "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==",
14041 "peerDependencies": {
14042 "vue": "^2.0.0"
14043 }
14044 },
14036 "node_modules/vue-router": { 14045 "node_modules/vue-router": {
14037 "version": "3.5.3", 14046 "version": "3.5.3",
14038 "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz", 14047 "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -26477,6 +26486,12 @@
26477 } 26486 }
26478 } 26487 }
26479 }, 26488 },
26489 "vue-notification": {
26490 "version": "1.3.20",
26491 "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.20.tgz",
26492 "integrity": "sha512-vPj67Ah72p8xvtyVE8emfadqVWguOScAjt6OJDEUdcW5hW189NsqvfkOrctxHUUO9UYl9cTbIkzAEcPnHu+zBQ==",
26493 "requires": {}
26494 },
26480 "vue-router": { 26495 "vue-router": {
26481 "version": "3.5.3", 26496 "version": "3.5.3",
26482 "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz", 26497 "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 @@
12 "axios": "^0.24.0", 12 "axios": "^0.24.0",
13 "core-js": "^3.6.5", 13 "core-js": "^3.6.5",
14 "vue": "^2.6.11", 14 "vue": "^2.6.11",
15 "vue-notification": "^1.3.20",
15 "vue-router": "^3.2.0", 16 "vue-router": "^3.2.0",
16 "vuex": "^3.4.0", 17 "vuex": "^3.4.0",
17 "vuex-persistedstate": "^4.1.0" 18 "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 @@
7 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 7 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 <title><%= htmlWebpackPlugin.options.title %></title> 8 <title><%= htmlWebpackPlugin.options.title %></title>
9 </head> 9 </head>
10 <body style="background-color: #151515; color: #fafafa;"> 10 <body style="background-color: #101010; color: #fafafa;">
11 <noscript> 11 <noscript>
12 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 12 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 </noscript> 13 </noscript>
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 },
generated by cgit v1.2.3 (git 2.45.2) at 2024-11-21 13:29:28 +0000