Merge pull request #306 from DanilochTop/dev2

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;

public/assets/js/forgot-password.js

@@ -1,24 +0,0 @@
-const input = document.querySelector('#input');
-document.querySelector('form').addEventListener('submit', function (event) {
-	event.preventDefault();
-
-	fetch('/account/forgot-password', {
-		method: 'POST',
-		headers: {
-			'Accept': 'application/json',
-			'Content-Type': 'application/json',
-		},
-		body: JSON.stringify({
-			input: input.value
-		})
-	})
-		.then(response => response.json())
-		.then(body => {
-			if (body.error) {
-				alert(`Error: ${body.error}. TODO: red error message thing`);
-			} else {
-				alert('If an account exists with the provided username/email address an email has been sent. TODO: reword this and green success');
-			}
-		})
-		.catch(console.log);
-});

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,
@@ -261,6 +271,7 @@ module.exports = {
 	apiDeleteRequest,
 	register,
 	login,
+	forgotPassword,
 	refreshLogin,
 	getUserAccountData,
 	updateDiscordConnection,

views/account/forgot-password.handlebars

@@ -1,17 +1,21 @@
-<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>
@@ -19,4 +23,18 @@
 	</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}}