Differential D1075 Diff 2791 src/resources/vue/Login.vue

Changeset View

Standalone View

src/resources/vue/Login.vue

	<template>			<template>
	<div class="text-center form-wrapper">			<div class="container d-flex flex-column align-items-center">
				<div class="card col-sm-8">
				<div class="card-body">
				<h1 class="card-title text-center">Please sign in</h1>
				<div class="card-text">
	<form class="form-signin" @submit.prevent="submitLogin">			<form class="form-signin" @submit.prevent="submitLogin">
	<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>			<div class="form-group">

	<label for="inputEmail" class="sr-only">Email address</label>			<label for="inputEmail" class="sr-only">Email address</label>
	<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus v-model="email">			<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus v-model="email">
				</div>
				<div class="form-group">
	<label for="inputPassword" class="sr-only">Password</label>			<label for="inputPassword" class="sr-only">Password</label>
	<input type="password" id="inputPassword" class="form-control" placeholder="Password" required v-model="password">			<input type="password" id="inputPassword" class="form-control" placeholder="Password" required v-model="password">
				</div>
	<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>			<div class="form-group">
				<label for="secondfactor" class="sr-only">2FA</label>
	<br><br><router-link :to="{ name: 'password-reset' }">Forgot password?</router-link>			<input type="text" id="secondfactor" class="form-control" placeholder="Second factor code" v-model="secondFactor">
				<small class="form-text text-muted">Second factor code is optional for users with no 2-Factor Authentication setup.</small>
				</div>
				<div class="text-center">
				<button class="btn btn-primary" type="submit">
				<svg-icon icon="sign-in-alt"></svg-icon> Sign in
				</button>
				</div>
	</form>			</form>
	</div>			</div>
				</div>
				</div>
				<div class="mt-1">
				<router-link :to="{ name: 'password-reset' }">Forgot password?</router-link>
				</div>
				</div>
	</template>			</template>


	<script>			<script>
	export default {			export default {
	data() {			data() {
	return {			return {
	email: '',			email: '',
	password: '',			password: '',
				secondFactor: '',
	loginError: false			loginError: false
	}			}
	},			},
	methods: {			methods: {
	submitLogin() {			submitLogin() {
	this.loginError = false			this.loginError = false
				this.$root.clearFormValidation($('form.form-signin'))

	axios.post('/api/auth/login', {			axios.post('/api/auth/login', {
	email: this.email,			email: this.email,
	password: this.password			password: this.password,
				secondfactor: this.secondFactor
	}).then(response => {			}).then(response => {
	// login user and redirect to dashboard			// login user and redirect to dashboard
	this.$root.loginUser(response.data.access_token)			this.$root.loginUser(response.data.access_token)
	}).catch(error => {			}).catch(error => {
	this.loginError = true			this.loginError = true
	});			});
	}			}
	}			}
	}			}
	</script>			</script>

	<style scoped>
	.form-wrapper {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	}

	.form-signin {
	width: 100%;
	max-width: 330px;
	padding: 15px;
	margin: 0 auto;
	}

	.form-signin .form-control {
	position: relative;
	box-sizing: border-box;
	height: auto;
	padding: 10px;
	font-size: 16px;
	}

	.form-signin .form-control:focus {
	z-index: 2;
	}

	.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	}

	.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	}
	</style>