61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
|
<template>
|
||
|
<div class="ui middle aligned center aligned grid">
|
||
|
<div class="column">
|
||
|
<h2 class="ui blue image header">
|
||
|
<div class="content">
|
||
|
Login
|
||
|
</div>
|
||
|
</h2>
|
||
|
<form class="ui large form" id="loginform">
|
||
|
<div class="ui stacked segment">
|
||
|
<div class="field">
|
||
|
<div class="ui left icon input">
|
||
|
<i class="user icon"></i>
|
||
|
<input type="text" name="username" placeholder="Username" v-model="credentials.username">
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="field">
|
||
|
<div class="ui left icon input">
|
||
|
<i class="lock icon"></i>
|
||
|
<input type="password" name="password" placeholder="Password" v-model="credentials.password">
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="ui fluid large blue submit button" @click="submit()">Login</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="ui error message" v-if="error">
|
||
|
{{ error }}
|
||
|
</div>
|
||
|
|
||
|
</form>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import auth from '../auth'
|
||
|
|
||
|
export default {
|
||
|
data () {
|
||
|
return {
|
||
|
credentials: {
|
||
|
username: '',
|
||
|
password: ''
|
||
|
},
|
||
|
error: ''
|
||
|
}
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
submit () {
|
||
|
var credentials = {
|
||
|
username: this.credentials.username,
|
||
|
password: this.credentials.password
|
||
|
}
|
||
|
|
||
|
auth.login(credentials)
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|