feat(profile): enable reset password [EP-2584] (#224)

natgeosociety · Oct 13, 2020 · ab5e027 · ab5e027
1 parent 0225c10
commit ab5e027
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 22 deletions.
diff --git a/packages/earth-admin/README.md b/packages/earth-admin/README.md
@@ -47,7 +47,7 @@ $marapp-primary-font: 'Primary font';
 $marapp-secondary-font: 'Secondary font';
 $marapp-icon-font: 'icon-font';
 
-$marapp-color-sucess: #hex;
+$marapp-color-success: #hex;
 $marapp-color-error: #hex;
 
 $marapp-primary-color: #hex;

diff --git a/packages/earth-admin/src/styles/config.scss b/packages/earth-admin/src/styles/config.scss
@@ -21,7 +21,7 @@ $marapp-primary-font: 'Roboto';
 $marapp-secondary-font: 'Roboto';
 $marapp-icon-font: 'icon-font';
 
-$marapp-color-sucess: #1EBE28!default;
+$marapp-color-success: #28A745!default;
 $marapp-color-error: #FC4349!default;
 
 $marapp-primary-color: #0099A1;

diff --git a/packages/earth-map/README.md b/packages/earth-map/README.md
@@ -564,7 +564,7 @@ $marapp-primary-font: 'Primary font';
 $marapp-secondary-font: 'Secondary font';
 $marapp-icon-font: 'icon-font';
 
-$marapp-color-sucess: #hex;
+$marapp-color-success: #hex;
 $marapp-color-error: #hex;
 
 $marapp-primary-color: #hex;

diff --git a/packages/earth-map/src/pages/profile/component.tsx b/packages/earth-map/src/pages/profile/component.tsx
@@ -1,7 +1,7 @@
 import { Auth0Context } from 'auth/auth0';
 import React, { useContext, useEffect, useState } from 'react';
 import Link from 'redux-first-router-link';
-import { fetchProfile, updateProfile } from 'services/users';
+import { fetchProfile, updateProfile, resetPassword } from 'services/users';
 import { APP_LOGO } from 'theme';
 import { REACT_APP_EXTERNAL_IDP_URL } from 'config';
 
@@ -19,6 +19,13 @@ interface IProps {
   page: string;
 }
 
+enum RESET_PASSWORD_STATE {
+  INITIAL,
+  SENDING,
+  SENT,
+  NOTIFICATION_DISMISS,
+}
+
 export function ProfileComponent(props: IProps) {
   const { page } = props;
 
@@ -30,6 +37,7 @@ export function ProfileComponent(props: IProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [userName, setUserName] = useState('');
   const [userProfile, setUserProfile] = useState({ firstName: '', lastName: '', name: '' });
+  const [resetPasswordState, setResetPasswordState] = useState(RESET_PASSWORD_STATE.INITIAL);
 
   const { touched, isValid } = formState;
   const renderErrorFor = setupErrors(formErrors, touched);
@@ -70,6 +78,16 @@ export function ProfileComponent(props: IProps) {
     }
   }
 
+  async function sendResetEmail(e) {
+    e.preventDefault();
+
+    setResetPasswordState(RESET_PASSWORD_STATE.SENDING);
+
+    await resetPassword();
+
+    setResetPasswordState(RESET_PASSWORD_STATE.SENT);
+  }
+
   return isLoading ? (
     <Spinner size="large" />
   ) : (
@@ -100,6 +118,23 @@ export function ProfileComponent(props: IProps) {
           </h1>
           <form className="ng-form ng-form-dark">
             <div className="ng-grid">
+              {resetPasswordState === RESET_PASSWORD_STATE.SENT && (
+                <div className="ng-width-2-3 ng-push-1-6 ng-margin-bottom">
+                  <div className="ng-background-success ng-padding-medium ng-flex ng-flex-space-between">
+                    <span>
+                      An email has been sent to {userData.email} with a link to reset your password.
+                    </span>
+                    <button
+                      className="ng-text-display-l ng-text-weight-thin ng-position-absolute ng-position-top-right ng-margin-right"
+                      onClick={() =>
+                        setResetPasswordState(RESET_PASSWORD_STATE.NOTIFICATION_DISMISS)
+                      }
+                    >
+                      &times;
+                    </button>
+                  </div>
+                </div>
+              )}
               <div className="ng-width-2-3 ng-push-1-6">
                 <InlineEditCard
                   {...(!REACT_APP_EXTERNAL_IDP_URL && {
@@ -186,21 +221,7 @@ export function ProfileComponent(props: IProps) {
                 </InlineEditCard>
               </div>
               <div className="ng-width-2-3 ng-push-1-6 ng-margin-top">
-                <InlineEditCard
-                // render={({setIsEditing, setIsLoading, setServerErrors}) => (
-                //   <>
-                //     <div className="ng-margin-medium-bottom">
-                //       <Input
-                //         name="email"
-                //         placeholder="Email"
-                //         label="Email"
-                //         defaultValue={''}
-                //         className="ng-display-block marapp-qa-inputemail"
-                //       />
-                //     </div>
-                //   </>
-                // )}>
-                >
+                <InlineEditCard>
                   <h3 className="ng-margin-small-bottom ng-color-mdgray ng-text-uppercase ng-text-display-s ng-text-weight-medium user-profile-section-title">
                     Password reset
                   </h3>
@@ -210,8 +231,24 @@ export function ProfileComponent(props: IProps) {
                     Be sure to check your spam folder if you do not receive the email in a few
                     minutes.
                   </p>
-                  <button className="ng-button ng-button-secondary ng-margin-top" disabled={true}>
-                    Send reset email
+                  <button
+                    className="ng-button ng-button-secondary ng-margin-top"
+                    disabled={
+                      !!REACT_APP_EXTERNAL_IDP_URL ||
+                      resetPasswordState !== RESET_PASSWORD_STATE.INITIAL
+                    }
+                    onClick={sendResetEmail}
+                  >
+                    {resetPasswordState === RESET_PASSWORD_STATE.INITIAL ? (
+                      <span>Send reset email</span>
+                    ) : resetPasswordState === RESET_PASSWORD_STATE.SENDING ? (
+                      <div className="ng-flex">
+                        <Spinner size="mini" position="relative" />
+                        <span>Sending reset email</span>
+                      </div>
+                    ) : (
+                      <span>Email sent</span>
+                    )}
                   </button>
                 </InlineEditCard>
               </div>

diff --git a/packages/earth-map/src/services/users/index.tsx b/packages/earth-map/src/services/users/index.tsx
@@ -88,4 +88,12 @@ export function updateProfile(options = {}) {
   });
 }
 
+export function resetPassword(options = {}) {
+  return service.request({
+    url: `/users/profile/change-password`,
+    method: 'post',
+    data: options,
+  });
+}
+
 export default service;
diff --git a/packages/earth-map/src/styles/_base.scss b/packages/earth-map/src/styles/_base.scss
@@ -92,3 +92,7 @@ body {
 .ng-color-primary {
   color: $marapp-primary-color;
 }
+
+.ng-background-success {
+  background: linear-gradient(0deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), $marapp-color-success;
+}
diff --git a/packages/earth-map/src/styles/config.scss b/packages/earth-map/src/styles/config.scss
@@ -21,7 +21,7 @@ $marapp-primary-font: 'Roboto';
 $marapp-secondary-font: 'Roboto';
 $marapp-icon-font: 'icon-font';
 
-$marapp-color-sucess: #1EBE28!default;
+$marapp-color-success: #28A745!default;
 $marapp-color-error: #FC4349!default;
 
 $marapp-primary-color: #0099A1;

diff --git a/packages/earth-shared/src/components/spinner/styles.scss b/packages/earth-shared/src/components/spinner/styles.scss
@@ -24,6 +24,7 @@
 }
 
 $sizes: (
+  "mini": 20px,
   "small": 40px,
   "medium": 60px,
   "large": 80px,