Allow users to sign in from /account
SQ
This commit is contained in:
parent
cecccbe94d
commit
e9c183a493
|
@ -65,6 +65,7 @@ export function listenForLogin(onUser: (_user: User | null) => void) {
|
||||||
} else {
|
} else {
|
||||||
// User logged out; reset to null
|
// User logged out; reset to null
|
||||||
onUser(null)
|
onUser(null)
|
||||||
|
localStorage.removeItem(CACHED_USER_KEY)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 { Header } from '../components/header'
|
||||||
import { useUser } from '../hooks/use-user'
|
import { useUser } from '../hooks/use-user'
|
||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
|
@ -7,21 +6,9 @@ import { Contract, listContracts } from '../lib/firebase/contracts'
|
||||||
import { ContractsList } from '../components/contracts-list'
|
import { ContractsList } from '../components/contracts-list'
|
||||||
import { Title } from '../components/title'
|
import { Title } from '../components/title'
|
||||||
|
|
||||||
export default function Account() {
|
function UserCard(props: { user: User }) {
|
||||||
const user = useUser()
|
const { user } = props
|
||||||
const router = useRouter()
|
|
||||||
const [contracts, setContracts] = useState<Contract[]>([])
|
|
||||||
useEffect(() => {
|
|
||||||
if (user?.id) {
|
|
||||||
listContracts(user?.id).then(setContracts)
|
|
||||||
}
|
|
||||||
}, [user?.id])
|
|
||||||
|
|
||||||
return (
|
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">
|
<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">
|
<figure className="p-6">
|
||||||
{user?.avatarUrl && (
|
{user?.avatarUrl && (
|
||||||
|
@ -31,24 +18,68 @@ export default function Account() {
|
||||||
<div className="max-w-md card-body">
|
<div className="max-w-md card-body">
|
||||||
<h2 className="card-title font-major-mono">{user?.name}</h2>
|
<h2 className="card-title font-major-mono">{user?.name}</h2>
|
||||||
<p>{user?.email}</p>
|
<p>{user?.email}</p>
|
||||||
<p>M${user?.balance}</p>
|
<p>M$ {user?.balance}</p>
|
||||||
<div className="card-actions">
|
<div className="card-actions">
|
||||||
<button
|
<button
|
||||||
className="btn glass rounded-full hover:bg-green-500"
|
className="btn glass rounded-full hover:bg-green-500"
|
||||||
onClick={() => {
|
onClick={firebaseLogout}
|
||||||
firebaseLogout()
|
|
||||||
router.push('/')
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Sign Out
|
Sign Out
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
|
}
|
||||||
|
|
||||||
<Title text="Your markets" />
|
function SignInCard() {
|
||||||
<ContractsList contracts={contracts} />
|
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>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user