86 lines
2.0 KiB
React
86 lines
2.0 KiB
React
import React, { useEffect } 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();
|
|
|
|
//check for logged in redirect
|
|
if (!cookies['loggedin']) {
|
|
return <Redirect to='/' />;
|
|
}
|
|
|
|
//refs
|
|
let contactElement, passwordElement, retypeElement;
|
|
|
|
//once before render
|
|
useEffect(() => {
|
|
fetch('/api/accounts')
|
|
.then(blob => blob.json())
|
|
.then(json => {
|
|
contactElement.checked = json.contact;
|
|
})
|
|
.catch(e => console.error(e))
|
|
;
|
|
}, []);
|
|
|
|
return (
|
|
<div className='page'>
|
|
<h1 className='centered'>Account</h1>
|
|
<form className='constricted' onSubmit={async evt => {
|
|
evt.preventDefault();
|
|
await update(contactElement.checked, passwordElement.value, retypeElement.value);
|
|
passwordElement.value = retypeElement.value = '';
|
|
}}>
|
|
<div>
|
|
<div>
|
|
<label htmlFor='contact'>Allow Promotional Emails:</label>
|
|
<input type='checkbox' name='contact' ref={e => contactElement = e} />
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor='password'>Change Password:</label>
|
|
<input type='password' name='password' ref={e => passwordElement = e} />
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor='retype'>Retype Password:</label>
|
|
<input type='password' name='retype' ref={e => retypeElement = e} />
|
|
</div>
|
|
</div>
|
|
|
|
<button type='submit'>Update Information</button>
|
|
</form>
|
|
|
|
<DeleteAccount className='constricted' />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const update = async (contact, password, retype) => {
|
|
if (password != retype) {
|
|
alert('Passwords do not match');
|
|
}
|
|
|
|
//generate a new formdata payload
|
|
let formData = new FormData();
|
|
|
|
formData.append('contact', contact);
|
|
|
|
if (password) {
|
|
formData.append('password', password);
|
|
}
|
|
|
|
const result = await fetch('/api/accounts', { method: 'PATCH', body: formData });
|
|
|
|
if (result.ok) {
|
|
alert(await result.text());
|
|
} else {
|
|
alert(await result.text());
|
|
}
|
|
}
|
|
|
|
export default Account;
|