223 lines
7 KiB
Vue
223 lines
7 KiB
Vue
<template>
|
|
<div class="settings panel panel-default">
|
|
<div class="panel-heading">
|
|
{{$t('registration.registration')}}
|
|
</div>
|
|
<div class="panel-body">
|
|
<form v-on:submit.prevent='submit(user)' class='registration-form'>
|
|
<div class='container'>
|
|
<div class='text-fields'>
|
|
<div class='form-group' :class="{ 'form-group--error': $v.user.username.$error }">
|
|
<label class='form--label' for='sign-up-username'>{{$t('login.username')}}</label>
|
|
<input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' placeholder='e.g. lain'>
|
|
</div>
|
|
<div class="form-error" v-if="$v.user.username.$dirty">
|
|
<ul>
|
|
<li v-if="!$v.user.username.required">
|
|
<span>{{$t('registration.validations.username_required')}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
|
|
<label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
|
|
<input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' placeholder='e.g. Lain Iwakura'>
|
|
</div>
|
|
<div class="form-error" v-if="$v.user.fullname.$dirty">
|
|
<ul>
|
|
<li v-if="!$v.user.fullname.required">
|
|
<span>{{$t('registration.validations.fullname_required')}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
|
|
<label class='form--label' for='email'>{{$t('registration.email')}}</label>
|
|
<input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
|
|
</div>
|
|
<div class="form-error" v-if="$v.user.email.$dirty">
|
|
<ul>
|
|
<li v-if="!$v.user.email.required">
|
|
<span>{{$t('registration.validations.email_required')}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class='form-group'>
|
|
<label class='form--label' for='bio'>{{$t('registration.bio')}}</label>
|
|
<input :disabled="isPending" v-model='user.bio' class='form-control' id='bio'>
|
|
</div>
|
|
|
|
<div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
|
|
<label class='form--label' for='sign-up-password'>{{$t('login.password')}}</label>
|
|
<input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'>
|
|
</div>
|
|
<div class="form-error" v-if="$v.user.password.$dirty">
|
|
<ul>
|
|
<li v-if="!$v.user.password.required">
|
|
<span>{{$t('registration.validations.password_required')}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }">
|
|
<label class='form--label' for='sign-up-password-confirmation'>{{$t('registration.password_confirm')}}</label>
|
|
<input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
|
|
</div>
|
|
<div class="form-error" v-if="$v.user.confirm.$dirty">
|
|
<ul>
|
|
<li v-if="!$v.user.confirm.required">
|
|
<span>{{$t('registration.validations.password_confirmation_required')}}</span>
|
|
</li>
|
|
<li v-if="!$v.user.confirm.sameAsPassword">
|
|
<span>{{$t('registration.validations.password_confirmation_match')}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
|
|
<label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>
|
|
|
|
<template v-if="captcha.type == 'kocaptcha'">
|
|
<img v-bind:src="captcha.url" v-on:click="setCaptcha">
|
|
|
|
<sub>{{$t('registration.new_captcha')}}</sub>
|
|
|
|
<input :disabled="isPending"
|
|
v-model='captcha.solution'
|
|
class='form-control' id='captcha-answer' type='text' autocomplete="off">
|
|
</template>
|
|
</div>
|
|
|
|
<div class='form-group' v-if='token' >
|
|
<label for='token'>{{$t('registration.token')}}</label>
|
|
<input disabled='true' v-model='token' class='form-control' id='token' type='text'>
|
|
</div>
|
|
<div class='form-group'>
|
|
<button :disabled="isPending" type='submit' class='btn btn-default'>{{$t('general.submit')}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='terms-of-service' v-html="termsOfService">
|
|
</div>
|
|
</div>
|
|
<div v-if="serverValidationErrors.length" class='form-group'>
|
|
<div class='alert error'>
|
|
<span v-for="error in serverValidationErrors">{{error}}</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./registration.js"></script>
|
|
<style lang="scss">
|
|
@import '../../_variables.scss';
|
|
$validations-cRed: #f04124;
|
|
|
|
.registration-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0.6em;
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
//margin-bottom: 1em;
|
|
}
|
|
|
|
.terms-of-service {
|
|
flex: 0 1 50%;
|
|
margin: 0.8em;
|
|
}
|
|
|
|
.text-fields {
|
|
margin-top: 0.6em;
|
|
flex: 1 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0.3em 0.0em 0.3em;
|
|
line-height:24px;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
@keyframes shakeError {
|
|
0% {
|
|
transform: translateX(0); }
|
|
15% {
|
|
transform: translateX(0.375rem); }
|
|
30% {
|
|
transform: translateX(-0.375rem); }
|
|
45% {
|
|
transform: translateX(0.375rem); }
|
|
60% {
|
|
transform: translateX(-0.375rem); }
|
|
75% {
|
|
transform: translateX(0.375rem); }
|
|
90% {
|
|
transform: translateX(-0.375rem); }
|
|
100% {
|
|
transform: translateX(0); } }
|
|
|
|
.form-group--error {
|
|
animation-name: shakeError;
|
|
animation-duration: .6s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
.form-group--error .form--label {
|
|
color: $validations-cRed;
|
|
color: var(--cRed, $validations-cRed);
|
|
}
|
|
|
|
.form-error {
|
|
margin-top: -0.7em;
|
|
text-align: left;
|
|
|
|
span {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.form-error ul {
|
|
list-style: none;
|
|
padding: 0 0 0 5px;
|
|
margin-top: 0;
|
|
|
|
li::before {
|
|
content: "• ";
|
|
}
|
|
}
|
|
|
|
form textarea {
|
|
line-height:16px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.captcha {
|
|
max-width: 350px;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 0.6em;
|
|
height: 28px;
|
|
}
|
|
|
|
.error {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 959px) {
|
|
.registration-form .container {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
</style>
|