PronounsPage/components/CensusSubscribe.vue

<template>
    <div class="alert alert-light border">
        <p><T>census.subscribe.encouragement</T></p>

        <form @submit.prevent="subscribe">
            <div v-if="saving" class="text-center">
                <Spinner />
            </div>
            <div v-else-if="subscribed" class="text-success">
                <Icon v="badge-check" />
                <T>census.subscribe.success</T>
            </div>
            <div v-else class="input-group">
                <input v-model="email" type="email" class="form-control" placeholder="you@example.com">
                <button class="btn btn-outline-primary" type="submit">
                    <Icon v="mailbox" />
                    <T>census.subscribe.action</T>
                </button>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            email: '',
            saving: false,
            subscribed: false,
        };
    },
    methods: {
        async subscribe() {
            this.saving = true;
            try {
                await this.$post('/subscription/subscribe', {
                    type: 'census',
                    email: this.email,
                });
                this.subscribed = true;
            } finally {
                this.saving = false;
            }
        },
    },
};
</script>