Move nuxt components to components-nuxt

2026-05-15 06:35:20 -07:00 · 2021-09-11 13:07:08 -05:00 · 2021-09-11 13:07:08 -05:00 · decaaabfe1
commit decaaabfe1
parent 300d9598b4
36 changed files with 62 additions and 61 deletions
--- a/components-nuxt/all-updates-subscribe.vue
+++ b/components-nuxt/all-updates-subscribe.vue
@ -0,0 +1,167 @@
+<template>
+
+    <div>
+        <div
+            v-if="feedbackMessage === null"
+        >
+            <form
+                class="all-updates-subscribe text-xs relative"
+                @submit.prevent="trySubmit"
+            >
+                <label
+                    v-if="isFocused"
+                    :for="inputId"
+                    class="block font-bold absolute"
+                    style="top: -2em;"
+                >Email</label>
+                <div class="mt-1 relative rounded-md shadow-sm">
+                    <div
+                        v-if="isFocused"
+                        class="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none"
+                    >
+                        <!-- Heroicon name: mail -->
+                        <svg
+                            class="h-5 w-5 text-gray-500"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                        >
+                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                        </svg>
+                    </div>
+                    <input
+                        :id="inputId"
+                        v-model="email"
+                        :class="inputClasslist"
+                        :placeholder="isFocused ? 'me@email.com' : placeholder"
+                        :aria-label="placeholder"
+                        name="all-updates-subscribe"
+                        style="width: 240px;"
+                        type="email"
+                        required
+                        @focus="isFocused = true"
+                        @blur="isFocused = false"
+                    >
+                </div>
+            </form>
+        </div>
+
+        <div
+            v-if="feedbackMessage"
+            class="text-center p-4"
+        >
+            {{ feedbackMessage }}
+        </div>
+    </div>
+
+</template>
+
+<script>
+
+import axios from 'axios'
+
+export default {
+    props: {
+        // appName: {
+        //     type: String,
+        //     required: true
+        // },
+        placeholder: {
+            type: String,
+            default: 'Send me regular app updates'
+        },
+        notes: {
+            type: String,
+            default: ''
+        },
+        inputClassGroups: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    data: function () {
+        return {
+            email: '',
+
+            isFocused: false,
+            feedbackMessage: null,
+        }
+    },
+    computed: {
+        inputId () {
+            return `all-updates-subscribe-${this._uid}`
+        },
+        inputClasslist () {
+            const defaultClassGroups = {
+                general: 'form-input block w-full rounded-md py-1',
+                shadow: 'neumorphic-shadow',
+                bg: 'bg-darker',
+                focus: 'pl-8',
+                blur: 'placeholder-white text-center border border-transparent px-3',
+            }
+
+            const mergedClassGroups = {
+                ...defaultClassGroups,
+                ...this.inputClassGroups
+            }
+
+            if (this.isFocused) {
+                delete mergedClassGroups.blur
+            } else {
+                delete mergedClassGroups.focus
+            }
+
+            return Object.values(mergedClassGroups)
+        }
+    },
+    methods: {
+        async trySubmit () {
+            console.log('Trying submit')
+
+            // Set intermediate message
+            this.feedbackMessage = 'Sending...'
+
+            // const pagePath = $nuxt.$route.path
+
+            // console.log('this.$config.allUpdateSubscribe', this.$config.allUpdateSubscribe)
+
+            // https://stackoverflow.com/questions/51995070/post-data-to-a-google-form-with-ajax/55496118#55496118
+            const actionUrl = this.$config.allUpdateSubscribe
+
+            axios({
+                method: 'post',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                url: actionUrl,
+                data: {
+                    // Email
+                    'email': this.email
+                },
+            }).then( response => {
+
+                this.feedbackMessage = 'We\'ll keep you informed!'
+
+                // console.log('response', response)
+                // if (response.status === 200) {
+                //     this.feedbackMessage = '- We\'ll keep an eye on it for you!'
+                // } else {
+                //     this.feedbackMessage = 'Oops! Something went wrong'
+                // }
+            }).catch( error => {
+                console.warn('error', error)
+                this.feedbackMessage = 'Something went wrong. Try refreshing. '
+            })
+
+            // .catch(error => {
+            //     // handle error
+            //     console.error('Error Subscribing -', error)
+            //     this.feedbackMessage = 'Oops! Something went wrong'
+            // })
+        }
+    }
+}
+
+</script>