119 lines
2.0 KiB
Vue
119 lines
2.0 KiB
Vue
<template>
|
|
<div id="login">
|
|
<form @submit="submit">
|
|
<img src="../assets/logo.svg" alt="File Manager">
|
|
<h1>File Manager</h1>
|
|
<div v-if="wrong" class="wrong">Wrong credentials</div>
|
|
<input type="text" v-model="username" placeholder="Username">
|
|
<input type="password" v-model="password" placeholder="Password">
|
|
<input type="submit" value="Login">
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import auth from '@/utils/auth'
|
|
|
|
export default {
|
|
name: 'login',
|
|
data: function () {
|
|
return {
|
|
wrong: false,
|
|
username: '',
|
|
password: ''
|
|
}
|
|
},
|
|
methods: {
|
|
submit: function (event) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
|
|
let redirect = this.$route.query.redirect
|
|
if (redirect === '' || redirect === undefined || redirect === null) {
|
|
redirect = '/files/'
|
|
}
|
|
|
|
auth.login(this.username, this.password)
|
|
.then(() => {
|
|
this.$router.push({ path: redirect })
|
|
})
|
|
.catch(() => {
|
|
this.wrong = true
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#login {
|
|
background: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#login img {
|
|
width: 4em;
|
|
height: 4em;
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
#login h1 {
|
|
text-align: center;
|
|
font-size: 2.5em;
|
|
margin: .4em 0 .67em;
|
|
}
|
|
|
|
#login form {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
max-width: 16em;
|
|
width: 90%;
|
|
}
|
|
|
|
#login input {
|
|
width: 100%;
|
|
width: 100%;
|
|
margin: .5em 0 0;
|
|
}
|
|
|
|
#login .wrong {
|
|
background: #F44336;
|
|
color: #fff;
|
|
padding: .5em;
|
|
text-align: center;
|
|
animation: .2s opac forwards;
|
|
}
|
|
|
|
@keyframes opac {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#login input[type="text"],
|
|
#login input[type="password"] {
|
|
padding: .5em 1em;
|
|
border: 1px solid #e9e9e9;
|
|
transition: .2s ease border;
|
|
color: #333;
|
|
}
|
|
|
|
#login input[type="text"]:focus,
|
|
#login input[type="password"]:focus,
|
|
#login input[type="text"]:hover,
|
|
#login input[type="password"]:hover {
|
|
border-color: #9f9f9f;
|
|
}
|
|
</style>
|
|
|