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 { firebaseLogin, firebaseLogout, User } from '../lib/firebase/users'
-import { firebaseLogout } from '../lib/firebase/users'
 import { Header } from '../components/header'
 import { useUser } from '../hooks/use-user'
 import { useState, useEffect } from 'react'
@@ -7,11 +6,62 @@ import { Contract, listContracts } from '../lib/firebase/contracts'
 import { ContractsList } from '../components/contracts-list'
 import { Title } from '../components/title'
 
+function UserCard(props: { user: User }) {
+  const { user } = props
+  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">
+        {user?.avatarUrl && (
+          <img src={user.avatarUrl} className="rounded-lg shadow-lg" />
+        )}
+      </figure>
+      <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>
+        <div className="card-actions">
+          <button
+            className="btn glass rounded-full hover:bg-green-500"
+            onClick={firebaseLogout}
+          >
+            Sign Out
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+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 router = useRouter()
   const [contracts, setContracts] = useState<Contract[]>([])
   useEffect(() => {
+    console.log('Fetching contracts', user?.id)
     if (user?.id) {
       listContracts(user?.id).then(setContracts)
     }
@@ -21,34 +71,15 @@ export default function Account() {
     <div>
       <Header />
       <div className="max-w-4xl py-8 mx-auto">
-        <div>
+        {user ? (
-          <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">
+          <div>
-            <figure className="p-6">
+            <UserCard user={user} />
-              {user?.avatarUrl && (
+            <Title text="Your markets" />
-                <img src={user.avatarUrl} className="rounded-lg shadow-lg" />
+            <ContractsList contracts={contracts} />
-              )}
-            </figure>
-            <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>
-              <div className="card-actions">
-                <button
-                  className="btn glass rounded-full hover:bg-green-500"
-                  onClick={() => {
-                    firebaseLogout()
-                    router.push('/')
-                  }}
-                >
-                  Sign Out
-                </button>
-              </div>
-            </div>
           </div>
-        </div>
+        ) : (
-
+          <SignInCard />
-        <Title text="Your markets" />
+        )}
-        <ContractsList contracts={contracts} />
       </div>
     </div>
   )