:construction: Rough draft of more adlibs style survey

frontend/src/components/onboarding/FormInput.vue

@@ -1,8 +1,19 @@
 <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')
+    h3 Welcome to Siimee Onboarding! Let's get started!
+    span(v-if='question.response_key_prompt == "name"') Hi there, my {{ question.response_key_prompt }} is: 
+    input(v-if='question.response_key_prompt == "name"' placeholder='Jon Doe' type='text' v-model='input')
+    span(v-if='question.response_key_prompt == "email"') My {{ question.response_key_prompt }} is: 
+    input(v-if='question.response_key_prompt == "email"' placeholder='Jon_Doe@myemail.com' type='text' v-model='input')
+    span(v-if='question.response_key_prompt == "password"') Please input a {{ question.response_key_prompt }}: 
+    input(v-if='question.response_key_prompt == "password"' placeholder='mysupersecretpassword' type='text' v-model='input')
+    span(v-if='question.response_key_prompt == "zipcode"') What zipcode would you like to see results from?{{ question.response_key_prompt }}: 
+    input(v-if='question.response_key_prompt == "zipcode"' placeholder='99999' type='text' v-model='input')
+    span(v-if='question.response_key_prompt == "blurb"') Please provide us with a short {{ question.response_key_prompt }} about yourself?: 
+    textarea(v-if='question.response_key_prompt == "blurb"' placeholder='I was born on a distant planet named Krypton, but was raised in a small town called SmallVille...' type='text' v-model='input' rows='4' cols='50')
+    p(v-if='question.response_key_prompt == "image"')
+        p Please Upload a Profile Image:
+        button(@click='submitImage') Upload Image
     w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
@@ -20,7 +31,7 @@ export default {
     }),
     methods: {
         handleSubmit() {
-            if(this.question.response_key_prompt === 'password') {
+            if (this.question.response_key_prompt === 'password') {
                 this.$emit('update-answers') // no password collection
                 return
             }
@@ -31,6 +42,25 @@ export default {
             }
             this.$emit('update-answers', payload)
         },
+        submitImage() {
+            let payload = {
+                question: this.question,
+                answer: 'placeholder for image'
+            }
+            this.$emit('update-answers', payload)
+        }
     },
 }
 </script>
+
+<style>
+h3 {
+    text-align: center;
+}
+input {
+  border: 0;
+  outline: 0;
+  background: transparent;
+  border-bottom: 1px solid black;
+}
+</style>

frontend/src/views/OnboardingView.vue

@@ -5,6 +5,13 @@ main.view--onboarding
         v-if='survey'
     )
         p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
+        p(v-if='answered.name') Welcome {{ answered.name }}!
+        p(v-if='answered.email') It looks like your email is: {{ answered.email }}.
+        p(v-if='answered.zipcode') You're looking for opportunities around: {{ answered.zipcode }}.
+        p(v-if='answered.blurb') This is your Origin Story:
+            p {{ answered.blurb }}.
+        p(v-if='answered.image') You've uploaded the following image:
+            p {{ answered.image }}.
         .step(v-for='(step, i) in survey.steps')
             component(
                 :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
@@ -38,6 +45,9 @@ export default {
         this.survey = await surveyFactory.createSurvey(allSteps['usa'])
     },
     methods: {
+        // this onSubmit() should actually submit and bring up a page that
+        // confirms submission (thank you, etc.)
+        // it appears that this should then start to display ./SurveyView.vue(?)
         onSubmit() {
             console.log(JSON.stringify(this.answered))
         },