Password recovery completed
This commit is contained in:
Generated
+20
@@ -5317,6 +5317,16 @@
|
|||||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
|
||||||
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
|
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
|
||||||
},
|
},
|
||||||
|
"query-string": {
|
||||||
|
"version": "6.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.5.0.tgz",
|
||||||
|
"integrity": "sha512-TYC4hDjZSvVxLMEucDMySkuAS9UIzSbAiYGyA9GWCjLKB8fQpviFbjd20fD7uejCDxZS+ftSdBKE6DS+xucJFg==",
|
||||||
|
"requires": {
|
||||||
|
"decode-uri-component": "^0.2.0",
|
||||||
|
"split-on-first": "^1.0.0",
|
||||||
|
"strict-uri-encode": "^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"querystring": {
|
"querystring": {
|
||||||
"version": "0.2.0",
|
"version": "0.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
|
||||||
@@ -6088,6 +6098,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
|
||||||
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
|
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
|
||||||
},
|
},
|
||||||
|
"split-on-first": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
|
||||||
|
"integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
|
||||||
|
},
|
||||||
"split-string": {
|
"split-string": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
|
||||||
@@ -6173,6 +6188,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
|
||||||
"integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI="
|
"integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI="
|
||||||
},
|
},
|
||||||
|
"strict-uri-encode": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
|
||||||
|
"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
|
||||||
|
},
|
||||||
"string-width": {
|
"string-width": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
|
||||||
|
|||||||
@@ -25,6 +25,7 @@
|
|||||||
"forever": "^1.0.0",
|
"forever": "^1.0.0",
|
||||||
"formidable": "^1.2.1",
|
"formidable": "^1.2.1",
|
||||||
"mysql": "^2.17.1",
|
"mysql": "^2.17.1",
|
||||||
|
"query-string": "^6.5.0",
|
||||||
"react": "^16.8.6",
|
"react": "^16.8.6",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "^16.8.6",
|
||||||
"react-redux": "^7.0.3",
|
"react-redux": "^7.0.3",
|
||||||
|
|||||||
+122
-1
@@ -265,10 +265,131 @@ function passwordChange(connection) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function passwordRecover(connection) {
|
||||||
|
return (req, res) => {
|
||||||
|
//formidable handles forms
|
||||||
|
let form = formidable.IncomingForm();
|
||||||
|
|
||||||
|
//parse form
|
||||||
|
form.parse(req, (err, fields) => {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
//validate email, username and password
|
||||||
|
if (!validateEmail(fields.email)) {
|
||||||
|
res.status(400).write('Invalid recover data');
|
||||||
|
res.end();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//ensure that this email is registered to an account
|
||||||
|
let query = 'SELECT accounts.id FROM accounts WHERE email = ?;';
|
||||||
|
connection.query(query, [fields.email], (err, results) => {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
if (results.length !== 1) {
|
||||||
|
res.status(400).write('Invalid recover data (did you use a registered email?)');
|
||||||
|
res.end();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//create the new recover record
|
||||||
|
let rand = Math.floor(Math.random() * 100000);
|
||||||
|
|
||||||
|
let query = 'REPLACE INTO passwordRecover (accountId, token) VALUES (?, ?)';
|
||||||
|
connection.query(query, [results[0].id, rand], (err) => {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
//build the recovery email
|
||||||
|
let addr = `http://${process.env.WEB_ADDRESS}/passwordreset?email=${fields.email}&token=${rand}`;
|
||||||
|
let msg = 'Hello! Please visit the following address to set a new password (if you didn\'t request a password recovery, ignore this email): ';
|
||||||
|
let msgHtml = `<html><body><p>${msg}<a href='${addr}'>${addr}</a></p></body></html>`;
|
||||||
|
|
||||||
|
//send the verification email
|
||||||
|
sendmail({
|
||||||
|
from: `passwordrecover@${process.env.WEB_ADDRESS}`,
|
||||||
|
to: fields.email,
|
||||||
|
subject: 'Password Recovery',
|
||||||
|
text: msg + addr,
|
||||||
|
html: msgHtml
|
||||||
|
}, (err, reply) => {
|
||||||
|
//final check
|
||||||
|
if (err) {
|
||||||
|
res.write(`<p>Something went wrong (did you use a valid email?)</p>${err}`)
|
||||||
|
res.end();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
res.status(200).write('Recovery email sent!');
|
||||||
|
res.end();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function passwordReset(connection) {
|
||||||
|
return (req, res) => {
|
||||||
|
//formidable handles forms
|
||||||
|
let form = formidable.IncomingForm();
|
||||||
|
|
||||||
|
//parse form
|
||||||
|
form.parse(req, (err, fields) => {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
//validate email, username and password
|
||||||
|
if (!validateEmail(fields.email) || fields.password.length < 8 || fields.password !== fields.retype) {
|
||||||
|
res.status(400).write('Invalid reset data (invalid email/password)');
|
||||||
|
res.end();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//get the account based on this email, token
|
||||||
|
let query = 'SELECT * FROM accounts WHERE email = ? AND id IN (SELECT passwordRecover.accountId FROM passwordRecover WHERE token = ?);';
|
||||||
|
connection.query(query, [fields.email, fields.token], (err, results) => {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
//results should be only 1 account
|
||||||
|
if (results.length !== 1) {
|
||||||
|
res.status(400).write('Invalid reset data (incorrect parameters/database state)');
|
||||||
|
res.end();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//generate the new salt, hash
|
||||||
|
bcrypt.genSalt(11, (err, salt) => {
|
||||||
|
if (err) throw err;
|
||||||
|
bcrypt.hash(fields.password, salt, (err, hash) => {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
//update the salt, hash
|
||||||
|
let query = 'UPDATE accounts SET salt = ?, hash = ? WHERE email = ?;';
|
||||||
|
connection.query(query, [salt, hash, fields.email], (err) => {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
//delete the recover request from the database
|
||||||
|
let query = 'DELETE FROM passwordRecover WHERE accountId IN (SELECT id FROM accounts WHERE email = ?);';
|
||||||
|
connection.query(query, [fields.email], (err) => {
|
||||||
|
if (err) throw err;
|
||||||
|
|
||||||
|
res.status(200).write('Password updated!');
|
||||||
|
res.end();
|
||||||
|
return;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
signup: signup,
|
signup: signup,
|
||||||
verify: verify,
|
verify: verify,
|
||||||
login: login,
|
login: login,
|
||||||
logout: logout,
|
logout: logout,
|
||||||
passwordChange: passwordChange
|
passwordChange: passwordChange,
|
||||||
|
passwordRecover: passwordRecover,
|
||||||
|
passwordReset: passwordReset
|
||||||
};
|
};
|
||||||
@@ -21,6 +21,8 @@ app.get('/verify', accounts.verify(connection));
|
|||||||
app.post('/login', accounts.login(connection));
|
app.post('/login', accounts.login(connection));
|
||||||
app.post('/logout', accounts.logout(connection));
|
app.post('/logout', accounts.logout(connection));
|
||||||
app.post('/passwordchange', accounts.passwordChange(connection));
|
app.post('/passwordchange', accounts.passwordChange(connection));
|
||||||
|
app.post('/passwordrecover', accounts.passwordRecover(connection));
|
||||||
|
app.post('/passwordreset', accounts.passwordReset(connection));
|
||||||
|
|
||||||
//static directories
|
//static directories
|
||||||
app.use('/styles', express.static(path.resolve(__dirname + '/../public/styles')) );
|
app.use('/styles', express.static(path.resolve(__dirname + '/../public/styles')) );
|
||||||
|
|||||||
@@ -27,3 +27,12 @@ CREATE TABLE IF NOT EXISTS sessions (
|
|||||||
CONSTRAINT FOREIGN KEY fk_accountId(accountId) REFERENCES accounts(id) ON UPDATE CASCADE ON DELETE CASCADE
|
CONSTRAINT FOREIGN KEY fk_accountId(accountId) REFERENCES accounts(id) ON UPDATE CASCADE ON DELETE CASCADE
|
||||||
);
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS passwordRecover (
|
||||||
|
id INTEGER UNSIGNED AUTO_INCREMENT PRIMARY KEY UNIQUE,
|
||||||
|
td TIMESTAMP DEFAULT CURRENT_TIMESTAMP(),
|
||||||
|
|
||||||
|
accountId INTEGER UNSIGNED UNIQUE,
|
||||||
|
token INTEGER DEFAULT 0,
|
||||||
|
|
||||||
|
CONSTRAINT FOREIGN KEY fk_accountId(accountId) REFERENCES accounts(id) ON UPDATE CASCADE ON DELETE CASCADE
|
||||||
|
);
|
||||||
@@ -3,6 +3,7 @@ import { BrowserRouter, Switch, Route } from 'react-router-dom';
|
|||||||
|
|
||||||
//include pages
|
//include pages
|
||||||
import Home from './pages/home.jsx';
|
import Home from './pages/home.jsx';
|
||||||
|
import PasswordReset from './pages/password_reset.jsx'
|
||||||
import PageNotFound from './pages/page_not_found.jsx';
|
import PageNotFound from './pages/page_not_found.jsx';
|
||||||
|
|
||||||
//other stuff
|
//other stuff
|
||||||
@@ -20,6 +21,7 @@ export default class App extends React.Component {
|
|||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path='/' component={Home} />
|
<Route exact path='/' component={Home} />
|
||||||
|
<Route path='/passwordreset' component={PasswordReset} />
|
||||||
<Route path='*' component={PageNotFound} />
|
<Route path='*' component={PageNotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import Signup from '../panels/signup.jsx';
|
|||||||
import Login from '../panels/login.jsx';
|
import Login from '../panels/login.jsx';
|
||||||
import Logout from '../panels/logout.jsx';
|
import Logout from '../panels/logout.jsx';
|
||||||
import PasswordChange from '../panels/password_change.jsx';
|
import PasswordChange from '../panels/password_change.jsx';
|
||||||
|
import PasswordRecover from '../panels/password_recover.jsx';
|
||||||
|
|
||||||
class Home extends React.Component {
|
class Home extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@@ -15,7 +16,9 @@ class Home extends React.Component {
|
|||||||
this.state = {
|
this.state = {
|
||||||
changedPassword: false,
|
changedPassword: false,
|
||||||
signedUp: false,
|
signedUp: false,
|
||||||
signupMsg: ''
|
signupMsg: '',
|
||||||
|
recoverSent: false,
|
||||||
|
recoverMsg: ''
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -23,8 +26,16 @@ class Home extends React.Component {
|
|||||||
//DEBUGGING: well this is goofy
|
//DEBUGGING: well this is goofy
|
||||||
let SidePanel;
|
let SidePanel;
|
||||||
|
|
||||||
if (this.props.id) {
|
if (this.props.id) { //logged in
|
||||||
SidePanel = () => {
|
SidePanel = () => {
|
||||||
|
if (this.state.signedUp) {
|
||||||
|
this.setState({ signedUp: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.state.recoverSent) {
|
||||||
|
this.setState({ recoverSent: false });
|
||||||
|
}
|
||||||
|
|
||||||
let PasswordChangePanel;
|
let PasswordChangePanel;
|
||||||
|
|
||||||
if (!this.state.changedPassword) {
|
if (!this.state.changedPassword) {
|
||||||
@@ -45,27 +56,52 @@ class Home extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
} else {
|
} else { //not logged in
|
||||||
SidePanel = () => {
|
SidePanel = () => {
|
||||||
if (this.state.changedPassword) {
|
if (this.state.changedPassword) {
|
||||||
this.setState({changedPassword: false});
|
this.setState({ changedPassword: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let SignupPanel;
|
||||||
|
|
||||||
if (!this.state.signedUp) {
|
if (!this.state.signedUp) {
|
||||||
return (
|
SignupPanel = () => {
|
||||||
<div>
|
return (
|
||||||
<Signup onSignup={(msg) => this.setState( {signedUp: true, signupMsg: msg} )} />
|
<Signup onSignup={(msg) => this.setState( {signedUp: true, signupMsg: msg} )} />
|
||||||
<Login />
|
);
|
||||||
</div>
|
}
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
return (
|
SignupPanel = () => {
|
||||||
<div>
|
return (
|
||||||
<p>{this.state.signupMsg}</p>
|
<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) {
|
function mapStoreToProps(store) {
|
||||||
return {
|
return {
|
||||||
id: store.account.id,
|
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