From 8275f2aa9a74ca12a7d1241aa9bb688c6b1c0723 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Sun, 24 Feb 2019 14:30:29 -0500
Subject: [PATCH] #396: update registration form

---
 src/components/registration/registration.vue | 12 ++++++++----
 src/i18n/en.json                             |  4 ++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index f428ead3..30096c54 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -9,7 +9,7 @@
           <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='e.g. lain'>
+              <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>
@@ -21,7 +21,7 @@
 
             <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='e.g. Lain Iwakura'>
+              <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>
@@ -44,8 +44,8 @@
             </div>
 
             <div class='form-group'>
-              <label class='form--label' for='bio'>{{$t('registration.bio')}}</label>
-              <input :disabled="isPending" v-model='user.bio' class='form-control' id='bio'>
+              <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('registration.optional')}})</label>
+              <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="$t('registration.bio_placeholder')"></textarea>
             </div>
 
             <div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
@@ -139,6 +139,10 @@ $validations-cRed: #f04124;
     flex-direction: column;
   }
 
+  textarea {
+    min-height: 100px;
+  }
+
   .form-group {
     display: flex;
     flex-direction: column;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 518e8e0e..957ba0bc 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -92,6 +92,10 @@
     "token": "Invite token",
     "captcha": "CAPTCHA",
     "new_captcha": "Click the image to get a new captcha",
+    "optional": "optional",
+    "username_placeholder": "e.g. lain",
+    "fullname_placeholder": "e.g. Lain Iwakura",
+    "bio_placeholder": "e.g.\nHi, I'm Lain\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
     "validations": {
       "username_required": "cannot be left blank",
       "fullname_required": "cannot be left blank",