Merge branch 'brian_dev_141' of fyindr/siimee into dev

backend/db/data-generator/index.js

     // Generate responses first, before filling in details
     let responses = generate(
         classes.Response,
-        (config.batchSize + extraProfilesToGenerate) * mock.response_keys.length,
+        (config.batchSize + extraProfilesToGenerate) *
+            mock.response_keys.length,
         { starting: generatedResponseCount + config.batchSize },
     )
     profiles.forEach((profile, i) => {
             resToEdit.response_key_id = k + 1
             resToEdit.profile_id = profile.profile_id
 
-            if(resToEdit.response_key_id < config.zipcodeKey) {
+            if (resToEdit.response_key_id < config.zipcodeKey) {
                 resToEdit.val = random.valFrom(Object.values(possibleResponses))
-            }
-            else if(resToEdit.response_key_id == config.zipcodeKey) {
+            } else if (resToEdit.response_key_id == config.zipcodeKey) {
                 resToEdit.val = random.valFrom(config.possibleZipcodes)
-            }
-            else {
+            } else {
                 switch (resToEdit.response_key_id) {
-                case config.mediaKey:
-                    resToEdit.val = random.media()
-                    break
-                case config.langKey:
-                    resToEdit.val = random.language()
-                    break
-                case 10:
-                    resToEdit.val = random.duration()
-                    break
-                case 11:
-                    resToEdit.val = random.location()
-                    break
-                case config.blurbKey:
-                    resToEdit.val = random.blurb()
-                    break
+                    case config.mediaKey:
+                        resToEdit.val = random.media()
+                        break
+                    case config.langKey:
+                        resToEdit.val = random.language()
+                        break
+                    case 10:
+                        resToEdit.val = random.duration()
+                        break
+                    case 11:
+                        resToEdit.val = random.location()
+                        break
+                    case config.blurbKey:
+                        resToEdit.val = random.blurb()
+                        break
                 }
             }
         }
     let jobPosterIds = users
         .filter(user => user.is_poster > 0)
         .map(user => user.user_id)
-    // Guarentee ONE job poster
+    // Guarantee ONE job poster
     if (!jobPosterIds.length) {
         random.valFrom(users).is_poster = 1
         jobPosterIds = users

backend/db/data-generator/mock.js

         {
             response_key_id: 1,
             response_key_category: 'visionary_vs_implementer',
-            response_key_prompt:
-                'While managing your team, do you find success in your employees being more Visionary or Implementer?',
+            response_key_prompt: 'Do you prefer to work with those who are driven by their Visionary insights, or those who are driven more by their Implementation?',
             response_key_description: 'first round draft scoring question',
+            aspect: 'visionary_vs_implementer',
+            category: 'aspect',
+            placeholder: null,
+            invalidInputPrompt: null,
         },
         {
             response_key_id: 2,
             response_key_category: 'creative_vs_methodical',
-            response_key_prompt:
-                'In your department, do you find more success in your employees being Creative or Methodical in their job duties?',
+            response_key_prompt: 'Have you found more success working with employees that are more Creative or those that are more Methodical?',
             response_key_description: 'first round draft scoring question',
+            aspect: 'creative_vs_methodical',
+            category: 'aspect',
+            placeholder: null,
+            invalidInputPrompt: null,
         },
         {
             response_key_id: 3,
             response_key_category: 'dynamic_vs_ordered',
-            response_key_prompt:
-                'Do you structure and encourage your team to be a Collaborative or Independent environment? (NEEDS UPDATED COPY)',
+            response_key_prompt: 'Which do you find to be the ideal working environment, one that is more Collaborative or one that is more Independent?',
             response_key_description: 'first round draft scoring question',
+            aspect: 'dynamic_vs_ordered',
+            category: 'aspect',
+            placeholder: null,
+            invalidInputPrompt: null,
         },
         {
             response_key_id: 4,
             response_key_category: 'precise_vs_resourceful',
-            response_key_prompt:
-                'Do you find higher success in employees on your team that are Innovative or Conventional? (NEEDS UPDATED COPY)',
+            response_key_prompt: 'Is the success of your team more likely if it includes individuals who are more Innovative, or those that are more Conventional when fulfilling their job duties?',
             response_key_description: 'first round draft scoring question',
+            aspect: 'precise_vs_resourceful',
+            category: 'aspect',
+            placeholder: null,
+            invalidInputPrompt: null,
         },
         {
             response_key_id: 5,
             response_key_category: 'big_Picture_vs_focused',
-            response_key_prompt:
-                'As a hiring leader, are you a Big Picture or Focused thinker when it comes to how you operate in your job duties?',
+            response_key_prompt: 'When fulfilling the role of the hiring leader, do you find yourself focusing more on the Big Picture or The Task At Hand?',
             response_key_description: 'first round draft scoring question',
+            aspect: 'big_Picture_vs_focused',
+            category: 'aspect',
+            placeholder: null,
+            invalidInputPrompt: null,
         },
         {
             response_key_id: 6,
             response_key_category: 'guided_vs_self-managed',
-            response_key_prompt:
-                'Do you prefer your employees to be Guided or Self-managed in achieving completion of their responsibilities?',
+            response_key_prompt: 'Do you prefer to Guide your employees towards achieving the team goals, or do you prefer your employees to be Self-Managed?',
             response_key_description: 'first round draft scoring question',
+            aspect: 'guided_vs_self-managed',
+            category: 'aspect',
+            placeholder: null,
+            invalidInputPrompt: null,
         },
         {
             response_key_id: 7,
             response_key_category: 'profile',
-            response_key_prompt: 'zipcode',
-            response_key_description: 'required for distance calculations',
+            response_key_prompt: 'First things first, could you provide us with your name? [break] I am called [break] when others address me.',
+            response_key_description: 'required for profile creation',
+            aspect: null,
+            category: 'input',
+            placeholder: 'Joe Doe',
+            invalidInputPrompt: 'So sorry, but what is your name?',
         },
         {
             response_key_id: 8,
             response_key_category: 'profile',
-            response_key_prompt: 'image',
-            response_key_description: 'required for profile pictures',
+            response_key_prompt: 'In order for others to reach out to you on Siimee, we will need you to provide your email address.[break]When reaching out to me, [break] is my preferred email.',
+            response_key_description: 'required for profile creation',
+            aspect: null,
+            category: 'input',
+            placeholder: 'joe@mailme.com',
+            invalidInputPrompt: 'It looks like that email is not valid, try en email that is formatted like so: joe@joe.com',
         },
         {
             response_key_id: 9,
             response_key_category: 'profile',
-            response_key_prompt: 'language',
-            response_key_description:
-                'programming and spoken language preference',
+            response_key_prompt: 'So far so good! Next we will need you to establish a super secret password. Your password should be at least 14 characters long and have at least 2 special characters.[break]My [break] is a very secure passcode that only I will have access to!',
+            response_key_description: 'required for profile creation',
+            aspect: null,
+            category: 'input',
+            placeholder: 'supersecr3tp@ssword',
+            invalidInputPrompt: 'That password does not fit our requirements, please follow the above instructions to generate a secure password.',
         },
         {
             response_key_id: 10,
             response_key_category: 'profile',
-            response_key_prompt: 'duration',
-            response_key_description:
-                'duration preference for hours able to dedicate to work',
+            response_key_prompt: 'Looking good! Doing great. The next piece of info needed is your zip code. That way we can be sure to only show you other people in your area.[break]My zip code, [break] is the general area where I wish to see results in.',
+            response_key_description: 'required for distance calculations',
+            aspect: null,
+            category: 'input',
+            placeholder: '90012',
+            invalidInputPrompt: 'Oops! That is not a recognized zipcode, please enter a 5 digit zipcode like: 97869',
         },
         {
             response_key_id: 11,
             response_key_category: 'profile',
-            response_key_prompt: 'presence',
-            response_key_description:
-                'location preference for where work happens',
+            response_key_prompt: 'What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?[break] I am a [break] seeking an employer/employee.',
+            response_key_description: 'required for profile generation',
+            aspect: null,
+            category: 'choice',
+            placeholder: null,
+            invalidInputPrompt: 'In order to provide you with the best results, Siimee will need to know whether you are 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.',
         },
         {
             response_key_id: 12,
             response_key_category: 'profile',
-            response_key_prompt: 'blurb',
-            response_key_description: 'required for profile description',
+            response_key_prompt: 'Hey, you are almost done! Please provide an image of yourself so others can recognize you if you ever meet up IRL:',
+            response_key_description: 'required for profile pictures',
+            aspect: null,
+            category: 'input',
+            placeholder: null,
+            invalidInputPrompt: 'It appears you have yet to upload an image. Please provide Siimee with an image in case you want to show others what you look like.',
         },
         {
             response_key_id: 13,
             response_key_category: 'profile',
-            response_key_prompt: 'urgency',
-            response_key_description: 'urgency for when work is required',
+            response_key_prompt: 'What language is your native language?[break] I consider [break] language as my native language.',
+            response_key_description: 'programming and spoken language preference',
+            aspect: null,
+            category: 'choice',
+            placeholder: null,
+            invalidInputPrompt: 'We try our best to provide results in the language of your choosing. ¿Prefieres ver resultados en español? Ou peut-être parlez-vous français? Or would you prefer to see results in english?',
         },
         {
             response_key_id: 14,
             response_key_category: 'profile',
-            response_key_prompt: 'role',
-            response_key_description: 'current and desired role',
+            response_key_prompt: 'What kind of duration would you prefer? Are you looking for part-time, full-time, other?[break] Currently, I am looking for a [break] job at this time.',
+            response_key_description: 'duration preference for hours able to dedicate to work',
+            aspect: null,
+            category: 'choice',
+            placeholder: null,
+            invalidInputPrompt: 'Looks like you have yet to  fill out what kind of work you are 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!',
         },
         {
             response_key_id: 15,
             response_key_category: 'profile',
-            response_key_prompt: 'pronouns',
-            response_key_description: 'required for profile pronouns',
+            response_key_prompt: 'Would you prefer remote, hybrid, in-person work?[break] Personally I would prefer a [break] job right now. It is just what works best for me.',
+            response_key_description: 'location preference for where work happens',
+            aspect: null,
+            category: 'choice',
+            placeholder: null,
+            invalidInputPrompt: 'Hold up! So sorry to put a pause here, but it looks like you have not chosen whether to work remotely or in person. No worries, if you are unsure, just choose the flexible option.',
         },
         {
             response_key_id: 16,
             response_key_category: 'profile',
-            response_key_prompt: 'distance',
-            response_key_description:
-                'preference for commuting distance cutoff',
+            response_key_prompt: 'Please provide us with a short blurb about yourself. What is your backstory?[break] My origin story starts like this:[break]',
+            response_key_description: 'required for profile description',
+            aspect: null,
+            category: 'input',
+            placeholder: 'my backstory starts long long ago...',
+            invalidInputPrompt: '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.',
+        },
+        {
+            response_key_id: 17,
+            response_key_category: 'profile',
+            response_key_prompt: 'How soon do you need the position filled or you need to be employed? [break]I am currently [break] when it comes to employment opportunities right now.',
+            response_key_description: 'urgency for when work is required',
+            aspect: null,
+            category: 'choice',
+            placeholder: null,
+            invalidInputPrompt: 'Looks like you left this field blank. Take a look at our provided options and tell us when you would like be employed.',
+        },
+        {
+            response_key_id: 18,
+            response_key_category: 'profile',
+            response_key_prompt: 'When others refer to you, what pronouns do you prefer they use?[break]I prefer to be called [break] when others refer to me.',
+            response_key_description: 'required for profile pronouns',
+            aspect: null,
+            category: 'choice',
+            placeholder: null,
+            invalidInputPrompt: '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.',
+        },
+        {
+            response_key_id: 19,
+            response_key_category: 'profile',
+            response_key_prompt: 'What distance from your home are you looking to work in?[break] Preferably, I would like to work [break] from my place of residence.',
+            response_key_description: 'preference for commuting distance cutoff',
+            aspect: null,
+            category: 'input',
+            placeholder: '5 mi',
+            invalidInputPrompt: 'Whoa! You either left this field blank or tried to input an astronomically large distance you would like to see results from. Please input a distance you would like to see results in.',
         },
     ],
     responses: [],

backend/db/migrations/20210527174416_create_response_keys_table.js

         table.string('response_key_category').notNullable()
         table.string('response_key_prompt')
         table.string('response_key_description')
+        table.string('aspect')
+        table.string('category')
+        table.string('placeholder')
+        table.string('invalidInputPrompt')
     })
 }
 

backend/lib/schemas/responses.js

     response_key_category: Joi.string().required(),
     response_key_prompt: Joi.string().required(),
     response_key_description: Joi.any(),
+    aspect: Joi.string().allow(null, ''),
+    category: Joi.string().allow(null, ''),
+    placeholder: Joi.string().allow(null, ''),
+    invalidInputPrompt: Joi.string().allow(null, ''),
+
 }).label('question_single')
 
 module.exports = {

frontend/src/components/onboarding/Aspects.vue

-<template lang="pug">
-w-card.aspects.w-flex.column
-    form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
-        QuestionResponse(
-            :question='question'
-            @updated='updateRadio'
-            v-for='question in aspectQuestions'
-        )
-        w-button.ma1.grow(bg-color='success' type='submit')
-            w-icon.mr1 wi-check
-            | SUBMIT ANSWERS
-</template>
-
-<script>
-import QuestionResponse from './QuestionResponse.vue'
-const answered = [null, null, null, null, null, null]
-
-export default {
-    name: 'Aspects',
-    components: {
-        QuestionResponse,
-    },
-    props: {
-        aspectQuestions: {
-            required: true,
-            type: Array,
-        },
-    },
-    emits: ['handle-submit', 'update-answers'],
-    async created() {
-        this.aspectQuestions.forEach((q, i) => {
-            console.log(`Aspect #${i}: ${JSON.stringify(q)}`)
-        })
-    },
-    methods: {
-        updateRadio(onRadioSelect) {
-            answered[onRadioSelect.id - 1] = onRadioSelect.answer
-            this.$emit('update-answers', {
-                key: 'Aspects',
-                question: {
-                    response_key_prompt: 'aspects',
-                },
-                answer: answered,
-            })
-        },
-    },
-}
-</script>

frontend/src/components/onboarding/FormDropdown.vue

 <template lang="pug">
 .role
-    h3 {{ question.response_key_category }}
-    p {{ question.response_key_prompt }}
+    span(style='text-align:center;') {{ parsedPrompt.start }}
+    span(style='text-align:center;') {{ parsedPrompt.mid }}
     w-select.mt4(:items='items' placeholder='i am' v-model='selection')
+    br
+    p(style='text-align:center;') {{ parsedPrompt.end }}
     w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 
     emits: ['update-answers'],
     data: () => ({
         selection: null,
+        parsedPrompt: {},
     }),
     computed: {
         items() {
             return this.question.responses.map(res => ({ label: res }))
         },
     },
+    created() {
+        const parsedPromptArr = this.question.response_key_prompt.split('[break]')
+        this.parsedPrompt.start = parsedPromptArr[0]
+        this.parsedPrompt.mid = parsedPromptArr[1]
+        this.parsedPrompt.end = parsedPromptArr[2]
+    },
     methods: {
         handleSubmit() {
-            if (!this.selection) {
-                console.warn('Please select a role.')
-                return
-            }
             let payload = {
                 question: this.question,
-                answer: this.selection,
+                input: this.selection,
             }
             this.$emit('update-answers', payload)
         },

frontend/src/components/onboarding/FormInput.vue

 <template lang="pug">
 .form-input
-    h3 {{ question.response_key_category }}
-    p {{ question.response_key_prompt }}
-    input(placeholder='i am a little teapot' type='text' v-model='input')
-    w-button.ma1.grow(@click='handleSubmit') NEXT
+    span(style='text-align: center') {{ parsedPrompt.start }}
+    br
+    br
+    span(style='text-align: center') {{ parsedPrompt.mid }}
+    input(
+        :placeholder='question.placeholder'
+        @keyup.enter='handleSubmit({ question, input })'
+        type='text'
+        v-if='question.survey_stage !== "image" && question.survey_stage !== "blurb" && question.survey_stage !== "password"'
+        v-model='input'
+        v-focus
+    )
+    input.pass(
+        :placeholder='question.placeholder'
+        @keyup.enter='handleSubmit({ question, input })'
+        style='-webkit-text-security: circle'
+        type='password'
+        v-else-if='question.survey_stage === "password"'
+        v-model='input'
+        v-focus
+    )
+    w-button.ma1.grow(
+        @click='submitImage'
+        v-else-if='question.survey_stage === "image"'
+    ) UPLOAD IMAGE
+    textarea(
+        :placeholder='`${question.placeholder}`'
+        @keyup.enter='handleSubmit({ question, input })'
+        cols='50'
+        rows='4'
+        v-else-if='question.survey_stage === "blurb"'
+        v-model='input'
+    )
+    span(style='text-align: center') {{ parsedPrompt.end }}
+    w-button.ma1.grow(@click='handleSubmit({ question, input })') NEXT
 </template>
 <script>
 export default {
     emits: ['update-answers'],
     data: () => ({
         input: null,
+        parsedPrompt: {},
     }),
+    created() {
+        const parsedPromptArr =
+            this.question.response_key_prompt.split('[break]')
+        this.parsedPrompt.start = parsedPromptArr[0]
+        this.parsedPrompt.mid = parsedPromptArr[1]
+        this.parsedPrompt.end = parsedPromptArr[2]
+    },
     methods: {
-        handleSubmit() {
-            if(this.question.response_key_prompt === 'password') {
-                this.$emit('update-answers') // no password collection
-                return
-            }
-
+        handleSubmit(answerInfo) {
+            this.$emit('update-answers', answerInfo)
+        },
+        submitImage() {
             let payload = {
                 question: this.question,
-                answer: this.input,
+                input: 'placeholder for image',
             }
             this.$emit('update-answers', payload)
         },
     },
 }
 </script>
+
+<style>
+.form-input,
+input[placeholder],
+textarea[placeholder] {
+    text-align: center;
+}
+input {
+    border: 0;
+    outline: 0;
+    background: transparent;
+    border-bottom: 1px solid black;
+}
+</style>

frontend/src/components/onboarding/QuestionResponse.vue

 <template lang="pug">
 w-card.question
-    p {{question.question}} 
+    p {{ question.response_key_prompt }}
     section.radio-buttons.w-flex.row.justify-space-between
-        p(v-for="label in question.labels") {{label}}
-    w-radios.w-flex.row.justify-space-between(@update:model-value="onUpdate" :items="radioItems" color="red")
+        p(v-for='label in question.labels') {{ label }}
+    w-radios.w-flex.row.justify-space-between(
+        :items='radioItems'
+        @update:model-value='onUpdate'
+        color='red'
+    )
+    w-button.ma1.grow(
+        @click='handleSubmit'
+        @keyup.enter='handlSubmit'
+        v-if='currentStep !== surveyStepsCount'
+    ) NEXT
+    w-button.ma1.grow(@click='handleSubmit' v-else) SUBMIT ANSWERS
+    p(v-if='noChoiceMade') Tough choices, we know! Just answer to the best of your ability. The team over at Siimee values the answers you provide us so that we can show you results catered to your specific needs.
 </template>
 
 <script>
             type: Object,
             required: true,
         },
+        currentSteps: {
+            type: Number,
+            required: true,
+        },
+        surveyStepsCount: {
+            type: Number,
+            required: true,
+        },
     },
-    emits: ['updated'],
+    emits: ['update-answers'],
     data: () => ({
-        radioItems: [
-            { answer: 1 },
-            { answer: 2 },
-            { answer: 3 },
-            { answer: 4 },
-            { answer: 5 },
-        ],
+        radioItems: [1, 2, 3, 4, 5],
+        answer: null,
+        noChoiceMade: null,
     }),
     methods: {
-        onUpdate(e) {
-            this.$emit('updated', { ...this.question, answer: e + 1 })
+        onUpdate(index) {
+            this.noChoiceMade = false
+            this.answer = this.radioItems[index]
+        },
+        handleSubmit() {
+            const payload = {
+                question: this.question,
+                input: this.answer,
+            }
+            this.noChoiceMade = payload.input === null ? true : false
+            this.$emit('update-answers', payload)
         },
     },
 }

frontend/src/components/onboarding/index.js

 import Location from './Location.vue'
 import Interests from './Interests.vue'
 import LicensesAndCertifications from './LicensesAndCertifications.vue'
-import Aspects from './Aspects.vue'
 import FormInput from './FormInput.vue'
 import FormTags from './FormTags.vue'
 import FormDropdown from './FormDropdown.vue'
+import QuestionResponse from './QuestionResponse.vue'
 
 export default {
     Splash,
     Location,
     Interests,
     LicensesAndCertifications,
-    Aspects,
     FormDropdown,
     FormTags,
     FormInput,
+    QuestionResponse,
 }

frontend/src/entities/card/card.js

 /** @module card/card */
+import { aspectsArr } from "../../utils/lang.js"
 
 const DEFAULT_ABOUT =
     'Hello! My name is L.L. and I am a nurse from New York. I have been in the healthcare industry for over 6 years.'
     c.locale = `${profile.city}, ${profile.state}`
     c.email = profile.user_email
 
-
-    let aspectResponses = profile?.responses.filter(r => [1,2,3,4,5,6].indexOf(r.response_key_id) !== -1)
+    let aspectResponses = profile?.responses.filter(r => aspectsArr.indexOf(r.response_key_id) !== -1)
     if(aspectResponses.length){ // if user has responses for aspects we overwrite default percentages
         c.aspects.map(a => {
             a.percentage = Number(aspectResponses.find(r => responseKeyIdToAspectName[r.response_key_id] == a.name).val )

frontend/src/entities/survey/survey.answer.validator.js

+import Joi from 'joi'
+import domains from './tlds-alpha-by-domain.js'
+
+const answerValidator = {
+    name: Joi.string().min(2).max(50).required(),
+    email: Joi.string().email({
+        minDomainSegments: 2,
+        tlds: { allow: domains },
+    }),
+    // Comment out and uncomment below for more robust password testing
+    password: Joi.string().min(14).max(30),
+    // TODO: consider using a more robust library for password validation
+    // password: Joi.string()
+        // .min(14)
+        // .max(30)
+        // .pattern(
+            // new RegExp(
+                // '^(?=.*[!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?])(?=.*[!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?])[a-zA-Z0-9!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?]{14,}$',
+            // ),
+        // ),
+    // TODO: Change if going international (only works in usa)
+    zipcode: Joi.string().min(5).max(5).pattern(new RegExp('^[0-9]{5}$')),
+    seeking: Joi.string(),
+    urgency: Joi.string(),
+    presence: Joi.string(),
+    duration: Joi.string(),
+    pronouns: Joi.string(),
+    language: Joi.string(),
+    image: Joi.any(),
+    // NOTE: Allows 1 to 3 digits and then distance metric
+    distance: Joi.string()
+        .min(4)
+        .max(15)
+        .pattern(new RegExp('^\\d{1,3}(\\.\\d{1,2})?\\s?(mi|km|mile|miles|kilometer|kilometers)$')),
+    blurb: Joi.string().max(200),
+    value: Joi.string(),
+    aspect: Joi.number(),
+}
+
+export { answerValidator }

frontend/src/entities/survey/survey.js

 /** @module survey/survey */
 import { _baseRecord } from '../index.js'
 import { surveySchema } from './survey.schema.js'
+import { answerValidator } from './survey.answer.validator.js'
+import { aspectsArr } from '../../utils/lang.js'
 
-const SCORED = [1, 2, 3, 4, 5, 6]
+const SCORED = aspectsArr
 const _isScored = id => SCORED.includes(id)
 const _makeCategoryFriendly = responseCategory => {
     const labels = responseCategory.split('_vs_')
         /**  Fields */
         this.steps = [...questionSteps] // ! required
         this.aspectQuestions = _formatAspectQuestions(this.steps)
-        console.log('this.aspectQuestions: ', JSON.stringify(this.aspectQuestions))
+        console.log(
+            'this.aspectQuestions: ',
+            JSON.stringify(this.aspectQuestions),
+        )
+    }
+
+    validateAnswer(payload) {
+        const { question, input } = payload
+
+        // Continue our ugly hacks
+        const validationType =
+            question.category == 'aspect'
+                ? question.category
+                : question.survey_stage
+        const validate = answerValidator[validationType].validate(input)
+        if (validate.error) {
+            console.error(`error: ${validate.error}`)
+        }
+        return !validate.error ? true : false
     }
 
     isValid() {

frontend/src/utils/aspects.js

     },
 ]
 
-export default Aspects
+export default Aspects

frontend/src/utils/lang.js

-const DELIMITER = '_'
+const aspectsArr = [1, 2, 3, 4, 5, 6]
 
-// TODO: Combine these two
+// Splash page is unique in survey steps and therefore is simply spliced in
+// during survey generation
+const splash = {
+    response_key_id: 20,
+    response_key_category: 'splash',
+    response_key_prompt: 'splash page',
+    response_key_description: 'required for splash page rendering',
+    aspect: null,
+    category: 'splash',
+    component: 'Splash',
+    survey_stage: 'splash',
+    placeholder: null,
+    invalidInputPrompt: null,
+}
+
+// Easily reorder steps of survey here:
 const allSteps = {
     usa: {
-        splash: 'splash',
         name: 'name',
-        email: 'email',
+        aspect01: 'aspect-1',
+        aspect02: 'aspect-2',
+        aspect03: 'aspect-3',
         password: 'password',
-        // pronouns: 'pronouns',
-        // seeking: 'seeking',
-        // urgency: 'urgency',
-        // experience: 'experience',
-        // roles: 'role',
-        // duration: 'duration',
-        // presence: 'presence',
-        // language: 'language',
         zipcode: 'zipcode',
-        // distance: 'distance',
-        blurb: 'blurb',
+        seeking: 'seeking',
+        urgency: 'urgency',
+        aspect04: 'aspect-4',
+        aspect05: 'aspect-5',
+        aspect06: 'aspect-6',
+        email: 'email',
+        presence: 'presence',
+        duration: 'duration',
+        pronouns: 'pronouns',
+        language: 'language',
         image: 'image',
-        aspects: 'aspects'
+        distance: 'distance',
+        blurb: 'blurb',
+        // experience: 'experience',
+        // roles: 'role',
     },
 }
+const surveyStages = {
+    7: allSteps.usa.name,
+    8: allSteps.usa.email,
+    9: allSteps.usa.password,
+    10: allSteps.usa.zipcode,
+    11: allSteps.usa.seeking,
+    12: allSteps.usa.image,
+    13: allSteps.usa.language,
+    14: allSteps.usa.duration,
+    15: allSteps.usa.presence,
+    16: allSteps.usa.blurb,
+    17: allSteps.usa.urgency,
+    18: allSteps.usa.pronouns,
+    19: allSteps.usa.distance,
+    1: allSteps.usa.aspect01,
+    2: allSteps.usa.aspect02,
+    3: allSteps.usa.aspect03,
+    4: allSteps.usa.aspect04,
+    5: allSteps.usa.aspect05,
+    6: allSteps.usa.aspect06,
+}
 
 const aspectResponses = {
     usa: {
     // key 10
     duration: ['full-time', 'part-time', 'contract', 'flexible'],
     // Experience and roles concat, key: 14
-    experience: ['associate', 'junior', 'mid-level', 'senior', 'staff'],
-    roles: {
-        type: [
-            'back-end',
-            'database',
-            'front-end',
-            'full-stack',
-            'qa',
-            'security',
-            'system',
-            'test',
-        ],
-        position: [
-            'administrator',
-            'analyst',
-            'architect',
-            'developer',
-            'engineer',
-            'manager',
-            'technician',
-        ],
-        candidate: ['hiring_manager', 'recruiter'],
-    },
+    //     experience: ['associate', 'junior', 'mid-level', 'senior', 'staff'],
+    // roles: {
+    // type: [
+    // 'back-end',
+    // 'database',
+    // 'front-end',
+    // 'full-stack',
+    // 'qa',
+    // 'security',
+    // 'system',
+    // 'test',
+    // ],
+    // position: [
+    // 'administrator',
+    // 'analyst',
+    // 'architect',
+    // 'developer',
+    // 'engineer',
+    // 'manager',
+    // 'technician',
+    // ],
+    // candidate: ['hiring_manager', 'recruiter'],
+    // },
     pronouns: ['she/her', 'she/they', 'he/him', 'he/they', 'they/them'],
+    //    role: ['role1', 'role2'],
     image: [],
     zipcode: [],
     blurb: [],
 }
 
-export { allSteps, aspectResponses, possible, DELIMITER }
+export { allSteps, splash, surveyStages, aspectResponses, aspectsArr, possible }

frontend/src/utils/survey.js

 import { Survey } from '../entities/index.js'
 import { fetchQuestions } from '../services/index.js'
-import { possible } from './lang.js'
-
-const promptToComponent = {
-    splash: 'Splash',
-    name: 'FormInput',
-    email: 'FormInput',
-    password: 'FormInput',
-    zipcode: 'FormInput',
-    // seeking: 'FormDropdown',
-    // urgency: 'FormDropdown',
-    // presence: 'FormDropdown',
-    // duration: 'FormDropdown',
-    // experience: 'FormTags',
-    // pronouns: 'FormDropdown',
-    // language: 'FormDropdown',
-    image: 'FormInput',
-    // distance: 'FormInput',
-    blurb: 'FormInput',
-    aspects: 'Aspects'
-}
-/**
- * Make a step from match or step information
- * @param {object} match
- * @param {object} step
- * @returns something like a response_key with possible responses
- */
-const formatStep = (match, step) => {
-    const responsesByCategory = possible['usa']
-    const responseKey = {
-        response_key_id: match ? match.response_key_id : null,
-        response_key_category: match ? match.response_key_category : 'profile',
-        response_key_prompt: match ? match.response_key_prompt : step,
-        response_key_description: match ? match.response_key_description : null,
-    }
-    return {
-        ...responseKey,
-        responses: responsesByCategory[step] ? responsesByCategory[step] : [],
-    }
-}
-const associateWithComponent = responseKeyLike => {
-    let component = promptToComponent[responseKeyLike.response_key_prompt]
-    return { ...responseKeyLike, component }
-}
-
-const hasMatch = (step, inArray) => {
-    return inArray.find(q => q.response_key_prompt == step)
-}
+import { splash, possible, surveyStages, allSteps } from './lang.js'
 
 class SurveyFactory {
     constructor() {
         this.questionsFromDb = []
     }
-    _setSteps(langFile) {
-        const stepsToProcess = [...Object.values(langFile)]
-        const seenIds = []
-        const stepsInCommon = stepsToProcess.map(step => {
-            // Match question to step
-            const match = hasMatch(step, this.questionsFromDb)
-            if (match) {
-                seenIds.push(match.response_key_id)
+    _addResponses(responseKeys, responsesByCategory) {
+        const existingResponses = {}
+        // Removes empty form drop down options from possible['usa']
+        Object.keys(responsesByCategory).forEach(categoryKey => {
+            if (responsesByCategory[categoryKey].length) {
+                existingResponses[categoryKey] = responsesByCategory[categoryKey]
             }
-            const responseKeyLike = formatStep(match, step)
-            const withComponent = associateWithComponent(responseKeyLike)
-            console.log('withComponent :>> ', withComponent)
-            return withComponent
         })
-        // temporary extra condition in filter 
-        let unseen = this.questionsFromDb.filter(
-            q => !seenIds.includes(q.response_key_id) && [1,2,3,4,5,6].includes(q.response_key_id),
-        )
-        return [...stepsInCommon, ...unseen]
+        // Adds form drop down options to each responseKey
+        Object.keys(existingResponses).forEach(inputKey => {
+            responseKeys.forEach(responseKey => {
+                if (responseKey.survey_stage == inputKey) {
+                    responseKey.responses = existingResponses[inputKey]
+                }
+            })
+        })
+        return responseKeys
+    }
+    _addComponents(responseKeys) {
+        responseKeys.forEach(responseKey => {
+            switch (responseKey.category) {
+                case 'input':
+                    responseKey.component = 'FormInput'
+                    break
+                case 'choice':
+                    responseKey.component = 'FormDropdown'
+                    break
+                case 'aspect':
+                    responseKey.component = 'QuestionResponse'
+                    break
+            }
+        })
+        return responseKeys
+    }
+    _addSurveySteps(responseKeys, surveyStages) {
+        responseKeys.forEach(responseKey => {
+            Object.keys(surveyStages).forEach((stage, i) => {
+                if (responseKey.response_key_id == stage) {
+                    responseKey.survey_stage = surveyStages[i + 1]
+                }
+            })
+        })
+        return responseKeys
+    }
+    // TODO: Don't nest the for loop...
+    _sortSurveySteps(mutatedResponseKeys, allSteps) {
+        const reordered = []
+        Object.values(allSteps).forEach(step => {
+            Object.values(mutatedResponseKeys).forEach(response => {
+                if (surveyStages[response.response_key_id] === step)  {
+                    response.survey_stage = step
+                    reordered.push(response)
+                }
+            })
+        })
+        return reordered
+    }
+    _setSteps() {
+        const responseKeys = this.questionsFromDb
+        const responsesByCategory = possible['usa']
+        let mutatedResponseKeys = this._addSurveySteps(responseKeys, surveyStages)
+        mutatedResponseKeys = this._addResponses(mutatedResponseKeys, responsesByCategory)
+        mutatedResponseKeys = this._addComponents(responseKeys)
+        mutatedResponseKeys = this._sortSurveySteps(mutatedResponseKeys, allSteps['usa'])
+        // Splash page is placed at beginning of survey
+        mutatedResponseKeys.unshift(splash)
+        return mutatedResponseKeys
     }
     async getQuestions() {
         try {
             console.error(err)
         }
     }
-    async createSurvey(langFile, roleTree) {
+    async createSurvey(roleTree) {
         if (!this.questionsFromDb.length) {
             const res = await this.getQuestions()
             console.warn(
                 `Attempted to create a survey before getting questions: retrieved ${res.length} questions`,
             )
         }
-        const steps = this._setSteps(langFile)
+        const steps = this._setSteps()
         return new Survey(steps, roleTree)
     }
 }

frontend/src/views/OnboardingView.vue

 main.view--onboarding
     article(
         style='display: flex; flex-direction: column; align-items: center'
-        v-if='survey'
+        v-if='currentStep !== survey.steps.length'
     )
+        .answers(v-for='(value, key) in answered')
+            span(v-if='key == "name" && value && currentStep == 2') Hi {{ value }}!
+            span(v-if='key == "email" && value && currentStep == 3') Thanks for the contact info, {{ answered.name }}!
+
+        //- h3(v-if='currentStep == 1') Welcome to Siimee Onboarding! Let's get started!
+        br
         .step(v-for='(step, i) in survey.steps')
             component(
-                :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
                 :is='step.component'
                 :question='step'
+                :currentStep='currentStep'
+                :surveyStepsCount='survey.steps.length'
                 @handle-submit='onSubmit'
                 @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 }} / {{ survey.steps.length }} survey steps
+
+    article(v-else)
+        SurveyCompleteView(:answers='answered' :surveySteps='survey.steps')
 </template>
 
 <script>
 import { surveyFactory } from '@/utils'
-import { allSteps } from '@/utils/lang'
 import stepViews from '@/components/onboarding'
+import SurveyCompleteView from './SurveyCompleteView.vue'
 
 // import savesurveybyprfileid - call it on submit
 // paginate to save every steps answers
     name: 'OnboardingView',
     components: {
         ...stepViews,
+        SurveyCompleteView,
     },
     data: () => ({
         answered: {},
         aspectQuestions: [],
         currentStep: 0,
         survey: null,
+        invalidResponse: false,
     }),
     async created() {
-        this.survey = await surveyFactory.createSurvey(allSteps['usa'])
+        this.survey = await surveyFactory.createSurvey()
     },
     methods: {
         onSubmit() {
         updateAnswers(payload) {
             // null payload is passed on splash page
             if (payload) {
-                const k = payload.question.response_key_prompt
-                this.answered[k] = payload.answer
-                console.log(`${k}:`, this.answered[k])
+                this.invalidResponse = false
+                const k = payload.question.survey_stage
+                this.answered[k] = payload.input
+
+                if (!this.survey.validateAnswer(payload)) {
+                    this.invalidResponse = true
+                    return
+                }
+
+                // once validated, don't log password in answered object
+                this.answered[k] = k === 'password' ? undefined : payload.input
                 console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
                 if (k === 'aspects') return
             }
-            this.goToStep(this.currentStep + 1)
+            if (this.currentStep > this.survey.steps.length) {
+                this.onSubmit(this.answered)
+            } else {
+                this.goToStep(this.currentStep + 1)
+            }
         },
     },
 }
     article
         height: 100vh
 
+    .answers
+        text-align: center
+
     .w-button
             display: flex
             width: 315px

frontend/src/views/SurveyCompleteView.vue

+<template lang="pug">
+main.view--surveycomplete
+    article(style='display: flex; flex-direction: column; align-items: center; text-align: center;')
+        h2 Thanks for Completing Our Survey!!
+        h1 Please review your answers and let us know if you need to change anything.
+        br
+        p(v-for='input in formInputs')
+            p(v-for='(value, key) in answers')
+                p(v-if='input.survey_stage == key && key !== "password"')
+                    p Your {{ key }}: {{ value }}
+        br
+        p(v-for='input in formDropdowns')
+            p(v-for='(value, key) in answers')
+                p(v-if='input.survey_stage == key')
+                    p Your {{ key }}: {{ value }}
+        br
+        p(v-for='(response, responseIndex) in questionResponses')
+            p(v-for='(value, key) in answers')
+                p(v-if='response.survey_stage == key') 
+                    p Survey Question {{ responseIndex + 1 }}: 
+                    p {{ response.response_key_prompt }}
+                    p You Answered: {{ value }}
+                    br
+        w-button.ma1(@click="changeAnswers") Change Answers
+        w-button.ma1(@click="finalSubmit") Submit Answers
+</template>
+
+<script>
+export default {
+    props: {
+        answers: {
+            type: Object,
+            default: () => ({}),
+        },
+        surveySteps: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data: () => ({
+        surveyObjects: [],
+        formInputs: [],
+        questionResponses: [],
+        formDropdowns: [],
+    }),
+    created() {
+        this.surveySteps.forEach((step) => {
+            switch (step.component) {
+                case 'FormInput':
+                    this.formInputs.push(step)
+                    break
+                case 'FormDropdown':
+                    this.formDropdowns.push(step)
+                    break
+                case 'QuestionResponse':
+                    this.questionResponses.push(step)
+                    break
+            }
+        })
+    },
+}
+</script>