index.js
217 lines
| 1 | import {useState, Fragment} from 'react'; |
| 2 | import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; |
| 3 | import {__} from '@wordpress/i18n'; |
| 4 | import TextControl from '../text-control'; |
| 5 | import Button from '../button'; |
| 6 | |
| 7 | import {loginWithAPI, verifyEmailWithAPI, resetPasswordWithAPI} from './utils'; |
| 8 | import {getWindowData} from '../../utils'; |
| 9 | |
| 10 | import ReCAPTCHA from 'react-google-recaptcha'; |
| 11 | |
| 12 | import './style.scss'; |
| 13 | |
| 14 | const AuthModal = () => { |
| 15 | const [recaptcha, setRecaptcha] = useState(''); |
| 16 | const [email, setEmail] = useState(''); |
| 17 | const [login, setLogin] = useState(''); |
| 18 | const [password, setPassword] = useState(''); |
| 19 | const [loginError, setLoginError] = useState(null); |
| 20 | const [loggingIn, setLoggingIn] = useState(false); |
| 21 | const [verifyingEmail, setVerifyingEmail] = useState(false); |
| 22 | const [emailSent, setEmailSent] = useState(false); |
| 23 | const [emailError, setEmailError] = useState(null); |
| 24 | const [passwordResetEmail, setPasswordResetEmail] = useState(''); |
| 25 | const [showPasswordReset, setShowPasswordReset] = useState(false); |
| 26 | const [passwordResetSent, setPasswordResetSent] = useState(false); |
| 27 | const emailAccessEnabled = getWindowData('emailAccessEnabled'); |
| 28 | const loggedInWithoutDonor = getWindowData('loggedInWithoutDonor'); |
| 29 | const recaptchaKey = getWindowData('recaptchaKey'); |
| 30 | const loginEnabled = getWindowData('loginEnabled'); |
| 31 | |
| 32 | const handleLogin = async (e) => { |
| 33 | e.preventDefault(); |
| 34 | if (login && password) { |
| 35 | setLoggingIn(true); |
| 36 | // eslint-disable-next-line camelcase |
| 37 | const {status, response, body_response} = await loginWithAPI({ |
| 38 | login, |
| 39 | password, |
| 40 | }); |
| 41 | |
| 42 | if (status === 200) { |
| 43 | window.location.reload(); |
| 44 | } else { |
| 45 | setLoggingIn(false); |
| 46 | setLoginError(body_response.message); |
| 47 | if (response === 'unidentified_login') { |
| 48 | setLogin(''); |
| 49 | setPassword(''); |
| 50 | } else { |
| 51 | setPassword(''); |
| 52 | } |
| 53 | } |
| 54 | } |
| 55 | }; |
| 56 | |
| 57 | const handleVerifyEmail = async (e) => { |
| 58 | e.preventDefault(); |
| 59 | if (email) { |
| 60 | setVerifyingEmail(true); |
| 61 | // eslint-disable-next-line camelcase |
| 62 | const {status, body_response} = await verifyEmailWithAPI({ |
| 63 | email, |
| 64 | recaptcha, |
| 65 | }); |
| 66 | |
| 67 | setVerifyingEmail(false); |
| 68 | |
| 69 | if (status === 200) { |
| 70 | setEmailSent(true); |
| 71 | } else { |
| 72 | setEmailError(body_response.message); |
| 73 | } |
| 74 | } |
| 75 | }; |
| 76 | |
| 77 | const handlePasswordReset = async (e) => { |
| 78 | e.preventDefault(); |
| 79 | if (passwordResetEmail) { |
| 80 | // eslint-disable-next-line camelcase |
| 81 | const {status, body_response} = await resetPasswordWithAPI(passwordResetEmail); |
| 82 | |
| 83 | if (status === 200) { |
| 84 | setPasswordResetSent(true); |
| 85 | setShowPasswordReset(false); |
| 86 | } else { |
| 87 | setEmailError(body_response.message); |
| 88 | } |
| 89 | } |
| 90 | }; |
| 91 | |
| 92 | return ( |
| 93 | <div className="give-donor-dashboard__auth-modal"> |
| 94 | <div className="give-donor-dashboard__auth-modal-frame"> |
| 95 | <div className="give-donor-dashboard__auth-modal-heading"> |
| 96 | {__('Log in to see your donor dashboard', 'give')} |
| 97 | </div> |
| 98 | <div className="give-donor-dashboard__auth-modal-content"> |
| 99 | {loggedInWithoutDonor && ( |
| 100 | <div className="give-donor-dashboard__auth-modal-notice"> |
| 101 | {__( |
| 102 | 'The account you are currently logged into the site with does not have any donations associated with it. Donate now or contact the site administrator to associate this WordPress user with an existing donor.', |
| 103 | 'give' |
| 104 | )} |
| 105 | </div> |
| 106 | )} |
| 107 | {emailAccessEnabled && ( |
| 108 | <Fragment> |
| 109 | <div className="give-donor-dashboard__auth-modal-instruction"> |
| 110 | {__( |
| 111 | "For privacy, enter the email address used to make a donation below and we'll send you a link to access your donor dashboard.", |
| 112 | 'give' |
| 113 | )} |
| 114 | </div> |
| 115 | <form |
| 116 | className="give-donor-dashboard__auth-modal-form" |
| 117 | onSubmit={(e) => handleVerifyEmail(e)} |
| 118 | > |
| 119 | <TextControl icon="envelope" value={email} onChange={(value) => setEmail(value)} /> |
| 120 | {recaptchaKey && <ReCAPTCHA sitekey={recaptchaKey} onChange={setRecaptcha} />} |
| 121 | <div className="give-donor-dashboard__auth-modal-row"> |
| 122 | <Button type="submit"> |
| 123 | {emailSent === false ? __('Verify Email', 'give') : __('Email Sent', 'give')} |
| 124 | {emailSent === false && ( |
| 125 | <FontAwesomeIcon |
| 126 | className={ |
| 127 | verifyingEmail ? 'give-donor-dashboard__auth-modal-spinner' : '' |
| 128 | } |
| 129 | icon={verifyingEmail ? 'spinner' : 'chevron-right'} |
| 130 | fixedWidth |
| 131 | /> |
| 132 | )} |
| 133 | </Button> |
| 134 | {emailError && ( |
| 135 | <div className="give-donor-dashboard__auth-modal-error">{emailError}</div> |
| 136 | )} |
| 137 | </div> |
| 138 | </form> |
| 139 | </Fragment> |
| 140 | )} |
| 141 | {emailAccessEnabled && loginEnabled && ( |
| 142 | <div className="give-donor-dashboard__auth-modal-seperator" /> |
| 143 | )} |
| 144 | {loginEnabled && ( |
| 145 | <> |
| 146 | {showPasswordReset && ( |
| 147 | <> |
| 148 | <div className="give-donor-dashboard__auth-modal-instruction"> |
| 149 | {__('Reset your password by entering your email address.', 'give')} |
| 150 | </div> |
| 151 | <form className="give-donor-dashboard__auth-modal-form" onSubmit={(e) => handlePasswordReset(e)}> |
| 152 | <TextControl icon="envelope" value={passwordResetEmail} onChange={(value) => setPasswordResetEmail(value)} /> |
| 153 | <div className="give-donor-dashboard__auth-modal-row"> |
| 154 | <Button type="submit"> |
| 155 | {__('Reset Password', 'give')} |
| 156 | <FontAwesomeIcon |
| 157 | className={loggingIn ? 'give-donor-dashboard__auth-modal-spinner' : ''} |
| 158 | icon={loggingIn ? 'spinner' : 'chevron-right'} |
| 159 | fixedWidth |
| 160 | /> |
| 161 | </Button> |
| 162 | </div> |
| 163 | </form> |
| 164 | </> |
| 165 | )} |
| 166 | {!showPasswordReset && ( |
| 167 | <> |
| 168 | <div className="give-donor-dashboard__auth-modal-instruction"> |
| 169 | {emailAccessEnabled && ( |
| 170 | <Fragment> |
| 171 | {__('Already have an account?', 'give')} <br /> |
| 172 | </Fragment> |
| 173 | )} |
| 174 | {__('Log in below to access your dashboard', 'give')} |
| 175 | </div> |
| 176 | <form className="give-donor-dashboard__auth-modal-form" onSubmit={(e) => handleLogin(e)}> |
| 177 | <TextControl icon="user" value={login} onChange={(value) => setLogin(value)} /> |
| 178 | <TextControl |
| 179 | icon="lock" |
| 180 | type="password" |
| 181 | value={password} |
| 182 | onChange={(value) => setPassword(value)} |
| 183 | /> |
| 184 | <div className="give-donor-dashboard__auth-modal-row"> |
| 185 | <Button type="submit"> |
| 186 | {__('Log in', 'give')} |
| 187 | <FontAwesomeIcon |
| 188 | className={loggingIn ? 'give-donor-dashboard__auth-modal-spinner' : ''} |
| 189 | icon={loggingIn ? 'spinner' : 'chevron-right'} |
| 190 | fixedWidth |
| 191 | /> |
| 192 | </Button> |
| 193 | <Button type="button" onClick={() => setShowPasswordReset(true)}>{__('Forgot Password?', 'give')}</Button> |
| 194 | {loginError && ( |
| 195 | <div className="give-donor-dashboard__auth-modal-error">{loginError}</div> |
| 196 | )} |
| 197 | </div> |
| 198 | </form> |
| 199 | </> |
| 200 | )} |
| 201 | {passwordResetSent && ( |
| 202 | <> |
| 203 | <div className="give-donor-dashboard__auth-modal-instruction"> |
| 204 | {__('Instructions for resetting your password have been sent to you email.', 'give')} |
| 205 | </div> |
| 206 | </> |
| 207 | )} |
| 208 | </> |
| 209 | )} |
| 210 | </div> |
| 211 | </div> |
| 212 | </div> |
| 213 | ); |
| 214 | }; |
| 215 | |
| 216 | export default AuthModal; |
| 217 |