Add captcha to Forgot Password requests

package.json

@@ -6,9 +6,8 @@
 	"scripts": {
 		"start": "node src/server.js",
 		"build": "npm run browserify",
-		"browserify": "npm run browserify-miieditor && npm run browserify-forgot-password && npm run browserify-reset-password",
+		"browserify": "npm run browserify-miieditor && npm run browserify-reset-password",
 		"browserify-miieditor": "browserify ./public/assets/js/miieditor.js -o ./public/assets/js/miieditor.bundled.js",
-		"browserify-forgot-password": "browserify ./public/assets/js/forgot-password.js -o ./public/assets/js/forgot-password.bundled.js",
 		"browserify-reset-password": "browserify ./public/assets/js/reset-password.js -o ./public/assets/js/reset-password.bundled.js"
 	},
 	"repository": {

public/assets/css/forgot-password.css

@@ -100,6 +100,9 @@ form.account a.register {
 .banner-notice.success div {
 	background: var(--green-shade-0);
 }
+.banner-notice.error div {
+	background: var(--red-shade-1);
+}
 
 form.account.register {
 	display: grid;
@@ -108,7 +111,7 @@ form.account.register {
 	column-gap: 24px;
 	margin-bottom: 48px;
 }
-form.account.register div.h-captcha {
+form.account.forgot-password div.h-captcha {
 	grid-column: 1 / span 2;
 	display: flex;
 	justify-content: center;

src/routes/account.js

@@ -152,12 +152,37 @@ router.get('/logout', async (_request, response) => {
 });
 
 router.get('/forgot-password', async (request, response) => {
-	response.render('account/forgot-password');
+    const renderData = {
+        input: request.cookies.input,
+        success_message: request.cookies.success_message,
+        error_message: request.cookies.error_message,
+    }
+
+    response.clearCookie('input', { domain: '.pretendo.network' });
+
+	response.render('account/forgot-password', renderData);
 });
 
 router.post('/forgot-password', async (request, response) => {
-	const apiResponse = await util.apiPostRequest('/v1/forgot-password', {}, request.body);
-	response.json(apiResponse.body);
+    const { input, 'h-captcha-response': hCaptchaResponse } = request.body;
+
+    response.cookie('input', input, { domain: '.pretendo.network' });
+
+    try {
+        await util.forgotPassword({
+            input,
+            hCaptchaResponse
+        })
+
+        response.clearCookie('input', { domain: '.pretendo.network' });
+
+        response.cookie('success_message', 'An email has been sent.', { domain: '.pretendo.network' });
+
+        response.redirect(request.redirect || '/account/forgot-password');
+    } catch (error) {
+        response.cookie('error_message', error.message, { domain: '.pretendo.network' });
+        return response.redirect('/account/forgot-password');
+    }
 });
 
 router.get('/reset-password', async (request, response) => {

src/util.js

@@ -130,6 +130,16 @@ async function login(username, password) {
 	return apiResponse.body;
 }
 
+async function forgotPassword(forgotPasswordData) {
+    const apiResponse = await apiPostRequest('/v1/forgot-password', {}, forgotPasswordData);
+
+    if (apiResponse.statusCode !== 200) {
+        throw new Error(apiResponse.body.error);
+    }
+
+    return apiResponse.body;
+}
+
 async function refreshLogin(request, response) {
 	const apiResponse = await apiPostRequest('/v1/login', {}, {
 		refresh_token: request.cookies.refresh_token,
@@ -260,7 +270,8 @@ module.exports = {
 	apiPostRequest,
 	apiDeleteRequest,
 	register,
-	login,
+    login,
+    forgotPassword,
 	refreshLogin,
 	getUserAccountData,
 	updateDiscordConnection,

views/account/forgot-password.handlebars

@@ -1,22 +1,40 @@
-<link rel="stylesheet" href="/assets/css/forgot-password.css" />
+{{#section 'head'}}
+	<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
+	<link rel="stylesheet" href="/assets/css/forgot-password.css" />
+{{/section}}
 
 {{> header}}
 
 <div class="wrapper">
 
 	<div class="account-form-wrapper">
-		<form method="post" class="account">
+		<form action="/account/forgot-password" method="post" class="account forgot-password">
 			<h2>{{ locale.account.forgotPassword.header }}</h2>
 			<p>{{ locale.account.forgotPassword.sub }}</p>
 			<div>
 				<label for="input">{{ locale.account.forgotPassword.input }}</label>
-				<input name="input" id="input" required>
+				<input name="input" id="input" value="{{ input }}" required>
 			</div>
+            <div class="h-captcha" data-sitekey="cf3fd74e-93ca-47e6-9fa0-5fc439de06d4"></div>
 			<div class="buttons">
 				<button type="submit">{{ locale.account.forgotPassword.submit }}</button>
 			</div>
 		</form>
 	</div>
 </div>
 
-<script src="/assets/js/forgot-password.bundled.js"></script>
+{{#if success_message}}
+<div class="banner-notice success">
+	<div>
+		<p>{{ success_message }}</p>
+	</div>
+</div>
+{{/if}}
+
+{{#if error_message}}
+<div class="banner-notice error">
+	<div>
+		<p>{{ error_message }}</p>
+	</div>
+</div>
+{{/if}}