summaryrefslogtreecommitdiffstats
path: root/src/views
diff options
context:
space:
mode:
authorjdlugosz963 <jdlugosz963@gmail.com>2021-11-09 22:24:46 +0100
committerjdlugosz963 <jdlugosz963@gmail.com>2021-11-09 22:24:46 +0100
commitd1e7d7bf27e25405b6fcdd485e5aa1a3aeb46265 (patch)
tree3e6d73e7c7f28418afbb700e79ce558717f6b29a /src/views
downloadlom_frontend-d1e7d7bf27e25405b6fcdd485e5aa1a3aeb46265.tar.gz
lom_frontend-d1e7d7bf27e25405b6fcdd485e5aa1a3aeb46265.zip
Add login system
Diffstat (limited to 'src/views')
-rw-r--r--src/views/Home.vue30
-rw-r--r--src/views/Login.vue56
-rw-r--r--src/views/Register.vue70
3 files changed, 156 insertions, 0 deletions
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..e5b446b
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,30 @@
1<template>
2 <div class="home">
3 Hi {{get_username}}!
4 <input type="button" value="Logout!" @click="logout">
5 </div>
6</template>
7
8<script>
9export default {
10 methods: {
11 logout() {
12 this.$store.dispatch('logout')
13 this.$router.push('/login')
14 }
15 },
16
17 computed: {
18 get_username() {
19 return this.$store.getters.get_user.username
20 }
21 },
22
23 created() {
24 if(!this.$store.getters['is_logged_in']) {
25 this.$router.push('/login')
26 }
27 }
28
29}
30</script>
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..ae43ecd
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,56 @@
1<template>
2 <div id="login">
3 <form @submit="log_in">
4 <input type="text" placeholder="Login" v-model="login">
5 <input type="password" placeholder="Password" v-model="password">
6
7 <input type="submit" value="Login!">
8 </form>
9 <p v-for="(mess, key) in messages" :key="key">{{mess}}</p>
10
11 <router-link to="/register"> Still don't have account? </router-link>
12
13 </div>
14</template>
15
16<script>
17import AuthService from '@/services/AuthService'
18
19export default {
20 data: () => {
21 return {
22 login: "",
23 password: "",
24 messages: []
25 }
26 },
27 methods: {
28 async log_in(e) {
29 e.preventDefault()
30
31 const data = {
32 "username": this.login,
33 "password": this.password
34 }
35 try{
36 const res = await AuthService.login(data)
37 this.$store.dispatch('login', {token: res.token, user: res.user})
38 this.$router.push('/')
39 } catch (error) {
40 console.log(error.response.data)
41 this.messages.push('Wrong username or password!')
42 }
43 }
44 },
45 created() {
46 if(this.$store.getters['is_logged_in']) {
47 this.$router.push('/')
48 }
49 }
50
51}
52</script>
53
54<style>
55
56</style> \ No newline at end of file
diff --git a/src/views/Register.vue b/src/views/Register.vue
new file mode 100644
index 0000000..c03f5fd
--- /dev/null
+++ b/src/views/Register.vue
@@ -0,0 +1,70 @@
1<template>
2 <div id="register">
3 <form @submit="register">
4 <input type="text" placeholder="Login" v-model="login">
5 <input type="password" placeholder="Password" v-model="password">
6 <input type="password" placeholder="Repeat password" v-model="repeat_password">
7
8 <input type="submit" value="Register!">
9 </form>
10 <p v-for="(mess, key) in messages" :key="key">{{mess}}</p>
11
12 <router-link to="/login">Already have account?</router-link>
13
14 </div>
15</template>
16
17<script>
18import AuthService from '@/services/AuthService'
19
20export default {
21 data: () => {
22 return {
23 login: "",
24 password: "",
25 repeat_password: "",
26 messages: []
27 }
28 },
29 methods: {
30 async register(e) {
31 this.messages = []
32
33 e.preventDefault()
34 if(this.password !== this.repeat_password){
35 this.messages.push("Passwords not equals")
36 this.password = ""
37 this.repeat_password = ""
38
39 return null
40 }
41
42 const data = {
43 "username": this.login,
44 "password": this.password
45 }
46
47 try {
48 await AuthService.register(data)
49 this.messages.push("Success!")
50 }catch (error) {
51 if(error.response.data.username)
52 this.messages.push(error.response.data.username[0])
53 if (error.response.data.password)
54 this.messages.push(error.response.data.password[0])
55
56 }
57 }
58 },
59 created() {
60 if(this.$store.getters['is_logged_in']) {
61 this.$router.push('/')
62 }
63 }
64
65}
66</script>
67
68<style>
69
70</style> \ No newline at end of file