79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<template>
|
|
<sui-container>
|
|
<div class="login-form">
|
|
<sui-header textAlign='center' color='teal'>OPay Donate</sui-header>
|
|
<sui-segment>
|
|
<sui-form @submit.prevent="login">
|
|
<sui-form-field>
|
|
<input placeholder="Account" v-model="account">
|
|
</sui-form-field>
|
|
<sui-form-field>
|
|
<input placeholder="Password" type="password" v-model="password">
|
|
</sui-form-field>
|
|
<sui-button type="submit" fluid color='teal'>Login</sui-button>
|
|
<sui-button type="button" @click="go_oauth" class="twitch-button" fluid color='violet'>Login with Twitch</sui-button>
|
|
</sui-form>
|
|
</sui-segment>
|
|
</div>
|
|
</sui-container>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.login-form {
|
|
max-width: 450px;
|
|
margin: 0 auto;
|
|
padding-top: 100px;
|
|
|
|
.oauth {
|
|
text-align: center;
|
|
}
|
|
|
|
.twitch-button {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import {mapMutations, mapActions} from 'vuex'
|
|
import {apiUrl} from '@/tools'
|
|
export default {
|
|
name: 'LoginForm',
|
|
data () {
|
|
return {
|
|
account: '',
|
|
password: ''
|
|
}
|
|
},
|
|
created () {
|
|
this.checkSession((flag) => {
|
|
// check login session
|
|
// true === isLogin
|
|
if (flag === true) {
|
|
this.$router.push('/cp')
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
...mapMutations(['toggleLoading']),
|
|
...mapActions(['checkSession', 'sendLogin']),
|
|
login: function () {
|
|
let self = this
|
|
this.sendLogin({
|
|
account: this.account,
|
|
password: this.password,
|
|
cb: function () {
|
|
self.$router.push('/cp')
|
|
}
|
|
})
|
|
},
|
|
go_oauth: function () {
|
|
window.location.href = apiUrl.replace(/\/$/, '') + '/twitch/login?tourl=' + encodeURIComponent(window.location.href)
|
|
}
|
|
},
|
|
mounted: function () {
|
|
|
|
}
|
|
}
|
|
</script>
|