#44 Login implementado

package.json

@@ -12,13 +12,16 @@
     "@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",
     "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-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

@@ -69,7 +69,7 @@ export default {
 		border-top: 0;
 		border-left: 0;
 		border-right: 0;
-		border-bottom: 1 !important; 
+		border-bottom: 1; 
 		border-bottom-color: '#bbbbbb';
 		width: 80%;
 		padding: 1%;
@@ -83,7 +83,7 @@ export default {
 
 	.text-field-border {
 		height: 1px;
-		width: 80%;
+		width: 100%;
 		background-color: #ffffff;
 	}
 

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,6 +3,14 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+/* Vue Cookie configuration */
+import VueCookie from 'vue-cookie'
+Vue.use(VueCookie)
+
+/* Vue Toasted configuration */
+import Toasted from 'vue-toasted'
+Vue.use(Toasted)
+
 /* Boostrap configuration */
 import BoostrapVue from 'bootstrap-vue'
 import '../node_modules/bootstrap/dist/css/bootstrap.css'

src/router.js

@@ -23,3 +23,5 @@ export default new Router({
 		}
 	]
 })
+
+

src/store.js

@@ -4,13 +4,42 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-	state: {
-
+  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>

src/views/Signin.vue

@@ -1,28 +1,145 @@
 <template>
   <div class="signin gradient">
+		<TopBar :iconleft="'chevron-left'"/>
+		<div class="content-container">
+			<img width="45%" class="max-width-500 mb-4" src="../assets/images/logo.svg">
+			<TextField class="mt-5" v-model="email" :texticon="'user'" :placeholder="'email'"/>
+			<TextField class="mt-5" v-model="password" :texticon="'lock'" :placeholder="'senha'" :password="true"/>
+			<SignButton :label="'Entrar'" class="mt-5" @action="login"/>
+			<a href="/forgotten-password" class="mt-3 text-white" style="text-decoration:underline">Esqueceu sua senha?</a>
+      <!-- <div class="container">
+        <p style="font-size: 10px">Access token: {{ this.$store.getters.getAccessToken }}</p>
+        <p style="font-size: 10px">Refresh token: {{ this.$store.getters.getRefreshToken }}</p>
+      </div> -->
+    </div>
+		<div href="/signup" class="signup-button fixed-bottom">
+			<a href="/signup" class="button-link">
+        Criar conta
+      </a>
+		</div>
+
 	</div>
 </template>
 
 <script>
-	export default {
-		components: {
-		},
-		data() {
-			return {
-			}
-		},
-	}
+/* Component imports */
+import TextField from '../components/input/TextField'
+import TopBar from '../components/layout/TopBar'
+import SignButton from '../components/input/SignButton'
+
+/* Library imports */
+import axios from "axios"
+
+/* Basic scripts imports */
+import router from '../router'
+
+export default {
+	components: {
+		TextField,
+		TopBar,
+		SignButton
+	},
+	data() {
+		return {
+			email: '',
+			password: ''
+		}
+	},
+  methods: {
+    login() {
+      if (!this.validateInput()) {
+        return
+      }
+
+      let data = {
+        email: this.email,
+        password: this.password
+      }
+
+      axios.post("http://0.0.0.0:8080/users/token/", data)
+        .then((response) => {
+          if (response.status == '200') {
+            this.$toasted.show('Logged in!').goAway(2000)
+            let tokenData = {
+              accessToken: response.data['access'],
+              refreshToken: response.data['refresh']
+            }
+            this.$store.commit('authUser', tokenData);
+            router.push({name: 'home'})
+          } else {
+            this.$toasted.show('Algum erro ocorreu, tente de novo').goAway(2000)
+          }
+        })
+        .catch ((errors) => {
+          this.$toasted.show('Email ou senha está incorreto').goAway(2000)
+        })
+    },
+    validateInput() {
+      if (!this.email) {
+        this.$toasted.show('Digite um email').goAway(2000)
+        return false
+      }
+      if (!this.password) {
+        this.$toasted.show('Digite uma senha').goAway(2000)
+        return false
+      }
+      if (this.password.length < 8) {
+        this.$toasted.show('Digite uma senha maior que 8 caracteres').goAway(2000)
+        return false
+      }
+      let emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/igm
+      if (!this.email.match(emailRegex)) {
+        this.$toasted.show('Email digitado não é válido').goAway(2000)
+        return false
+      }
+      return true
+    }
+  }
+}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../assets/stylesheets/colors.scss";
+
+	.max-width-500 {
+		max-width: 400px;
+	}
+	.signup-button {
+		margin: auto;
+		height: 6%;
+		width: 100%;
+		background-color: $color-primary;
+		margin-bottom: 0;
+		position: absolute;
+		color: $color-default-text;
+		font-family: RobotoBold;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	.content-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
 	.signin {
 		width: 100%;
 		height: 100%;
 		position: absolute;
 		margin-top: 0;
 		text-align: center;
 	}
+  .button-link {
+    color: $color-default-text;
+		font-family: RobotoBold;
+    font-size: 130%;
+    text-decoration: none;
+  }
 	.gradient {
-		background-image: linear-gradient(180deg, rgba(86, 163, 166, 1), rgba(55, 105, 150, 200));
+		background-image: linear-gradient(180deg, rgba(86, 163, 166, 1), rgba(75s, 125, 170, 105));
 	}
 </style>