%PDF-
%PDF-
Mini Shell
Mini Shell
import { useUserStore } from '../state/User'
import { useState, useEffect, useRef } from '@wordpress/element'
import { User as UserApi } from '../api/User'
import { __ } from '@wordpress/i18n'
import classNames from 'classnames'
import { Spinner, Button } from '@wordpress/components'
import { Icon } from '@wordpress/icons'
import { user } from './icons/'
import { success as successIcon } from './icons/'
export default function LoginInterface({ actionCallback, initialFocus }) {
const loggedIn = useUserStore((state) => state.apiKey.length)
const [email, setEmail] = useState('')
const [apiKey, setApiKey] = useState('')
const [feedback, setFeedback] = useState('')
const [feedbackType, setFeedbackType] = useState('info')
const [isWorking, setIsWorking] = useState(false)
const [success, setSuccess] = useState(false)
const viewPatternsButtonRef = useRef(null)
const licenseKeyRef = useRef(null)
useEffect(() => {
setEmail(useUserStore.getState().email)
// This will reset the default error state to info
return () => setFeedbackType('info')
}, [])
useEffect(() => {
success && viewPatternsButtonRef?.current?.focus()
}, [success])
const logout = () => {
setApiKey('')
useUserStore.setState({ apiKey: '' })
setTimeout(() => {
licenseKeyRef?.current?.focus()
}, 0)
}
const confirmKey = async (event) => {
event.preventDefault()
setIsWorking(true)
setFeedback('')
const { token, error, exception, message } = await UserApi.authenticate(
email,
apiKey,
)
if (typeof message !== 'undefined') {
setFeedbackType('error')
setIsWorking(false)
setFeedback(
message.length
? message
: 'Error: Are you interacting with the wrong server?',
)
return
}
if (error || exception) {
setFeedbackType('error')
setIsWorking(false)
setFeedback(error.length ? error : exception)
return
}
if (!token || typeof token !== 'string') {
setFeedbackType('error')
setIsWorking(false)
setFeedback(__('Something went wrong', 'extendify-sdk'))
return
}
setFeedbackType('success')
setFeedback('Success!')
setSuccess(true)
setIsWorking(false)
useUserStore.setState({
email: email,
apiKey: token,
})
}
if (success) {
return (
<section className="w-80 space-y-8 text-center pt-2 pb-4">
<Icon icon={successIcon} size={148} />
<p className="text-lg text-extendify-black text-center leading-extra-tight font-semibold">
{__("You've signed in to Extendify", 'extendify-sdk')}
</p>
<Button
ref={viewPatternsButtonRef}
className="px-4 p-2 cursor-pointer text-center rounded bg-extendify-main text-white"
onClick={actionCallback}>
{__('View patterns', 'extendify-sdk')}
</Button>
</section>
)
}
if (loggedIn) {
return (
<section className="space-y-8 w-full pb-2">
<p className="text-base text-extendify-black leading-extra-tight">
{__('Account', 'extendify-sdk')}
</p>
<div className="flex justify-between items-center">
<div className="flex items-center space-x-2 -ml-2">
<Icon icon={user} size={48} />
<p className="text-extendify-black">
{email?.length
? email
: __('Logged In', 'extendify-sdk')}
</p>
</div>
{window.location.search.indexOf('DEVMODE') > -1 && (
<Button
className="px-4 py-3 cursor-pointer text-center rounded bg-extendify-main hover:bg-extendify-main-dark text-white"
onClick={logout}>
{__('Sign out', 'extendify-sdk')}
</Button>
)}
</div>
</section>
)
}
return (
<section className="w-80 text-left space-y-8 pb-6">
<div>
<p className="text-lg text-extendify-black text-center leading-extra-tight font-semibold">
{__('Sign in to Extendify', 'extendify-sdk')}
</p>
<p className="text-sm text-extendify-gray text-center space-x-1 leading-extra-tight">
<span>{__("Don't have an account?", 'extendify-sdk')}</span>
<a
href={`https://extendify.com/pricing?utm_source=${window.extendifySdkData.sdk_partner}&utm_medium=library&utm_campaign=sign-in-form&utm_content=sign-up`}
target="_blank"
className="underline hover:no-underline text-extendify-gray"
rel="noreferrer">
{__('Sign up', 'extendify-sdk')}
</a>
</p>
</div>
<form onSubmit={confirmKey} className="space-y-2">
<div className="flex items-center">
<label
className="sr-only"
htmlFor="extendifysdk-login-email">
{__('Email address', 'extendify-sdk')}
</label>
<input
ref={initialFocus}
id="extendifysdk-login-email"
name="extendifysdk-login-email"
type="email"
className="border-2 p-2 w-full rounded"
placeholder={__('Email address', 'extendify-sdk')}
value={email.length ? email : ''}
onChange={(event) => setEmail(event.target.value)}
/>
</div>
<div className="flex items-center">
<label
className="sr-only"
htmlFor="extendifysdk-login-license">
{__('License key', 'extendify-sdk')}
</label>
<input
ref={licenseKeyRef}
id="extendifysdk-login-license"
name="extendifysdk-login-license"
type="text"
className="border-2 p-2 w-full rounded"
placeholder={__('License key', 'extendify-sdk')}
value={apiKey}
onChange={(event) => setApiKey(event.target.value)}
/>
</div>
<div className="pt-2 flex justify-center">
<button
type="submit"
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 ">
<span>{__('Sign In', 'extendify-sdk')}</span>
{isWorking && (
<div className="absolute right-2.5">
<Spinner />
</div>
)}
</button>
</div>
{feedback && (
<div
className={classNames({
'border-gray-900 text-gray-900':
feedbackType === 'info',
'border-wp-alert-red text-wp-alert-red':
feedbackType === 'error',
'border-extendify-main text-extendify-main':
feedbackType === 'success',
})}>
{feedback}
</div>
)}
<div className="text-center pt-4">
<a
target="_blank"
rel="noreferrer"
href={`https://extendify.com/guides/sign-in?utm_source=${window.extendifySdkData.sdk_partner}&utm_medium=library&utm_campaign=sign-in-form&utm_content=need-help`}
className="underline hover:no-underline text-sm text-extendify-gray">
{__('Need Help?', 'extendify-sdk')}
</a>
</div>
</form>
</section>
)
}
Zerion Mini Shell 1.0