| 1 |
import { useUserStore } from '../state/User' |
| 2 |
import { useState, useEffect, useRef } from '@wordpress/element' |
| 3 |
import { User as UserApi } from '../api/User' |
| 4 |
import { __ } from '@wordpress/i18n' |
| 5 |
import classNames from 'classnames' |
| 6 |
import { Spinner, Button } from '@wordpress/components' |
| 7 |
|
| 8 |
import { Icon } from '@wordpress/icons' |
| 9 |
import { user } from './icons/' |
| 10 |
import { success as successIcon } from './icons/' |
| 11 |
import { useIsDevMode } from '../hooks/helpers' |
| 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="w-80 space-y-8 text-center pt-2 pb-4"> |
| 90 |
<Icon icon={successIcon} size={148} /> |
| 91 |
<p className="text-lg text-extendify-black text-center leading-extra-tight font-semibold"> |
| 92 |
{__("You've signed in to Extendify", 'extendify')} |
| 93 |
</p> |
| 94 |
<Button |
| 95 |
ref={viewPatternsButtonRef} |
| 96 |
className="px-4 p-2 cursor-pointer text-center rounded bg-extendify-main text-white" |
| 97 |
onClick={actionCallback}> |
| 98 |
{__('View patterns', 'extendify')} |
| 99 |
</Button> |
| 100 |
</section> |
| 101 |
) |
| 102 |
} |
| 103 |
|
| 104 |
if (loggedIn) { |
| 105 |
return ( |
| 106 |
<section className="space-y-8 w-full pb-2"> |
| 107 |
<p className="text-base text-extendify-black leading-extra-tight"> |
| 108 |
{__('Account', 'extendify')} |
| 109 |
</p> |
| 110 |
<div className="flex justify-between items-center"> |
| 111 |
<div className="flex items-center space-x-2 -ml-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="px-4 py-3 cursor-pointer text-center rounded bg-extendify-main hover:bg-extendify-main-dark text-white" |
| 122 |
onClick={logout}> |
| 123 |
{__('Sign out', 'extendify')} |
| 124 |
</Button> |
| 125 |
)} |
| 126 |
</div> |
| 127 |
</section> |
| 128 |
) |
| 129 |
} |
| 130 |
|
| 131 |
return ( |
| 132 |
<section className="w-80 text-left space-y-8 pb-6"> |
| 133 |
<div> |
| 134 |
<p className="text-lg text-extendify-black text-center leading-extra-tight font-semibold"> |
| 135 |
{__('Sign in to Extendify', 'extendify')} |
| 136 |
</p> |
| 137 |
<p className="text-sm text-extendify-gray text-center space-x-1 leading-extra-tight"> |
| 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 |
className="underline hover:no-underline text-extendify-gray" |
| 143 |
rel="noreferrer"> |
| 144 |
{__('Sign up', 'extendify')} |
| 145 |
</a> |
| 146 |
</p> |
| 147 |
</div> |
| 148 |
<form onSubmit={confirmKey} className="space-y-2"> |
| 149 |
<div className="flex items-center"> |
| 150 |
<label className="sr-only" htmlFor="extendify-login-email"> |
| 151 |
{__('Email address', 'extendify')} |
| 152 |
</label> |
| 153 |
<input |
| 154 |
ref={initialFocus} |
| 155 |
id="extendify-login-email" |
| 156 |
name="extendify-login-email" |
| 157 |
type="email" |
| 158 |
className="border-2 p-2 w-full rounded" |
| 159 |
placeholder={__('Email address', 'extendify')} |
| 160 |
value={email.length ? email : ''} |
| 161 |
onChange={(event) => setEmail(event.target.value)} |
| 162 |
/> |
| 163 |
</div> |
| 164 |
<div className="flex items-center"> |
| 165 |
<label |
| 166 |
className="sr-only" |
| 167 |
htmlFor="extendify-login-license"> |
| 168 |
{__('License key', 'extendify')} |
| 169 |
</label> |
| 170 |
<input |
| 171 |
ref={licenseKeyRef} |
| 172 |
id="extendify-login-license" |
| 173 |
name="extendify-login-license" |
| 174 |
type="text" |
| 175 |
className="border-2 p-2 w-full rounded" |
| 176 |
placeholder={__('License key', 'extendify')} |
| 177 |
value={apiKey} |
| 178 |
onChange={(event) => setApiKey(event.target.value)} |
| 179 |
/> |
| 180 |
</div> |
| 181 |
<div className="pt-2 flex justify-center"> |
| 182 |
<button |
| 183 |
type="submit" |
| 184 |
className="relative p-2 py-3 w-72 max-w-full flex justify-center cursor-pointer text-center rounded bg-extendify-main hover:bg-extendify-main-dark text-base text-white "> |
| 185 |
<span>{__('Sign In', 'extendify')}</span> |
| 186 |
{isWorking && ( |
| 187 |
<div className="absolute right-2.5"> |
| 188 |
<Spinner /> |
| 189 |
</div> |
| 190 |
)} |
| 191 |
</button> |
| 192 |
</div> |
| 193 |
{feedback && ( |
| 194 |
<div |
| 195 |
className={classNames({ |
| 196 |
'border-gray-900 text-gray-900': |
| 197 |
feedbackType === 'info', |
| 198 |
'border-wp-alert-red text-wp-alert-red': |
| 199 |
feedbackType === 'error', |
| 200 |
'border-extendify-main text-extendify-main': |
| 201 |
feedbackType === 'success', |
| 202 |
})}> |
| 203 |
{feedback} |
| 204 |
</div> |
| 205 |
)} |
| 206 |
<div className="text-center pt-4"> |
| 207 |
<a |
| 208 |
target="_blank" |
| 209 |
rel="noreferrer" |
| 210 |
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`} |
| 211 |
className="underline hover:no-underline text-sm text-extendify-gray"> |
| 212 |
{__('Need Help?', 'extendify')} |
| 213 |
</a> |
| 214 |
</div> |
| 215 |
</form> |
| 216 |
</section> |
| 217 |
) |
| 218 |
} |
| 219 |
|
