Imported the directory structure from egg trainer
This commit is contained in:
@@ -0,0 +1,107 @@
|
||||
import React, { useEffect, useContext, useRef } from 'react';
|
||||
import { Link, Redirect } from 'react-router-dom';
|
||||
|
||||
import ApplyToBody from '../utilities/apply-to-body';
|
||||
|
||||
import { TokenContext } from '../utilities/token-provider';
|
||||
|
||||
import DeleteAccount from './panels/delete-account';
|
||||
|
||||
const Account = props => {
|
||||
//context
|
||||
const authTokens = useContext(TokenContext);
|
||||
|
||||
//misplaced?
|
||||
if (!authTokens.accessToken) {
|
||||
return <Redirect to='/' />;
|
||||
}
|
||||
|
||||
//refs
|
||||
const passwordRef = useRef();
|
||||
const retypeRef = useRef();
|
||||
const contactRef = useRef();
|
||||
|
||||
//grab the user's info
|
||||
useEffect(() => {
|
||||
authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
}
|
||||
})
|
||||
.then(blob => blob.json())
|
||||
.then(json => contactRef.current.checked = json.contact)
|
||||
.catch(e => console.error(e))
|
||||
;
|
||||
}, []);
|
||||
|
||||
//render the thing
|
||||
return (
|
||||
<>
|
||||
<ApplyToBody className='dashboard' />
|
||||
<div className='page'>
|
||||
<div className='central panel centered middle'>
|
||||
<div className='panel'>
|
||||
<h1 className='text centered'>Account</h1>
|
||||
<div className='panel'>
|
||||
<form className='constrained' onSubmit={async evt => {
|
||||
evt.preventDefault();
|
||||
const [err] = await update(passwordRef.current.value, retypeRef.current.value, contactRef.current.checked, authTokens.tokenFetch);
|
||||
|
||||
if (err) {
|
||||
alert(err);
|
||||
return;
|
||||
}
|
||||
|
||||
alert('Details updated');
|
||||
passwordRef.current.value = retypeRef.current.value = '';
|
||||
}}>
|
||||
<input type='password' name='password' placeholder='New Password' ref={passwordRef} />
|
||||
<input type='password' name='retype' placeholder='Retype New Password' ref={retypeRef} />
|
||||
|
||||
<span>
|
||||
<label htmlFor='contact'>Allow Promotional Emails:</label>
|
||||
<input type='checkbox' name='contact' ref={contactRef} />
|
||||
</span>
|
||||
|
||||
<button type='submit'>Update Information</button>
|
||||
</form>
|
||||
<DeleteAccount />
|
||||
</div>
|
||||
<Link to='/' className='text centered'>Return Home</Link>\
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const update = async (password, retype, contact, tokenFetch) => {
|
||||
if (password != retype) {
|
||||
return ['Passwords do not match'];
|
||||
}
|
||||
|
||||
if (password && password.length < 8) {
|
||||
return ['Password is too short'];
|
||||
}
|
||||
|
||||
const result = await tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
password: password ? password : null,
|
||||
contact
|
||||
})
|
||||
});
|
||||
|
||||
if (!result.ok) {
|
||||
return [`${await result.status}: ${await result.text()}`];
|
||||
} else {
|
||||
return [null];
|
||||
}
|
||||
}
|
||||
|
||||
export default Account;
|
||||
@@ -0,0 +1,110 @@
|
||||
import React, { useContext, useRef } from 'react';
|
||||
import { Link, Redirect } from 'react-router-dom';
|
||||
|
||||
import ApplyToBody from '../utilities/apply-to-body';
|
||||
|
||||
import { TokenContext } from '../utilities/token-provider';
|
||||
|
||||
const validateEmail = require('../../../common/utilities/validate-email');
|
||||
|
||||
const Login = props => {
|
||||
//context
|
||||
const authTokens = useContext(TokenContext);
|
||||
|
||||
//misplaced?
|
||||
if (authTokens.accessToken) {
|
||||
return <Redirect to='/' />;
|
||||
}
|
||||
|
||||
//refs
|
||||
const emailRef = useRef();
|
||||
const passwordRef = useRef();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ApplyToBody className='dashboard' />
|
||||
<div className='page'>
|
||||
<div className='central panel centered middle'>
|
||||
<div className='panel'>
|
||||
<h1 className='text centered'>Login</h1>
|
||||
<form className='constrained' onSubmit={
|
||||
async evt => {
|
||||
//on submit
|
||||
evt.preventDefault();
|
||||
const [err, newTokens] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
|
||||
if (err) {
|
||||
alert(err);
|
||||
}
|
||||
|
||||
//save auth tokens and redirect
|
||||
if (newTokens) {
|
||||
authTokens.setAccessToken(newTokens.accessToken);
|
||||
authTokens.setRefreshToken(newTokens.refreshToken);
|
||||
|
||||
props.history.push('/');
|
||||
}
|
||||
}
|
||||
}>
|
||||
<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
|
||||
<input type='password' name='password' placeholder='********' ref={passwordRef} />
|
||||
<button type='submit'>Login</button>
|
||||
</form>
|
||||
<Link to='/recover' className='text centered'>Forgot Password?</Link>
|
||||
<Link to='/' className='text centered'>Return Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
//DOCS: returns two values: err and authTokens
|
||||
const handleSubmit = async (email, password) => {
|
||||
email = email.trim();
|
||||
|
||||
const err = handleValidation(email, password);
|
||||
|
||||
if (err) {
|
||||
return [err, false];
|
||||
}
|
||||
|
||||
//send to the auth server
|
||||
const result = await fetch(`${process.env.AUTH_URI}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
password,
|
||||
})
|
||||
});
|
||||
|
||||
//handle errors
|
||||
if (!result.ok) {
|
||||
const err = `${result.status}: ${await result.text()}`;
|
||||
console.error(err);
|
||||
return [err, false];
|
||||
}
|
||||
|
||||
//return the new auth tokens
|
||||
const newTokens = await result.json();
|
||||
return [null, newTokens];
|
||||
};
|
||||
|
||||
//returns an error message, or null on success
|
||||
const handleValidation = (email, password) => {
|
||||
if (!validateEmail(email)) {
|
||||
return 'invalid email';
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
return 'invalid password (Must be at least 8 characters long)';
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
export default Login;
|
||||
@@ -0,0 +1,75 @@
|
||||
import React, { useState, useContext, useRef } from 'react';
|
||||
|
||||
import { TokenContext } from '../../utilities/token-provider';
|
||||
|
||||
//DOCS: isolated the delete account button into it's own panel, so it can be easily moved as needed
|
||||
const DeleteAccount = props => {
|
||||
const authTokens = useContext(TokenContext);
|
||||
const [open, setOpen] = useState(false);
|
||||
const passwordRef = useRef();
|
||||
|
||||
if (!open) {
|
||||
return (
|
||||
<button onClick={() => setOpen(true)}>Delete Account</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='panel centered middle'>
|
||||
<h2 className='text centered'>Delete Your Account?</h2>
|
||||
<form className='constrained' onSubmit={async evt => {
|
||||
evt.preventDefault();
|
||||
const [err] = await handleSubmit(passwordRef.current.value, authTokens);
|
||||
if (err) {
|
||||
alert(err);
|
||||
}
|
||||
}}>
|
||||
<input type="password" name="password" placeholder='Password' ref={passwordRef} />
|
||||
|
||||
<button type='submit' style={{backgroundColor: 'red'}}>Delete Account</button>
|
||||
<button type='cancel' onClick={() => { passwordRef.current.value = ''; setOpen(false); }}>Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = async (password, authTokens) => {
|
||||
//schedule a deletion
|
||||
const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
password
|
||||
})
|
||||
});
|
||||
|
||||
if (!result.ok) {
|
||||
return [`${await result.status}: ${await result.text()}`];
|
||||
}
|
||||
|
||||
//force a logout
|
||||
const result2 = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
token: authTokens.refreshToken
|
||||
})
|
||||
});
|
||||
|
||||
if (!result2.ok) {
|
||||
return [`${await result2.status}: ${await result2.text()}`];
|
||||
}
|
||||
|
||||
authTokens.setAccessToken('');
|
||||
authTokens.setRefreshToken('');
|
||||
|
||||
return [null];
|
||||
};
|
||||
|
||||
export default DeleteAccount;
|
||||
@@ -0,0 +1,37 @@
|
||||
import React, { useContext, useRef } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { TokenContext } from '../../utilities/token-provider';
|
||||
|
||||
//TODO: make this an ACTUAL BUTTON
|
||||
const Logout = () => {
|
||||
const authTokens = useContext(TokenContext);
|
||||
|
||||
return (
|
||||
<>
|
||||
{ /* Logout logs you out of the server too */ }
|
||||
<Link to='/' onClick={async () => {
|
||||
const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, { //NOTE: this gets overwritten as a bugfix
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
token: authTokens.refreshToken
|
||||
})
|
||||
});
|
||||
|
||||
//any problems?
|
||||
if (!result.ok) {
|
||||
console.error(await result.text());
|
||||
} else {
|
||||
authTokens.setAccessToken('');
|
||||
authTokens.setRefreshToken('');
|
||||
}
|
||||
}}>Logout</Link>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logout;
|
||||
@@ -0,0 +1,95 @@
|
||||
import React, { useContext, useRef } from 'react';
|
||||
import { Link, Redirect } from 'react-router-dom';
|
||||
|
||||
import ApplyToBody from '../utilities/apply-to-body';
|
||||
|
||||
import { TokenContext } from '../utilities/token-provider';
|
||||
|
||||
//utilities
|
||||
const validateEmail = require('../../../common/utilities/validate-email');
|
||||
|
||||
const Recover = props => {
|
||||
//context
|
||||
const authTokens = useContext(TokenContext);
|
||||
|
||||
//misplaced?
|
||||
if (authTokens.accessToken) {
|
||||
return <Redirect to='/' />;
|
||||
}
|
||||
|
||||
//refs
|
||||
const emailRef = useRef();
|
||||
const recoverRef = useRef();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ApplyToBody className='dashboard' />
|
||||
<div className='page'>
|
||||
<div className='central panel centered middle'>
|
||||
<h1 className='text centered'>Forgot Password</h1>
|
||||
<form className='constrained' onSubmit={
|
||||
async evt => { //on submit
|
||||
recoverRef.current.disabled = true;
|
||||
evt.preventDefault();
|
||||
const [result, redirect] = await handleSubmit(emailRef.current.value);
|
||||
if (result) {
|
||||
alert(result);
|
||||
recoverRef.current.disabled = false;
|
||||
}
|
||||
|
||||
//redirect
|
||||
if (redirect) {
|
||||
props.history.push('/');
|
||||
}
|
||||
}
|
||||
}>
|
||||
<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
|
||||
<button type='submit' ref={recoverRef}>Recover Password</button>
|
||||
</form>
|
||||
<Link to='/' className='text centered'>Return Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = async (email) => {
|
||||
email = email.trim();
|
||||
|
||||
const err = handleValidation(email);
|
||||
|
||||
if (err) {
|
||||
return [err];
|
||||
}
|
||||
|
||||
//send to the auth server
|
||||
const result = await fetch(`${process.env.AUTH_URI}/auth/recover`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email
|
||||
})
|
||||
});
|
||||
|
||||
if (!result.ok) {
|
||||
const err = `${result.status}: ${await result.text()}`;
|
||||
console.error(err);
|
||||
return [err, false];
|
||||
}
|
||||
|
||||
return [await result.text(), true];
|
||||
};
|
||||
|
||||
//returns an error message, or null on success
|
||||
const handleValidation = (email) => {
|
||||
if (!validateEmail(email)) {
|
||||
return 'invalid email';
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default Recover;
|
||||
@@ -0,0 +1,86 @@
|
||||
import React, { useContext, useRef } from 'react';
|
||||
import { Link, Redirect } from 'react-router-dom';
|
||||
import queryString from 'query-string';
|
||||
|
||||
import ApplyToBody from '../utilities/apply-to-body';
|
||||
|
||||
import { TokenContext } from '../utilities/token-provider';
|
||||
|
||||
const Reset = props => {
|
||||
//context
|
||||
const authTokens = useContext(TokenContext);
|
||||
|
||||
//query
|
||||
const query = queryString.parse(props.location.search);
|
||||
|
||||
//misplaced?
|
||||
if (authTokens.accessToken || !query.email || !query.token) {
|
||||
return <Redirect to='/' />;
|
||||
}
|
||||
|
||||
//refs
|
||||
const passwordRef = useRef();
|
||||
const retypeRef = useRef();
|
||||
|
||||
//render the thing
|
||||
return (
|
||||
<>
|
||||
<ApplyToBody className='dashboard' />
|
||||
<div className='page'>
|
||||
<div className='central panel centered middle'>
|
||||
<h1 className='text centered'>Reset Password</h1>
|
||||
<form className='constrained' onSubmit={async evt => {
|
||||
evt.preventDefault();
|
||||
const [err, redirect] = await update(passwordRef.current.value, retypeRef.current.value, query);
|
||||
|
||||
if (err) {
|
||||
alert(err);
|
||||
return;
|
||||
}
|
||||
|
||||
alert('Details updated'); //TODO: replace with a message from the auth server
|
||||
|
||||
//redirect
|
||||
if (redirect) {
|
||||
props.history.push('/');
|
||||
}
|
||||
}}>
|
||||
<input type='password' name='password' placeholder='New Password' ref={passwordRef} />
|
||||
<input type='password' name='retype' placeholder='Retype New Password' ref={retypeRef} />
|
||||
<button type='submit'>Update Information</button>
|
||||
</form>
|
||||
<Link to='/' className='text centered'>Return Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const update = async (password, retype, query) => {
|
||||
if (password != retype) {
|
||||
return ['Passwords do not match'];
|
||||
}
|
||||
|
||||
if (password && password.length < 8) {
|
||||
return ['Password is too short'];
|
||||
}
|
||||
|
||||
const result = await fetch(`${process.env.AUTH_URI}/auth/reset?email=${query.email}&token=${query.token}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
password: password ? password : null,
|
||||
})
|
||||
});
|
||||
|
||||
if (!result.ok) {
|
||||
return [`${await result.status}: ${await result.text()}`];
|
||||
} else {
|
||||
return [null, true];
|
||||
}
|
||||
}
|
||||
|
||||
export default Reset;
|
||||
@@ -0,0 +1,127 @@
|
||||
import React, { useContext, useRef } from 'react';
|
||||
import { Link, Redirect } from 'react-router-dom';
|
||||
|
||||
import ApplyToBody from '../utilities/apply-to-body';
|
||||
|
||||
import { TokenContext } from '../utilities/token-provider';
|
||||
|
||||
//utilities
|
||||
const validateEmail = require('../../../common/utilities/validate-email');
|
||||
const validateUsername = require('../../../common/utilities/validate-username');
|
||||
|
||||
const Signup = props => {
|
||||
//context
|
||||
const authTokens = useContext(TokenContext);
|
||||
|
||||
//misplaced?
|
||||
if (authTokens.accessToken) {
|
||||
return <Redirect to='/' />;
|
||||
}
|
||||
|
||||
//refs
|
||||
const emailRef = useRef();
|
||||
const usernameRef = useRef();
|
||||
const passwordRef = useRef();
|
||||
const retypeRef = useRef();
|
||||
const contactRef = useRef();
|
||||
const signupRef = useRef();
|
||||
|
||||
return (
|
||||
<>
|
||||
<ApplyToBody className='dashboard' />
|
||||
<div className='page'>
|
||||
<div className='central panel centered middle'>
|
||||
<h1 className='text centered'>Signup</h1>
|
||||
<form className='constrained' onSubmit={
|
||||
async evt => { //on submit
|
||||
signupRef.current.disabled = true;
|
||||
evt.preventDefault();
|
||||
const [result, redirect] = await handleSubmit(emailRef.current.value, usernameRef.current.value, passwordRef.current.value, retypeRef.current.value, contactRef.current.checked);
|
||||
if (result) {
|
||||
alert(result);
|
||||
signupRef.current.disabled = false;
|
||||
}
|
||||
|
||||
//redirect
|
||||
if (redirect) {
|
||||
props.history.push('/');
|
||||
}
|
||||
}
|
||||
}>
|
||||
|
||||
<input type='email' name='email' placeholder='your@email.com' ref={emailRef} />
|
||||
<input type='text' name='username' placeholder='Username' ref={usernameRef} />
|
||||
<input type='password' name='password' placeholder='********' ref={passwordRef} />
|
||||
<input type='password' name='retype' placeholder='********' ref={retypeRef} />
|
||||
|
||||
<span>
|
||||
<label htmlFor='contact'>Allow Emails:</label>
|
||||
<input type='checkbox' name='contact' ref={contactRef} defaultChecked='true' />
|
||||
</span>
|
||||
|
||||
<button type='submit' ref={signupRef}>Signup</button>
|
||||
</form>
|
||||
<Link to='/recover' className='text centered'>Forgot Password?</Link>
|
||||
<Link to='/' className='text centered'>Return Home</Link>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = async (email, username, password, retype, contact) => {
|
||||
email = email.trim();
|
||||
username = username.trim();
|
||||
|
||||
const err = handleValidation(email, username, password, retype);
|
||||
|
||||
if (err) {
|
||||
return [err];
|
||||
}
|
||||
|
||||
//send to the auth server
|
||||
const result = await fetch(`${process.env.AUTH_URI}/auth/signup`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
username,
|
||||
password,
|
||||
contact
|
||||
})
|
||||
});
|
||||
|
||||
if (!result.ok) {
|
||||
const err = `${result.status}: ${await result.text()}`;
|
||||
console.error(err);
|
||||
return [err, false];
|
||||
}
|
||||
|
||||
return [await result.text(), true];
|
||||
};
|
||||
|
||||
//returns an error message, or null on success
|
||||
const handleValidation = (email, username, password, retype) => {
|
||||
if (!validateEmail(email)) {
|
||||
return 'invalid email';
|
||||
}
|
||||
|
||||
if (!validateUsername(username)) {
|
||||
return 'invalid username';
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
return 'invalid password (Must be at least 8 characters long)';
|
||||
}
|
||||
|
||||
if (password !== retype) {
|
||||
return 'passwords do not match';
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default Signup;
|
||||
Reference in New Issue
Block a user