diff options
Diffstat (limited to 'src/components/registration/registration.vue')
| -rw-r--r-- | src/components/registration/registration.vue | 227 |
1 files changed, 177 insertions, 50 deletions
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index 110b27bf..e0fa214a 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -1,109 +1,236 @@ <template> <div class="settings panel panel-default"> <div class="panel-heading"> - {{$t('registration.registration')}} + {{ $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="$t('registration.username_placeholder')"> + <form + class="registration-form" + @submit.prevent="submit(user)" + > + <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 + id="sign-up-username" + v-model.trim="$v.user.username.$model" + :disabled="isPending" + class="form-control" + :placeholder="$t('registration.username_placeholder')" + > </div> - <div class="form-error" v-if="$v.user.username.$dirty"> + <div + v-if="$v.user.username.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.username.required"> - <span>{{$t('registration.validations.username_required')}}</span> + <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="$t('registration.fullname_placeholder')"> + <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 + id="sign-up-fullname" + v-model.trim="$v.user.fullname.$model" + :disabled="isPending" + class="form-control" + :placeholder="$t('registration.fullname_placeholder')" + > </div> - <div class="form-error" v-if="$v.user.fullname.$dirty"> + <div + v-if="$v.user.fullname.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.fullname.required"> - <span>{{$t('registration.validations.fullname_required')}}</span> + <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 + class="form-group" + :class="{ 'form-group--error': $v.user.email.$error }" + > + <label + class="form--label" + for="email" + >{{ $t('registration.email') }}</label> + <input + id="email" + v-model="$v.user.email.$model" + :disabled="isPending" + class="form-control" + type="email" + > </div> - <div class="form-error" v-if="$v.user.email.$dirty"> + <div + v-if="$v.user.email.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.email.required"> - <span>{{$t('registration.validations.email_required')}}</span> + <span>{{ $t('registration.validations.email_required') }}</span> </li> </ul> </div> - <div class='form-group'> - <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label> - <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="bioPlaceholder"></textarea> + <div class="form-group"> + <label + class="form--label" + for="bio" + >{{ $t('registration.bio') }} ({{ $t('general.optional') }})</label> + <textarea + id="bio" + v-model="user.bio" + :disabled="isPending" + class="form-control" + :placeholder="bioPlaceholder" + /> </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 + class="form-group" + :class="{ 'form-group--error': $v.user.password.$error }" + > + <label + class="form--label" + for="sign-up-password" + >{{ $t('login.password') }}</label> + <input + id="sign-up-password" + v-model="user.password" + :disabled="isPending" + class="form-control" + type="password" + > </div> - <div class="form-error" v-if="$v.user.password.$dirty"> + <div + v-if="$v.user.password.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.password.required"> - <span>{{$t('registration.validations.password_required')}}</span> + <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 + 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 + id="sign-up-password-confirmation" + v-model="user.confirm" + :disabled="isPending" + class="form-control" + type="password" + > </div> - <div class="form-error" v-if="$v.user.confirm.$dirty"> + <div + v-if="$v.user.confirm.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.confirm.required"> - <span>{{$t('registration.validations.password_confirmation_required')}}</span> + <span>{{ $t('registration.validations.password_confirmation_required') }}</span> </li> <li v-if="!$v.user.confirm.sameAsPassword"> - <span>{{$t('registration.validations.password_confirmation_match')}}</span> + <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> + <div + v-if="captcha.type != 'none'" + id="captcha-group" + class="form-group" + > + <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"> + <img + :src="captcha.url" + @click="setCaptcha" + > - <sub>{{$t('registration.new_captcha')}}</sub> + <sub>{{ $t('registration.new_captcha') }}</sub> - <input :disabled="isPending" - v-model='captcha.solution' - class='form-control' id='captcha-answer' type='text' autocomplete="off"> + <input + id="captcha-answer" + v-model="captcha.solution" + :disabled="isPending" + class="form-control" + 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 + v-if="token" + class="form-group" + > + <label for="token">{{ $t('registration.token') }}</label> + <input + id="token" + v-model="token" + disabled="true" + class="form-control" + type="text" + > </div> - <div class='form-group'> - <button :disabled="isPending" type='submit' class='btn btn-default'>{{$t('general.submit')}}</button> + <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> + <!-- eslint-disable vue/no-v-html --> + <div + class="terms-of-service" + v-html="termsOfService" + /> + <!-- eslint-enable vue/no-v-html --> </div> - <div v-if="serverValidationErrors.length" class='form-group'> - <div class='alert error'> - <span v-for="error in serverValidationErrors">{{error}}</span> + <div + v-if="serverValidationErrors.length" + class="form-group" + > + <div class="alert error"> + <span + v-for="error in serverValidationErrors" + :key="error" + >{{ error }}</span> </div> </div> </form> |