-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge pull request #16 from Revolution-Hacks/zach
Use JavaScript to auto-submit forms
Showing
6 changed files
with
84 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters