improve password reset process

opensavannah · Feb 8, 2019 · 07973e3 · 07973e3
1 parent 623a439
commit 07973e3
Show file tree

Hide file tree

Showing 16 changed files with 250 additions and 167 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "node-sass-chokidar": "^0.0.3",
     "prettier": "1.11.1",
     "prop-types": "15.6.1",
+    "query-string": "^6.2.0",
     "raven-js": "^3.24.2",
     "react": "^16.5.2",
     "react-apollo": "2.0.4",

diff --git a/src/FloodsRoutes.js b/src/FloodsRoutes.js
@@ -55,7 +55,7 @@ class FloodsRoutes extends Component {
             component={ForgotPasswordPage}
           />
           <Route
-            path="/dashboard/reset_password/:resetterJwt"
+            path="/dashboard/reset_password"
             render={props => (
               <ResetPasswordPage onLogin={this.onLogin} {...props} />
             )}

diff --git a/src/components/Dashboard/ForgotPasswordPage/ForgotPasswordPage.js b/src/components/Dashboard/ForgotPasswordPage/ForgotPasswordPage.js
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome';
 
 import { logError } from 'services/logger';
 
-import 'components/Dashboard/ForgotPasswordPage/ForgotPasswordPage.css';
+import 'scss/auth.css';
 
 class ForgotPasswordPage extends Component {
   state = {
@@ -22,7 +22,7 @@ class ForgotPasswordPage extends Component {
     e.preventDefault();
     fetch(`${process.env.REACT_APP_BACKEND_URL}/email/reset`, {
       method: 'POST',
-      body: JSON.stringify({ email: this.state.email }),
+      body: JSON.stringify({ email: this.state.email, newUser: false }),
       headers: new Headers({
         'Content-Type': 'application/json',
       }),
@@ -54,15 +54,14 @@ class ForgotPasswordPage extends Component {
 
   render() {
     const { emailSentSuccessfully, waiting, errorHappened } = this.state;
-
     return (
-      <div className="ForgotPasswordPage">
+      <div className="AuthPage">
         {!emailSentSuccessfully &&
           !waiting && (
-            <div className="ForgotPasswordPage__form-controls">
+            <div className="Auth__form-controls">
               <h1> Reset your password </h1>
               {errorHappened && (
-                <div className="ForgotPasswordPage__error-text">
+                <div className="Auth__error-text">
                   {' '}
                   Failed to send password reset email{' '}
                 </div>
@@ -76,7 +75,7 @@ class ForgotPasswordPage extends Component {
                 />
                 <input
                   type="submit"
-                  className="ForgotPasswordPage__submit"
+                  className="Auth__submit"
                   value="Send Reset Email"
                 />
               </form>
@@ -86,10 +85,15 @@ class ForgotPasswordPage extends Component {
           <FontAwesome
             name="spinner"
             size="4x"
-            className="ForgotPasswordPage__waiting fa-spin"
+            className="Auth__waiting fa-spin"
           />
         )}
-        {emailSentSuccessfully && <h1> Email Sent! </h1>}
+        {emailSentSuccessfully && (
+          <div className="Auth__form-controls">
+            <h1> Email Sent! </h1>
+            <p>You have 30 minutes to reset your password before your email's link expires.</p>
+          </div>
+        )}
       </div>
     );
   }

diff --git a/src/components/Dashboard/ForgotPasswordPage/ForgotPasswordPage.scss b/src/components/Dashboard/ForgotPasswordPage/ForgotPasswordPage.scss
diff --git a/src/components/Dashboard/LoginPage/LoginPage.js b/src/components/Dashboard/LoginPage/LoginPage.js
@@ -5,7 +5,7 @@ import gql from 'graphql-tag';
 import { Link } from 'react-router-dom';
 
 import { logError } from 'services/logger';
-import 'components/Dashboard/LoginPage/LoginPage.css';
+import 'scss/auth.css';
 
 class LoginPage extends Component {
   static propTypes = {
@@ -49,9 +49,14 @@ class LoginPage extends Component {
 
   render() {
     return (
-      <div className="LoginPage">
-        <div className="LoginPage__form-controls">
+      <div className="AuthPage">
+        <div className="Auth__form-controls">
           <h1> Log in to the CTXfloods Dashboard </h1>
+          {this.state.errorHappened && (
+            <div className="Auth__error-text">
+            Authentication Failed
+            </div>
+          )}
           <form onSubmit={this.handleSubmit}>
             <input
               type="email"
@@ -65,14 +70,9 @@ class LoginPage extends Component {
               placeholder="Password"
               onChange={this.handlePasswordChange}
             />
-            <input type="submit" className="LoginPage__submit" />
+            <input type="submit" className="Auth__submit" />
           </form>
         </div>
-        {this.state.errorHappened && (
-          <div className="LoginPage__error-text">
-          Authentication Failed
-          </div>
-        )}
         <Link to="/dashboard/forgot_password">Forgot Password?</Link>
       </div>
     );

diff --git a/src/components/Dashboard/ManageUsersPage/AddUserPage.js b/src/components/Dashboard/ManageUsersPage/AddUserPage.js
@@ -77,7 +77,7 @@ class AddUserPage extends Component {
   sendEmail = user => {
     fetch(`${process.env.REACT_APP_BACKEND_URL}/email/reset`, {
       method: 'POST',
-      body: JSON.stringify({ email: user.email }),
+      body: JSON.stringify({ email: user.email, newUser: true }),
       headers: new Headers({
         'Content-Type': 'application/json',
       }),

diff --git a/src/components/Dashboard/ManageUsersPage/ArchiveUserModal.js b/src/components/Dashboard/ManageUsersPage/ArchiveUserModal.js
@@ -68,7 +68,7 @@ class ArchiveUserModal extends Component {
   sendEmail = user => {
     fetch(`${process.env.REACT_APP_BACKEND_URL}/email/reset`, {
       method: 'POST',
-      body: JSON.stringify({ email: user.emailAddress }),
+      body: JSON.stringify({ email: user.emailAddress, newUser: true }),
       headers: new Headers({
         'Content-Type': 'application/json',
       }),