<template>
	<div>
		<h3>{{getRudeMessage}}</h3>
		<p>Login</p>

		
		<div class="ui segment" v-on:keyup.enter="submit">
			<div class="field">
				<div class="ui input">
					<input v-model="username" type="text" name="email" placeholder="E-mail address" autofocus>
				</div>
			</div>
			<div class="field">
				<div class="ui input">
					<input v-model="password" type="password" name="password" placeholder="Password">
				</div>
			</div>
			<div v-on:click="submit" class="ui teal submit button">Login</div>
		</div>

    
	</div>
</template>

<script>
	
	//ajax calls
	import axios from 'axios';
	import { mapGetters } from 'vuex'

	export default {
	name: 'Login',
		data () {
			return {
				message: 'Login stuff',
				enabled: false,
				username: '',
				password: ''
			}
		},
		methods: {
			validate(){
				console.log('Validate this bitch')
			},
			submit(){

				let vm = this

				let data = {
					username: this.username,
					password: this.password
				}

				axios.post('/api/user/login', data)
				.then(response => {
					console.log(response)
					if(response.data.success){
						
						const token = response.data.token
						vm.$store.commit('setLoginToken', token)

						//Redirect user to notes section after login
						this.$router.push('/notes')
					}
				})
				.catch(error => {
					console.log('There was an error with log in request')
				})
			}
		},
		computed: {
			...mapGetters([
				'getRudeMessage'
			])
		}
	}
</script>