Merge pull request #74 from bcgov/feature/intake-form-validation

Yup validation for SHAS intake form
bcgov · May 21, 2024 · cdf13ee · cdf13ee
2 parents 9b94430 + 98ddbf2
commit cdf13ee
Show file tree

Hide file tree

Showing 16 changed files with 643 additions and 52 deletions.
diff --git a/app/src/db/prisma/schema.prisma b/app/src/db/prisma/schema.prisma
@@ -215,9 +215,3 @@ model user {
   @@index([identity_id], map: "user_identity_id_index")
   @@index([username], map: "user_username_index")
 }
-
-enum yes_no_unsure {
-  Yes
-  No
-  Unsure
-}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -37,7 +37,7 @@
     "pinia-plugin-persistedstate": "^3.2.1",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "3.50.0",
+    "primevue": "3.52.0",
     "qrcode.vue": "^3.4.1",
     "quill": "^2.0.0",
     "uuid": "^9.0.1",

diff --git a/frontend/src/assets/main.scss b/frontend/src/assets/main.scss
@@ -119,6 +119,15 @@ label {
   }
 }
 
+.app-error-color {
+  color: $app-error !important;
+}
+
+.app-error-message {
+  color: $app-error;
+  font-size: 0.8rem;
+}
+
 /* ---------- primevue overrides ------------ */
 
 /* buttons */

diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss
@@ -11,6 +11,7 @@ $app-primary: #036;
 $app-link-text: #1a5a96;
 $app-link-text-hover: #00f;
 $app-outline-on-primary: #fff;
+$app-error: #D8292F;
 
 // highlighted sections, table rows
 $app-highlight-background: #d9e1e8;

diff --git a/frontend/src/components/form/Dropdown.vue b/frontend/src/components/form/Dropdown.vue
@@ -53,8 +53,11 @@ const emit = defineEmits(['onChange']);
     />
 
     <small :id="`${name}-help`">{{ helpText }}</small>
-    <div>
-      <ErrorMessage :name="name" />
+    <div class="mt-2">
+      <ErrorMessage
+        :name="name"
+        class="app-error-message"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/InputMask.vue b/frontend/src/components/form/InputMask.vue
@@ -38,8 +38,11 @@ const props = withDefaults(defineProps<Props>(), {
     />
 
     <small :id="`${name}-help`">{{ helpText }}</small>
-    <div>
-      <ErrorMessage :name="name" />
+    <div class="mt-2">
+      <ErrorMessage
+        :name="name"
+        class="app-error-message"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/InputNumber.vue b/frontend/src/components/form/InputNumber.vue
@@ -57,8 +57,11 @@ const fieldActive: Ref<boolean> = ref(false);
     >
       {{ helpText }}
     </small>
-    <div>
-      <ErrorMessage :name="name" />
+    <div class="mt-2">
+      <ErrorMessage
+        :name="name"
+        class="app-error-message"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/InputText.vue b/frontend/src/components/form/InputText.vue
@@ -34,10 +34,7 @@ const fieldActive: Ref<boolean> = ref(false);
 
 <template>
   <div class="field">
-    <FloatLabel
-      v-if="props.floatLabel"
-      class="mb-3"
-    >
+    <FloatLabel v-if="props.floatLabel">
       <InputTextInternal v-bind="props" />
     </FloatLabel>
     <InputTextInternal
@@ -52,8 +49,11 @@ const fieldActive: Ref<boolean> = ref(false);
     >
       {{ helpText }}
     </small>
-    <div>
-      <ErrorMessage :name="name" />
+    <div class="mt-2">
+      <ErrorMessage
+        :name="name"
+        class="app-error-message"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/Password.vue b/frontend/src/components/form/Password.vue
@@ -45,7 +45,10 @@ const { errorMessage, value } = useField<string>(toRef(props, 'name'));
     />
     <small :id="`${name}-help`">{{ helptext }}</small>
     <div>
-      <ErrorMessage :name="props.name" />
+      <ErrorMessage
+        :name="props.name"
+        class="app-error-message"
+      />
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/form/RadioList.vue b/frontend/src/components/form/RadioList.vue
@@ -63,8 +63,11 @@ watch(value, () => {
     </div>
 
     <small :id="`${name}-help`">{{ helpText }}</small>
-    <div>
-      <ErrorMessage :name="name" />
+    <div class="mt-2">
+      <ErrorMessage
+        :name="name"
+        class="app-error-message"
+      />
     </div>
   </div>
 </template>