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="field" v-if="require2FA">
			<div class="ui input">
				<input v-model="authToken" ref="authForm" type="text" name="authToken" placeholder="Authorization Token">
			</div>
		</div>
		<div class="sixteen wide field">
			<div class="ui fluid buttons">
				

				<div v-on:click="register()" class="ui button">
					<i class="plug icon"></i>
					Sign Up
				</div>

				<div class="or"></div>

				<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>
		</div>
		<div class="sixteen wide column">
			<span class="small-terms">
				By signing up you agree to Solid Scribe's 
				<router-link to="/terms">
					Terms of Use
				</router-link>
			</span>
		</div>
	</div>

	<!-- Thin form display  -->
	<div v-if="thin" class="ui small form">

		<div v-if="!require2FA" class="field"><!-- hide this field if someone is logging in with 2FA -->
			<div class="ui grid">
				<div class="ui sixteen wide center aligned column">
					<div v-on:click="register()" class="ui green button">
						<i class="plug icon"></i>
						Sign Up Now!
					</div>
				</div>
			</div>
		</div>

		<div class="field"><!-- hide this field if someone is logging in with 2FA -->
			<div class="ui grid">
				<div class="ui sixteen wide center aligned column">
					Or Login
				</div>
			</div>
		</div>

		<div class="equal width fields">
			<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="field" v-if="require2FA">
				<div class="ui input">
					<input v-model="authToken" ref="authForm" type="text" name="authToken" placeholder="Authorization Token">
				</div>
			</div>
			<div class="field">
				<div v-on:click="login()" class="ui fluid button">
					<i class="power icon"></i>
					Login
				</div>
			</div>
		</div>
		<span class="small-terms">
			By signing up you agree to Solid Scribe's 
			<router-link to="/terms">
				Terms of Use
			</router-link>
		</span>
	</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: '',
				authToken: '',
				require2FA: false,
			}
		},
		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 ){

					if(this.$route.name == 'LoginPage'){
						this.$bus.$emit('notification', 'Both a Username and Password are Required')
						return
					}

					//Login section
					this.$router.push('/login')
					return
				}

				axios.post('/api/public/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/public/login', {'username': this.username, 'password': this.password, 'authToken':this.authToken })
				.then(({data}) => {

					//Enable 2FA on form
					if(data.success == false && data.verificationRequired == true && this.require2FA == false){
						this.$bus.$emit('notification', data.message)
						this.require2FA = true

						this.$nextTick(() => {
							this.$refs.authForm.focus()	
						})

						return
					}

					if(data.success == false){
						this.$bus.$emit('notification', data.message)
						return
					}

					if(data.success){
						this.finalizeLogin(data)
						return
					}
				})
				.catch(error => {
					this.$bus.$emit('notification', error)
				})
			}
		}
	}
</script>

<style type="text/css" scoped="true">
	.small-terms {
		display: inline-block;
		text-align: right;
		width: 100%;
		font-size: 0.9em;
	}
</style>