Skip to content

Commit

Permalink
Merge pull request #16 from Revolution-Hacks/zach
Browse files Browse the repository at this point in the history
Use JavaScript to auto-submit forms
iamawatermelo authored Oct 28, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 364481e + 1d74992 commit df1fd98
Showing 6 changed files with 84 additions and 84 deletions.
51 changes: 51 additions & 0 deletions src/lib/components/EmailLanding.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<script>
import Page from '$lib/components/Page.svelte';
import { onMount } from 'svelte';
let { title, noscriptBody, scriptBody, buttonText } = $props();
let form = $state();
onMount(() => {
form.submit();
})
</script>

<Page {title}>
<noscript>
{@render noscriptBody()}
<!-- This must be @html, otherwise, it will be put into the CSS bundle which we don't want -->
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html `<style> .noscript { display: none } </style>`}
</noscript>
<div class="noscript">
{@render scriptBody()}
</div>
<form method="POST" bind:this={form}>
<button type="submit">{buttonText}</button>
</form>
<details>
<summary>Why do I have to do this?</summary>
Sometimes, software like an antivirus opens all links before you do to check that they are safe. We can't tell whether
it's you that has clicked the link in the email or a robot.
</details>
</Page>

<style lang="scss">
@use 'src/lib/style';
form {
margin: 1em 0;
}
button {
height: 3em;
padding: 0 2em;
color: rgb(var(--fg));
font-weight: 500;
background: none;
@include style.hover;
@include style.box-texture('$lib/textures/inputbox.svg');
}
</style>
6 changes: 3 additions & 3 deletions src/lib/components/Page.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
export let title;
<script lang="ts">
let { title, children } = $props();
</script>

<svelte:head>
@@ -8,7 +8,7 @@

<main>
<div class="content">
<slot />
{@render children?.()}
</div>
</main>

8 changes: 6 additions & 2 deletions src/lib/emails/email.ts
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import type { Component } from 'svelte';
import { render } from 'svelte/server';
import DevFooter from '$lib/emails/DevFooter.svelte';
import { error } from '@sveltejs/kit';
import { dev } from '$app/environment';

export function renderEmail<T extends Record<string, any>>(
component: Component<T & { host: URL }>,
@@ -35,6 +36,11 @@ export async function sendEmail<T extends Record<string, any>>(
host: URL
) {
const { html, plain } = renderEmail(component, props, host);

if (dev) {
console.log(`Sent email to ${recipient}: ${plain}`);
return;
}

const emailResponse: any = await (
await fetch('https://api.postmarkapp.com/email', {
@@ -54,8 +60,6 @@ export async function sendEmail<T extends Record<string, any>>(
})
).json();

console.log(emailResponse);

if (emailResponse.ErrorCode !== 0) {
if (emailResponse.ErrorCode === 300) {
throw error(400, { message: 'Invalid email address' });
50 changes: 11 additions & 39 deletions src/routes/email/subscribe/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,42 +1,14 @@
<script>
import Page from '$lib/components/Page.svelte';
import ErrorPage from '../../+error.svelte';
import { page } from '$app/stores';
import EmailLanding from '$lib/components/EmailLanding.svelte';
</script>

{#if $page.status === 200}
<Page title="Confirm your email address">
<h1>Just one more step</h1>
<p>Just so we know it's you trying to subscribe, please click the button below to proceed.</p>
<form method="POST">
<button type="submit">Verify my email address</button>
</form>
<details>
<summary>Why do I have to do this?</summary>
Sometimes, software like an antivirus opens all links before you do to check that they are safe. We can't tell whether
it's you that has clicked the link in the email or a robot. This is why you have to press the button to make sure it's
you trying to subscribe.
</details>
</Page>
{:else}
<ErrorPage />
{/if}

<style lang="scss">
@use 'src/lib/style';
form {
margin: 1em 0;
}
button {
height: 3em;
padding: 0 2em;
color: rgb(var(--fg));
font-weight: 500;
background: none;
@include style.hover;
@include style.box-texture('$lib/textures/inputbox.svg');
}
</style>
<EmailLanding title="Confirm your email address" buttonText="Subscribe">
{#snippet noscriptBody()}
<h1>Confirm your email address</h1>
<p>To make sure it's you trying to subscribe, please click the subscribe button.</p>
{/snippet}
{#snippet scriptBody()}
<h1>Please wait</h1>
<p>We're confirming your email address. If nothing happens in a few seconds, try clicking the subscribe button.</p>
{/snippet}
</EmailLanding>
50 changes: 11 additions & 39 deletions src/routes/email/unsubscribe/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,42 +1,14 @@
<script>
import Page from '$lib/components/Page.svelte';
import ErrorPage from '../../+error.svelte';
import { page } from '$app/stores';
import EmailLanding from '$lib/components/EmailLanding.svelte';
</script>

{#if $page.status === 200}
<Page title="Confirm you want to unsubscribe">
<h1>Just one more step</h1>
<p>Just so we know it's you trying to unsubscribe, please click the button below to proceed.</p>
<form method="POST">
<button type="submit">Verify my email address</button>
</form>
<details>
<summary>Why do I have to do this?</summary>
Sometimes, software like an antivirus opens all links before you do to check that they are safe. We can't tell whether
it's you that has clicked the link in the email or a robot. This is why you have to press the button to make sure it's
you trying to subscribe.
</details>
</Page>
{:else}
<ErrorPage />
{/if}

<style lang="scss">
@use 'src/lib/style';
form {
margin: 1em 0;
}
button {
height: 3em;
padding: 0 2em;
color: rgb(var(--fg));
font-weight: 500;
background: none;
@include style.hover;
@include style.box-texture('$lib/textures/inputbox.svg');
}
</style>
<EmailLanding title="Confirm you want to unsubscribe" buttonText="Unsubscribe">
{#snippet noscriptBody()}
<h1>Confirm your email address</h1>
<p>To make sure it's you trying to subscribe, please click the unsubscribe button.</p>
{/snippet}
{#snippet scriptBody()}
<h1>Please wait</h1>
<p>We're confirming your email address. If nothing happens in a few seconds, try clicking the unsubscribe button.</p>
{/snippet}
</EmailLanding>
3 changes: 2 additions & 1 deletion jsconfig.json → tsconfig.json
Original file line number Diff line number Diff line change
@@ -9,7 +9,8 @@
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
"moduleResolution": "bundler",
"verbatimModuleSyntax": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
//

0 comments on commit df1fd98

Please sign in to comment.