Skip to content

Commit 9d4aea8

Browse files
orvnorvn
authored
Merge pull request #33 from data-preservation-programs/refactor-http-requests-axios
feat: polish + refactor tweaks
2 parents 001a0b3 + 2c7ea9e commit 9d4aea8

File tree

7 files changed

+187
-76
lines changed

7 files changed

+187
-76
lines changed

‎assets/scss/theme/utilities.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ $gray900: #212121;
3535
$codGray: #060606; // black
3636
$sageGreen: #CBDDBB; // light soft green
3737
$alto: #D3D3D3; // light gray
38-
$burntSienna: #E8655D; // red
38+
$burntSienna: #FD835D; // red
3939
$chardonnay: #FFC582; // peachy orange
4040
$codeBlack: #191919; // black
4141
$tundora: #414141; // gray

‎components/signup-card.vue

+54-21
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div class="signup-form">
2222

2323
<div class="name-fields">
24-
<div class="field-wrapper">
24+
<div class="field-wrapper row">
2525
<input
2626
:class="['first-name input-field form-field', { error: fieldError.firstName }]"
2727
type="text"
@@ -31,7 +31,7 @@
3131
<span v-if="fieldError.firstName" class="error message" v-html="errorMessage" />
3232
</div>
3333

34-
<div class="field-wrapper">
34+
<div class="field-wrapper row">
3535
<input
3636
:class="['last-name input-field form-field', { error: fieldError.lastName }]"
3737
type="text"
@@ -93,15 +93,21 @@
9393
<span v-if="fieldError.country" class="error message" v-html="errorMessage" />
9494
</div>
9595

96-
<ButtonCtaWithLoader
97-
:class="['submit-button', { submitted: !loading && formSubmitted }]"
98-
theme="primary"
99-
loader="signup-card-form"
100-
@clicked="submitForm">
101-
<template #button-content>
102-
<span class="button-label"> {{ submitButtonLabel }} </span>
103-
</template>
104-
</ButtonCtaWithLoader>
96+
<div class="button-row">
97+
<div v-if="submitError" class="submit-error">
98+
Uh oh, we were not able to send that data due to an error — please try again, or reach out to us via Slack
99+
</div>
100+
101+
<ButtonCtaWithLoader
102+
:class="['submit-button', { submitted: formSubmitted }]"
103+
theme="primary"
104+
loader="signup-card-form"
105+
@clicked="submitForm">
106+
<template #button-content>
107+
<span class="button-label"> {{ submitButtonLabel }} </span>
108+
</template>
109+
</ButtonCtaWithLoader>
110+
</div>
105111

106112
</div>
107113

@@ -110,7 +116,7 @@
110116
</template>
111117

112118
<script setup>
113-
const SINGULARITY_DEMO_SIGNUPS_TOKEN = import.meta.env.VITE_AIRTABLE_SINGULARITY_DEMO_TOKEN
119+
const config = useRuntimeConfig()
114120
const buttonStore = useZeroButtonStore()
115121
// ======================================================================= Props
116122
const props = defineProps({
@@ -123,6 +129,7 @@ const props = defineProps({
123129
124130
// ======================================================================== Data
125131
const formSubmitted = ref(false)
132+
const submitError = ref(false)
126133
const errorMessage = '[ Field is required ]'
127134
const fieldError = ref({
128135
firstName: false,
@@ -220,18 +227,21 @@ const submitForm = async () => {
220227
}
221228
const headers = {
222229
'Content-Type': 'application/json',
223-
'Authorization': `Bearer ${SINGULARITY_DEMO_SIGNUPS_TOKEN}`
230+
'Authorization': `Bearer ${config.public.airtableToken}`
224231
}
225-
const res = await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblDUSr66nczukX9Y', {
232+
233+
await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblDUSr66nczukX9Y', {
226234
method: 'POST',
227235
body,
228236
headers
229-
})
230-
if (res) {
231-
buttonStore.set({id: 'signup-card-form', loading: false})
232-
formSubmitted.value = true
233-
return
234-
}
237+
}).then(() => {
238+
buttonStore.set({id: 'signup-card-form', loading: false})
239+
formSubmitted.value = true
240+
return
241+
}).catch(() => {
242+
submitError.value = true
243+
buttonStore.set({id: 'signup-card-form', loading: false})
244+
})
235245
}
236246
if(!firstName.value) { fieldError.value.firstName = true}
237247
if(!lastName.value) { fieldError.value.lastName = true}
@@ -314,8 +324,28 @@ const submitForm = async () => {
314324
color: var(--error);
315325
}
316326
327+
328+
.button-row {
329+
display: flex;
330+
justify-content: flex-end;
331+
align-items: center;
332+
@include mini {
333+
flex-direction: column;
334+
}
335+
}
336+
.submit-error {
337+
@include formFieldErrorMessage;
338+
color: var(--error);
339+
margin: 0 toRem(94) 0 toRem(5);
340+
@include mini {
341+
margin: 0 toRem(10) 1rem;
342+
}
343+
}
317344
.submit-button {
318-
align-self: flex-end;
345+
height: fit-content;
346+
@include mini {
347+
align-self: flex-end;
348+
}
319349
&.submitted,
320350
&.submitted:hover {
321351
cursor: default;
@@ -341,6 +371,9 @@ const submitForm = async () => {
341371
.name-fields {
342372
display: flex;
343373
justify-content: space-between;
374+
.field-wrapper.row {
375+
margin-bottom: toRem(24);
376+
}
344377
@include medium {
345378
flex-flow: row wrap;
346379
.field-wrapper {

‎components/site-footer.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<footer id="site-footer">
2+
<footer id="site-footer" :class="{ 'no-background-image': pageSignup }">
33

44
<div class="content">
55
<div class="grid-bottom-noBottom-noGutter">
@@ -52,8 +52,11 @@
5252
<script setup>
5353
// ======================================================================== Data
5454
const generalStore = useGeneralStore()
55+
const route = useRoute()
5556
5657
// ==================================================================== Computed
58+
const pageSignup = computed(() => { return route.name === 'signup' })
59+
5760
const authors = computed(() => {
5861
return generalStore.siteContent.general?.footer.authors
5962
})
@@ -87,6 +90,11 @@ const scrollToTop = async () => {
8790
padding-top: toRem(72);
8891
height: unset;
8992
}
93+
&.no-background-image {
94+
&::before {
95+
display: none;
96+
}
97+
}
9098
&:before {
9199
content: '';
92100
position: absolute;

‎components/site-header.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ const handleNavClick = () => {
227227
display: flex;
228228
width: fit-content;
229229
transition: 250ms ease;
230-
padding-top: .5rem;
230+
margin-top: .5rem;
231231
&:hover,
232232
&:focus-visible {
233233
transform: scale(1.08);

‎components/subfooter-form.vue

+75-50
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,52 @@
11
<template>
22
<div class="subfooter-form">
3-
<div :class="['form-field-container', { error: fieldError}]">
43

5-
<div class="detail-wrapper">
6-
<svg
7-
width="400"
8-
viewBox="0 0 400 41"
9-
fill="none"
10-
xmlns="http://www.w3.org/2000/svg"
11-
class="detail">
12-
<path
13-
:d="path"
14-
stroke="#FFC582"
15-
stroke-width="2"
16-
shape-rendering="crispEdges"
17-
class="stroke-path" />
18-
</svg>
19-
</div>
4+
<div class="form-wrapper">
5+
<div :class="['form-field-container', { error: fieldError}]">
6+
<div class="detail-wrapper">
7+
<svg
8+
width="400"
9+
viewBox="0 0 400 41"
10+
fill="none"
11+
xmlns="http://www.w3.org/2000/svg"
12+
class="detail">
13+
<path
14+
:d="path"
15+
stroke="#FFC582"
16+
stroke-width="2"
17+
shape-rendering="crispEdges"
18+
class="stroke-path" />
19+
</svg>
20+
</div>
2021

21-
<div class="field-email">
22-
<input
23-
class="email"
24-
:placeholder="placeholder"
25-
type="email"
26-
required="true"
27-
@input="updateValue($event.target.value)" />
22+
<div class="field-email">
23+
<input
24+
class="email"
25+
:placeholder="placeholder"
26+
type="email"
27+
required="true"
28+
@input="updateValue($event.target.value)" />
29+
</div>
2830
</div>
31+
32+
<ButtonCtaWithLoader
33+
:class="['submit-button', { submitted: formSubmitted }]"
34+
theme="secondary"
35+
loader="subfooter-card-newsletter-signup"
36+
@clicked="submitForm">
37+
<template #button-content>
38+
<span class="button-label"> {{ buttonText }} </span>
39+
</template>
40+
</ButtonCtaWithLoader>
2941
</div>
3042

31-
<ButtonCtaWithLoader
32-
:class="['submit-button', { submitted: formSubmitted }]"
33-
theme="secondary"
34-
loader="subfooter-card-newsletter-signup"
35-
@clicked="submitForm">
36-
<template #button-content>
37-
<span class="button-label"> {{ buttonText }} </span>
38-
</template>
39-
</ButtonCtaWithLoader>
43+
<span v-if="submitError" class="submit-error" v-html="errorMessage" />
4044

4145
</div>
4246
</template>
4347

4448
<script setup>
45-
const SINGULARITY_DEMO_SIGNUPS_TOKEN = import.meta.env.VITE_AIRTABLE_SINGULARITY_DEMO_TOKEN
49+
const config = useRuntimeConfig()
4650
const buttonStore = useZeroButtonStore()
4751
// ======================================================================= Props
4852
const props = defineProps({
@@ -60,6 +64,8 @@ const props = defineProps({
6064
6165
// ======================================================================== Data
6266
const formSubmitted = ref(false)
67+
const submitError = ref(false)
68+
const errorMessage = "Uh oh, we were not able to send that data due to an error — please try again, or reach out to us via Slack"
6369
const fieldError = ref(false)
6470
const field = ref(false)
6571
// ==================================================================== Computed
@@ -89,32 +95,33 @@ const updateValue = (val) => {
8995
* @method submitForm
9096
*/
9197
const submitForm = async () => {
92-
// if (formSubmitted.value) { $button('triple-line-loader').set({ loading: false }); return }
93-
if (formSubmitted.value) { return }
98+
if (formSubmitted.value) { $button('triple-line-loader').set({ loading: false }); return }
9499
if (field.value) {
95100
const body = {
96-
records: [
97-
{
98-
fields: {
99-
email: field.value
100-
}
101+
records: [
102+
{
103+
fields: {
104+
email: field.value
101105
}
102-
]
103-
}
104-
const headers = {
105-
'Content-Type': 'application/json',
106-
'Authorization': `Bearer ${SINGULARITY_DEMO_SIGNUPS_TOKEN}`
107-
}
108-
const res = await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblSB1NYasWQIDGlp', {
106+
}
107+
]
108+
}
109+
const headers = {
110+
'Content-Type': 'application/json',
111+
'Authorization': `Bearer ${config.public.airtableToken}`
112+
}
113+
await $fetch('https://api.airtable.com/v0/apphbQmrNLNNXiaqG/tblSB1NYasWQIDGlp', {
109114
method: 'POST',
110115
body,
111116
headers
112-
})
113-
if (res) {
117+
}).then(() => {
114118
buttonStore.set({id: 'subfooter-card-newsletter-signup', loading: false})
115119
formSubmitted.value = true
116120
return
117-
}
121+
}).catch(() => {
122+
submitError.value = true
123+
buttonStore.set({id: 'subfooter-card-newsletter-signup', loading: false})
124+
})
118125
}
119126
if(!field.value) {
120127
fieldError.value = true
@@ -127,6 +134,11 @@ const submitForm = async () => {
127134
<style lang="scss" scoped>
128135
// ///////////////////////////////////////////////////////////////////// General
129136
.subfooter-form {
137+
position: relative;
138+
}
139+
140+
.form-wrapper {
141+
position: relative;
130142
display: flex;
131143
white-space: nowrap;
132144
margin-left: 1.5625rem;
@@ -138,6 +150,19 @@ const submitForm = async () => {
138150
}
139151
}
140152
153+
.submit-error {
154+
display: block;
155+
width: 66%;
156+
margin-top: toRem(5);
157+
word-break: break-word;
158+
text-align: right;
159+
@include formFieldErrorMessage;
160+
color: var(--error);
161+
@include mini {
162+
width: calc(100% - toRem(2));
163+
}
164+
}
165+
141166
// ////////////////////////////////////////////////////////////// Detail Wrapper
142167
.detail-wrapper {
143168
position: absolute;

‎nuxt.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ export default defineNuxtConfig({
2626
serverFlag: env,
2727
seo: {
2828
siteName: seo.siteName
29-
}
29+
},
30+
airtableToken: process.env.AIRTABLE_SINGULARITY_ACCESS_TOKEN
3031
}
3132
},
3233
// ////////////////////////////////////////////////////////// Server & Bundler

0 commit comments

Comments
 (0)