siimee/frontend/src/components/onboarding/FormInput.vue

<template lang="pug">
.form-input
    h3(v-if='question.response_key_prompt == "name"') 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@generic_email.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>
export default {
    name: 'FormInput',
    props: {
        question: {
            required: true,
            type: Object,
        },
    },
    emits: ['update-answers'],
    data: () => ({
        input: null,
    }),
    methods: {
        handleSubmit() {
            if (this.question.response_key_prompt === 'password') {
                this.$emit('update-answers') // no password collection
                return
            }

            let payload = {
                question: this.question,
                answer: this.input,
            }
            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>