From 26026572012283dcbff3e931c7cdf248fb031d22 Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Wed, 2 Apr 2025 22:42:02 +0700
Subject: [PATCH] feat(backoffice): send login request

- buat .env untuk menyimpan API dan memberikan .env.example juga untuk contohnya. Tambah .gitignore juga
- tambah fungsi login pada Backoffice
---
 .env.example                       |  1 +
 .gitignore                         |  4 ++-
 apps/backoffice/src/app/page.tsx   | 55 +++++++++++++++++++++---------
 libs/service/src/api/auth/index.ts |  2 +-
 4 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..49d9f6e
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+VITE_API_URL=https://api.example.com
diff --git a/.gitignore b/.gitignore
index 77912e8..0ddc0e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -44,4 +44,6 @@ Thumbs.db
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 
-storybook-static
\ No newline at end of file
+storybook-static
+
+.env
diff --git a/apps/backoffice/src/app/page.tsx b/apps/backoffice/src/app/page.tsx
index b92bf58..7ba7fee 100644
--- a/apps/backoffice/src/app/page.tsx
+++ b/apps/backoffice/src/app/page.tsx
@@ -1,10 +1,27 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { InputForm } from '@imphnen-frontend-service/ui/molecules';
+import { postLogin } from '@imphnen-frontend-service/service';
 
 export const Components: FC = (): ReactElement => {
   const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const payload = { email, password };
+      console.log(payload); // for debugging
+      const response = await postLogin(payload);
+
+      console.log('Login successful:', response); // for debugging
+      navigate('/dashboard');
+    } catch (error) {
+      console.log('Login error:', error); // for debugging
+    }
+  };
 
   return (
     <div className="flex justify-center items-center min-h-screen">
@@ -13,21 +30,27 @@ export const Components: FC = (): ReactElement => {
         <h1 className="text-primary-500 text-p1 font-semibold">
           Welcome to IMPHNEN Backoffice
         </h1>
-        <InputForm
-          label="Email"
-          placeholder="Masukkan Email"
-          type="email"
-          size="lg"
-          className="w-full"
-        />
-        <InputForm
-          label="Password"
-          placeholder="Masukkan password"
-          type="password"
-          size="lg"
-          className="w-full"
-        />
-        <Button onClick={() => navigate('/dashboard')}>Login</Button>
+        <form onSubmit={handleLogin} className="flex flex-col gap-8">
+          <InputForm
+            label="Email"
+            placeholder="Masukkan Email"
+            type="email"
+            size="lg"
+            className="w-full"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <InputForm
+            label="Password"
+            placeholder="Masukkan password"
+            type="password"
+            size="lg"
+            className="w-full"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <Button type="submit">Login</Button>
+        </form>
       </div>
     </div>
   );
diff --git a/libs/service/src/api/auth/index.ts b/libs/service/src/api/auth/index.ts
index e925dd1..ded271b 100644
--- a/libs/service/src/api/auth/index.ts
+++ b/libs/service/src/api/auth/index.ts
@@ -12,7 +12,7 @@ export const postLogin = async (
 ): Promise<TLoginResponse> => {
   const { data } = await api({
     method: 'POST',
-    url: '/auth/login',
+    url: '/v1/auth/login',
     data: payload,
   });
   return data;