:construction: Added rendered response messages if invalid input passed in survey

frontend/src/components/onboarding/FormDropdown.vue

@@ -25,10 +25,6 @@ export default {
     },
     methods: {
         handleSubmit() {
-            if (!this.selection) {
-                console.warn('Please select a role.')
-                return
-            }
             let payload = {
                 question: this.question,
                 input: this.selection,

frontend/src/utils/lang.js

@@ -92,13 +92,17 @@ const promptOverrides = {
         "Looking good so far! You're doing great. The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area. What's your zip code?:",
     blurb: "Please provide us with a short blurb about yourself. What's your backstory?:",
     image: "Hey, you're almost done! Please provide an image of yourself so others can recognize you if you ever meet up IRL:",
-    seeking: "Alright, let's continue! What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?",
-    pronouns: "When others refer to you, what pronouns do you prefer they use?:",
-    urgency: "How soon do you need the position filled or you need to be employed?",
-    presence: "Would you prefer remote, hybrid, in-person work?",
-    duration: "What kind of duration would you prefer? Are you looking for part-time, full-time, other?",
-    language: "Your native language is?...",
-    distance: "What distance from your home are you looking to work in?",
+    seeking:
+        "Alright, let's continue! What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?",
+    pronouns:
+        'When others refer to you, what pronouns do you prefer they use?:',
+    urgency:
+        'How soon do you need the position filled or you need to be employed?',
+    presence: 'Would you prefer remote, hybrid, in-person work?',
+    duration:
+        'What kind of duration would you prefer? Are you looking for part-time, full-time, other?',
+    language: 'Your native language is?...',
+    distance: 'What distance from your home are you looking to work in?',
 }
 
 const inputPlaceholders = {
@@ -107,12 +111,29 @@ const inputPlaceholders = {
     zipcode: '90012',
     password: 'supersecr3tp@ssword',
     blurb: 'my backstory starts long long ago...',
-    distance: '5 mi'
+    distance: '5 mi',
+}
+
+const invalidInputPrompts = {
+    name: "So sorry, but what's your name?",
+    email: "It looks like that email isn't valid, try en email that is formatted like so: joe@joe.com",
+    password: "That password doesn't fit our requirements, please follow the above instructions to generate a secure password.",
+    zipcode: "Oops! That isn't a recognized zipcode, please enter a 5 digit zipcode like: 97869",
+    blurb: "Whoa! Cool story. Unfortunately your backstory is either too long or too short. Please tell us a bit about yourself between 1 and 100 characters.",
+    image: "It appears you didn't upload an image. Please provide Siimee with an image in case you want to show others what you look like.",
+    seeking: "In order to provide you with the best results, Siimee will need to know whether you're an employer looking to fill a position, or a candidate looking for an employment. Please take a look at our above options and choose one.",
+    pronouns: "Ensuring that others on our platform are aware of what your preferred pronouns are is important to us. Please choose from one of the above options.",
+    urgency: "Looks like you left this field blank. Take a look at our provided options and tell us when you'd like be employed.",
+    presence: "Hold up! So sorry to put a pause here, but it looks like you haven't chosen whether to work remotely or in person. No worries, if you're unsure, just choose the 'flexible' option.",
+    duration: "Looks like you haven't filled out what kind of work you're most interested in. As in, part-time, full-time. Take a look at our above options and choose whatever feels right for you right now. You can always edit them later!",
+    language: "We try our best to provide results in the language of your choosing. ¿Prefieres ver resultados en español? Or would you prefer to see results in english?",
+    distance: "Whoa! You either left this field blank or tried to input an astronomically large distance you'd like to see results from. Please input a distance you'd like to see results in.",
 }
 
 export {
     promptOverrides,
     inputPlaceholders,
+    invalidInputPrompts,
     allSteps,
     aspectResponses,
     possible,

frontend/src/utils/survey.js

@@ -1,6 +1,6 @@
 import { Survey } from '../entities/index.js'
 import { fetchQuestions } from '../services/index.js'
-import { promptOverrides, inputPlaceholders, possible } from './lang.js'
+import { promptOverrides, inputPlaceholders, invalidInputPrompts ,possible } from './lang.js'
 
 const promptToComponent = {
     splash: 'Splash',
@@ -70,6 +70,7 @@ class SurveyFactory {
                 const langStub = responseKeyLike.response_key_prompt
                 withComponent.response_key_prompt = promptOverrides[langStub]
                 withComponent.placeholder = inputPlaceholders[langStub]
+                withComponent.invalidInputPrompt = invalidInputPrompts[langStub]
                 withComponent.survey_stage = langStub
             }
 

frontend/src/views/OnboardingView.vue

@@ -19,10 +19,15 @@ main.view--onboarding
                 @update-answers='updateAnswers'
                 v-if='step && currentStep == i'
             )
-            
+        .invalidResponseMessage(
+            style='text-align: center'
+            v-if='invalidResponse'
+        )
+            p {{ survey.steps[currentStep].invalidInputPrompt }}
+
         footer
             p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / {{ survey.steps.length -2 }} survey steps
-    
+
     article(v-else)
         SurveyCompleteView(:answers='answered' :surveySteps='survey.steps')
 </template>
@@ -47,6 +52,7 @@ export default {
         currentStep: 0,
         survey: null,
         incomplete: true,
+        invalidResponse: false,
     }),
     async created() {
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
@@ -62,11 +68,15 @@ export default {
         updateAnswers(payload) {
             // null payload is passed on splash page
             if (payload) {
+                console.log('payload >>', payload)
+                this.invalidResponse = false
                 const k = payload.question.survey_stage
                 this.answered[k] = payload.input
 
-                // TODO: render message to user on why they cannot proceed
-                if (!this.survey.validateAnswer(this.answered)) return 
+                if (!this.survey.validateAnswer(this.answered)) {
+                    this.invalidResponse = true
+                    return
+                }
 
                 // once validated, don't log password in answered object
                 this.answered[k] = k === 'password' ? undefined : payload.input