Merge branch 'master' of https://github.com/okbel/e-comm-example into image-component

pages/_app.tsx

@@ -1,6 +1,4 @@
-import '@assets/global.css'
-import '@assets/tailwind.css'
-import '@assets/utils.css'
+import '@assets/main.css'
 
 // To be removed
 import 'animate.css'

pages/api/bigcommerce/customers/logout.ts

@@ -0,0 +1,3 @@
+import logoutApi from '@lib/bigcommerce/api/customers/logout'
+
+export default logoutApi()

pages/login.tsx

@@ -1,28 +1,75 @@
+import useSignup from '@lib/bigcommerce/use-signup'
 import { Layout } from '@components/core'
 import { Logo, Modal, Button } from '@components/ui'
+import useLogin from '@lib/bigcommerce/use-login'
+import useLogout from '@lib/bigcommerce/use-logout'
 
 export default function Login() {
+  const signup = useSignup()
+  const login = useLogin()
+  const logout = useLogout()
+  // TODO: use this method. It can take more than 5 seconds to do a signup
+  const handleSignup = async () => {
+    // TODO: validate the password and email before calling the signup
+    // Passwords must be at least 7 characters and contain both alphabetic
+    // and numeric characters.
+    try {
+      await signup({
+        // This account already exists, so it will throw the "duplicated_email" error
+        email: 'luis@vercel.com',
+        firstName: 'Luis',
+        lastName: 'Alvarez',
+        password: 'luis123',
+      })
+    } catch (error) {
+      if (error.code === 'duplicated_email') {
+        // TODO: handle duplicated email
+      }
+      // Show a generic error saying that something bad happened, try again later
+    }
+  }
+
+  const handleLogin = async () => {
+    // TODO: validate the password and email before calling the signup
+    // Passwords must be at least 7 characters and contain both alphabetic
+    // and numeric characters.
+    try {
+      await login({
+        email: 'luis@vercel.com',
+        // This is an invalid password so it will throw the "invalid_credentials" error
+        password: 'luis1234', // will work with `luis123`
+      })
+    } catch (error) {
+      if (error.code === 'invalid_credentials') {
+        // The email and password didn't match an existing account
+      }
+      // Show a generic error saying that something bad happened, try again later
+    }
+  }
+
   return (
     <div className="pb-20">
       <Modal close={() => {}}>
         <div className="h-80 w-80 flex flex-col justify-between py-3 px-3">
-          <div className="flex justify-center pb-12">
+          <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 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"
+                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="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"
+                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">Log In</Button>
+            <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>
               {` `}