You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
7.4 KiB
215 lines
7.4 KiB
6 years ago
|
<template>
|
||
6 years ago
|
<div class="loginWrapper">
|
||
|
<div class="sidebarBanner"></div>
|
||
6 years ago
|
<div class="loginForm" v-if="!showRegistration">
|
||
6 years ago
|
<h4>Login</h4>
|
||
6 years ago
|
|
||
6 years ago
|
<div class="alert alert-danger" v-if="authFailed">Bad credentials</div>
|
||
6 years ago
|
|
||
6 years ago
|
<form @submit="onLogin">
|
||
|
<fg-input type="text"
|
||
|
label="Username"
|
||
|
placeholder="Username"
|
||
|
v-model="login._username">
|
||
|
</fg-input>
|
||
6 years ago
|
|
||
6 years ago
|
<div class="form-group">
|
||
|
<label class="control-label">Password</label>
|
||
|
<input type="password" class="form-control" placeholder="Password" v-model="login._password">
|
||
|
</div>
|
||
6 years ago
|
|
||
6 years ago
|
<div class="form-group">
|
||
|
<p-checkbox v-model="rememberMe">Remember Me</p-checkbox>
|
||
|
</div>
|
||
|
|
||
|
<button class="btn btn-primary">Login</button>
|
||
6 years ago
|
|
||
|
<div v-if="settings.registrationEnabled">
|
||
|
<hr>
|
||
|
<div class="text-center">
|
||
|
<a @click="toggleRegistration" href="#">Create a new Account</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
</form>
|
||
|
</div>
|
||
|
|
||
|
<div class="loginForm" v-if="showRegistration">
|
||
|
<h4>Registration</h4>
|
||
|
|
||
|
<form @submit="onRegister">
|
||
|
<fg-input type="text"
|
||
|
label="Username"
|
||
|
placeholder="Username"
|
||
|
pattern=".{3,}"
|
||
|
v-model="register.username">
|
||
|
</fg-input>
|
||
|
|
||
|
<div class="form-group">
|
||
|
<label class="control-label">Password</label>
|
||
|
<input type="password" class="form-control" pattern=".{6,}" placeholder="Password" v-model="register.password">
|
||
|
</div>
|
||
|
|
||
|
<div class="form-group">
|
||
|
<label class="control-label">Password Confirmation</label>
|
||
|
<input type="password" class="form-control" pattern=".{6,}" placeholder="Password Confirmation" v-model="register.passwordConfirm">
|
||
|
</div>
|
||
|
|
||
|
<fg-input type="email"
|
||
|
label="Email"
|
||
|
placeholder="Email"
|
||
|
v-model="register.email">
|
||
|
</fg-input>
|
||
|
|
||
|
<button class="btn btn-primary">Register</button>
|
||
|
<hr>
|
||
|
<div class="text-center">
|
||
|
<a @click="toggleRegistration" href="#">I have already a account</a>
|
||
|
</div>
|
||
6 years ago
|
</form>
|
||
6 years ago
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script>
|
||
6 years ago
|
import PCheckbox from 'src/components/UIComponents/Inputs/Checkbox.vue'
|
||
6 years ago
|
import Card from 'src/components/UIComponents/Cards/Card.vue'
|
||
|
|
||
|
export default {
|
||
6 years ago
|
mounted() {
|
||
|
this.axios.get('/settings').then(response => {
|
||
|
this.settings = response.data;
|
||
|
})
|
||
|
},
|
||
6 years ago
|
components: {
|
||
6 years ago
|
Card,
|
||
|
PCheckbox
|
||
6 years ago
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
login: {
|
||
6 years ago
|
_username: '',
|
||
|
_password: '',
|
||
6 years ago
|
},
|
||
6 years ago
|
register: {
|
||
|
username: '',
|
||
|
password: '',
|
||
|
passwordConfirm: '',
|
||
|
email: ''
|
||
|
},
|
||
6 years ago
|
rememberMe: false,
|
||
6 years ago
|
authFailed: false,
|
||
|
settings: {
|
||
|
registrationEnabled: false
|
||
|
},
|
||
|
showRegistration: false
|
||
6 years ago
|
}
|
||
|
},
|
||
|
methods: {
|
||
6 years ago
|
onLogin: function (e) {
|
||
|
e.preventDefault();
|
||
6 years ago
|
let bodyFormData = new FormData();
|
||
|
bodyFormData.set('_username', this.login._username);
|
||
|
bodyFormData.set('_password', this.login._password);
|
||
|
|
||
|
this.$auth.login({
|
||
|
data: bodyFormData,
|
||
6 years ago
|
rememberMe: this.rememberMe,
|
||
|
redirect: {name: 'Overview'},
|
||
|
error: () => {
|
||
|
const notification = {
|
||
|
template: `<span>Login failed</span>`
|
||
|
};
|
||
|
|
||
|
this.$notify(
|
||
6 years ago
|
{
|
||
|
component: notification,
|
||
|
icon: 'fa fa-exclamation-triangle',
|
||
|
horizontalAlign: 'right',
|
||
|
verticalAlign: 'top',
|
||
|
type: 'danger'
|
||
|
});
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
onRegister: function(e) {
|
||
|
e.preventDefault();
|
||
|
|
||
|
if (this.register.password !== this.register.passwordConfirm) {
|
||
|
const notification = {
|
||
|
template: `<span>Passwords are not equal</span>`
|
||
|
};
|
||
|
|
||
|
this.$notify(
|
||
6 years ago
|
{
|
||
|
component: notification,
|
||
|
icon: 'fa fa-exclamation-triangle',
|
||
|
horizontalAlign: 'right',
|
||
|
verticalAlign: 'top',
|
||
|
type: 'danger'
|
||
|
});
|
||
6 years ago
|
} else {
|
||
|
this.axios.post('/register', this.register).then(response => {
|
||
|
const notification = {
|
||
|
template: `<span>Registration was successfully. You can login now</span>`
|
||
|
};
|
||
|
|
||
|
this.$notify(
|
||
|
{
|
||
|
component: notification,
|
||
|
icon: 'fa fa-exclamation-triangle',
|
||
|
horizontalAlign: 'right',
|
||
|
verticalAlign: 'top',
|
||
|
type: 'success'
|
||
|
});
|
||
|
this.toggleRegistration();
|
||
|
}).catch(error => {
|
||
|
const notification = {
|
||
|
template: `<span>${error.response.data.message}</span>`
|
||
|
};
|
||
|
|
||
|
this.$notify(
|
||
|
{
|
||
|
component: notification,
|
||
|
icon: 'fa fa-exclamation-triangle',
|
||
|
horizontalAlign: 'right',
|
||
|
verticalAlign: 'top',
|
||
|
type: 'danger'
|
||
|
});
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
toggleRegistration: function () {
|
||
|
this.showRegistration = !this.showRegistration;
|
||
6 years ago
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
<style>
|
||
6 years ago
|
.loginWrapper {
|
||
|
height: 100vh;
|
||
|
align-items: stretch;
|
||
|
flex-wrap: nowrap;
|
||
|
box-sizing: border-box;
|
||
|
justify-content: flex-start;
|
||
|
display: flex;
|
||
|
flex-flow: nowrap;
|
||
|
max-width: 100%;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
.loginForm {
|
||
|
flex: 1 0 auto;
|
||
|
padding: 80px 40px 80px 40px;
|
||
|
}
|
||
6 years ago
|
|
||
6 years ago
|
.sidebarBanner {
|
||
|
background-image: url("/static/img/bg.jpg");
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: center;
|
||
|
background-size: cover;
|
||
|
position: relative;
|
||
|
height: 100%;
|
||
|
flex: 4 1 auto;
|
||
|
}
|
||
6 years ago
|
</style>
|