Login process to Odoo Api

6 files changed, 81 insertions, 19 deletions

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();