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"') What's your name?: 
    input(v-if='question.response_key_prompt == "name"' placeholder='Jon Doe' type='text' v-model='input')
    span(v-if='question.response_key_prompt == "email"') In order for you to reach out to others on siimee, we'll need an email address. Where can we best reach you?: 
    input(v-if='question.response_key_prompt == "email"' placeholder='                @     .   ' type='text' v-model='input')
    span(v-if='question.response_key_prompt == "password"') Next we'll need you to establish a super secret password. 
        div Your password should be at least 10 characters long and have at
        least 2 special characters. 
        div Please enter your:
    input(v-if='question.response_key_prompt == "password"' placeholder='supersEcre+passw0rd' type='text' v-model='input')
    span(v-if='question.response_key_prompt == "zipcode"') Password looks good! You're doing great. 
        div 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. 
        div What's your zip code?: 
    input(v-if='question.response_key_prompt == "zipcode"' placeholder='99999' type='text' v-model='input')
    span(v-if='question.response_key_prompt == "blurb"')
        div Please provide us with a short blurb about yourself. What's your backstory?:
    textarea(v-if='question.response_key_prompt == "blurb"' placeholder='My Origin Story starts off like this...' type='text' v-model='input' rows='4' cols='50')
    p(v-if='question.response_key_prompt == "image"') Hey, you're almost done!
        p Please provide an image of yourself so others can recognize you if you ever meet up IRL:
        w-button.ma1.grow(@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>
.form-input,
input[placeholder], 
textarea[placeholder] {
    text-align: center;
}
input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
}
</style>