SolidScribe/client/src/components/LoginFormComponent.vue

<template>

<div v-on:keyup.enter="login()">

	<!-- thicc form display  -->
	<div v-if="!thin" class="ui large form">
		<div class="field">
			<div class="ui input">
				<input ref="nameForm" v-model="username" type="text" name="email" placeholder="Username or E-mail">
			</div>
		</div>
		<div class="field">
			<div class="ui input">
				<input v-model="password" type="password" name="password" placeholder="Password">
			</div>
		</div>
		<div class="sixteen wide field">
			<div class="ui fluid buttons">
				<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="login()" class="ui green button">
					<i class="power icon"></i>
					Login
				</div>
				<div class="or"></div>
				<div v-on:click="register()" class="ui button">
					<i class="plug icon"></i>
					Sign Up
				</div>
			</div>
		</div>
	</div>

	<!-- Thin form display  -->
	<div v-if="thin" class="ui small form">
		<div class="fields">
			<div class="four wide field">
				<div class="ui input">
					<input ref="nameForm" v-model="username" type="text" name="email" placeholder="Username or E-mail">
				</div>
			</div>
			<div class="four wide field">
				<div class="ui input">
					<input v-model="password" type="password" name="password" placeholder="Password">
				</div>
			</div>
			<div class="four wide field">
				<div v-on:click="register()" class="ui fluid green button">
					<i class="plug icon"></i>
					Sign Up
				</div>
			</div>
			<div class="four wide field">
				<div v-on:click="login()" class="ui fluid button">
					<i class="power icon"></i>
					Login
				</div>
			</div>
		</div>
	</div>

	

</div>


</template>

<script>
	
	import axios from 'axios';

	export default {
	name: 'Login',
		props:[ 'thin' ],
		mounted() {

			//Focus on login form on desktop
			if(!this.$store.getters.getIsUserOnMobile){
				this.$refs.nameForm.focus()
			}

		},
		data () {
			return {
				enabled: false,
				username: '',
				password: ''
			}
		},
		methods: {
			finalizeLogin(data){

				//Destroy local data if there is an error
				if(data == false){
					this.$store.commit('destroyLoginToken')
					return
				}

				//Login user if we have a valid token
				if(data && data.token && data.token.length > 0){
					
					//Set username to local session
					this.$store.commit('setUsername', this.username)

					const token = data.token

					//Setup socket io after user logs in
					axios.defaults.headers.common['authorizationtoken'] = token
					this.$io.emit('user_connect', token)
					localStorage.setItem('loginToken', token)

					//Redirect user to notes section after login
					this.$router.push('/notes')
				}
			},
			register(){

				if( this.username.length == 0 || this.password.length == 0 ){
					this.$bus.$emit('notification', 'Unable to Sign Up - Username and Password Required')
					return
				}

				axios.post('/api/user/register', {'username': this.username, 'password': this.password})
				.then(({data}) => {

					if(data == false){
						this.$bus.$emit('notification', 'Unable to Sign Up - Username already in use')
					}

					this.finalizeLogin(data)
				})
				.catch(error => {
					this.$bus.$emit('notification', 'Unable to Sign Up - Username already in use')
				})
			},
			login(){

				if( this.username.length == 0 || this.password.length == 0 ){
					this.$bus.$emit('notification', 'Unable to Login - Username and Password Required')
					return
				}

				axios.post('/api/user/login', {'username': this.username, 'password': this.password})
				.then(({data}) => {

					if(data == false){
						this.$bus.$emit('notification', 'Unable to Login - Incorrect Username or Password')
					}

					this.finalizeLogin(data)
				})
				.catch(error => {
					this.$bus.$emit('notification', 'Unable to Login - Incorrect Username or Password')
				})
			}
		}
	}
</script>