redirect handled, close #6

givebloodorg · Oct 31, 2017 · 0282c1b · 0282c1b
1 parent b7c6a2e
commit 0282c1b
Show file tree

Hide file tree

Showing 8 changed files with 1,572 additions and 258 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
     "npm": "^4.6.1",
     "vue": "^2.3.3",
     "vue-localstorage": "^0.4.2",
-    "vue-router": "^2.6.0"
+    "vue-router": "^2.6.0",
+    "vuex": "^3.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

diff --git a/src/App.vue b/src/App.vue
@@ -3,8 +3,11 @@
     <nav class="navbar navbar-default">
       <div class="container">
         <ul class="navbar navbar-nav">
-         <router-link to="/">Home</router-link>
-         <router-link to="campaigns">Campaigns</router-link>
+          <router-link to="/">Home</router-link>
+          <router-link to="/campaigns">Campaigns</router-link>
+          <router-link to="/auth/signin" v-if="!isLoggedIn">Login</router-link>
+          <router-link to="/auth/signup" v-if="!isLoggedIn">Register</router-link>
+          <a href="#" @click="logout" v-if="isLoggedIn">Logout</a>
         </ul>
       </div>
     </nav>
@@ -15,6 +18,18 @@
 </template>
 
 <script>
+import { mapGetters, mapMutations } from 'vuex'
+
 export default {
+  computed: {
+    ...mapGetters({
+      isLoggedIn: 'isLoggedIn'
+    })
+  },
+  methods: {
+    ...mapMutations({
+      logout: 'logout'
+    })
+  }
 }
 </script>
diff --git a/src/components/auth/Login.vue b/src/components/auth/Login.vue
@@ -1,37 +1,46 @@
 <template>
-  <form @submit.prevent="login" :class="{ error: failed }">
-    <input v-model="email" type="email" placeholder="Email Address" autofocus required>
-    <input v-model="password" type="password" placeholder="Password" required>
-    <button type="submit">Log In</button>
-  </form>
+  <div>
+    <form @submit.prevent="login(user)" :class="{ error: errors.lenght > 0 }">
+      <input v-model="user.email" type="email" placeholder="Email Address" autofocus required>
+      <input v-model="user.password" type="password" placeholder="Password" required>
+      <button type="submit">Log In</button>
+    </form>
+    <br />
+    <ul>
+      <span v-if="errors.lenght > 0">
+        Error:
+      </span>
+      <br />
+      <span v-for="(fields, index) in errors" :key="index">
+        <li v-for="error in fields" :key="error">
+          {{error}}
+        </li>
+      </span>
+    </ul>
+  </div>
 </template>
 
 <script>
-import axios from 'axios'
-import Vue from 'vue'
-import VueLocalStorage from 'vue-localstorage'
-Vue.use(VueLocalStorage)
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
   data () {
     return {
-      email: '',
-      password: '',
-      failed: false
+      user: {
+        email: 'test@user.com',
+        password: '12345678'
+      }
     }
   },
+  computed: {
+    ...mapGetters({
+      errors: 'errors'
+    })
+  },
   methods: {
-    login () {
-      axios.post('https://doesangueapi.herokuapp.com/v1/auth/login',
-        { email: this.email, password: this.password })
-      .then(response => {
-        Vue.localStorage.set('token', JSON.stringify(response.data.access_token))
-      })
-      .catch(e => {
-        console.log(e)
-        alert(e)
-      })
-    }
+    ...mapActions({
+      login: 'login'
+    })
   }
 }
 </script>

diff --git a/src/components/auth/Register.vue b/src/components/auth/Register.vue
@@ -1,45 +1,54 @@
 <template>
-  <form @submit.prevent="register" >
-    <input v-model="user.email" type="email" placeholder="Email Address" autofocus required>
-    <input v-model="user.first_name" type="text" placeholder="First Name"  required>
-    <input v-model="user.last_name" type="text" placeholder="Last Name"  required>
-    <input v-model="user.username" type="text" placeholder="Username"  required>
-     <input v-model="user.birthdate" type="date" placeholder="Birthdate"  required>
-    <input v-model="user.password" type="password" placeholder="Password" required>
-    <button type="submit">Create Account</button>
-  </form>
+  <div>
+    <form @submit.prevent="register(user)" >
+      <input v-model="user.email" type="email" placeholder="Email Address" autofocus required>
+      <input v-model="user.first_name" type="text" placeholder="First Name"  required>
+      <input v-model="user.last_name" type="text" placeholder="Last Name"  required>
+      <input v-model="user.username" type="text" placeholder="Username"  required>
+      <input v-model="user.birthdate" type="date" placeholder="Birthdate"  required>
+      <input v-model="user.password" type="password" placeholder="Password" required>
+      <button type="submit">Create Account</button>
+    </form>
+    <br />
+    <ul>
+      <span v-if="errors.lenght > 0">
+        Error:
+      </span>
+      <br />
+      <span v-for="(fields, index) in errors" :key="index">
+        <li v-for="error in fields" :key="error">
+          {{error}}
+        </li>
+      </span>
+    </ul>
+  </div>
 </template>
 
 <script>
-import axios from 'axios'
-import Vue from 'vue'
-import VueLocalStorage from 'vue-localstorage'
-Vue.use(VueLocalStorage)
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
   data () {
     return {
       user: {
-        email: '',
-        first_name: '',
-        last_name: '',
-        username: '',
-        birthdate: '',
-        password: ''
+        email: 'test@user.com',
+        first_name: 'test',
+        last_name: 'user',
+        username: 'testuser',
+        birthdate: '1987-12-31',
+        password: '12345678'
       }
     }
   },
+  computed: {
+    ...mapGetters({
+      errors: 'errors'
+    })
+  },
   methods: {
-    register () {
-      axios.post('https://doesangueapi.herokuapp.com/v1/auth/register', this.user)
-      .then(response => {
-        Vue.localStorage.set('token', JSON.stringify(response.data.access_token))
-      })
-      .catch(e => {
-        console.log(e)
-        alert(e)
-      })
-    }
+    ...mapActions({
+      register: 'register'
+    })
   }
 }
 </script>

diff --git a/src/main.js b/src/main.js
@@ -3,13 +3,18 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import store from './store'
 
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
+  store,
   template: '<App/>',
-  components: { App }
+  components: { App },
+  localStorage: {
+    token: ''
+  }
 })
diff --git a/src/store/auth.js b/src/store/auth.js
@@ -0,0 +1,90 @@
+import axios from 'axios'
+
+import router from '../router'
+
+export const state = {
+  isLoggedIn: !!window.localStorage.getItem('token'),
+  token: window.localStorage.getItem('token') || undefined,
+  errors: []
+}
+
+export const getters = {
+  isLoggedIn: state => state.isLoggedIn,
+  errors: state => state.errors
+}
+
+const TYPES = {
+  REGISTER_SUCCESS: 'REGISTER_SUCCESS',
+  REGISTER_FAIL: 'REGISTER_FAIL',
+  LOGIN_SUCCESS: 'LOGIN_SUCCESS',
+  LOGIN_FAIL: 'LOGIN_FAIL'
+}
+
+export const mutations = {
+  [TYPES.REGISTER_SUCCESS]: (state, token) => {
+    state.token = token
+    state.isLoggedIn = true
+  },
+  [TYPES.REGISTER_FAIL]: (state, errors) => {
+    state.errors = errors
+  },
+  [TYPES.LOGIN_SUCCESS]: (state, token) => {
+    state.token = token
+    state.isLoggedIn = true
+  },
+  [TYPES.LOGIN_FAIL]: (state, errors) => {
+    state.errors = errors
+  },
+  logout: (state) => {
+    state.token = undefined
+    state.isLoggedIn = false
+    window.localStorage.removeItem('token')
+  }
+
+}
+
+export const actions = {
+  register ({ commit }, user) {
+    axios
+      .post('https://doesangueapi.herokuapp.com/v1/auth/register', user)
+      .then(response => {
+        commit(TYPES.REGISTER_SUCCESS, response.data.access_token)
+        window.localStorage.setItem(
+          'token',
+          JSON.stringify(response.data.access_token)
+        )
+        router.push('/campaigns')
+      })
+      .catch(error => {
+        if (error.response && error.response.data) {
+          commit(TYPES.REGISTER_FAIL, error.response.data)
+        } else if (error.request) {
+          commit(TYPES.REGISTER_FAIL, error.request)
+        } else {
+          commit(TYPES.REGISTER_FAIL, error.message)
+        }
+      })
+  },
+  login ({ commit }, user) {
+    axios.post('https://doesangueapi.herokuapp.com/v1/auth/login', user)
+    .then(response => {
+      commit(TYPES.REGISTER_SUCCESS, response.data.access_token)
+      window.localStorage.setItem(
+        'token',
+        JSON.stringify(response.data.access_token)
+      )
+      router.push('/campaigns')
+    })
+    .catch(error => {
+      if (error.response && error.response.data.error) {
+        commit(TYPES.REGISTER_FAIL, [{error: error.response.data.error}])
+      } else if (error.response && error.response.data) {
+        commit(TYPES.REGISTER_FAIL, error.response.data)
+      } else if (error.request) {
+        commit(TYPES.REGISTER_FAIL, error.request)
+      } else {
+        commit(TYPES.REGISTER_FAIL, error.message)
+      }
+    })
+  }
+}
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import { state, getters, mutations, actions } from './auth'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({ state, getters, mutations, actions })