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

<template lang="pug">
.form-input
    span(style='text-align:center;') {{ parsedPrompt.start }}
    br
    br
    span(style='text-align:center;') {{ parsedPrompt.mid }}
    input(v-if="question.survey_stage !== 'image' && question.survey_stage !== 'blurb' && question.survey_stage !== 'password'" :placeholder='question.placeholder' type='text' v-model='input')
    input.pass(v-else-if="question.survey_stage === 'password'" :placeholder='question.placeholder' type='password' v-model='input' style="-webkit-text-security: circle")
    w-button.ma1.grow(v-else-if="question.survey_stage === 'image'" @click="submitImage") UPLOAD IMAGE
    textarea(v-else-if="question.survey_stage === 'blurb'" rows="4" cols="50" v-model='input' :placeholder="`${question.placeholder}`")
    span(style='text-align:center;') {{ parsedPrompt.end }}
    w-button.ma1.grow(@click="handleSubmit({ question, input })") NEXT
    
</template>
<script>
export default {
    name: 'FormInput',
    props: {
        question: {
            required: true,
            type: Object,
        },
    },
    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(answerInfo) {
            this.$emit('update-answers', answerInfo)
        },
        submitImage() {
            let payload = {
                question: this.question,
                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>