leumas-private-shared/src/LeumasID/HasIdValidation.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useState } from 'react';
import LeumasIDRender from './LeumasIDRender';
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
import MultiPageForm from '../Forms/MultiPageForm';
import { createLeumasIdForm } from '../Forms/FormTemplates';
import Login from "../Pages/Login/Login"

const HasIdValidation = ({ leumasId, setLeumasId, setMode }) => {
    const auth = useAuthUser();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const hasLeumasID = leumasId && Object.keys(leumasId).length > 0;
    const isLoggedIn = auth?.id || auth?.user?._id;

    const navigateToLogin = () => { setMode(<Login />) };

    const handleCreateLeumasIdClick = () => {
        if (isLoggedIn) {
            // Open the modal instead of changing the mode
            setIsModalOpen(true);
        } else {
            navigateToLogin();
        }
    };

    return (
        <>
            {hasLeumasID ? (
                <LeumasIDRender id={leumasId} />
            ) : (
                <div className="text-center">
                    <p className="mb-2">You do not have a Leumas ID</p>
                    <button 
                        className="px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600"
                        onClick={handleCreateLeumasIdClick}
                    >
                        Create Leumas ID
                    </button>
                </div>
            )}

            {isModalOpen && (
                <div className="fixed top-0 left-0 w-full h-full bg-blue-400 z-50 p-4">
                    <button 
                        className="absolute top-0 right-0 m-4 text-2xl font-bold"
                        onClick={() => setIsModalOpen(false)}
                    >
                        &times;
                    </button>
                    <MultiPageForm 
                        model={"LeumasId"}
                        endpoint={"LeumasAPI"}
                        token={auth?.token || auth?.authUserState?.token}
                        extraData={{}}
                        AIMode={false}
                        isEditMode={false}
                        IDMode={true}
                        pages={createLeumasIdForm(isLoggedIn)}
                        selectedItemId={auth?.id || auth?.user?._id}
                    />
                </div>
            )}
        </>
    );
};

export default HasIdValidation;