feat: Add notice before showing e-mail (#327)

Co-authored-by: Ushie <ushiekane@gmail.com>

src/layout/Banners/StatusBanner.svelte

@@ -10,8 +10,8 @@
 
 <Banner
 	title="API service is currently down"
-	description="Some features of the site might be impacted. If this issue persists, reach out to mailto:{email()}"
-	buttonText={statusUrl ? 'View status' : undefined}
+	description="Some features of the site might be impacted. If this issue persists, reach out to {email()}."
+	buttonText={statusUrl ? 'Check status' : undefined}
 	buttonOnClick={statusUrl ? handleClick : undefined}
 	level="caution"
 	permanent

src/layout/Dialogs/EmailDialog.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import Divider from '$lib/components/Divider.svelte';
+	import { email } from '$data/api/settings';
+	import Dialog from '$layout/Dialogs/Dialog.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import Input from '$lib/components/Input.svelte';
+
+	export let showEmailDialog: boolean;
+
+	let enableInputSeconds = 15;
+	let keyword: string = '';
+
+	let interval: NodeJS.Timeout;
+	function closeDialog() {
+		showEmailDialog = false;
+		clearInterval(interval);
+		enableInputSeconds = 15;
+		keyword = '';
+	}
+
+	$: if (showEmailDialog && !interval && enableInputSeconds != 0) {
+		interval = setInterval(() => {
+			if (enableInputSeconds <= 0) {
+				clearInterval(interval);
+				return;
+			}
+			enableInputSeconds -= 1;
+		}, 1000);
+	}
+</script>
+
+<Dialog bind:dialogOpen={showEmailDialog} notDismissible>
+	<svelte:fragment slot="title">Abuse notice</svelte:fragment>
+	<svelte:fragment slot="description">
+		<p>
+			This E-Mail address is <b>not</b> for support, help, bug reports or feature requests. It must
+			have a subject and body and have the keyword <span style="user-select: none;">'Reficio'</span>
+			in either, otherwise your mail will be
+			<b>ignored</b>.
+		</p>
+		<br />
+		{#if enableInputSeconds == 0}
+			<span>Enter the keyword, then click "Send".</span>
+			<br />
+			<br />
+			<Input placeholder="Keyword" type="text" bind:value={keyword}></Input>
+		{:else}
+			<span>Read above and wait <b>{enableInputSeconds}</b> seconds.</span>
+		{/if}
+	</svelte:fragment>
+	<svelte:fragment slot="buttons">
+		{#if keyword.toLowerCase() === 'reficio'}
+			<Button type="text"><a href="mailto:{email()}">Send</a></Button>
+		{/if}
+		<Button type="filled" on:click={closeDialog}>Close</Button>
+	</svelte:fragment>
+</Dialog>
+
+<style>
+	a {
+		text-decoration: none;
+		color: var(--text-four);
+		font-weight: 600;
+	}
+</style>

src/layout/Footer/FooterHost.svelte

@@ -10,18 +10,23 @@
 	import { RV_DMCA_GUID } from '$env/static/public';
 	import { onMount } from 'svelte';
 	import Divider from '$lib/components/Divider.svelte';
-	import { email } from '$data/api/settings';
+	import Button from '$lib/components/Button.svelte';
+	import EmailDialog from '$layout/Dialogs/EmailDialog.svelte';
 
 	const aboutQuery = createQuery(queries.about());
 
 	let location: string;
 
+	let showEmailDialog = false;
+
 	onMount(() => {
 		// DMCA Protection Badge
 		location = document.location.href;
 	});
 </script>
 
+<EmailDialog bind:showEmailDialog />
+
 <Divider horizontalPadding={'15px'} />
 <footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<div class="top">
@@ -60,8 +65,16 @@
 
 	<div class="bottom">
 		<div id="logo-name"><span>Re</span>Vanced</div>
-		<a href="/donate"><div>Donate</div></a>
-		<a href="mailto:{email()}"><div>Email</div></a>
+		<Button type="text" style="color: var(--text-four); font-weight: 600;">
+			<a href="/donate">Donate</a>
+		</Button>
+		<Button
+			type="text"
+			style="color: var(--text-four); font-weight: 600;"
+			on:click={() => (showEmailDialog = true)}
+		>
+			E-Mail
+		</Button>
 		<!-- DMCA Protection Badge -->
 		<a
 			href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"

src/lib/components/Button.svelte

@@ -12,6 +12,7 @@
 	export let label: string = '';
 	export let disabled: boolean = false;
 	export let toolTipText: string | undefined = undefined;
+	export let style: string = '';
 
 	$: type = $$slots.default ? type : 'icon';
 </script>
@@ -26,6 +27,7 @@
 		<button
 			on:click
 			class={`${type} ${variant}`}
+			style="{style}"
 			class:disabled
 			aria-label={label}
 			type={functionType}