balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

LoginInterface.js (4327B)

      1 import { useUserStore } from '../state/User'
      2 import { useState, useEffect } from '@wordpress/element'
      3 import { User as UserApi } from '../api/User'
      4 import { __ } from '@wordpress/i18n'
      5 import { useGlobalStore } from '../state/GlobalState'
      6 import classNames from 'classnames'
      7 
      8 export default function LoginInterface() {
      9     const [apiKey, setApiKey] = useState(useUserStore.getState().apiKey)
     10     const [email, setEmail] = useState(useUserStore.getState().email)
     11     const [feedback, setFeedback] = useState('')
     12     const [feedbackType, setFeedbackType] = useState('info')
     13     const [possibleEmail, setPossibleEmail] = useState('')
     14 
     15     // This will reset the default error state to info
     16     useEffect(() => () => setFeedbackType('info'), [])
     17 
     18     const confirmKey = async (event) => {
     19         event.preventDefault()
     20         setFeedback('')
     21         const emailToSend = email.length
     22             ? email
     23             : possibleEmail
     24         const { token, error, exception, message } = await UserApi.authenticate(emailToSend, apiKey)
     25 
     26         if (typeof message !== 'undefined') {
     27             setFeedbackType('error')
     28             return setFeedback(message.length
     29                 ? message
     30                 : 'Error: Are you interacting with the wrong server?')
     31         }
     32 
     33         if (error || exception) {
     34             setFeedbackType('error')
     35             return setFeedback(error.length
     36                 ? error
     37                 : exception)
     38         }
     39 
     40         if (!token || typeof token !== 'string') {
     41             setFeedbackType('error')
     42             return setFeedback(__('Something went wrong', 'extendify-sdk'))
     43         }
     44 
     45         setFeedbackType('success')
     46         setFeedback('Success!')
     47         await new Promise((resolve) => setTimeout(resolve, 1500))
     48         useUserStore.setState({
     49             // email: emailToSend,
     50             apiKey: token,
     51         })
     52         useGlobalStore.setState({
     53             currentPage: 'main',
     54         })
     55     }
     56 
     57     useEffect(() => {
     58         if (!email) {
     59             UserApi.getMeta('user_email')
     60                 .then((value) => setPossibleEmail(value))
     61         }
     62     }, [email])
     63 
     64     return <section className="w-96 text-left md:-mt-32">
     65         <h1 className="border-b border-gray-900 mb-12 pb-4">{__('Welcome', 'extendify-sdk')}</h1>
     66         {feedback &&
     67             <div className={classNames({
     68                 'border-b pb-6 mb-6 -mt-6': true,
     69                 'border-gray-900 text-gray-900': feedbackType === 'info',
     70                 'border-wp-alert-red text-wp-alert-red': feedbackType === 'error',
     71                 'border-extendify-main text-extendify-main': feedbackType === 'success',
     72             })}>
     73                 {feedback}
     74             </div>
     75         }
     76         <form onSubmit={confirmKey} className=" space-y-6">
     77             <div className="flex items-center">
     78                 <label htmlFor="extendifysdk-login-email" className="w-32 font-bold">
     79                     {__('Email:', 'extendify-sdk')}
     80                 </label>
     81                 <input
     82                     id="extendifysdk-login-email"
     83                     name="extendifysdk-login-email"
     84                     type="email"
     85                     className="border px-2 w-full"
     86                     placeholder="Email"
     87                     value={email.length
     88                         ? email
     89                         : possibleEmail}
     90                     onChange={(event) => setEmail(event.target.value)}/>
     91             </div>
     92             <div className="flex items-center">
     93                 <label htmlFor="extendifysdk-login-license" className="w-32 font-bold">
     94                     {__('License:', 'extendify-sdk')}
     95                 </label>
     96                 <input
     97                     id="extendifysdk-login-license"
     98                     name="extendifysdk-login-email"
     99                     type="text"
    100                     className="border px-2 w-full"
    101                     placeholder="License key"
    102                     value={apiKey}
    103                     onChange={(event) => setApiKey(event.target.value)}/>
    104             </div>
    105             <div className="flex justify-end">
    106                 <button
    107                     type="submit"
    108                     className="button-extendify-main p-3 px-4">
    109                     {__('Sign in', 'extendify-sdk')}
    110                 </button>
    111             </div>
    112         </form>
    113     </section>
    114 }