crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modal Stable / Login View

Browse Source
This commit is contained in:
Belen Curcio
2020-10-25 18:13:25 -03:00
parent 42eb79d81f
commit eb94d2dbf9
10 changed files with 124 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/auth/LoginView.tsx
View File

@@ -1,19 +1,23 @@
import { FC, useEffect } from 'react'
import { Logo, Modal, Button } from '@components/ui'
import { FC, useEffect, useState } from 'react'
import { Logo, Modal, Button, Input } from '@components/ui'
import useSignup from '@lib/bigcommerce/use-signup'
import useLogin from '@lib/bigcommerce/use-login'
import useLogout from '@lib/bigcommerce/use-logout'
import useCustomer from '@lib/bigcommerce/use-customer'
import { useUI } from '@components/ui/context'
interface Props {
open: boolean
}
interface Props {}
const LoginView: FC<Props> = () => {
const [email, setEmail] = useState('')
const [pass, setPass] = useState('')
// const { openModal, closeModal } = useUI()
// useEffect(() => {
// open ? openModal() : closeModal()
// }, [open])
const LoginView: FC<Props> = ({ open }) => {
const signup = useSignup()
const login = useLogin()
const logout = useLogout()
// // Data about the currently logged in customer, it will update
// // automatically after a signup/login/logout
// const { data } = useCustomer()
@@ -56,43 +60,30 @@ const LoginView: FC<Props> = ({ open }) => {
}
}
const { openModal, closeModal } = useUI()
useEffect(() => {
open ? openModal() : closeModal()
}, [open])
return (
<Modal open={open}>
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
<div className="flex justify-center pb-12 ">
<Logo width="64px" height="64px" />
</div>
<div className="flex flex-col space-y-3">
<div className="border border-accents-3 text-accents-6">
<input
placeholder="Email"
className="focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
/>
</div>
<div className="border border-accents-3 text-accents-6">
<input
placeholder="Password"
className="bg-primary focus:outline-none focus:shadow-outline-gray border-none py-2 px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10"
/>
</div>
<Button variant="slim" onClick={handleSignup}>
Log In
</Button>
<span className="pt-3 text-center text-sm">
<span className="text-accents-7">Don't have an account?</span>
{` `}
<a className="text-accent-9 font-bold hover:underline cursor-pointer">
Sign Up
</a>
</span>
</div>
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
<div className="flex justify-center pb-12 ">
<Logo width="64px" height="64px" />
</div>
</Modal>
<div className="flex flex-col space-y-3">
<div className="border border-accents-3 text-accents-6">
<Input placeholder="Email" onChange={setEmail} />
</div>
<div className="border border-accents-3 text-accents-6">
<Input placeholder="Password" onChange={setEmail} />
</div>
<Button variant="slim" onClick={handleSignup}>
Log In
</Button>
<span className="pt-3 text-center text-sm">
<span className="text-accents-7">Don't have an account?</span>
{` `}
<a className="text-accent-9 font-bold hover:underline cursor-pointer">
Sign Up
</a>
</span>
</div>
</div>
)
}