yandere_fe/src/components/registration/registration.vue

210 lines
6.8 KiB
Vue
Raw Normal View History

2017-04-15 09:12:23 -07:00
<template>
<div class="settings panel panel-default">
<div class="panel-heading">
{{$t('registration.registration')}}
2017-04-15 09:12:23 -07:00
</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>
2019-02-24 11:30:29 -08:00
<input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' :placeholder="$t('registration.username_placeholder')">
</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>
2019-02-24 11:30:29 -08:00
<input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')">
</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'>
2019-02-24 12:44:06 -08:00
<label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label>
2019-03-18 07:35:13 -07:00
<textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="bioPlaceholder"></textarea>
</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>
2018-12-05 08:19:39 -08:00
2018-12-14 16:06:21 -08:00
<div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
<label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>
2018-12-14 16:05:47 -08:00
<template v-if="captcha.type == 'kocaptcha'">
2018-12-16 11:47:52 -08:00
<img v-bind:src="captcha.url" v-on:click="setCaptcha">
2018-12-14 16:05:47 -08:00
<sub>{{$t('registration.new_captcha')}}</sub>
2018-12-14 16:05:47 -08:00
<input :disabled="isPending"
v-model='captcha.solution'
class='form-control' id='captcha-answer' type='text' autocomplete="off">
2018-12-14 16:05:47 -08:00
</template>
</div>
2018-08-05 00:01:38 -07:00
<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>
2018-12-05 08:19:39 -08:00
<div class='terms-of-service' v-html="termsOfService">
</div>
2017-04-15 09:12:23 -07:00
</div>
<div v-if="serverValidationErrors.length" class='form-group'>
<div class='alert error'>
<span v-for="error in serverValidationErrors">{{error}}</span>
</div>
2017-04-15 09:12:23 -07:00
</div>
</form>
</div>
</div>
</template>
<script src="./registration.js"></script>
<style lang="scss">
@import '../../_variables.scss';
2018-12-05 11:05:43 -08:00
$validations-cRed: #f04124;
2017-04-15 09:12:23 -07:00
.registration-form {
2018-04-07 09:30:27 -07:00
display: flex;
flex-direction: column;
margin: 0.6em;
2018-04-07 09:30:27 -07:00
.container {
display: flex;
flex-direction: row;
//margin-bottom: 1em;
}
2018-04-07 09:30:27 -07:00
.terms-of-service {
flex: 0 1 50%;
margin: 0.8em;
}
2017-04-15 09:12:23 -07:00
2018-04-07 09:30:27 -07:00
.text-fields {
margin-top: 0.6em;
flex: 1 0;
display: flex;
flex-direction: column;
}
2019-02-24 11:30:29 -08:00
textarea {
min-height: 100px;
}
2018-04-07 09:30:27 -07:00
.form-group {
display: flex;
flex-direction: column;
padding: 0.3em 0.0em 0.3em;
line-height:24px;
margin-bottom: 1em;
}
.form-group--error {
animation-name: shakeError;
animation-duration: .6s;
animation-timing-function: ease-in-out;
}
.form-group--error .form--label {
2018-12-05 11:05:43 -08:00
color: $validations-cRed;
2018-12-05 11:35:15 -08:00
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: "• ";
}
2018-04-07 09:30:27 -07:00
}
2017-04-15 09:12:23 -07:00
2018-04-07 09:30:27 -07:00
form textarea {
line-height:16px;
resize: vertical;
}
2017-04-15 09:12:23 -07:00
2018-04-07 09:30:27 -07:00
.captcha {
max-width: 350px;
margin-bottom: 0.4em;
}
2018-04-07 09:30:27 -07:00
.btn {
margin-top: 0.6em;
height: 28px;
}
2017-04-15 09:12:23 -07:00
2018-04-07 09:30:27 -07:00
.error {
text-align: center;
}
2017-04-15 09:12:23 -07:00
}
2019-01-26 07:45:03 -08:00
@media all and (max-width: 800px) {
2018-04-07 09:30:27 -07:00
.registration-form .container {
flex-direction: column-reverse;
}
}
2017-04-15 09:12:23 -07:00
</style>