const { loginApi, accountId, componentOwnerId, onValidLogin, logo } = props; const [hasBootstrapped, setHasBootstrapped] = useState(false); const [hasValidKey, setHasValidKey] = useState(false); const [loading, setLoading] = useState(false); const checkMembership = (accountId) => { return loginApi.getMembers() .then(memberList => memberList.map(member => member.id).includes(accountId)); }; const bootstrap = () => { setLoading(true); loginApi.validateKey() .then(isValidKey => { if (!isValidKey) { console.log("Invalid key"); setHasValidKey(false); return Promise.reject("Invalid key"); } setHasValidKey(true); console.log("Valid key"); return checkMembership(accountId); }) .then(isAlreadyMember => { if (isAlreadyMember) { console.log("Is member"); return true; } console.log("Not a member, attempting to join..."); return loginApi.join().then(() => checkMembership(accountId)); }) .then(isNowMember => { if (isNowMember) { onValidLogin(); } else { console.log("Failed to join"); } }) .catch(error => { console.log("Bootstrap error:", error); }) .finally(() => { setLoading(false); setHasBootstrapped(true); }); }; const join = () => { setLoading(true); loginApi.join() .then(result => { if (result) { setIsMember(true); onValidLogin(); } }) .finally(() => { setLoading(false); }); }; useEffect(() => { if (accountId && !hasBootstrapped && !loading) { bootstrap(); } }, [accountId, hasBootstrapped, loading]); if (loading) { return <Widget src={`${componentOwnerId}/widget/Calimero.Common.Popups.Loading`} props={{ logo }} />; } if (!accountId) { return <Widget src={`${componentOwnerId}/widget/Calimero.Common.Login.LoginPopup`} props={{ logo }} />; } if (!hasValidKey) { return <Widget src={`${componentOwnerId}/widget/Calimero.Common.Login.JoinPopup`} props={{ logo, join: loginApi.login }} />; } return <Widget src={`${componentOwnerId}/widget/Calimero.Common.Popups.Loading`} props={{ logo }} />;