refactor to use BaseInout on register form

Author: Gareth Redfern

src/components/RegisterForm.vue

@@ -1,43 +1,35 @@
 <template>
   <form @submit.prevent="registerUser">
-    <div class="mb-2">
-      <label for="name" class="text-sm text-gray-500">Name</label>
-      <input
-        type="text"
-        id="name"
-        v-model="name"
-        class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-      />
-    </div>
-    <div class="mb-2">
-      <label for="email" class="text-sm text-gray-500">Email</label>
-      <input
-        type="email"
-        id="email"
-        v-model="email"
-        class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-      />
-    </div>
-    <div class="mb-2">
-      <label for="password" class="text-sm text-gray-500">Password</label>
-      <input
-        type="password"
-        id="password"
-        v-model="password"
-        class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-      />
-    </div>
-    <div class="mb-4">
-      <label for="password-confirm" class="text-sm text-gray-500"
-        >Confirm Password</label
-      >
-      <input
-        type="password"
-        id="password-confirm"
-        v-model="passwordConfirm"
-        class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-      />
-    </div>
+    <BaseInput
+      type="text"
+      label="Name"
+      name="name"
+      v-model="name"
+      placeholder="Luke Skywalker"
+      class="mb-2"
+    />
+    <BaseInput
+      type="email"
+      label="Email"
+      name="email"
+      v-model="email"
+      placeholder="[email protected]"
+      class="mb-2"
+    />
+    <BaseInput
+      type="password"
+      label="Password"
+      name="password"
+      v-model="password"
+      class="mb-2"
+    />
+    <BaseInput
+      type="password"
+      label="Confirm Password"
+      name="password-confirm"
+      v-model="passwordConfirm"
+      class="mb-4"
+    />
     <BaseBtn type="submit" text="Register" />
     <FlashMessage :message="message" :error="error" />
   </form>
@@ -46,13 +38,15 @@
 <script>
 import { getError } from "@/utils/helpers";
 import BaseBtn from "@/components/BaseBtn";
+import BaseInput from "@/components/BaseInput";
 import AuthService from "@/services/AuthService";
 import FlashMessage from "@/components/FlashMessage";
 
 export default {
   name: "RegisterForm",
   components: {
     BaseBtn,
+    BaseInput,
     FlashMessage,
   },
   data() {