From d19b40f2972cc74105cfb8390a3b0fe3a4695b3a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Thu, 17 Nov 2022 17:30:03 +0700
Subject: Login process to Odoo Api

---
 src/components/Header.js         | 42 ++++++++++++++++++++++++---------
 src/pages/_app.js                | 10 ++++++++
 src/pages/api/login.js           | 17 ++++++++++++++
 src/pages/index.js               | 10 ++++----
 src/pages/login.js               | 51 +++++++++++++++++++++++++++++++++-------
 src/pages/register.js            |  6 ++---
 src/pages/shop/product/[slug].js |  6 ++---
 src/styles/globals.css           |  7 +++---
 8 files changed, 116 insertions(+), 33 deletions(-)
 create mode 100644 src/pages/api/login.js

(limited to 'src')

diff --git a/src/components/Header.js b/src/components/Header.js
index fb0e56a1..3e9d7ea0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from "react";
 import Head from "next/head";
 import Logo from "../images/logo.png";
 import { useRouter } from "next/router";
+import { getAuth } from "../helpers/auth";
 
 
 export default function Header({ title }) {
@@ -16,6 +17,11 @@ export default function Header({ title }) {
   const [searchQuery, setSearchQuery] = useState(q);
   const searchQueryRef = useRef();
   const [isMenuActive, setIsMenuActive] = useState(false);
+  const [auth, setAuth] = useState();
+
+  useEffect(() => { 
+    if (!auth) setAuth(getAuth()) 
+  }, [auth]);
 
   useEffect(() => {
     if (q) searchQueryRef.current.blur();
@@ -35,25 +41,39 @@ export default function Header({ title }) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
         <title>{title}</title>
       </Head>
-      <div className={isMenuActive ? 'menu-wrapper active' : 'menu-wrapper'}>
-        <div className="flex gap-x-2 items-center">
-          <Link href="/login" className="w-full py-2 btn-light">Masuk</Link>
-          <Link href="/register" className="w-full py-2 btn-yellow">Daftar</Link>
+      <div className={'menu-wrapper' + (isMenuActive ? ' active ' : '')}>
+        <div className="flex gap-x-2 items-center border-b border-gray-500 p-4">
+          {auth ? (
+            <h1>Hi, {auth.name}</h1>
+          ) : (
+            <>
+              <Link href="/login" className="w-full py-2 btn-light">Masuk</Link>
+              <Link href="/register" className="w-full py-2 btn-yellow">Daftar</Link>
+            </>
+          )}
         </div>
-        <div className="flex flex-col gap-y-4 mt-5">
-          <Link className="flex w-full font-normal text-gray-800" href="/shop/brands">
-              <span>Brand</span>
+        <div className="flex flex-col">
+          {auth ? (
+            <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/shop/brands">
+                <span>Profil Saya</span>
+                <div className="ml-auto">
+                  <ChevronRightIcon className="stroke-gray-700" />
+                </div>
+            </Link>
+          ) : ''}
+          <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/shop/brands">
+              <span>Semua Brand</span>
               <div className="ml-auto">
                 <ChevronRightIcon className="stroke-gray-700" />
               </div>
           </Link>
-          <Link className="flex w-full font-normal text-gray-800" href="/blog">
-              <span>Blog</span>
+          <Link className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3" href="/blog">
+              <span>Blog Indoteknik</span>
               <div className="ml-auto">
                 <ChevronRightIcon className="stroke-gray-700" />
               </div>
           </Link>
-          <button className="flex w-full font-normal text-gray-800" id="open_category_parent_menu">
+          <button className="flex w-full font-normal text-gray-800 border-b border-gray-300 p-4 py-3">
               <span>Kategori</span>
               <div className="ml-auto">
                 <ChevronRightIcon className="stroke-gray-700" />
@@ -66,7 +86,7 @@ export default function Header({ title }) {
       <div className="sticky-header">
         <div className="flex justify-between items-center">
           <Link href="/">
-            <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} className="w-auto" />
+            <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} />
           </Link>
           <div className="flex gap-4">
             <Link href="/shop/cart">
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 7950628e..c0899ea9 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,9 +1,19 @@
 import '../styles/globals.css';
 import NextProgress from "next-progress";
+import { ToastContainer, Slide } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function MyApp({ Component, pageProps }) {
   return (
     <>
+      <ToastContainer 
+        position='bottom-center'
+        autoClose={5000}
+        theme='light'
+        closeOnClick={false}
+        transition={Slide}
+        limit={1}
+      />
       <NextProgress color="#D7A30A" options={{
         showSpinner: false,
       }} />
diff --git a/src/pages/api/login.js b/src/pages/api/login.js
new file mode 100644
index 00000000..1236aea3
--- /dev/null
+++ b/src/pages/api/login.js
@@ -0,0 +1,17 @@
+import axios from "axios";
+import apiOdoo from "../../helpers/apiOdoo";
+
+export default async function handler(req, res) {
+  try {
+    const { email, password } = req.body;
+    let result = await apiOdoo(
+      'POST', 
+      '/api/v1/login', 
+      {email, password}
+    );
+    res.status(200).json(result);
+  } catch (error) {
+    console.log(error);
+    res.status(400).json({ error: error.message });
+  }
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 9d26d8ee..7fa538d1 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,7 +3,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Pagination, Autoplay } from "swiper";
 import Header from "../components/Header";
-import { getOdoo } from "../helpers/apiOdoo";
+import apiOdoo from "../helpers/apiOdoo";
 import "react-lazy-load-image-component/src/effects/blur.css";
 import "swiper/css";
 import "swiper/css/pagination";
@@ -18,25 +18,25 @@ export default function Home() {
 
   useEffect(() => {
     const getHeroBanners = async () => {
-      const dataHeroBanners = await getOdoo(`/api/v1/banner?type=index-a-1`);
+      const dataHeroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`);
       setHeroBanners(dataHeroBanners);
     }
     getHeroBanners();
 
     const getManufactures = async () => {
-      const dataManufactures = await getOdoo(`/api/v1/manufacture?level=prioritas`);
+      const dataManufactures = await apiOdoo('GET', `/api/v1/manufacture?level=prioritas`);
       setManufactures(dataManufactures);
     }
     getManufactures();
     
     const getReadyStockProducts = async () => {
-      const dataReadyStockProducts = await getOdoo(`/api/v1/product?ready_stock=1&limit=30`);
+      const dataReadyStockProducts = await apiOdoo('GET', `/api/v1/product?ready_stock=1&limit=30`);
       setReadyStockProducts(dataReadyStockProducts);
     }
     getReadyStockProducts();
 
     const getPopularProducts = async () => {
-      const dataPopularProducts = await getOdoo(`/api/v1/product?manufactures=10&limit=30`);
+      const dataPopularProducts = await apiOdoo('GET', `/api/v1/product?manufactures=10&limit=30`);
       setPopularProducts(dataPopularProducts);
     }
     getPopularProducts();
diff --git a/src/pages/login.js b/src/pages/login.js
index 971dc38e..315146a5 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -2,39 +2,74 @@ import axios from "axios";
 import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import Spinner from "../components/Spinner";
+import { setAuth } from "../helpers/auth";
 import Logo from "../images/logo.png";
 
 export default function Login() {
-  const login = (e) => {
+  const router = useRouter();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isInputFulfilled, setIsInputFulfilled] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setIsInputFulfilled(email && password);
+  }, [email, password]);
+
+  const login = async (e) => {
     e.preventDefault();
-    // axios.post(`${process.env.SELF_HOST}/api/login`, {email: 'it@fixcomart.co', password: 'Fixcomart378'});
+    setIsLoading(true);
+    let login = await axios.post(`${process.env.SELF_HOST}/api/login`, {email, password});
+    if (login.data.is_auth) {
+      setAuth(login.data.user);
+      router.push('/');
+    } else {
+      toast.info('Email atau Password tidak cocok');
+      toast.clearWaitingQueue();
+      setIsLoading(false);
+    }
   }
+
   return (
     <>
       <Head>
         <title>Masuk - Indoteknik</title>
       </Head>
-      <main className="max-w-lg mx-auto flex flex-col items-center px-4">
+      <main className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8">
         <Link href="/" className="mt-16">
           <Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
         </Link>
-        <h1 className="text-xl sm:text-2xl text-gray-900 mt-4">Mulai Belanja Sekarang</h1>
+        <h1 className="text-2xl text-gray-900 mt-4">Mulai Belanja Sekarang</h1>
         <h2 className="text-gray-800 mt-2 mb-4">Masuk ke akun kamu untuk belanja</h2>
-        <form onSubmit={login}>
+        <form onSubmit={login} className="w-full">
           <input 
             type="text"
             className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" 
             placeholder="johndoe@gmail.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
           />
           <input 
             type="password"
             className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" 
-            placeholder="**********"
+            placeholder="••••••••"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
           />
           <div className="flex justify-end mt-4 w-full">
-            <Link href="/forgot-password" className="text-sm">Lupa kata sandi</Link>
+            <Link href="/forgot-password">Lupa kata sandi</Link>
           </div>
-          <button type="submit" className="btn-yellow font-semibold mt-4 w-full">Masuk</button>
+          <button type="submit" disabled={!isInputFulfilled} className="btn-yellow font-semibold mt-4 w-full">
+            {isLoading ? (
+              <div className="flex justify-center items-center gap-x-2">
+                <Spinner className="w-4 h-4 text-gray-600 fill-gray-900" /> <span>Loading...</span>
+              </div>
+            ) : 'Masuk'}
+          </button>
         </form>
         <p className="text-gray-700 mt-4">Belum punya akun Indoteknik? <Link href="/register">Daftar</Link></p>
       </main>
diff --git a/src/pages/register.js b/src/pages/register.js
index 86208dc0..38ea972f 100644
--- a/src/pages/register.js
+++ b/src/pages/register.js
@@ -9,11 +9,11 @@ export default function Login() {
       <Head>
         <title>Daftar - Indoteknik</title>
       </Head>
-      <main className="max-w-lg mx-auto flex flex-col items-center px-4">
+      <main className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8">
         <Link href="/" className="mt-16">
           <Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
         </Link>
-        <h1 className="text-xl sm:text-2xl text-gray-900 mt-4 text-center">Mudahkan Pembelian dengan Indoteknik</h1>
+        <h1 className="text-2xl text-gray-900 mt-4 text-center">Mudahkan Pembelian dengan Indoteknik</h1>
         <h2 className="text-gray-800 mt-2 mb-4">Daftar untuk melanjutkan</h2>
         <input 
           type="text"
@@ -28,7 +28,7 @@ export default function Login() {
         <input 
           type="password"
           className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" 
-          placeholder="**********"
+          placeholder="••••••••"
         />
         <button className="btn-yellow font-semibold mt-4 w-full">Daftar</button>
         <p className="text-gray-700 mt-4">Sudah punya akun Indoteknik? <Link href="/login">Masuk</Link></p>
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index f96aba34..bcbebbdf 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -2,7 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Header from "../../../components/Header";
-import { getOdoo } from "../../../helpers/apiOdoo";
+import apiOdoo from "../../../helpers/apiOdoo";
 import { createSlug, getId } from "../../../helpers/slug";
 import currencyFormat from "../../../helpers/currencyFormat";
 import { LazyLoadImage } from "react-lazy-load-image-component";
@@ -11,7 +11,7 @@ import ProductSlider from "../../../components/product/ProductSlider";
 
 export async function getServerSideProps(context) {
   const { slug } = context.query;
-  let product = await getOdoo('/api/v1/product/' + getId(slug));
+  let product = await apiOdoo('GET', '/api/v1/product/' + getId(slug));
   if (product.length == 1) {
     product = product[0];
   }
@@ -42,7 +42,7 @@ export default function ProductDetail({product}) {
   useEffect(() => {
     setSimilarProducts(null);
     const getSimilarProducts = async () => {
-      const dataSimilarProducts = await getOdoo(`/api/v1/product/${getId(slug)}/similar?limit=20`);
+      const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${getId(slug)}/similar?limit=20`);
       setSimilarProducts(dataSimilarProducts);
     }
     getSimilarProducts();
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 6ed6582b..2adf7dc9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -96,8 +96,11 @@ html, body {
             border
             text-gray-900
             text-center
+            disabled:text-gray-800
             disabled:bg-yellow-700
             disabled:border-yellow-700
+            ease-linear
+            duration-150
         ;
     }
 
@@ -183,11 +186,9 @@ html, body {
         top-0
         left-0
         bg-white
-        w-[85%]
+        w-[80%]
         h-full
         z-[60]
-        py-4
-        px-4
         overflow-y-auto
         translate-x-[-100%]
         ease-linear
-- 
cgit v1.2.3