| 1 |
import { Spinner, Button } from '@wordpress/components' |
| 2 |
import { useState, useEffect, useRef } from '@wordpress/element' |
| 3 |
import { __ } from '@wordpress/i18n' |
| 4 |
import { Icon } from '@wordpress/icons' |
| 5 |
import classNames from 'classnames' |
| 6 |
import { General } from '@library/api/General' |
| 7 |
import { User as UserApi } from '@library/api/User' |
| 8 |
import { useIsDevMode } from '@library/hooks/helpers' |
| 9 |
import { useUserStore } from '@library/state/User' |
| 10 |
import { user } from '../../icons' |
| 11 |
import { success as successIcon } from '../../icons' |
| 12 |
|
| 13 |
export default function LoginInterface({ actionCallback, initialFocus }) { |
| 14 |
const loggedIn = useUserStore((state) => state.apiKey.length) |
| 15 |
const [email, setEmail] = useState('') |
| 16 |
const [apiKey, setApiKey] = useState('') |
| 17 |
const [feedback, setFeedback] = useState('') |
| 18 |
const [feedbackType, setFeedbackType] = useState('info') |
| 19 |
const [isWorking, setIsWorking] = useState(false) |
| 20 |
const [success, setSuccess] = useState(false) |
| 21 |
const viewPatternsButtonRef = useRef(null) |
| 22 |
const licenseKeyRef = useRef(null) |
| 23 |
const devMode = useIsDevMode() |
| 24 |
|
| 25 |
useEffect(() => { |
| 26 |
setEmail(useUserStore.getState().email) |
| 27 |
// This will reset the default error state to info |
| 28 |
return () => setFeedbackType('info') |
| 29 |
}, []) |
| 30 |
|
| 31 |
useEffect(() => { |
| 32 |
success && viewPatternsButtonRef?.current?.focus() |
| 33 |
}, [success]) |
| 34 |
|
| 35 |
const logout = () => { |
| 36 |
setApiKey('') |
| 37 |
useUserStore.setState({ apiKey: '' }) |
| 38 |
setTimeout(() => { |
| 39 |
licenseKeyRef?.current?.focus() |
| 40 |
}, 0) |
| 41 |
} |
| 42 |
|
| 43 |
const confirmKey = async (event) => { |
| 44 |
event.preventDefault() |
| 45 |
setIsWorking(true) |
| 46 |
setFeedback('') |
| 47 |
const { token, error, exception, message } = await UserApi.authenticate( |
| 48 |
email, |
| 49 |
apiKey, |
| 50 |
) |
| 51 |
|
| 52 |
if (typeof message !== 'undefined') { |
| 53 |
setFeedbackType('error') |
| 54 |
setIsWorking(false) |
| 55 |
setFeedback( |
| 56 |
message?.length |
| 57 |
? message |
| 58 |
: 'Error: Are you interacting with the wrong server?', |
| 59 |
) |
| 60 |
return |
| 61 |
} |
| 62 |
|
| 63 |
if (error || exception) { |
| 64 |
setFeedbackType('error') |
| 65 |
setIsWorking(false) |
| 66 |
setFeedback(error?.length ? error : exception) |
| 67 |
return |
| 68 |
} |
| 69 |
|
| 70 |
if (!token || typeof token !== 'string') { |
| 71 |
setFeedbackType('error') |
| 72 |
setIsWorking(false) |
| 73 |
setFeedback(__('Something went wrong', 'extendify')) |
| 74 |
return |
| 75 |
} |
| 76 |
|
| 77 |
setFeedbackType('success') |
| 78 |
setFeedback('Success!') |
| 79 |
setSuccess(true) |
| 80 |
setIsWorking(false) |
| 81 |
useUserStore.setState({ |
| 82 |
email: email, |
| 83 |
apiKey: token, |
| 84 |
}) |
| 85 |
} |
| 86 |
|
| 87 |
if (success) { |
| 88 |
return ( |
| 89 |
<section className="space-y-6 p-6 text-center flex flex-col items-center"> |
| 90 |
<Icon icon={successIcon} size={148} /> |
| 91 |
<p className="text-center text-lg font-semibold m-0 text-extendify-black"> |
| 92 |
{__("You've signed in to Extendify", 'extendify')} |
| 93 |
</p> |
| 94 |
<Button |
| 95 |
ref={viewPatternsButtonRef} |
| 96 |
className="cursor-pointer rounded bg-extendify-main p-2 px-4 text-center text-white" |
| 97 |
onClick={actionCallback}> |
| 98 |
{__('View patterns', 'extendify')} |
| 99 |
</Button> |
| 100 |
</section> |
| 101 |
) |
| 102 |
} |
| 103 |
|
| 104 |
if (loggedIn) { |
| 105 |
return ( |
| 106 |
<section className="w-full space-y-6 p-6"> |
| 107 |
<p className="text-base m-0 text-extendify-black"> |
| 108 |
{__('Account', 'extendify')} |
| 109 |
</p> |
| 110 |
<div className="flex items-center justify-between"> |
| 111 |
<div className="-ml-2 flex items-center space-x-2"> |
| 112 |
<Icon icon={user} size={48} /> |
| 113 |
<p className="text-extendify-black"> |
| 114 |
{email?.length |
| 115 |
? email |
| 116 |
: __('Logged In', 'extendify')} |
| 117 |
</p> |
| 118 |
</div> |
| 119 |
{devMode && ( |
| 120 |
<Button |
| 121 |
className="cursor-pointer rounded bg-extendify-main px-4 py-3 text-center text-white hover:bg-extendify-main-dark" |
| 122 |
onClick={logout}> |
| 123 |
{__('Sign out', 'extendify')} |
| 124 |
</Button> |
| 125 |
)} |
| 126 |
</div> |
| 127 |
</section> |
| 128 |
) |
| 129 |
} |
| 130 |
|
| 131 |
return ( |
| 132 |
<section className="space-y-6 p-6 text-left"> |
| 133 |
<div> |
| 134 |
<p className="text-center text-lg font-semibold m-0 text-extendify-black"> |
| 135 |
{__('Sign in to Extendify', 'extendify')} |
| 136 |
</p> |
| 137 |
<p className="space-x-1 text-center text-sm m-0 text-extendify-gray"> |
| 138 |
<span>{__("Don't have an account?", 'extendify')}</span> |
| 139 |
<a |
| 140 |
href={`https://extendify.com/pricing?utm_source=${window.extendifyData.sdk_partner}&utm_medium=library&utm_campaign=sign-in-form&utm_content=sign-up`} |
| 141 |
target="_blank" |
| 142 |
onClick={async () => |
| 143 |
await General.ping( |
| 144 |
'sign-up-link-from-login-modal-click', |
| 145 |
) |
| 146 |
} |
| 147 |
className="underline hover:no-underline text-extendify-gray" |
| 148 |
rel="noreferrer"> |
| 149 |
{__('Sign up', 'extendify')} |
| 150 |
</a> |
| 151 |
</p> |
| 152 |
</div> |
| 153 |
<form |
| 154 |
onSubmit={confirmKey} |
| 155 |
className="flex flex-col items-center justify-center space-y-2"> |
| 156 |
<div className="flex items-center"> |
| 157 |
<label className="sr-only" htmlFor="extendify-login-email"> |
| 158 |
{__('Email address', 'extendify')} |
| 159 |
</label> |
| 160 |
<input |
| 161 |
ref={initialFocus} |
| 162 |
id="extendify-login-email" |
| 163 |
name="extendify-login-email" |
| 164 |
style={{ minWidth: '320px' }} |
| 165 |
type="email" |
| 166 |
className="w-full rounded border-2 p-2" |
| 167 |
placeholder={__('Email address', 'extendify')} |
| 168 |
value={email.length ? email : ''} |
| 169 |
onChange={(event) => setEmail(event.target.value)} |
| 170 |
/> |
| 171 |
</div> |
| 172 |
<div className="flex items-center"> |
| 173 |
<label |
| 174 |
className="sr-only" |
| 175 |
htmlFor="extendify-login-license"> |
| 176 |
{__('License key', 'extendify')} |
| 177 |
</label> |
| 178 |
<input |
| 179 |
ref={licenseKeyRef} |
| 180 |
id="extendify-login-license" |
| 181 |
name="extendify-login-license" |
| 182 |
style={{ minWidth: '320px' }} |
| 183 |
type="text" |
| 184 |
className="w-full rounded border-2 p-2" |
| 185 |
placeholder={__('License key', 'extendify')} |
| 186 |
value={apiKey} |
| 187 |
onChange={(event) => setApiKey(event.target.value)} |
| 188 |
/> |
| 189 |
</div> |
| 190 |
<div className="flex justify-center pt-2"> |
| 191 |
<button |
| 192 |
type="submit" |
| 193 |
className="relative flex w-72 max-w-full cursor-pointer justify-center rounded bg-extendify-main p-2 py-3 text-center text-base text-white hover:bg-extendify-main-dark "> |
| 194 |
<span>{__('Sign In', 'extendify')}</span> |
| 195 |
{isWorking && ( |
| 196 |
<div className="absolute right-2.5"> |
| 197 |
<Spinner /> |
| 198 |
</div> |
| 199 |
)} |
| 200 |
</button> |
| 201 |
</div> |
| 202 |
{feedback && ( |
| 203 |
<div |
| 204 |
className={classNames({ |
| 205 |
'border-gray-900 text-gray-900': |
| 206 |
feedbackType === 'info', |
| 207 |
'border-wp-alert-red text-wp-alert-red': |
| 208 |
feedbackType === 'error', |
| 209 |
'border-extendify-main text-extendify-main': |
| 210 |
feedbackType === 'success', |
| 211 |
})}> |
| 212 |
{feedback} |
| 213 |
</div> |
| 214 |
)} |
| 215 |
<div className="pt-4 text-center"> |
| 216 |
<a |
| 217 |
target="_blank" |
| 218 |
rel="noreferrer" |
| 219 |
href={`https://extendify.com/guides/sign-in?utm_source=${window.extendifyData.sdk_partner}&utm_medium=library&utm_campaign=sign-in-form&utm_content=need-help`} |
| 220 |
onClick={async () => |
| 221 |
await General.ping( |
| 222 |
'need-help-link-from-login-modal-click', |
| 223 |
) |
| 224 |
} |
| 225 |
className="underline hover:no-underline text-sm text-extendify-gray"> |
| 226 |
{__('Need Help?', 'extendify')} |
| 227 |
</a> |
| 228 |
</div> |
| 229 |
</form> |
| 230 |
</section> |
| 231 |
) |
| 232 |
} |
| 233 |
|
