added account input bio field

Author: supalarry

frontend/src/components/app/settings/AccountInput.vue

@@ -6,10 +6,10 @@
         <div class="flex justify-between items-center w-full">
           <h1 class="text-md font-bold capitalize text-gray-matcha">{{ name }}</h1>
           <input v-if="edit" type="submit" :disabled="invalid" value="Save"
-                 v-bind:class="{'text-lg': true,'text-purple-matcha': true, 'bg-transparent': true, 'focus:outline-none': true, 'active:outline-none': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
-          <h1 v-if="!edit" v-on:click="startEditing()" class="cursor-pointer text-md text-purple-matcha">{{ buttonText }}</h1>
+                 v-bind:class="{'text-base': true,'text-purple-matcha': true, 'bg-transparent': true, 'focus:outline-none': true, 'active:outline-none': true, 'opacity-50': invalid, 'cursor-pointer': !invalid}">
+          <h1 v-if="!edit" v-on:click="startEditing()" class="cursor-pointer text-base text-purple-matcha">{{ buttonText }}</h1>
         </div>
-        <div v-if="!edit && type !== 'password'"><h1 class="text-md opacity-50">{{ currentValue }}</h1></div>
+        <div class="break-words" v-if="!edit && type !== 'password'"><h1 class="text-md opacity-50 max-w-xs">{{ currentValue }}</h1></div>
         <div v-if="edit">
           <ValidationProvider v-if="type === 'firstName'" name="First Name" rules="required|alpha|max:20" v-slot="{errors}">
             <input type="text" placeholder="First Name" v-model="currentValue" class="matcha-input max-w-xs">
@@ -27,6 +27,10 @@
             <input type="text" placeholder="Username" v-model="currentValue" class="matcha-input max-w-xs">
             <span class="matcha-input-error">{{ errors[0] }}</span>
           </ValidationProvider>
+          <ValidationProvider v-if="type === 'bio'" name="Biography" rules="required|min:50|max:200" v-slot="{errors}">
+            <textarea style="resize: none;" rows="4" type="text" placeholder="Biography" v-model="currentValue" class="matcha-input max-w-xs block"></textarea>
+            <span class="matcha-input-error">{{ errors[0] }}</span>
+          </ValidationProvider>
           <ValidationProvider v-if="type === 'password'" name="Password" rules="required|min:6|validPassword" v-slot="{errors}">
             <input type="password" placeholder="Password" v-model="currentValue" class="matcha-input max-w-xs">
             <span class="matcha-input-error">{{ passwordErrorHandler(errors[0]) }}</span>