Allow users to sign in from /account

SQ

web/lib/firebase/users.ts

@@ -65,6 +65,7 @@ export function listenForLogin(onUser: (_user: User | null) => void) {
     } else {
       // User logged out; reset to null
       onUser(null)
+      localStorage.removeItem(CACHED_USER_KEY)
     }
   })
 }

web/pages/account.tsx

@@ -1,5 +1,4 @@
-import { useRouter } from 'next/router'
-import { firebaseLogout } from '../lib/firebase/users'
+import { firebaseLogin, firebaseLogout, User } from '../lib/firebase/users'
 import { Header } from '../components/header'
 import { useUser } from '../hooks/use-user'
 import { useState, useEffect } from 'react'
@@ -7,21 +6,9 @@ import { Contract, listContracts } from '../lib/firebase/contracts'
 import { ContractsList } from '../components/contracts-list'
 import { Title } from '../components/title'
 
-export default function Account() {
-  const user = useUser()
-  const router = useRouter()
-  const [contracts, setContracts] = useState<Contract[]>([])
-  useEffect(() => {
-    if (user?.id) {
-      listContracts(user?.id).then(setContracts)
-    }
-  }, [user?.id])
-
+function UserCard(props: { user: User }) {
+  const { user } = props
   return (
-    <div>
-      <Header />
-      <div className="max-w-4xl py-8 mx-auto">
-        <div>
     <div className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
       <figure className="p-6">
         {user?.avatarUrl && (
@@ -31,24 +18,68 @@ export default function Account() {
       <div className="max-w-md card-body">
         <h2 className="card-title font-major-mono">{user?.name}</h2>
         <p>{user?.email}</p>
-              <p>M${user?.balance}</p>
+        <p>M$ {user?.balance}</p>
         <div className="card-actions">
           <button
             className="btn glass rounded-full hover:bg-green-500"
-                  onClick={() => {
-                    firebaseLogout()
-                    router.push('/')
-                  }}
+            onClick={firebaseLogout}
           >
             Sign Out
           </button>
         </div>
       </div>
     </div>
-        </div>
+  )
+}
 
-        <Title text="Your markets" />
-        <ContractsList contracts={contracts} />
+function SignInCard() {
+  return (
+    <div className="card glass lg:card-side shadow-xl hover:shadow-xl text-neutral-content bg-green-600 hover:bg-green-600 transition-all max-w-sm mx-auto my-12">
+      <figure className="p-6">
+        <img
+          src="/logo-icon-white-bg.png"
+          className="rounded-lg shadow-lg w-20 h-20"
+        />
+      </figure>
+      <div className="max-w-md card-body">
+        <h2 className="card-title font-major-mono">Welcome!</h2>
+        <p>Sign in to get started</p>
+        <div className="card-actions">
+          <button
+            className="btn glass rounded-full hover:bg-green-500"
+            onClick={firebaseLogin}
+          >
+            Sign in with Google
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function Account() {
+  const user = useUser()
+  const [contracts, setContracts] = useState<Contract[]>([])
+  useEffect(() => {
+    console.log('Fetching contracts', user?.id)
+    if (user?.id) {
+      listContracts(user?.id).then(setContracts)
+    }
+  }, [user?.id])
+
+  return (
+    <div>
+      <Header />
+      <div className="max-w-4xl py-8 mx-auto">
+        {user ? (
+          <div>
+            <UserCard user={user} />
+            <Title text="Your markets" />
+            <ContractsList contracts={contracts} />
+          </div>
+        ) : (
+          <SignInCard />
+        )}
       </div>
     </div>
   )