/* globals React, Firebase, Hedgehog */ const useState = React.useState; const useEffect = React.useEffect; const useRef = React.useRef; const AUTH_TABLE = "Authentications"; const USER_TABLE = "Users"; const firebase = new Firebase(); const setAuthFn = async obj => firebase.createIfNotExists(AUTH_TABLE, obj.lookupKey, obj); const setUserFn = async obj => firebase.createIfNotExists(USER_TABLE, obj.username, obj); const getFn = async obj => firebase.readRecordFromFirebase(AUTH_TABLE, obj); const hedgehog = new Hedgehog(getFn, setAuthFn, setUserFn); const messages = { signedIn: { header: `You're Signed In!`, body: `You just created an account using Hedgehog! Now, if you log out you will be able to sign back in with the same credentials.` }, signedOut: { header: `You're Not Signed In`, body: `You are currently unauthenticated / signed out.`, instructions: `Go ahead and create an account just like you would a centralized service.` }, invalid: `Incorrect username or password. Try again.`, empty: `Please enter a username and password.`, exists: `Account already exists, please try logging in.`, mismatched: `The passwords you entered don't match.` }; const Tabs = props => { return (

{props.tabs.map((tab, i) => (

props.setActiveTab(i)} className={i === props.activeTab ? "tab active" : "tab"} > {tab}

))}

{props.children[props.activeTab]}

); }; const Pill = props => { const styles = props.text === "authenticated" ? "pill green" : "pill red"; return

{props.text}

; }; const Spinner = props => { return (

); }; const Button = props => { let styles = "button"; if (props.fullWidth) styles += " fullWidth"; if (props.loading) styles += " loading"; return (

(props.loading ? {} : props.onClick())} className={styles} > {props.loading ? : null} {props.text}

); }; const Link = props => { return (

{props.text}

); }; const App = props => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [passwordConfirmation, setPasswordConfirmation] = useState(""); const [signedIn, setSignedIn] = useState(false); const [activeTab, setActiveTab] = useState(0); const [errorMessage, setErrorMessage] = useState(""); const [loading, setLoading] = useState(false); const checkWalletStatus = () => { if (hedgehog.isLoggedIn()) { setSignedIn(true); // Retrieve wallet with: hedgehog.getWallet() } else { if ( hedgehog && hedgehog.walletExistsLocally && hedgehog.walletExistsLocally() ) { setSignedIn(true); // Retrieve wallet with: hedgehog.restoreLocalWallet() } else { setSignedIn(false); } } }; const handleSignUp = async event => { if (password !== passwordConfirmation) { setErrorMessage(messages.mismatched); } else if (!password || !username || !passwordConfirmation) { setErrorMessage(messages.empty); } else { setLoading(true); setErrorMessage(""); try { await hedgehog.signUp(username, password); checkWalletStatus(); } catch (e) { console.error(e); setErrorMessage(messages.exists); } setLoading(false); } }; const handleLogin = async event => { setErrorMessage(""); setLoading(true); try { await hedgehog.login(username, password); checkWalletStatus(); } catch (e) { console.error(e); setErrorMessage(messages.invalid); } setLoading(false); }; const changeTab = i => { setErrorMessage(""); setActiveTab(i); }; const logout = () => { hedgehog.logout(); setUsername(""); setPassword(""); setPasswordConfirmation(""); checkWalletStatus(); }; const registerEnterKey = () => { document.onkeydown = e => { e = e || window.event; switch (e.which || e.keyCode) { case 13: if (!signedIn && activeTab === 0) { handleSignUp(); } if (!signedIn && activeTab === 1) { handleLogin(); } break; } }; }; useEffect(() => { registerEnterKey(); checkWalletStatus(); }); return (

{signedIn ? (

{messages.signedIn.header}

{messages.signedIn.body}

Your wallet address is:

{hedgehog.getWallet().getAddressString()}

) : ( <> {/* Create Account Tab */}

setUsername(e.target.value)} /> setPassword(e.target.value)} type="password" />

setPasswordConfirmation(e.target.value)} type="password" />

{errorMessage}

{/* Log In Tab */}

setUsername(e.target.value)} />

setPassword(e.target.value)} type="password" />

{errorMessage}

{messages.signedOut.header}

{messages.signedOut.body}

{messages.signedOut.instructions}

)}

); }; const domContainer = document.querySelector("#root"); ReactDOM.render(React.createElement(App), domContainer);

Hedgehog Firebase Demo

Hedgehog Firebase Demo