Password recovery completed
This commit is contained in:
@@ -3,6 +3,7 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
|
||||
|
||||
//include pages
|
||||
import Home from './pages/home.jsx';
|
||||
import PasswordReset from './pages/password_reset.jsx'
|
||||
import PageNotFound from './pages/page_not_found.jsx';
|
||||
|
||||
//other stuff
|
||||
@@ -20,6 +21,7 @@ export default class App extends React.Component {
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path='/' component={Home} />
|
||||
<Route path='/passwordreset' component={PasswordReset} />
|
||||
<Route path='*' component={PageNotFound} />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -8,6 +8,7 @@ import Signup from '../panels/signup.jsx';
|
||||
import Login from '../panels/login.jsx';
|
||||
import Logout from '../panels/logout.jsx';
|
||||
import PasswordChange from '../panels/password_change.jsx';
|
||||
import PasswordRecover from '../panels/password_recover.jsx';
|
||||
|
||||
class Home extends React.Component {
|
||||
constructor(props) {
|
||||
@@ -15,7 +16,9 @@ class Home extends React.Component {
|
||||
this.state = {
|
||||
changedPassword: false,
|
||||
signedUp: false,
|
||||
signupMsg: ''
|
||||
signupMsg: '',
|
||||
recoverSent: false,
|
||||
recoverMsg: ''
|
||||
};
|
||||
}
|
||||
|
||||
@@ -23,8 +26,16 @@ class Home extends React.Component {
|
||||
//DEBUGGING: well this is goofy
|
||||
let SidePanel;
|
||||
|
||||
if (this.props.id) {
|
||||
if (this.props.id) { //logged in
|
||||
SidePanel = () => {
|
||||
if (this.state.signedUp) {
|
||||
this.setState({ signedUp: false });
|
||||
}
|
||||
|
||||
if (this.state.recoverSent) {
|
||||
this.setState({ recoverSent: false });
|
||||
}
|
||||
|
||||
let PasswordChangePanel;
|
||||
|
||||
if (!this.state.changedPassword) {
|
||||
@@ -45,27 +56,52 @@ class Home extends React.Component {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
} else {
|
||||
} else { //not logged in
|
||||
SidePanel = () => {
|
||||
if (this.state.changedPassword) {
|
||||
this.setState({changedPassword: false});
|
||||
this.setState({ changedPassword: false });
|
||||
}
|
||||
|
||||
let SignupPanel;
|
||||
|
||||
if (!this.state.signedUp) {
|
||||
return (
|
||||
<div>
|
||||
SignupPanel = () => {
|
||||
return (
|
||||
<Signup onSignup={(msg) => this.setState( {signedUp: true, signupMsg: msg} )} />
|
||||
<Login />
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
SignupPanel = () => {
|
||||
return (
|
||||
<p>{this.state.signupMsg}</p>
|
||||
<Login />
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let RecoverPanel;
|
||||
|
||||
if (!this.state.recoverSent) {
|
||||
RecoverPanel = () => {
|
||||
return (
|
||||
<PasswordRecover onEmailSent={(msg) => this.setState( {recoverSent: true, recoverMsg: msg} )} />
|
||||
);
|
||||
}
|
||||
}
|
||||
else {
|
||||
RecoverPanel = () => {
|
||||
return (
|
||||
<p>{this.state.recoverMsg}</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SignupPanel />
|
||||
<Login />
|
||||
<RecoverPanel />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -78,6 +114,11 @@ class Home extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
Home.propTypes = {
|
||||
id: PropTypes.number.isRequired,
|
||||
token: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
function mapStoreToProps(store) {
|
||||
return {
|
||||
id: store.account.id,
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { withRouter, Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import queryString from 'query-string';
|
||||
|
||||
//panels
|
||||
import PasswordResetPanel from '../panels/password_reset.jsx';
|
||||
|
||||
class PasswordReset extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
reset: false,
|
||||
resetMsg: '',
|
||||
params: queryString.parse(props.location.search)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let Panel;
|
||||
|
||||
if (!this.state.reset) {
|
||||
Panel = () => {
|
||||
return (<PasswordResetPanel email={this.state.params.email} token={this.state.params.token} onPasswordReset={(msg) => this.setState( {reset: true, resetMsg: msg} )}/>);
|
||||
}
|
||||
} else {
|
||||
Panel = () => {
|
||||
return (<p>{this.state.resetMsg}</p>);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='page'>
|
||||
<Panel />
|
||||
<Link to='/'>Return Home</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default withRouter(PasswordReset);
|
||||
@@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { validateEmail } from '../../../common/utilities.js';
|
||||
|
||||
class PasswordRecover extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
email: '',
|
||||
warning: ''
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let warningStyle = {
|
||||
display: this.state.warning.length > 0 ? 'flex' : 'none'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='panel'>
|
||||
<h1>Recover Password</h1>
|
||||
|
||||
<div className='warning' style={warningStyle}>
|
||||
<p>{this.state.warning}</p>
|
||||
</div>
|
||||
|
||||
<form action='/passwordrecover' method='post' onSubmit={(e) => this.submit(e)}>
|
||||
<div>
|
||||
<label>Email:</label>
|
||||
<input type='text' name='email' value={this.state.email} onChange={this.updateEmail.bind(this)} />
|
||||
</div>
|
||||
|
||||
<button type='submit'>Send Email</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
submit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!this.validateInput()) {
|
||||
return;
|
||||
}
|
||||
|
||||
//build the XHR
|
||||
let form = e.target;
|
||||
let formData = new FormData(form);
|
||||
let xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
//DEBUGGING
|
||||
if (this.props.onEmailSent) {
|
||||
this.props.onEmailSent(xhr.responseText);
|
||||
}
|
||||
}
|
||||
|
||||
else if (xhr.status === 400) {
|
||||
this.setWarning(xhr.responseText);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//send the XHR
|
||||
xhr.open('POST', form.action, true);
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
validateInput(e) {
|
||||
if (!validateEmail(this.state.email)) {
|
||||
this.setWarning('Invalid Email');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
setWarning(s) {
|
||||
this.setState({
|
||||
warning: s
|
||||
});
|
||||
}
|
||||
|
||||
clearInput() {
|
||||
this.setState({
|
||||
email: '',
|
||||
warning: ''
|
||||
});
|
||||
}
|
||||
|
||||
updateEmail(evt) {
|
||||
this.setState({
|
||||
email: evt.target.value
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default PasswordRecover;
|
||||
@@ -0,0 +1,126 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { sessionChange } from '../../actions/accounts.js';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class PasswordReset extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
password: '',
|
||||
retype: '',
|
||||
warning: ''
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let warningStyle = {
|
||||
display: this.state.warning.length > 0 ? 'flex' : 'none'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='panel'>
|
||||
<h1>Change Password</h1>
|
||||
|
||||
<div className='warning' style={warningStyle}>
|
||||
<p>{this.state.warning}</p>
|
||||
</div>
|
||||
|
||||
<form action='/passwordreset' method='post' onSubmit={(e) => this.submit(e)}>
|
||||
<div>
|
||||
<label>Password:</label>
|
||||
<input type='password' name='password' value={this.state.password} onChange={this.updatePassword.bind(this)} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Retype Password:</label>
|
||||
<input type='password' name='retype' value={this.state.retype} onChange={this.updateRetype.bind(this)} />
|
||||
</div>
|
||||
|
||||
<button type='submit'>Change Password</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
submit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!this.validateInput()) {
|
||||
return;
|
||||
}
|
||||
|
||||
//build the XHR
|
||||
let form = e.target;
|
||||
let formData = new FormData(form);
|
||||
let xhr = new XMLHttpRequest();
|
||||
|
||||
formData.append('email', this.props.email);
|
||||
formData.append('token', this.props.token);
|
||||
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
if (this.props.onPasswordReset) {
|
||||
this.props.onPasswordReset(xhr.responseText);
|
||||
}
|
||||
}
|
||||
|
||||
else if (xhr.status === 400) {
|
||||
this.setWarning(xhr.responseText);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//send the XHR
|
||||
xhr.open('POST', form.action, true);
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
||||
validateInput(e) {
|
||||
if (this.state.password.length < 8) {
|
||||
this.setWarning('Minimum password length is 8 characters');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.state.password !== this.state.retype) {
|
||||
this.setWarning('Passwords do not match');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
setWarning(s) {
|
||||
this.setState({
|
||||
warning: s
|
||||
});
|
||||
}
|
||||
|
||||
clearInput() {
|
||||
this.setState({
|
||||
password: '',
|
||||
retype: '',
|
||||
warning: ''
|
||||
});
|
||||
}
|
||||
|
||||
updatePassword(evt) {
|
||||
this.setState({
|
||||
password: evt.target.value
|
||||
});
|
||||
}
|
||||
|
||||
updateRetype(evt) {
|
||||
this.setState({
|
||||
retype: evt.target.value
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
PasswordReset.propTypes = {
|
||||
email: PropTypes.string.isRequired,
|
||||
token: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
export default PasswordReset;
|
||||
Reference in New Issue
Block a user