aboutsummaryrefslogtreecommitdiff
path: root/src/components/registration/registration.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/registration/registration.vue')
-rw-r--r--src/components/registration/registration.vue225
1 files changed, 50 insertions, 175 deletions
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index c5f284ed..110b27bf 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -1,234 +1,109 @@
<template>
<div class="settings panel panel-default">
<div class="panel-heading">
- {{ $t('registration.registration') }}
+ {{$t('registration.registration')}}
</div>
<div class="panel-body">
- <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')"
- >
+ <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')">
</div>
- <div
- v-if="$v.user.username.$dirty"
- class="form-error"
- >
+ <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>
+ <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
- id="sign-up-fullname"
- v-model.trim="$v.user.fullname.$model"
- :disabled="isPending"
- class="form-control"
- :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 :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')">
</div>
- <div
- v-if="$v.user.fullname.$dirty"
- class="form-error"
- >
+ <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>
+ <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
- id="email"
- v-model="$v.user.email.$model"
- :disabled="isPending"
- class="form-control"
- 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 :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
</div>
- <div
- v-if="$v.user.email.$dirty"
- class="form-error"
- >
+ <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>
+ <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
- id="bio"
- v-model="user.bio"
- :disabled="isPending"
- class="form-control"
- :placeholder="bioPlaceholder"
- />
+ <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>
- <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 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
- v-if="$v.user.password.$dirty"
- class="form-error"
- >
+ <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>
+ <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
- id="sign-up-password-confirmation"
- v-model="user.confirm"
- :disabled="isPending"
- class="form-control"
- 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 :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
</div>
- <div
- v-if="$v.user.confirm.$dirty"
- class="form-error"
- >
+ <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>
+ <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
- v-if="captcha.type != 'none'"
- id="captcha-group"
- class="form-group"
- >
- <label
- class="form--label"
- for="captcha-label"
- >{{ $t('captcha') }}</label>
+ <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
- :src="captcha.url"
- @click="setCaptcha"
- >
+ <img v-bind:src="captcha.url" v-on:click="setCaptcha">
- <sub>{{ $t('registration.new_captcha') }}</sub>
+ <sub>{{$t('registration.new_captcha')}}</sub>
- <input
- id="captcha-answer"
- v-model="captcha.solution"
- :disabled="isPending"
- class="form-control"
- type="text"
- autocomplete="off"
- >
+ <input :disabled="isPending"
+ v-model='captcha.solution'
+ class='form-control' id='captcha-answer' type='text' autocomplete="off">
</template>
</div>
- <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 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 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 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"
- :key="error"
- >{{ error }}</span>
+ <div v-if="serverValidationErrors.length" class='form-group'>
+ <div class='alert error'>
+ <span v-for="error in serverValidationErrors">{{error}}</span>
</div>
</div>
</form>