From 00d2b02fb227d773882e92c5afe000f447937dd4 Mon Sep 17 00:00:00 2001
From: Evert Prants <evert@lunasqu.ee>
Date: Fri, 14 Jun 2024 15:22:14 +0300
Subject: [PATCH] Add hcaptcha

---
 src/app.d.ts                                  |   8 +
 .../components/container/SideContainer.svelte |   6 +-
 src/lib/components/form/HCaptcha.svelte       |  24 +++
 src/lib/i18n/en/account.json                  | 183 +++++++++---------
 src/lib/i18n/en/common.json                   |  49 ++---
 src/lib/utils.ts                              |  19 ++
 src/routes/+layout.svelte                     |  10 +
 src/routes/register/+page.server.ts           |  51 ++++-
 src/routes/register/+page.svelte              |   9 +
 9 files changed, 237 insertions(+), 122 deletions(-)
 create mode 100644 src/lib/components/form/HCaptcha.svelte

diff --git a/src/app.d.ts b/src/app.d.ts
index 78fe65a..88dc0a8 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -6,6 +6,10 @@ type SessionData = {
 	user?: UserSession;
 };
 
+type HCaptcha = {
+	render(id: string, config: { sitekey: string; size: string; theme: string }): string;
+};
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
@@ -14,6 +18,10 @@ declare global {
 		? { [P in keyof O]: O[P] }
 		: never;
 
+	interface Window {
+		hcaptcha: HCaptcha | null;
+	}
+
 	namespace App {
 		// interface Error {}
 
diff --git a/src/lib/components/container/SideContainer.svelte b/src/lib/components/container/SideContainer.svelte
index 5f6779d..016d570 100644
--- a/src/lib/components/container/SideContainer.svelte
+++ b/src/lib/components/container/SideContainer.svelte
@@ -6,15 +6,11 @@
 
 <style>
 	.aside-wrapper {
+		min-height: 100vh;
 		display: flex;
 		justify-content: flex-end;
 	}
 
-	.aside-wrapper,
-	.aside-inner {
-		height: 100%;
-	}
-
 	.aside-inner {
 		display: flex;
 		flex-direction: column;
diff --git a/src/lib/components/form/HCaptcha.svelte b/src/lib/components/form/HCaptcha.svelte
new file mode 100644
index 0000000..922c7b1
--- /dev/null
+++ b/src/lib/components/form/HCaptcha.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { env } from '$env/dynamic/public';
+	import { themeMode } from '$lib/theme-mode';
+	import { waitIsTruthy } from '$lib/utils';
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		if (!browser) return;
+		await waitIsTruthy(() => !!window.hcaptcha);
+		if (!window.hcaptcha) return;
+		window.hcaptcha.render('hcaptcha-element', {
+			sitekey: env.PUBLIC_HCAPTCHA_KEY,
+			size: '',
+			theme: $themeMode
+		});
+	});
+</script>
+
+<svelte:head>
+	<script src="https://js.hcaptcha.com/1/api.js?render=explicit" async defer></script>
+</svelte:head>
+
+<div class="h-captcha" id="hcaptcha-element"></div>
diff --git a/src/lib/i18n/en/account.json b/src/lib/i18n/en/account.json
index dedaf67..1781e90 100644
--- a/src/lib/i18n/en/account.json
+++ b/src/lib/i18n/en/account.json
@@ -1,93 +1,94 @@
 {
-  "title": "Manage your account",
-  "altTitle": "Account management",
-  "username": "Username",
-  "usernameHint": "Only the English alphabet, numbers and _-. are allowed.",
-  "displayName": "Display Name",
-  "displayNameHint": "Must be between 3 and 32 characters.",
-  "changeEmail": "Change email address",
-  "currentEmail": "Current email address",
-  "email": "Email address",
-  "newEmail": "New email address",
-  "emailHint": "Hint",
-  "password": "Password",
-  "repeatPassword": "Repeat password",
-  "changePassword": "Change password",
-  "currentPassword": "Current password",
-  "newPassword": "New password",
-  "repeatNewPassword": "Repeat new password",
-  "forgotPassword": "Forgot your password?",
-  "resetPassword": "Reset your password",
-  "setNewPassword": "Set a new password",
-  "passwordHint": "At least 8 characters, a capital letter and a number required.",
-  "submit": "Submit",
-  "changeSuccess": "Account settings changed successfully!",
-  "activateSuccess": "Your account has been activated successfully! You may now log in.",
-  "passwordSetSuccess": "Your new password has been set successfully! You may now log in.",
-  "passwordResetSucces": "If there is an account with that email address, we have sent a password reset email to it.",
-  "logout": "Log out",
-  "admin": "Admin",
-  "avatar": {
-    "title": "Profile avatar",
-    "change": "Change avatar",
-    "remove": "Remove avatar",
-    "done": "Done",
-    "restart": "Restart",
-    "upload": "Upload",
-    "uploadLabel": "Upload image file",
-    "hint": "Allowed image formats: .png, .jpg, .jpeg. Image must be less than 10 MB in size."
-  },
-  "login": {
-    "title": "Log in",
-    "email": "Email",
-    "password": "Password",
-    "submit": "Log in",
-    "otp": "Two-factor authentication is enabled",
-    "otpCode": "Enter the code displayed on the authenticator app"
-  },
-  "register": {
-    "title": "Create a new account",
-    "disabled": "Registrations are currently disabled by the administrator! Sorry.",
-    "userCreated": "User account has been created successfully! You may now log in.",
-    "emailSent": "User account has been created successfully, and an activation email has been sent to your email address.",
-    "submit": "Create account"
-  },
-  "errors": {
-    "invalidLogin": "Invalid email or password!",
-    "invalidRequest": "Invalid request! Please try again.",
-    "emailRequired": "Email address is required.",
-    "invalidUsername": "The username entered is invalid or not allowed",
-    "invalidEmail": "The email address is invalid.",
-    "passwordRequired": "The password is required.",
-    "passwordMismatch": "The passwords do not match!",
-    "passwordSame": "Your new password cannot be your current password.",
-    "invalidPassword": "The provided password is invalid.",
-    "invalidDisplayName": "The provided display name is invalid.",
-    "otpFailed": "The code you entered was invalid. Please note that you will be given a new QR code for subsequent retries.",
-    "required": "Please fill in the required fields",
-    "existingRegistration": "The username or email address is already in use.",
-    "activationFailed": "Your account could not be activated - the URL might have been used or expired already."
-  },
-  "otp": {
-    "title": "Two-factor authentication",
-    "enabled": "Two-factor authentication is enabled.",
-    "disabled": "Your account does not have two-factor authentication enabled.",
-    "unavailable": "Two-factor authentication is not set up.",
-    "activated": "Two-factor authentication has been activated successfully!",
-    "deactivated": "Two-factor authentication has been deactivated successfully.",
-    "scan": "Scan this QR code with the authenticator app of your choice",
-    "code": "Enter the code displayed on the authenticator app",
-    "return": "Return to account management",
-    "retry": "Try again",
-    "activate": "Set up two factor authentication",
-    "deactivate": "Deactivate"
-  },
-  "authorizations": {
-    "title": "Authorized applications",
-    "description": "These applications are authorized automatically when requested, provided you have already consented to the information they require. You should revoke any applications you do not recognize.",
-    "warning": "By revoking the authorization, you may be prompted to authorize the application again in the future. This does NOT ensure that your information is deleted by any third-party applications in question. Please contact each application's owner individually if you wish to remove your information from their servers.",
-    "website": "Visit website",
-    "revoke": "Revoke",
-    "none": "You currently do not have any authorized applications."
-  }
+	"title": "Manage your account",
+	"altTitle": "Account management",
+	"username": "Username",
+	"usernameHint": "Only the English alphabet, numbers and _-. are allowed.",
+	"displayName": "Display Name",
+	"displayNameHint": "Must be between 3 and 32 characters.",
+	"changeEmail": "Change email address",
+	"currentEmail": "Current email address",
+	"email": "Email address",
+	"newEmail": "New email address",
+	"emailHint": "Hint",
+	"password": "Password",
+	"repeatPassword": "Repeat password",
+	"changePassword": "Change password",
+	"currentPassword": "Current password",
+	"newPassword": "New password",
+	"repeatNewPassword": "Repeat new password",
+	"forgotPassword": "Forgot your password?",
+	"resetPassword": "Reset your password",
+	"setNewPassword": "Set a new password",
+	"passwordHint": "At least 8 characters, a capital letter and a number required.",
+	"submit": "Submit",
+	"changeSuccess": "Account settings changed successfully!",
+	"activateSuccess": "Your account has been activated successfully! You may now log in.",
+	"passwordSetSuccess": "Your new password has been set successfully! You may now log in.",
+	"passwordResetSucces": "If there is an account with that email address, we have sent a password reset email to it.",
+	"logout": "Log out",
+	"admin": "Admin",
+	"avatar": {
+		"title": "Profile avatar",
+		"change": "Change avatar",
+		"remove": "Remove avatar",
+		"done": "Done",
+		"restart": "Restart",
+		"upload": "Upload",
+		"uploadLabel": "Upload image file",
+		"hint": "Allowed image formats: .png, .jpg, .jpeg. Image must be less than 10 MB in size."
+	},
+	"login": {
+		"title": "Log in",
+		"email": "Email",
+		"password": "Password",
+		"submit": "Log in",
+		"otp": "Two-factor authentication is enabled",
+		"otpCode": "Enter the code displayed on the authenticator app"
+	},
+	"register": {
+		"title": "Create a new account",
+		"disabled": "Registrations are currently disabled by the administrator! Sorry.",
+		"userCreated": "User account has been created successfully! You may now log in.",
+		"emailSent": "User account has been created successfully, and an activation email has been sent to your email address.",
+		"submit": "Create account"
+	},
+	"errors": {
+		"invalidLogin": "Invalid email or password!",
+		"invalidRequest": "Invalid request! Please try again.",
+		"emailRequired": "Email address is required.",
+		"invalidUsername": "The username entered is invalid or not allowed",
+		"invalidEmail": "The email address is invalid.",
+		"passwordRequired": "The password is required.",
+		"passwordMismatch": "The passwords do not match!",
+		"passwordSame": "Your new password cannot be your current password.",
+		"invalidPassword": "The provided password is invalid.",
+		"invalidDisplayName": "The provided display name is invalid.",
+		"otpFailed": "The code you entered was invalid. Please note that you will be given a new QR code for subsequent retries.",
+		"required": "Please fill in the required fields",
+		"existingRegistration": "The username or email address is already in use.",
+		"activationFailed": "Your account could not be activated - the URL might have been used or expired already.",
+		"invalidCaptcha": "Please complete the captcha challenge."
+	},
+	"otp": {
+		"title": "Two-factor authentication",
+		"enabled": "Two-factor authentication is enabled.",
+		"disabled": "Your account does not have two-factor authentication enabled.",
+		"unavailable": "Two-factor authentication is not set up.",
+		"activated": "Two-factor authentication has been activated successfully!",
+		"deactivated": "Two-factor authentication has been deactivated successfully.",
+		"scan": "Scan this QR code with the authenticator app of your choice",
+		"code": "Enter the code displayed on the authenticator app",
+		"return": "Return to account management",
+		"retry": "Try again",
+		"activate": "Set up two factor authentication",
+		"deactivate": "Deactivate"
+	},
+	"authorizations": {
+		"title": "Authorized applications",
+		"description": "These applications are authorized automatically when requested, provided you have already consented to the information they require. You should revoke any applications you do not recognize.",
+		"warning": "By revoking the authorization, you may be prompted to authorize the application again in the future. This does NOT ensure that your information is deleted by any third-party applications in question. Please contact each application's owner individually if you wish to remove your information from their servers.",
+		"website": "Visit website",
+		"revoke": "Revoke",
+		"none": "You currently do not have any authorized applications."
+	}
 }
diff --git a/src/lib/i18n/en/common.json b/src/lib/i18n/en/common.json
index 5e2306a..94d2fed 100644
--- a/src/lib/i18n/en/common.json
+++ b/src/lib/i18n/en/common.json
@@ -1,26 +1,27 @@
 {
-  "description": "{{siteName}} is a Single-Sign-On service used by other applications.",
-  "cookieDisclaimer": "The website may use temporary cookies for storing your login session and ensuring your security. This web service is&nbsp;<a href=\"https://git.icynet.eu/IcyNetwork/sso-core\" target=\"_blank\">completely open source</a> and can be audited by anyone.",
-  "submit": "Submit",
-  "cancel": "Cancel",
-  "manage": "Manage",
-  "back": "Go back",
-  "home": "Home page",
-  "required": "Required fields",
-  "page": "Page",
-  "previous": "Previous",
-  "next": "Next",
-  "bool": {
-    "true": "Yes",
-    "false": "No"
-  },
-  "available": "Available",
-  "current": "Current",
-  "remove": "Remove",
-  "filter": "Filter",
-  "clear": "Clear",
-  "theme": {
-    "light": "Light mode",
-    "dark": "Dark mode"
-  }
+	"description": "{{siteName}} is a Single-Sign-On service used by other applications.",
+	"metaDescription": "{{siteName}} - Single-Sign-On service",
+	"cookieDisclaimer": "The website may use temporary cookies for storing your login session and ensuring your security. This web service is&nbsp;<a href=\"https://git.icynet.eu/IcyNetwork/sso-core\" target=\"_blank\">completely open source</a> and can be audited by anyone.",
+	"submit": "Submit",
+	"cancel": "Cancel",
+	"manage": "Manage",
+	"back": "Go back",
+	"home": "Home page",
+	"required": "Required fields",
+	"page": "Page",
+	"previous": "Previous",
+	"next": "Next",
+	"bool": {
+		"true": "Yes",
+		"false": "No"
+	},
+	"available": "Available",
+	"current": "Current",
+	"remove": "Remove",
+	"filter": "Filter",
+	"clear": "Clear",
+	"theme": {
+		"light": "Light mode",
+		"dark": "Dark mode"
+	}
 }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 9db166a..c1c282b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -13,3 +13,22 @@ export const hasPrivileges = (list: string[], privileges: RequiredPrivileges) =>
 		}
 		return list.includes(item);
 	});
+
+export const waitIsTruthy = (check: () => boolean, checkInterval = 500, checkTimeout = 5000) => {
+	let time = 0;
+	return new Promise<void>((resolve, reject) => {
+		const interval = setInterval(() => {
+			if (check.call(null)) {
+				clearInterval(interval);
+				return resolve();
+			}
+
+			if (time > checkTimeout) {
+				clearInterval(interval);
+				return reject();
+			}
+
+			time += checkInterval;
+		}, checkInterval);
+	});
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6d1fdb8..e3b73cb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,18 @@
 <script lang="ts">
+	import { env } from '$env/dynamic/public';
+	import { t } from '$lib/i18n';
 	import { forwardInitialTheme } from '$lib/theme-mode';
 	import '../app.css';
 
 	forwardInitialTheme();
 </script>
 
+<svelte:head>
+	<meta name="title" content={env.PUBLIC_SITE_NAME} />
+	<meta
+		name="description"
+		content={$t('common.metaDescription', { siteName: env.PUBLIC_SITE_NAME })}
+	/>
+</svelte:head>
+
 <slot></slot>
diff --git a/src/routes/register/+page.server.ts b/src/routes/register/+page.server.ts
index c8fbf15..ccc481a 100644
--- a/src/routes/register/+page.server.ts
+++ b/src/routes/register/+page.server.ts
@@ -12,9 +12,16 @@ interface RegisterData {
 	displayName: string;
 	email: string;
 	password: string;
+	'h-captcha-response': string;
 }
 
-const fields: (keyof RegisterData)[] = ['username', 'displayName', 'email', 'password'];
+const fields: (keyof RegisterData)[] = [
+	'username',
+	'displayName',
+	'email',
+	'password',
+	'h-captcha-response'
+];
 
 const limiter = new RateLimiter({
 	IP: [6, 'm']
@@ -32,7 +39,14 @@ export const actions = {
 
 		const body = await request.formData();
 		const changes = Changesets.take<RegisterData>(fields, body);
-		const { username, displayName, email, password } = changes;
+		const {
+			username,
+			displayName,
+			email,
+			password,
+			['h-captcha-response']: captchaToken
+		} = changes;
+
 		// Each field must be present
 		if (!username || !displayName || !email || !password) {
 			return fail(400, {
@@ -87,6 +101,39 @@ export const actions = {
 			});
 		}
 
+		if (env.HCAPTCHA_SECRET) {
+			if (!captchaToken) {
+				return fail(400, {
+					username,
+					displayName,
+					email,
+					errors: ['invalidCaptcha'],
+					fields: ['hcaptcha']
+				});
+			}
+
+			const requestBody = new FormData();
+			requestBody.append('response', captchaToken);
+			requestBody.append('secret', env.HCAPTCHA_SECRET);
+			requestBody.append('remoteip', event.getClientAddress());
+
+			const testResultRequest = await fetch('https://api.hcaptcha.com/siteverify', {
+				method: 'POST',
+				body: requestBody
+			});
+
+			const testResult = await testResultRequest.json();
+			if (!testResult.success) {
+				return fail(400, {
+					username,
+					displayName,
+					email,
+					errors: ['invalidCaptcha'],
+					fields: ['hcaptcha']
+				});
+			}
+		}
+
 		if (!(await Users.checkRegistration(username, email))) {
 			return fail(400, {
 				username,
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index ca3668e..d94b3e6 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -13,6 +13,7 @@
 	import { enhance } from '$app/forms';
 	import FormErrors from '$lib/components/form/FormErrors.svelte';
 	import ButtonRow from '$lib/components/container/ButtonRow.svelte';
+	import HCaptcha from '$lib/components/form/HCaptcha.svelte';
 
 	export let data: PageData;
 	export let form: ActionData;
@@ -51,8 +52,10 @@
 	<ColumnView>
 		{#if !data.enabled}
 			<Alert type="error">{$t('account.register.disabled')}</Alert>
+			<div><a href="/login">{$t('account.login.title')}</a></div>
 		{:else if form?.success}
 			<Alert type="success">{$t(`account.register.${form.success}`)}</Alert>
+			<div><a href="/login">{$t('account.login.title')}</a></div>
 		{:else}
 			<form action="" method="POST" use:enhance={enhanceFn}>
 				<FormWrapper>
@@ -121,6 +124,12 @@
 						</FormControl>
 					</FormSection>
 
+					{#if env.PUBLIC_HCAPTCHA_KEY}
+						<FormControl>
+							<HCaptcha />
+						</FormControl>
+					{/if}
+
 					<ButtonRow>
 						<Button type="submit" variant="primary" disabled={submitted}
 							>{$t('account.register.submit')}</Button