Merge pull request #142 from SailingSteve/steveStaffClientFeb7-132pm

Google User Password Reset now working

Author: DaleMcGrew

package-lock.json

@@ -107,6 +107,7 @@
     "d3-zoom": "^3.0.0",
     "dayjs": "^1.11.13",
     "depcheck": "^1.4.7",
+    "file-saver": "^2.0.5",
     "fs-extra": "^10.0.0",
     "glob": "^9.0.0",
     "https-browserify": "^1.0.0",
@@ -129,6 +130,7 @@
     "react-google-recaptcha-v3": "^1.10.1",
     "react-gtm-module": "^2.0.11",
     "react-helmet-async": "^2.0.5",
+    "react-papaparse": "^4.4.0",
     "react-phone-number-input": "^3.4.3",
     "react-router": "^7.1.1",
     "react-text-truncate": "^0.19.0",
@@ -138,10 +140,7 @@
     "styled-components": "^6.1.15",
     "topojson-client": "^3.1.0",
     "use-file-picker": "^2.1.2",
-    "validator": "^13.12.0",
-    "react-papaparse": "^4.4.0",
-    "file-saver": "^2.0.5",
-    "react-router-dom": "^7.1.1"
+    "validator": "^13.12.0"
   },
   "bugs": {
     "url": "https://github.com/wevote/weconnect/issues"

package.json

@@ -4,8 +4,7 @@ import { withStyles } from '@mui/styles';
 import { useQueryClient } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router';
 import styled from 'styled-components';
 import standardBoxShadow from '../../common/components/Style/standardBoxShadow';
 import { hasIPhoneNotch } from '../../common/utils/cordovaUtils';

src/js/components/Navigation/HeaderBar.jsx

@@ -1,27 +1,27 @@
-import { Button, Checkbox, FormControl, FormControlLabel, TextField } from '@mui/material';
-import { Launch } from '@mui/icons-material';
+import { ErrorOutline, Launch } from '@mui/icons-material';
+import { Alert, Button, Checkbox, FormControl, FormControlLabel, TextField } from '@mui/material';
 import { withStyles } from '@mui/styles';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import PropTypes from 'prop-types';
 import React, { Suspense, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
+import styled from 'styled-components';
+import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
+import generateRandomString from '../../common/utils/generateRandomString';
 import { renderLog } from '../../common/utils/logging';
 import webAppConfig from '../../config';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import { viewerCanSeeOrDo } from '../../models/AuthModel';
-import { ActionOption, ActionOptionContainerLeft8, ActionOptionContainerOverflow, ActionOptionList } from '../Style/actionOptionStyles';
 import makeRequestParams from '../../react-query/makeRequestParams';
 import { usePersonSaveMutation } from '../../react-query/mutations';
+import weConnectQueryFn, { METHOD } from '../../react-query/WeConnectQuery';
+import { ActionOption, ActionOptionContainerLeft8, ActionOptionContainerOverflow, ActionOptionList } from '../Style/actionOptionStyles';
 import { SpanWithLinkStyle } from '../Style/linkStyles';
 import EmailOfficialManager from './EmailOfficialManager';
-import DesignTokenColors from '../../common/components/Style/DesignTokenColors';
-import weConnectQueryFn, { METHOD } from '../../react-query/WeConnectQuery';
-import generateRandomString from '../../common/utils/generateRandomString';
 
 
 dayjs.extend(utc);
@@ -40,6 +40,7 @@ const EditPersonForm = ({ classes }) => {
   const [saveButtonActive, setSaveButtonActive] = useState(false);
   const [showEmailPreferred, setShowEmailPreferred] = useState(false);
   const [showFirstNamePreferred, setShowFirstNamePreferred] = useState(false);
+  const [emailError, setEmailError] = useState('');
   const [showCompletedOnboardingCheckboxes, setShowCompletedOnboardingCheckboxes] = useState(false);
   const [initialPerson] = useState(getAppContextValue('profileDrawerPerson'));
   // const [initialPerson] = useState(useGetPersonById(getAppContextValue('profileDrawerPersonId')));
@@ -186,20 +187,32 @@ const EditPersonForm = ({ classes }) => {
   // console.log('activePerson:', activePerson);
 
 
-  const wevoteUserClick = async () => {
-    const primaryEmail = activePerson.emailOfficial;
+  const resetWeVoteEducationClick = async () => {
+    setEmailError('');
+    const { emailOfficial, emailPersonal, firstName } = activePerson;
+    if (!emailOfficial.includes('wevoteeducation.org') && !emailPersonal.includes('wevoteeducation.org')) {
+      setEmailError(`"${firstName}" does not have a wevoteeducation.org email as either their official (${emailOfficial}) or private (${emailOfficial}) address`);
+      return;
+    }
+    const emailToChange = emailOfficial.includes('wevoteeducation.org') ? emailOfficial : emailPersonal;
     const newPassword = generateRandomString(12);
-    // console.log(`deletewevoteuserpassword ${primaryEmail} ${newPassword}`);
+    // console.log(`deletewevoteuserpassword ${emailToChange} ${newPassword}`);
     const data = await weConnectQueryFn('google-reset-user-password', {
-      primaryEmail,
+      primaryEmail: emailToChange,
       newPassword,
     }, METHOD.POST);
     // console.log('reset wevote password', data);
     if (data.success) {
-      setNewPasswordNotification(`Thank you for requesting that your password be reset. These are your new sign in credentials: \n https://team.wevote.org \n user: ${primaryEmail} \n pass: ${newPassword}`);
+      setNewPasswordNotification(`Thank you for requesting that your password be reset. These are your new sign in credentials: \n https://team.wevote.org \n user: ${emailToChange} \n pass: ${newPassword}`);
       setShowNewPasswordNotification(true);
     } else {
-      console.error('Failed to reset password:', data);
+      // console.error('Failed to reset password:', data);
+      console.log(`Reset password API error: ${data.error}`);
+      if (data.error.startsWith('Missing required')) {
+        setEmailError(`'${emailToChange}' is not an existing valid @wevoteeducation.org email address.`);
+      } else {
+        setEmailError(`${data.error}, google api server code: ${data.errorCode}`);
+      }
     }
   };
 
@@ -552,7 +565,7 @@ const EditPersonForm = ({ classes }) => {
           classes={viewerIsOnHrTeam ? { root: classes.showThisField } : { root: classes.hideThisField }}
           disabled={!emailOfficialCanBeEdited}
           id="emailOfficialToBeSaved"
-          label={`Email Address, ${webAppConfig.ORGANIZATION_NAME} Official`}
+          label={<span style={{ paddingRight: '8px' }}>Email Address, {webAppConfig.ORGANIZATION_NAME} Official ({webAppConfig.ORGANIZATION_NAME === 'WeVote' ? '@wevoteeducation.org' : ''})</span>}
           margin="dense"
           name="emailOfficial"
           onChange={(event) => {
@@ -565,9 +578,14 @@ const EditPersonForm = ({ classes }) => {
           value={emailOfficialLocal}
           variant="outlined"
         />
+        {emailError.length > 0 && (
+          <Alert icon={<ErrorOutline fontSize="inherit" />} severity="error">
+            {emailError}
+          </Alert>
+        )}
         <QuickLink>
-          <SpanWithLinkStyle onClick={wevoteUserClick}>
-            Reset WeVote email password
+          <SpanWithLinkStyle onClick={resetWeVoteEducationClick}>
+            Reset Official ({webAppConfig.ORGANIZATION_NAME === 'WeVote' ? '@wevoteeducation.org' : ''}) email password
           </SpanWithLinkStyle>
         </QuickLink>
         {showNewPasswordNotification && (

src/js/components/Person/EditPersonForm.jsx

@@ -112,7 +112,7 @@ const Login = ({ classes }) => {
       setAppContextValue('authenticatedPerson', data.person);
       queryClient.invalidateQueries('get-auth');
       if (data.emailVerified) {
-        passwordFldRef.current.value = '';   // Blank the email field after signing in
+        passwordFldRef.current = '';   // Blank the email field after signing in
         setWarningLine('');
         setAppContextValue('secretCodeVerified', true);
         setAppContextValue('openVerifySecretCodeModalDialog', false);
@@ -150,8 +150,10 @@ const Login = ({ classes }) => {
       setOpenResetPasswordDialog(false);
       setShowCreateStuff(false);
       const per = authPerson.current ? authPerson.current : getAppContextValue('authenticatedPerson');
-      setSuccessLine(`${getFullNamePreferredPerson(per)}, you are signed in!`);
-      passwordFldRef.current.value = '';   // Blank the email field after signing in
+      setWarningLine('');
+      const name = getFullNamePreferredPerson(per);
+      setSuccessLine(name.length ? `${name}, you are signed in!` : 'You are signed in!');
+      passwordFldRef.current = '';   // Blank the email field after signing in
     }
   };
 
@@ -231,7 +233,7 @@ const Login = ({ classes }) => {
 
   const signOutButtonPressed = async () => {
     if (passwordFldRef.current) {
-      passwordFldRef.current.value = '';   // Blank the email field after signing out
+      passwordFldRef.current = '';   // Blank the email field after signing out
     }
     clearSignedInGlobals(setAppContextValue, getAppContextData);
     setOpenResetPasswordDialog(false);
@@ -268,7 +270,7 @@ const Login = ({ classes }) => {
     } else {
       setWarningLine('');
       let errStr = '';
-      const firstName =  firstNameFldRef.current.value;
+      const firstName =  firstNameFldRef?.current?.value;
       const lastName =  lastNameFldRef.current.value;
       const location =  locationFldRef.current.value;
       const emailPersonal =  emailPersonalFldRef.current.value;
@@ -311,7 +313,7 @@ const Login = ({ classes }) => {
 
   // console.log(getAppContextData());
   const isAdmin = viewerCanSeeOrDo(['canAddTeamMemberAnyTeam'], viewerAccessRights);
-  const isAuthSafe = getAppContextValue('isAuthenticated') || false;
+  // const isAuthSafe = getAppContextValue('isAuthenticated') || false;
   let isAuthenticated = false;
   let authenticatedPerson = {};
   if (dataAuth) {

src/js/pages/Login.jsx

@@ -25,7 +25,7 @@ const FastLoad = () => {
 
   useEffect(() => {
     const { location: { hostname } } = window;
-    if (hostname.includes('wevote.org') || webAppConfig.SERVER_IS_SOURCE_OF_TRUTH == true) {
+    if (hostname.includes('wevote.org') || webAppConfig.SERVER_IS_SOURCE_OF_TRUTH === true) {
       setFeatureDisabled(true);
     }
   }, []);