akkoma-fe/src/components/registration/registration.vue

374 lines
9.9 KiB
Vue
Raw Normal View History

2017-04-15 16:12:23 +00:00
<template>
<div class="settings panel panel-default">
<div class="panel-heading">
2019-07-05 07:17:44 +00:00
{{ $t('registration.registration') }}
2017-04-15 16:12:23 +00:00
</div>
<div class="panel-body">
2019-07-05 07:17:44 +00:00
<form
class="registration-form"
@submit.prevent="submit(user)"
>
<div class="container">
<div class="text-fields">
<div
class="form-group"
2022-03-29 12:35:18 +00:00
:class="{ 'form-group--error': v$.user.username.$error }"
2019-07-05 07:17:44 +00:00
>
<label
class="form--label"
for="sign-up-username"
>{{ $t('login.username') }}</label>
<input
id="sign-up-username"
2022-03-29 12:35:18 +00:00
v-model.trim="v$.user.username.$model"
2019-07-05 07:17:44 +00:00
:disabled="isPending"
class="form-control"
:placeholder="$t('registration.username_placeholder')"
>
</div>
2019-07-05 07:17:44 +00:00
<div
2022-03-29 12:35:18 +00:00
v-if="v$.user.username.$dirty"
2019-07-05 07:17:44 +00:00
class="form-error"
>
<ul>
2022-03-29 12:35:18 +00:00
<li v-if="!v$.user.username.required">
2019-07-05 07:17:44 +00:00
<span>{{ $t('registration.validations.username_required') }}</span>
</li>
</ul>
</div>
2019-07-05 07:17:44 +00:00
<div
class="form-group"
2022-03-29 12:35:18 +00:00
:class="{ 'form-group--error': v$.user.fullname.$error }"
2019-07-05 07:17:44 +00:00
>
<label
class="form--label"
for="sign-up-fullname"
>{{ $t('registration.fullname') }}</label>
<input
id="sign-up-fullname"
2022-03-29 12:35:18 +00:00
v-model.trim="v$.user.fullname.$model"
2019-07-05 07:17:44 +00:00
:disabled="isPending"
class="form-control"
:placeholder="$t('registration.fullname_placeholder')"
>
</div>
2019-07-05 07:17:44 +00:00
<div
2022-03-29 12:35:18 +00:00
v-if="v$.user.fullname.$dirty"
2019-07-05 07:17:44 +00:00
class="form-error"
>
<ul>
2022-03-29 12:35:18 +00:00
<li v-if="!v$.user.fullname.required">
2019-07-05 07:17:44 +00:00
<span>{{ $t('registration.validations.fullname_required') }}</span>
</li>
</ul>
</div>
2019-07-05 07:17:44 +00:00
<div
class="form-group"
2022-03-29 12:35:18 +00:00
:class="{ 'form-group--error': v$.user.email.$error }"
2019-07-05 07:17:44 +00:00
>
<label
class="form--label"
for="email"
>{{ $t('registration.email') }}</label>
<input
id="email"
2022-03-29 12:35:18 +00:00
v-model="v$.user.email.$model"
2019-07-05 07:17:44 +00:00
:disabled="isPending"
class="form-control"
type="email"
>
</div>
2019-07-05 07:17:44 +00:00
<div
2022-03-29 12:35:18 +00:00
v-if="v$.user.email.$dirty"
2019-07-05 07:17:44 +00:00
class="form-error"
>
<ul>
2022-03-29 12:35:18 +00:00
<li v-if="!v$.user.email.required">
2019-07-05 07:17:44 +00:00
<span>{{ $t('registration.validations.email_required') }}</span>
</li>
</ul>
</div>
2019-07-05 07:17:44 +00:00
<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>
2019-07-05 07:17:44 +00:00
<div
class="form-group"
2022-03-29 12:35:18 +00:00
:class="{ 'form-group--error': v$.user.password.$error }"
2019-07-05 07:17:44 +00:00
>
<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>
2019-07-05 07:17:44 +00:00
<div
2022-03-29 12:35:18 +00:00
v-if="v$.user.password.$dirty"
2019-07-05 07:17:44 +00:00
class="form-error"
>
<ul>
2022-03-29 12:35:18 +00:00
<li v-if="!v$.user.password.required">
2019-07-05 07:17:44 +00:00
<span>{{ $t('registration.validations.password_required') }}</span>
</li>
</ul>
</div>
2019-07-05 07:17:44 +00:00
<div
class="form-group"
2022-03-29 12:35:18 +00:00
:class="{ 'form-group--error': v$.user.confirm.$error }"
2019-07-05 07:17:44 +00:00
>
<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>
2019-07-05 07:17:44 +00:00
<div
2022-03-29 12:35:18 +00:00
v-if="v$.user.confirm.$dirty"
2019-07-05 07:17:44 +00:00
class="form-error"
>
<ul>
2022-03-29 12:35:18 +00:00
<li v-if="!v$.user.confirm.required">
2019-07-05 07:17:44 +00:00
<span>{{ $t('registration.validations.password_confirmation_required') }}</span>
</li>
2022-03-29 12:35:18 +00:00
<li v-if="!v$.user.confirm.sameAsPassword">
2019-07-05 07:17:44 +00:00
<span>{{ $t('registration.validations.password_confirmation_match') }}</span>
</li>
</ul>
</div>
2018-12-05 16:19:39 +00:00
<div
class="form-group"
2022-05-18 03:43:37 +00:00
:class="{ 'form-group--error': v$.user.language.$error }"
>
<interface-language-switcher
for="email-language"
:prompt-text="$t('registration.email_language')"
2022-05-18 03:43:37 +00:00
:language="v$.user.language.$model"
:set-language="val => v$.user.language.$model = val"
/>
</div>
<div
v-if="accountApprovalRequired"
class="form-group"
:class="{ 'form-group--error': v$.user.reason.$error }"
>
<label
class="form--label"
for="reason"
>{{ $t('registration.reason') }}</label>
<textarea
id="reason"
v-model="user.reason"
:disabled="isPending"
class="form-control"
:placeholder="reasonPlaceholder"
/>
</div>
2019-07-05 07:17:44 +00:00
<div
v-if="captcha.type != 'none'"
id="captcha-group"
class="form-group"
>
<label
class="form--label"
for="captcha-label"
>{{ $t('registration.captcha') }}</label>
2019-12-12 11:19:46 +00:00
<template v-if="['kocaptcha', 'native'].includes(captcha.type)">
2019-07-05 07:17:44 +00:00
<img
:src="captcha.url"
@click="setCaptcha"
>
2018-12-15 00:05:47 +00:00
2019-07-05 07:17:44 +00:00
<sub>{{ $t('registration.new_captcha') }}</sub>
2018-12-15 00:05:47 +00:00
2019-07-05 07:17:44 +00:00
<input
id="captcha-answer"
v-model="captcha.solution"
:disabled="isPending"
class="form-control"
type="text"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
2019-07-05 07:17:44 +00:00
>
2018-12-15 00:05:47 +00:00
</template>
</div>
2019-07-05 07:17:44 +00:00
<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"
>
2018-08-05 07:01:38 +00:00
</div>
2019-07-05 07:17:44 +00:00
<div class="form-group">
<button
:disabled="isPending"
type="submit"
class="btn button-default"
2019-07-05 07:17:44 +00:00
>
{{ $t('registration.register') }}
2019-07-05 07:17:44 +00:00
</button>
</div>
</div>
2018-12-05 16:19:39 +00:00
2019-07-06 21:54:17 +00:00
<!-- eslint-disable vue/no-v-html -->
2019-07-05 07:17:44 +00:00
<div
class="terms-of-service"
v-html="termsOfService"
/>
2019-07-06 21:54:17 +00:00
<!-- eslint-enable vue/no-v-html -->
2017-04-15 16:12:23 +00:00
</div>
2019-07-05 07:17:44 +00:00
<div
v-if="serverValidationErrors.length"
class="form-group"
>
<div class="alert error">
2019-07-06 21:54:17 +00:00
<span
v-for="error in serverValidationErrors"
:key="error"
>{{ error }}</span>
</div>
2017-04-15 16:12:23 +00:00
</div>
</form>
</div>
</div>
</template>
<script src="./registration.js"></script>
<style lang="scss">
@import '../../_variables.scss';
2018-12-05 19:05:43 +00:00
$validations-cRed: #f04124;
2017-04-15 16:12:23 +00:00
.registration-form {
2018-04-07 16:30:27 +00:00
display: flex;
flex-direction: column;
margin: 0.6em;
2018-04-07 16:30:27 +00:00
.container {
display: flex;
flex-direction: row;
> * {
min-width: 0;
}
2018-04-07 16:30:27 +00:00
}
2018-04-07 16:30:27 +00:00
.terms-of-service {
flex: 0 1 50%;
margin: 0.8em;
}
2017-04-15 16:12:23 +00:00
2018-04-07 16:30:27 +00:00
.text-fields {
margin-top: 0.6em;
flex: 1 0;
display: flex;
flex-direction: column;
}
2019-02-24 19:30:29 +00:00
textarea {
min-height: 100px;
resize: vertical;
2019-02-24 19:30:29 +00:00
}
2018-04-07 16:30:27 +00:00
.form-group {
display: flex;
flex-direction: column;
2022-04-20 20:22:51 +00:00
padding: 0.3em 0;
line-height: 2;
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 19:05:43 +00:00
color: $validations-cRed;
2018-12-05 19:35:15 +00:00
color: var(--cRed, $validations-cRed);
}
.form-error {
margin-top: -0.7em;
text-align: left;
span {
2022-04-20 20:44:33 +00:00
font-size: 0.85em;
}
}
.form-error ul {
list-style: none;
padding: 0 0 0 5px;
margin-top: 0;
li::before {
content: "• ";
}
2018-04-07 16:30:27 +00:00
}
2017-04-15 16:12:23 +00:00
2018-04-07 16:30:27 +00:00
form textarea {
line-height:16px;
resize: vertical;
}
2017-04-15 16:12:23 +00:00
2018-04-07 16:30:27 +00:00
.captcha {
max-width: 350px;
margin-bottom: 0.4em;
}
2018-04-07 16:30:27 +00:00
.btn {
margin-top: 0.6em;
2022-04-20 20:22:51 +00:00
height: 2em;
2018-04-07 16:30:27 +00:00
}
2017-04-15 16:12:23 +00:00
2018-04-07 16:30:27 +00:00
.error {
text-align: center;
}
2017-04-15 16:12:23 +00:00
}
2019-01-26 15:45:03 +00:00
@media all and (max-width: 800px) {
2018-04-07 16:30:27 +00:00
.registration-form .container {
flex-direction: column-reverse;
}
}
2017-04-15 16:12:23 +00:00
</style>