add: access token and refresh token login in dashboard

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

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

dashboard/src/app/login/page.tsx

@@ -1,32 +1,67 @@
-"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
         className="h-[300px] w-[100%] rounded-rounded-md md:h-[500px] md:w-[500px]"
         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')}

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

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';
 };

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 => ({

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

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,