From 9108737d55300d8a4f822ba94335d8b53f04854d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Apr 2019 20:33:11 +0300
Subject: Webpack 4, ESLint with Vue, Node-sass, updated dependencies overall.
 New linting.

---
 src/components/registration/registration.vue | 225 +++++++++++++++++++++------
 1 file changed, 175 insertions(+), 50 deletions(-)

(limited to 'src/components/registration/registration.vue')

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 110b27bf..c5f284ed 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -1,109 +1,234 @@
 <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>
+          <div
+            class="terms-of-service"
+            v-html="termsOfService"
+          />
         </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>
-- 
cgit v1.2.3-70-g09d2