gitdeploy/html/content/signin.html

120 lines
2.5 KiB
HTML

---
title: Sign In
type: page
---
<style>
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.app {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.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>
<div class="app">
<form class="form-signin text-center" @submit="submit($event)">
<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"
/>
<br />
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in
</button>
</form>
</div>
<script src="/axios.js"></script>
<script src="/vue.js"></script>
<script src="/messages.js"></script>
<script>
var app = new Vue({
data: {
email: ''
},
methods: {
submit: function (ev) {
var _this = this;
if (ev) {
ev.preventDefault();
}
axios
.post('/api/authentication/signin', {
email: _this.email
})
.then(function (response) {})
.catch(function (error) {
console.log(_this.email);
window.postMessage('Something went wrong. Please try again.');
});
}
}
});
var token = window.localStorage.getItem('token');
if (token) {
axios
.get('/api/authentication/me', {
headers: {
Authorization: 'Bearer ' + token
}
})
.then(function (response) {
window.location.href = '/';
})
.catch(function (error) {
window.localStorage.removeItem('token');
app.$mount('.app');
});
} else {
app.$mount('.app');
}
</script>