From d1f08b1217633103af91b4f36f4715e692163415 Mon Sep 17 00:00:00 2001
From: FahimMontasir <fahimmontasirshakil@gmail.com>
Date: Thu, 25 Jan 2024 17:24:46 +0600
Subject: [PATCH] add: access token and refresh token login in dashboard

---
 backend/src/app.ts                            |  1 +
 .../modules/rest/auth/cc/auth.cc.routes.ts    |  2 +-
 dashboard/src/app/login/page.tsx              | 49 ++++++++++++++++---
 dashboard/src/helpers/axios/axiosInstance.ts  |  2 +
 dashboard/src/helpers/config/envConfig.ts     |  2 +-
 dashboard/src/redux/api/authApi.ts            |  2 +-
 dashboard/src/schemas/login.ts                |  4 +-
 dashboard/src/services/auth.service.ts        |  2 +-
 8 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/backend/src/app.ts b/backend/src/app.ts
index 833cf1a..598f9a4 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -25,6 +25,7 @@ app.use(limiter);
 const corsOption: CorsOptions = {
   origin: 'http://localhost:3000',
   optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
+  credentials: true,
 };
 
 //protection from outside attack
diff --git a/backend/src/modules/rest/auth/cc/auth.cc.routes.ts b/backend/src/modules/rest/auth/cc/auth.cc.routes.ts
index c7a0604..c08f130 100644
--- a/backend/src/modules/rest/auth/cc/auth.cc.routes.ts
+++ b/backend/src/modules/rest/auth/cc/auth.cc.routes.ts
@@ -33,7 +33,7 @@ router.post(
 
 router.post(
   '/refresh-token',
-  auth('superAdmin', 'admin', 'contentW'),
+  // auth('superAdmin', 'admin', 'contentW'),
   validateRequest(CCAuthValidation.refreshTokenZodSchema),
   CCAuthController.refreshToken
 );
diff --git a/dashboard/src/app/login/page.tsx b/dashboard/src/app/login/page.tsx
index f70d7ad..d203288 100644
--- a/dashboard/src/app/login/page.tsx
+++ b/dashboard/src/app/login/page.tsx
@@ -1,9 +1,34 @@
-"use client";
-import { Button, Image } from "@/components/common";
-import { useRouter } from "next/navigation";
+'use client';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import { Button, Image } from '@/components/common';
+import { loginSchema } from '@/schemas/login';
+import { useUserLoginMutation } from '@/redux/api/authApi';
+import { getNewAccessToken } from '@/services/auth.service';
 
 function Login() {
   const router = useRouter();
+
+  const [login, { data }] = useUserLoginMutation();
+  // console.log(data);
+
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validationSchema: loginSchema,
+    onSubmit: async values => {
+      await login(values);
+      alert(JSON.stringify(values, null, 2));
+    },
+  });
+
+  const handleRefresh = async () => {
+    const token = await getNewAccessToken();
+    console.log(token);
+  };
+
   return (
     <div className="flex h-screen flex-wrap items-center justify-center overflow-x-hidden bg-bgwhite md:gap-[60px]">
       <Image
@@ -11,22 +36,32 @@ function Login() {
         src="/static/pictures/login.png"
         alt="Login image of RSE dashboard"
       />
-      <div className="mx-2 flex w-full flex-col items-end justify-center gap-3 md:mx-0 md:h-[500px] md:w-[500px]">
+
+      <form
+        onSubmit={formik.handleSubmit}
+        className="mx-2 flex w-full flex-col items-end justify-center gap-3 md:mx-0 md:h-[500px] md:w-[500px]"
+      >
         <input
-          type="text"
+          type="email"
           placeholder="Type your email here..."
           className="h-[50px] w-full rounded-rounded-md bg-white-c p-[22px] text-black-c placeholder-gray-600 shadow-default focus:outline-none"
+          {...formik.getFieldProps('email')}
         />
         <input
           type="password"
           placeholder="Type your password here..."
           className="h-[50px] w-full rounded-rounded-md bg-white-c p-[22px] text-black-c placeholder-gray-600 shadow-default focus:outline-none"
+          {...formik.getFieldProps('password')}
         />
-        <Button className="h-[50px]" onClick={() => router.push("/dashboard")}>
+        <Button type="submit" className="h-[50px]">
           LOG IN
         </Button>
-      </div>
+        <Button className="h-[50px]" onClick={handleRefresh}>
+          check refresh
+        </Button>
+      </form>
     </div>
   );
 }
 export default Login;
+// onClick={() => router.push('/dashboard')}
diff --git a/dashboard/src/helpers/axios/axiosInstance.ts b/dashboard/src/helpers/axios/axiosInstance.ts
index 3f6987d..56074ff 100644
--- a/dashboard/src/helpers/axios/axiosInstance.ts
+++ b/dashboard/src/helpers/axios/axiosInstance.ts
@@ -6,6 +6,8 @@ import axios from 'axios';
 const instance = axios.create();
 instance.defaults.headers.post['Content-Type'] = 'application/json';
 instance.defaults.headers['Accept'] = 'application/json';
+instance.defaults.headers['x-api-key'] =
+  'dkjlksdfjklsdf32342kldfjsklfjlsjlkj23123123$%434324kldsfjsfjkdfowieumnskdfk';
 instance.defaults.timeout = 60000;
 
 // Add a request interceptor
diff --git a/dashboard/src/helpers/config/envConfig.ts b/dashboard/src/helpers/config/envConfig.ts
index adda3e9..84406d9 100644
--- a/dashboard/src/helpers/config/envConfig.ts
+++ b/dashboard/src/helpers/config/envConfig.ts
@@ -1,3 +1,3 @@
 export const getBaseUrl = (): string => {
-  return process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3030/api/v1';
+  return process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:5000/api/v1';
 };
diff --git a/dashboard/src/redux/api/authApi.ts b/dashboard/src/redux/api/authApi.ts
index d5de7ff..cacffeb 100644
--- a/dashboard/src/redux/api/authApi.ts
+++ b/dashboard/src/redux/api/authApi.ts
@@ -1,6 +1,6 @@
 import { tagTypes } from '../tag-types';
 import { baseApi } from './baseApi';
-const AUTH_URL = '/auth';
+const AUTH_URL = '/auth/cc';
 
 export const authApi = baseApi.injectEndpoints({
   endpoints: build => ({
diff --git a/dashboard/src/schemas/login.ts b/dashboard/src/schemas/login.ts
index 5623148..90ce147 100644
--- a/dashboard/src/schemas/login.ts
+++ b/dashboard/src/schemas/login.ts
@@ -1,6 +1,6 @@
-import * as yup from "yup";
+import * as yup from 'yup';
 
 export const loginSchema = yup.object().shape({
-  id: yup.string().required("UserId is required"),
+  email: yup.string().email().required('Email is required'),
   password: yup.string().min(6).max(32).required(),
 });
diff --git a/dashboard/src/services/auth.service.ts b/dashboard/src/services/auth.service.ts
index 6ba3dd1..7e679b5 100644
--- a/dashboard/src/services/auth.service.ts
+++ b/dashboard/src/services/auth.service.ts
@@ -30,7 +30,7 @@ export const removeUserInfo = (key: string) => {
 
 export const getNewAccessToken = async () => {
   return await axiosInstance({
-    url: `${getBaseUrl()}/auth/refresh-token`,
+    url: `${getBaseUrl()}/auth/cc/refresh-token`,
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     withCredentials: true,