#43 Cadastro de usuário

package.json

@@ -12,13 +12,18 @@
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.7",
+    "axios": "^0.19.0",
+    "bash": "0.0.1",
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.2",
     "core-js": "^2.6.5",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",
     "vue": "^2.6.10",
+    "vue-cookie": "^1.1.4",
+    "vue-cookies": "^1.5.13",
     "vue-router": "^3.1.3",
+    "vue-toasted": "^1.1.27",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

src/components/input/SignButton.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="signbutton" class="container">
-        <button> {{label}} </button>
+        <button v-on:click="$emit('action')"> {{label}} </button>
     </div>
 </template>
 

src/components/input/TextField.vue

@@ -1,7 +1,7 @@
 <template>
-	<div id="textfield" class="container">
+	<div id="textfield" class="textfield-container">
 		<div class="row ml-1 mr-1 centralize-div">
-			<div v-if="label" class="text-left col-12 p-0 text-color-default">{{ label }}</div>
+			<div v-if="label" class="col-12 p-0 text-color-default textfield-label">{{ label }}</div>
 			<input v-model="variableLocal" v-if="!texticon" :type="getFieldType()" class="text-input col-12" :placeholder="placeholder">
 			<div v-else class="w-100 col p-0">
 				<font-awesome-icon :icon="texticon" style="color:white"/>
@@ -64,12 +64,25 @@ export default {
 <style lang="scss" scoped>
 	@import "../../assets/stylesheets/colors.scss";
 
+	.textfield-label {
+		text-align: left;
+		font-size: 90%;
+	}
+
+	.textfield-container {
+		width: 100%;
+		padding-right: 20px;
+		padding-left: 20px;
+		margin-right: auto;
+		margin-left: auto;
+	}
+
 	.text-input {
 		background-color: rgba(7, 37, 37,0 );
 		border-top: 0;
 		border-left: 0;
 		border-right: 0;
-		border-bottom: 1 !important; 
+		border-bottom: 1px solid; 
 		border-bottom-color: '#bbbbbb';
 		width: 80%;
 		padding: 1%;

src/components/layout/TopBar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id="topbar" class="navbar fixed-top">
-        <font-awesome-icon :icon="iconleft" @click="selectLeft()" style="color: white;"> </font-awesome-icon>
-        <font-awesome-icon :icon="iconright" @click="selectRight()" style="color: white;"> </font-awesome-icon>
+        <font-awesome-icon v-if="iconleft" :icon="iconleft" @click="selectLeft()" style="color: white;"> </font-awesome-icon>
+        <font-awesome-icon v-if="iconright" :icon="iconright" @click="selectRight()" style="color: white;"> </font-awesome-icon>
     </div>
 </template>
 

src/main.js

@@ -3,20 +3,28 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+import VueCookie from 'vue-cookie'
+Vue.use(VueCookie)	
+
 /* Boostrap configuration */
 import BoostrapVue from 'bootstrap-vue'
 import '../node_modules/bootstrap/dist/css/bootstrap.css'
 import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'
 Vue.use(BoostrapVue)
 
-/* Font awesome onfiguration */
+/* Font awesome configuration */
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(fas)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
+/* Vue Toasted configuration */
+
+import Toasted from 'vue-toasted'
+Vue.use(Toasted)
+
 Vue.config.productionTip = false
 
 new Vue({

src/store.js

@@ -4,13 +4,42 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-	state: {
-
-	},
-	mutations: {
-
-	},
-	actions: {
-
-	}
-})
+  getters: {
+    getAccessToken: state => {
+      if (state.accessToken == null) {
+        try {
+          state.accessToken = Vue.cookie.get('access-token')
+        } catch(e) {}
+      }
+      return state.accessToken
+    },
+    getRefreshToken: state => {
+      if (state.refreshToken == null) {
+        try {
+          state.refreshToken = Vue.cookie.get('refresh-token')
+        } catch(e) {}
+      }
+      return state.refreshToken
+    }
+  },
+  state: {
+    accessToken: null,
+    refreshToken: null,
+  },
+  mutations: {
+    authUser(state, userData) {
+      state.accessToken = userData.accessToken
+      state.refreshToken = userData.refreshToken
+      Vue.cookie.set('access-token', userData.accessToken, { expires: '5d' });
+      Vue.cookie.set('refresh-token', userData.refreshToken, { expires: '5d' });
+    },
+    logoutUser(state) {
+      state.accessToken = ''
+      state.refreshToken = ''
+      Vue.cookie.delete('access-token');
+      Vue.cookie.delete('refresh-token');
+    }
+  },
+  actions: {
+  }
+})

src/views/HomePage.vue

@@ -1,19 +1,28 @@
 <template>
   <div class="home">
     <h1 class="raleway-bold"> Essa é a página root </h1>
-		<p> Como não temos um protótipo de alta fidelidade para a versão desktop do site, a unica maneira de </p>
-		<p> navegar pelas páginas é alterando a url</p>
-		<p> no caso</p>
-		<p>/signin - para a página de login</p>
-		<p>/signup - para a página de sign</p>
-
+    <SignButton :label="'Log out'" @action="logout"/>
   </div>
 </template>
 
 <script>
+import SignButton from '../components/input/SignButton'
+import router from '../router'
 export default {
   name: 'home',
   components: {
+    SignButton
+  },
+  data() {
+    return {
+      router
+    } 
+  },
+  methods: {
+    logout() {
+      this.$store.commit('logoutUser')
+      window.location.reload()
+    }
   }
 }
 </script>