Account deletion working

client/components/pages/account.jsx

@@ -1,9 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Redirect } from 'react-router-dom';
+import { useCookies } from 'react-cookie';
+
+import DeleteAccount from '../panels/delete-account';
 
 const Account = props => {
+	const [cookies, setCookie] = useCookies(['loggedin']);
+
+	//check for logged in redirect
+	if (!cookies['loggedin']) {
+		return <Redirect to='/' />;
+	}
+
 	return (
 		<div className='page'>
-			<h1 className='middle centered'>Account</h1>
+			<h1 className='centered'>Account</h1>
+			<DeleteAccount />
 		</div>
 	);
 };

client/components/pages/login.jsx

@@ -18,7 +18,7 @@ const LogIn = props => {
 
 	return (
 		<div className='page'>
-			<h1 className='middle centered'>Login</h1>
+			<h1 className='centered'>Login</h1>
 			<form className='constricted' onSubmit={
 				evt => {
 					evt.preventDefault();

client/components/pages/signup.jsx

@@ -19,7 +19,7 @@ const SignUp = props => {
 
 	return (
 		<div className='page'>
-			<h1 className='middle centered'>Signup</h1>
+			<h1 className='centered'>Signup</h1>
 			<form className='constricted' onSubmit={
 				evt => {
 					evt.preventDefault();

client/components/panels/delete-account.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+//DOCS: isolated the delete account button into it's own panel, so it can be easily moved as needed
+const DeleteAccount = props => {
+	const [open, setOpen] = useState(false);
+
+	if (!open) {
+		return <button onClick={() => setOpen(true)}>Delete Account</button>
+	}
+
+	let passwordElement;
+
+	return (
+		<form className='constricted' onSubmit={async evt => {
+			evt.preventDefault();
+			const password = passwordElement.value;
+			passwordElement.value = '';
+			await handleSubmit(password);
+		}}>
+			<div>
+				<label htmlFor="password">Password:</label>
+				<input type="password" name="password" ref={e => passwordElement = e} />
+			</div>
+
+			<button type='submit'>Delete Account</button>
+			<button type='cancel' onClick={() => { passwordElement.value = ''; setOpen(false); }}>Cancel</button>
+		</form>
+	);
+};
+
+const handleSubmit = async (password) => {
+	//generate a new formdata payload
+	let formData = new FormData();
+
+	formData.append('password', password);
+
+	const result = await fetch('/api/accounts/deletion', { method: 'POST', body: formData });
+
+	if (!result.ok) {
+		alert(await result.text());
+	} else {
+		//force logout
+		fetch('/api/accounts/logout', { method: 'POST' })
+			.then(alert(await result.text()))
+			.then(() => window.location.reload(true)) //BUFGIX: force reload of the header element
+			.catch(e => console.error(e))
+		;
+	}
+};
+
+export default DeleteAccount;