From dd99a541ec399ecfd3eb83bde3567a11207c5d37 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 18 Jan 2022 17:44:12 -0500
Subject: [PATCH] CSR-254: fixes and tweaks

---
 src/layouts/form-test/form-test.vue | 38 ++++++++++++++++++++---------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index 9a0b7f6c0..894c684ca 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -4,9 +4,11 @@
   @submit="onSubmit"
   @invalid-submit="onInvalidSubmit"
   v-slot="{ values, meta }"
+  class="w-50"
 >
   <div class="row g-2 mt-6 mx-4">
     <h2 class="mx-2 mt-4 mb-0">FORM VALIDATION TEST</h2>
+    <p class="mx-2">NOTE: This page is testing functionality only; styling will not match Figma mocks.</p>
   </div> 
 
   <div class="row g-2 mt-6 mx-4">
@@ -103,7 +105,7 @@
     </div>
   </div>
 
-  <div class="row g-2 mt-6 mx-4">
+  <!-- <div class="row g-2 mt-6 mx-4">
     <div class="col">
       <h4 class="mx-2 mt-4 mb-0">demo4: Enter some numbers (optional)</h4>
       <textInput
@@ -113,7 +115,7 @@
         :isRequired="true"
       />
     </div>
-  </div>
+  </div> -->
 
   <div class="row g-2 mt-6 mx-4">
     <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
@@ -247,13 +249,25 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 export default {
   name: "App",
   data() {
+    const errorMessages = {
+      demo: 'Please select chip(s)',
+      demo2: 'Please select a windshield part',
+      demo3: 'You entered an invalid VIN. Please check to make sure that you inserted a 17 digit, alpha-numeric number. VINs do not contain the letters I, O or Q.',
+      demo4: 'Invalid Entry. Must enter only numbers, no letters.',
+      demo5: 'Please select damage location',
+    };
     return {
       schema: Yup.object().shape({
-        demo: Yup.string().required('Please select chip(s)'),
-        demo2: Yup.array().required('Please select a windshield part').min(1, 'Please select a windshield part'),
-        demo3: Yup.string().required('Invalid VIN. Please enter X, Y, Z...'),
-        demo4: Yup.string().matches('^[0-9]*$', 'Invalid Entry. Must enter only numbers, no letters.'),
-        demo5: Yup.array().required('Please select damage location').min(1, 'Please select damage location'),
+        demo: Yup.string().required(errorMessages.demo),
+        demo2: Yup.array().required(errorMessages.demo2).min(1, errorMessages.demo2),
+        demo3: Yup.string()
+          .uppercase()
+          .required('Please enter a VIN.')
+          .min(17, errorMessages.demo3)
+          .max(17, errorMessages.demo3)
+          .matches('^[^IOQ]+$', errorMessages.demo3),
+        demo4: Yup.string().matches('^[0-9]*$', errorMessages.demo4),
+        demo5: Yup.array().required(errorMessages.demo5).min(1, errorMessages.demo5),
         demo6: Yup.string()
           .when('demo5', function (demo5, schema, value) {
             if (demo5) {
@@ -267,11 +281,11 @@ export default {
             return schema;
           }),
         demoX: Yup.string().notRequired(),
-        // // PASSWORD EXAMPLE, NOT BEING USED NOW
-        //password: Yup.string().min(6).required(),
-        //passwordConfirmation: Yup.string()
-        //  .required()
-        //  .oneOf([Yup.ref("password")], "Passwords do not match"),
+        // PASSWORD EXAMPLE, NOT BEING USED NOW
+        password: Yup.string().min(6).required(),
+        passwordConfirmation: Yup.string()
+         .required()
+         .oneOf([Yup.ref("password")], "Passwords do not match"),
       }).test('repair-replace-conflict', 
         null, // need to pass null as error message so it won't get added to list of errors
         function(value) {