167 lines
4.1 KiB
Vue
167 lines
4.1 KiB
Vue
<template>
|
|
<form @submit.prevent="submit">
|
|
<div class="form-group has-feedback">
|
|
<input
|
|
ref="email"
|
|
v-model="email"
|
|
type="email"
|
|
class="form-control"
|
|
:placeholder="$t('auth.email')"
|
|
required
|
|
>
|
|
<span class="glyphicon glyphicon-envelope form-control-feedback" />
|
|
</div>
|
|
<div class="form-group has-feedback">
|
|
<input
|
|
ref="password"
|
|
v-model="password"
|
|
type="password"
|
|
class="form-control"
|
|
:placeholder="$t('auth.password')"
|
|
required
|
|
minlength="8"
|
|
maxlength="32"
|
|
>
|
|
<span class="glyphicon glyphicon-lock form-control-feedback" />
|
|
</div>
|
|
<div class="form-group has-feedback">
|
|
<input
|
|
ref="confirm"
|
|
v-model="confirm"
|
|
type="password"
|
|
class="form-control"
|
|
:placeholder="$t('auth.repeat-pwd')"
|
|
required
|
|
minlength="8"
|
|
maxlength="32"
|
|
>
|
|
<span class="glyphicon glyphicon-log-in form-control-feedback" />
|
|
</div>
|
|
|
|
<div
|
|
v-if="requirePlayer"
|
|
class="form-group has-feedback"
|
|
:title="$t('auth.player-name-intro')"
|
|
data-placement="top"
|
|
data-toggle="tooltip"
|
|
>
|
|
<input
|
|
ref="playerName"
|
|
v-model="playerName"
|
|
type="text"
|
|
class="form-control"
|
|
:placeholder="$t('auth.player-name')"
|
|
required
|
|
>
|
|
<span class="glyphicon glyphicon-pencil form-control-feedback" />
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="form-group has-feedback"
|
|
:title="$t('auth.nickname-intro')"
|
|
data-placement="top"
|
|
data-toggle="tooltip"
|
|
>
|
|
<input
|
|
ref="nickname"
|
|
v-model="nickname"
|
|
type="text"
|
|
class="form-control"
|
|
:placeholder="$t('auth.nickname')"
|
|
required
|
|
>
|
|
<span class="glyphicon glyphicon-pencil form-control-feedback" />
|
|
</div>
|
|
|
|
<captcha ref="captcha" />
|
|
|
|
<div class="callout callout-info" :class="{ hide: !infoMsg }">{{ infoMsg }}</div>
|
|
<div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-7">
|
|
<a v-t="'auth.login-link'" :href="`${baseUrl}/auth/login`" class="text-center" />
|
|
</div>
|
|
<div class="col-xs-5">
|
|
<el-button
|
|
type="primary"
|
|
native-type="submit"
|
|
:disabled="pending"
|
|
class="auth-btn"
|
|
>
|
|
<template v-if="pending">
|
|
<i class="fa fa-spinner fa-spin" /> {{ $t('auth.registering') }}
|
|
</template>
|
|
<span v-else>{{ $t('auth.register-button') }}</span>
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import Captcha from '../../components/Captcha.vue'
|
|
import emitMounted from '../../components/mixins/emitMounted'
|
|
|
|
export default {
|
|
name: 'Register',
|
|
components: {
|
|
Captcha,
|
|
},
|
|
mixins: [
|
|
emitMounted,
|
|
],
|
|
props: {
|
|
baseUrl: {
|
|
type: String,
|
|
default: blessing.base_url,
|
|
},
|
|
},
|
|
data: () => ({
|
|
email: '',
|
|
password: '',
|
|
confirm: '',
|
|
nickname: '',
|
|
playerName: '',
|
|
infoMsg: '',
|
|
warningMsg: '',
|
|
pending: false,
|
|
requirePlayer: blessing.extra.player,
|
|
}),
|
|
methods: {
|
|
async submit() {
|
|
const {
|
|
email, password, confirm, playerName, nickname,
|
|
} = this
|
|
|
|
if (password !== confirm) {
|
|
this.infoMsg = this.$t('auth.invalidConfirmPwd')
|
|
this.$refs.confirm.focus()
|
|
return
|
|
}
|
|
|
|
this.pending = true
|
|
const { code, message } = await this.$http.post(
|
|
'/auth/register',
|
|
Object.assign({
|
|
email,
|
|
password,
|
|
captcha: await this.$refs.captcha.execute(),
|
|
}, this.requirePlayer ? { player_name: playerName } : { nickname })
|
|
)
|
|
if (code === 0) {
|
|
this.$message.success(message)
|
|
setTimeout(() => {
|
|
window.location = `${blessing.base_url}/user`
|
|
}, 1000)
|
|
} else {
|
|
this.infoMsg = ''
|
|
this.warningMsg = message
|
|
this.$refs.captcha.refresh()
|
|
this.pending = false
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|