Add login system

10 files changed, 338 insertions, 0 deletions

diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..403eae2
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
--- /dev/null
+++ b/src/assets/logo.png
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..1c544cb
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..c370aef
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import Axios from 'axios'
+
+Vue.config.productionTip = false
+
+Axios.defaults.headers.common['Authorization'] = store.state.token !== "" && `Token ${store.state.token}`;
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..c67b61d
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+import Register from '../views/Register.vue'
+import Login from '../views/Login.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/register',
+    name: "register",
+    component: Register
+  },
+  {
+    path: '/login',
+    name: "login",
+    component: Login
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router
diff --git a/src/services/AuthService.js b/src/services/AuthService.js
new file mode 100644
index 0000000..626a8fb
--- /dev/null
+++ b/src/services/AuthService.js
@@ -0,0 +1,17 @@
+import axios from "axios";
+
+const url = 'http://localhost:8000/api/auth/'
+
+export default {
+    async login(data) {
+        return await axios
+        .post(url+'login/', data)
+        .then(res => res.data)
+    },
+
+    async register(data) { 
+        return await axios
+        .post(url+'register/', data)
+        .then(res => res.data)
+    }
+}
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..fa8a1bd
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,48 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import Axios from 'axios'
+import createPersistedState from "vuex-persistedstate";
+
+Vue.use(Vuex)
+
+const get_default_state = () => {
+  return {
+    token: "",
+    user: {}
+  }
+}
+
+const store = new Vuex.Store({
+  plugins: [createPersistedState()],
+  state: get_default_state(),
+
+  mutations: {
+    set_token: (state, token) => state.token = token,
+    set_user: (state, user) => state.user = user,
+    reset_state: (state) => Object.assign(state, get_default_state())
+  },
+
+  getters: {
+    is_logged_in: (state) => {
+      return state.token !== ""
+    },
+     
+    get_user: (state) => {
+      return state.user
+    }
+  },
+
+  actions: {
+    login: ({commit}, {token, user}) => {
+      commit('set_token', token)
+      commit('set_user', user)
+
+      Axios.defaults.headers.common['Authorization'] = `Token ${token}`;
+    },
+    logout: ({commit}) => {
+      commit('reset_state')
+    }
+  }
+})
+
+export default store
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 @@
+<template>
+  <div class="home">
+    Hi {{get_username}}!
+    <input type="button" value="Logout!" @click="logout">
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    logout() {
+      this.$store.dispatch('logout')
+      this.$router.push('/login')
+    }
+  },
+
+  computed: {
+    get_username() {
+      return this.$store.getters.get_user.username
+    }
+  },
+
+  created() {
+    if(!this.$store.getters['is_logged_in']) {
+      this.$router.push('/login')
+    }
+  }
+  
+}
+</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 @@
+<template>
+  <div id="login">
+      <form @submit="log_in">
+        <input type="text" placeholder="Login" v-model="login">
+        <input type="password" placeholder="Password" v-model="password">
+
+        <input type="submit" value="Login!">
+      </form>
+      <p v-for="(mess, key) in messages" :key="key">{{mess}}</p>
+
+      <router-link to="/register"> Still don't have account? </router-link>
+      
+    </div>
+</template>
+
+<script>
+import AuthService from '@/services/AuthService'
+
+export default {
+    data: () => {
+        return {
+            login: "",
+            password: "",
+            messages: []
+        }
+    },
+    methods: {
+        async log_in(e) {
+            e.preventDefault()
+
+            const 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!')
+            }
+        }
+    },
+    created() {
+        if(this.$store.getters['is_logged_in']) {
+            this.$router.push('/')
+        }
+    }
+
+}
+</script>
+
+<style>
+
+</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 @@
+<template>
+  <div id="register">
+      <form @submit="register">
+        <input type="text" placeholder="Login" v-model="login">
+        <input type="password" placeholder="Password" v-model="password">
+        <input type="password" placeholder="Repeat password" v-model="repeat_password">     
+
+        <input type="submit" value="Register!">
+      </form>
+      <p v-for="(mess, key) in messages" :key="key">{{mess}}</p>
+
+      <router-link to="/login">Already have account?</router-link>
+      
+    </div>
+</template>
+
+<script>
+import AuthService from '@/services/AuthService'
+
+export default {
+    data: () => {
+        return {
+            login: "",
+            password: "",
+            repeat_password: "",
+            messages: []
+        }
+    },
+    methods: {
+        async register(e) {
+            this.messages = []
+
+            e.preventDefault()
+            if(this.password !== this.repeat_password){
+                this.messages.push("Passwords not equals")
+                this.password = ""
+                this.repeat_password = ""
+
+                return null
+            }
+
+            const 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])
+
+            }
+        }
+    },
+    created() {
+        if(this.$store.getters['is_logged_in']) {
+            this.$router.push('/')
+        }
+    }
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file