feat: js type 전환

.env

@@ -1 +1,3 @@
 REACT_APP_VERSION = v3.1.0
+REACT_APP_API_URL=http://localhost:8090
+REACT_APP_SERVER_TIMEOUT=60000

public/index.html

@@ -69,7 +69,8 @@
           To begin the development, run `npm start` or `yarn start`.
           To create a production bundle, use `npm run build` or `yarn build`.
         -->
-
+    <!--
+//TODO: production build ???
     <script type="text/javascript">
       (function (c, l, a, r, i, t, y) {
         c[a] =
@@ -84,6 +85,7 @@
         y.parentNode.insertBefore(t, y);
       })(window, document, 'clarity', 'script', '6sbb1vpcjo');
     </script>
+-->
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-X1LG1CJ1GG"></script>

src/apis/ApiService.js

@@ -2,14 +2,14 @@ import axios, { AxiosInstance, AxiosInterceptorManager, AxiosRequestConfig, Axio
 import Swal from 'sweetalert2';
 
 type CustomResponseFormat<T = any> = {
-  response: T; // e<T>;
-  refreshedToken?: string;
+  response: T, // e<T>;
+  refreshedToken?: string
 };
 
 export interface CustomInstance extends AxiosInstance {
   interceptors: {
-    request: AxiosInterceptorManager<AxiosRequestConfig>;
-    response: AxiosInterceptorManager<AxiosResponse<CustomResponseFormat>>;
+    request: AxiosInterceptorManager<AxiosRequestConfig>,
+    response: AxiosInterceptorManager<AxiosResponse<CustomResponseFormat>>
   };
 
   getUri(config?: AxiosRequestConfig): string;

src/apis/BoardService.js

@@ -1,8 +1,5 @@
 import { BOARD_LIST_URL } from 'commons/ApiUrl';
 import axios from 'utils/axios';
-import { IBoard, IParam } from 'types/Data';
-import { IApiPageResponse } from 'types/api';
-import { AxiosResponse } from 'axios';
 
 class BoardService {
   getBoardList = (params) =>

src/commons/XitCmm.js

@@ -112,7 +112,7 @@ const XitCmm = {
     initalValue: T,
     validator?: (value: string) => boolean
   ): [T, Dispatch<SetStateAction<T>>, (e?: React.ChangeEvent<HTMLInputElement>) => void] {
-    const [value, setValue] = useState<typeof initalValue>(initalValue);
+    const [value, setValue] = useState < typeof initalValue > initalValue;
     const changer = useCallback(
       (e) => {
         const v = e.target.value;

src/commons/constants.js

@@ -0,0 +1,3 @@
+export const ACCESS_TOKEN_NAME = 'accessToken';
+export const REFRESH_TOKEN_NAME = 'accessToken';
+export const AUTH_HEADER_NAME = 'Authorization';

src/config.js

@@ -3,7 +3,6 @@ export const JWT_API = {
   timeout: '1 days'
 };
 
-
 // basename: only at build time to set, and Don't add '/' at end off BASENAME for breadcrumbs, also Don't put only '/' use blank('') instead,
 // like '/berry-material-react/react/default'
 export const BASE_PATH = '';

src/contexts/JWTContext.js

@@ -12,6 +12,8 @@ import accountReducer from 'store/accountReducer';
 // project imports
 import Loader from 'ui-component/Loader';
 import axios from 'utils/axios';
+import { ACCESS_TOKEN_NAME, REFRESH_TOKEN_NAME } from 'commons/constants';
+import { LOGIN_URL } from 'commons/ApiUrl';
 
 const chance = new Chance();
 
@@ -43,7 +45,6 @@ const setLocalStorage = (tokenName, token) => {
   }
 };
 
-
 // ==============================|| JWT CONTEXT & PROVIDER ||============================== //
 const JWTContext = createContext(null);
 
@@ -87,8 +88,8 @@ export const JWTProvider = ({ children }) => {
     init();
   }, []);
 
-  const login = async (email, passwd) => {
-    const response = await axios.post(LOGIN_URL, { providerType: ProviderType.LOCAL, userid, passwd });
+  const login = async (userid, passwd) => {
+    const response = await axios.post(LOGIN_URL, { providerType: 'LOCAL', userid, passwd });
     // console.log(response);
     if (response && response.data) {
       const { accessToken, refreshToken, user } = response.data;
@@ -138,7 +139,7 @@ export const JWTProvider = ({ children }) => {
   };
 
   const logout = () => {
-    setSession(null);
+    setLocalStorage(ACCESS_TOKEN_NAME, null);
     dispatch({ type: LOGOUT });
   };
 

src/hooks/useAuth.js

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
 // auth provider
-// import AuthContext from 'contexts/JWTContext';
+import AuthContext from 'contexts/JWTContext';
 
 // ==============================|| AUTH HOOKS ||============================== //
 

src/routes/LoginRoutes.js

@@ -7,9 +7,9 @@ import NavMotion from 'layout/NavMotion';
 import Loadable from 'ui-component/Loadable';
 
 // login routing
-const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication3/Login3')));
-const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication3/Register3')));
-const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication3/ForgotPassword3')));
+const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication/Login')));
+const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication/Register')));
+const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication/ForgotPassword')));
 
 // ==============================|| AUTH ROUTING ||============================== //
 

src/routes/MainRoutes.js

@@ -7,6 +7,12 @@ import AuthGuard from 'utils/route-guard/AuthGuard';
 
 // sample page routing
 const SamplePage = Loadable(lazy(() => import('views/sample-page')));
+const DashboardDefault = Loadable(lazy(() => import('views/dashboard/Default')));
+const DashboardAnalytics = Loadable(lazy(() => import('views/dashboard/Analytics')));
+
+// opst page routing
+const PublicBoard = Loadable(lazy(() => import('views/biz/board/public')));
+const Board = Loadable(lazy(() => import('views/biz/board')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -19,8 +25,20 @@ const MainRoutes = {
   ),
   children: [
     {
-      path: '/',
-      element: <SamplePage />
+      path: '/dashboard/default',
+      element: <DashboardDefault />
+    },
+    {
+      path: '/dashboard/analytics',
+      element: <DashboardAnalytics />
+    },
+    {
+      path: '/publicBoard',
+      element: <PublicBoard />
+    },
+    {
+      path: '/board',
+      element: <Board />
     },
     {
       path: '/sample-page',

src/ui-component/MuiGridList.jsx

@@ -40,8 +40,8 @@ const MuiGridList = (props) => {
         columns={columns}
         // pageSize={pageSize}
         {...rowsState}
-        onPageChange={(page) => setRowsState((prev: any) => ({ ...prev, page }))}
-        onPageSizeChange={(pageSize) => setRowsState((prev: any) => ({ ...prev, page: 0, pageSize }))}
+        onPageChange={(page) => setRowsState((prev) => ({ ...prev, page }))}
+        onPageSizeChange={(pageSize) => setRowsState((prev) => ({ ...prev, page: 0, pageSize }))}
         rowsPerPageOptions={[5, 10, 50, 100]}
         pagination
       />

src/utils/axios.js

@@ -5,7 +5,6 @@
 import axios from 'axios';
 import Swal from 'sweetalert2';
 
-
 const axiosService = axios.create({
   baseURL: process.env.NODE_ENV === 'development' ? process.env.REACT_APP_API_URL : '',
   withCredentials: process.env.NODE_ENV === 'development', // 개발시만 사용 : crossdomain
@@ -17,6 +16,46 @@ const axiosService = axios.create({
   // params: {key: key}
 });
 
+/**
+ * 에러 처리
+ * TODO :: 토큰 에러인 경우 업무 정의에 따라 alert 처리 여부등 결정하여 내용 추가
+ * @param config
+ * @param request
+ * @param response
+ * @param error
+ */
+// const alertError = (config: AxiosRequestConfig, request: any, response: AxiosResponse, error: Error) => {
+const alertError = (config, request, response, error) => {
+  if (error.isAxiosError) {
+    let errMsg = `시스템 에러~~~~~~~~~~~~`;
+    if (error.code === 'ECONNABORTED') errMsg = 'Server time out';
+    Swal.fire({
+      icon: 'error',
+      title: 'Api Error',
+      html: errMsg,
+      // imageUrl:
+      timer: 5000
+    }).then((r) => r);
+    return;
+  }
+
+  if (response) {
+    const errCode = response.data.code;
+    const errMsg = response.data.error;
+    console.error(`${errCode}: ${errMsg}`);
+    console.error('=================================');
+
+    // Alert.error(`${errCode}: ${errMsg}`);
+    Swal.fire({
+      icon: 'error',
+      title: 'Api Error',
+      html: `${errCode}: ${errMsg}`,
+      // imageUrl:
+      timer: 5000
+    }).then((r) => r);
+  }
+};
+
 /**
  * before axios request
  */
@@ -28,7 +67,7 @@ axiosService.interceptors.request.use(
       // imageUrl:
       // timer: 10000,
       didOpen: () => Swal.showLoading()
-		}).then((r) => {});
+    }).then((r) => r);
     return config;
   },
   ({ config, request, response, ...error }) => {
@@ -58,7 +97,7 @@ axiosService.interceptors.response.use(
         html: `${response.data.message}`,
         // imageUrl:
         timer: 5000
-			}).then((r) => {});
+      }).then((r) => r);
       console.log(response);
     }
     return Promise.resolve(response.data);
@@ -72,52 +111,4 @@ axiosService.interceptors.response.use(
   }
 );
 
-/**
- * 에러 처리
- * TODO :: 토큰 에러인 경우 업무 정의에 따라 alert 처리 여부등 결정하여 내용 추가
- * @param config
- * @param request
- * @param response
- * @param error
- */
-// const alertError = (config: AxiosRequestConfig, request: any, response: AxiosResponse, error: Error) => {
-const alertError = (config, request, response, error) => {
-	if (error.isAxiosError) {
-		let errMsg = `시스템 에러~~~~~~~~~~~~`;
-		if (error.code === 'ECONNABORTED') errMsg = 'Server time out';
-		Swal.fire({
-			icon: 'error',
-			title: 'Api Error',
-			html: errMsg,
-			// imageUrl:
-			timer: 5000
-		}).then((r) => {});
-		return;
-	}
-
-	if (response) {
-		const errCode = response.data.code;
-		const errMsg = response.data.error;
-		console.error(`${errCode}: ${errMsg}`);
-		console.error('=================================');
-
-		// Alert.error(`${errCode}: ${errMsg}`);
-		Swal.fire({
-			icon: 'error',
-			title: 'Api Error',
-			html: `${errCode}: ${errMsg}`,
-			// imageUrl:
-			timer: 5000
-		}).then((r) => {});
-	}
-	// return Promise.reject({
-	// 	config,
-	// 	//message: errMsg,
-	// 	response,
-	// 	...error
-	// })
-};
-
-
-
-export default axiosServices;
+export default axiosService;

src/views/biz/board/index.jsx

@@ -1,39 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 // material-ui
-import {
-  Button,
-  Divider,
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  FormLabel,
-  Grid,
-  InputAdornment,
-  OutlinedInput,
-  Radio,
-  RadioGroup,
-  TextField,
-  Typography
-} from '@mui/material';
+import { Button, Divider, FormControl, FormControlLabel, Grid, OutlinedInput, Radio, RadioGroup } from '@mui/material';
 
 // assets
 import { IconSearch } from '@tabler/icons';
-import LinkTwoToneIcon from '@mui/icons-material/LinkTwoTone';
-import LockTwoToneIcon from '@mui/icons-material/LockTwoTone';
 
 // berry ui
 import MainCard from 'ui-component/cards/MainCard';
-import { gridSpacing } from 'store/constant';
 import { useDispatch, useSelector } from 'store';
-import { getDetailCards, filterDetailCards } from 'store/slices/user';
 
 // project imports
 import MuiGridList from 'ui-component/MuiGridList';
-import { Dispatch } from 'redux';
-import { GridColumns } from '@mui/x-data-grid';
-import InputLabel from 'ui-component/extended/Form/InputLabel';
-import SearchSection from 'layout/MainLayout/Header/SearchSection';
 import boardService from 'apis/BoardService';
 
 const Index = () => {
@@ -59,7 +37,7 @@ const Index = () => {
     // loading: false
   });
 
-  const columns: GridColumns = [
+  const columns = [
     { headerName: '게시판코드', field: 'ciCode' },
     { headerName: '글번호', field: 'ciContentno' },
     { headerName: '제목', field: 'ciTitle', editable: true },
@@ -91,7 +69,7 @@ const Index = () => {
       field: `ciIp`
     }
   ];
-  const handleSearch = async (event: any) => {
+  const handleSearch = async (event) => {
     console.log('~~~');
     if (event.type === 'keydown' && event.key === 'Enter') {
       const newString = event?.target.value;
@@ -120,7 +98,6 @@ const Index = () => {
       };
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-shadow
     const res = boardService.getBoardList(params).then((response) => {
       if (response && response.data) {
         // setTotalCount(response?.count);

src/views/biz/board/public.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 // material-ui
 import { Button, Divider, FormControlLabel, Grid, InputAdornment, Radio, RadioGroup, TextField } from '@mui/material';
@@ -9,12 +9,11 @@ import LockTwoToneIcon from '@mui/icons-material/LockTwoTone';
 
 // berry ui
 import MainCard from 'ui-component/cards/MainCard';
-import { useDispatch, useSelector } from 'store';
+import { useDispatch } from 'store';
 import { getDetailCards, filterDetailCards } from 'store/slices/user';
 
 // project imports
 import MuiGridList from 'ui-component/MuiGridList';
-import { GridColumns } from '@mui/x-data-grid';
 import InputLabel from 'ui-component/extended/Form/InputLabel';
 
 const Index = () => {
@@ -39,7 +38,7 @@ const Index = () => {
     // loading: false
   });
 
-  const columns: GridColumns = [
+  const columns = [
     { headerName: '게시판코드', field: 'ciCode' },
     { headerName: '글번호', field: 'ciContentno' },
     { headerName: '제목', field: 'ciTitle', editable: true },

src/views/dashboard/Analytics/MarketShareAreaChartCard.js

@@ -75,10 +75,7 @@ const MarketShareAreaChartCard = () => {
                       color: theme.palette.secondary.main,
                       borderRadius: '12px',
                       padding: 1,
-                                            backgroundColor:
-                                                theme.palette.mode === 'dark'
-                                                    ? theme.palette.background.default
-                                                    : theme.palette.secondary.light
+                      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.secondary.light
                     }}
                   >
                     <IconBrandFacebook stroke={1.5} />
@@ -99,10 +96,7 @@ const MarketShareAreaChartCard = () => {
                       color: theme.palette.primary.main,
                       borderRadius: '12px',
                       padding: 1,
-                                            backgroundColor:
-                                                theme.palette.mode === 'dark'
-                                                    ? theme.palette.background.default
-                                                    : theme.palette.primary.light
+                      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.primary.light
                     }}
                   >
                     <IconBrandTwitter stroke={1.5} />

src/views/dashboard/Analytics/index.js

@@ -79,12 +79,7 @@ const Analytics = () => {
             >
               <Grid container alignItems="center" spacing={0}>
                 <Grid item xs={12} sm={6} sx={blockSX}>
-                                    <Grid
-                                        container
-                                        alignItems="center"
-                                        spacing={1}
-                                        justifyContent={matchDownXs ? 'space-between' : 'center'}
-                                    >
+                  <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
                     <Grid item>
                       <IconShare stroke={1.5} />
                     </Grid>
@@ -99,12 +94,7 @@ const Analytics = () => {
                   </Grid>
                 </Grid>
                 <Grid item xs={12} sm={6} sx={blockSX}>
-                                    <Grid
-                                        container
-                                        alignItems="center"
-                                        spacing={1}
-                                        justifyContent={matchDownXs ? 'space-between' : 'center'}
-                                    >
+                  <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
                     <Grid item>
                       <IconAccessPoint stroke={1.5} />
                     </Grid>
@@ -121,12 +111,7 @@ const Analytics = () => {
               </Grid>
               <Grid container alignItems="center" spacing={0}>
                 <Grid item xs={12} sm={6} sx={blockSX}>
-                                    <Grid
-                                        container
-                                        alignItems="center"
-                                        spacing={1}
-                                        justifyContent={matchDownXs ? 'space-between' : 'center'}
-                                    >
+                  <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
                     <Grid item>
                       <IconCircles stroke={1.5} />
                     </Grid>
@@ -141,12 +126,7 @@ const Analytics = () => {
                   </Grid>
                 </Grid>
                 <Grid item xs={12} sm={6} sx={blockSX}>
-                                    <Grid
-                                        container
-                                        alignItems="center"
-                                        spacing={1}
-                                        justifyContent={matchDownXs ? 'space-between' : 'center'}
-                                    >
+                  <Grid container alignItems="center" spacing={1} justifyContent={matchDownXs ? 'space-between' : 'center'}>
                     <Grid item>
                       <IconCreditCard stroke={1.5} />
                     </Grid>
@@ -167,12 +147,7 @@ const Analytics = () => {
             <TotalRevenueCard title="Total Revenue" />
           </Grid>
           <Grid item xs={12}>
-                        <UserCountCard
-                            primary="Daily user"
-                            secondary="1,658"
-                            iconPrimary={AccountCircleTwoTone}
-                            color={theme.palette.secondary.main}
-                        />
+            <UserCountCard primary="Daily user" secondary="1,658" iconPrimary={AccountCircleTwoTone} color={theme.palette.secondary.main} />
           </Grid>
           <Grid item xs={12}>
             <UserCountCard

src/views/dashboard/Default/EarningCard.js

@@ -91,8 +91,7 @@ const EarningCard = ({ isLoading }) => {
                       sx={{
                         ...theme.typography.commonAvatar,
                         ...theme.typography.largeAvatar,
-                                                backgroundColor:
-                                                    theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary[800],
+                        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary[800],
                         mt: 1
                       }}
                     >
@@ -105,8 +104,7 @@ const EarningCard = ({ isLoading }) => {
                       sx={{
                         ...theme.typography.commonAvatar,
                         ...theme.typography.mediumAvatar,
-                                                backgroundColor:
-                                                    theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark,
+                        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.secondary.dark,
                         color: theme.palette.secondary[200],
                         zIndex: 1
                       }}
@@ -151,9 +149,7 @@ const EarningCard = ({ isLoading }) => {
               <Grid item>
                 <Grid container alignItems="center">
                   <Grid item>
-                                        <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>
-                                            $500.00
-                                        </Typography>
+                    <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>$500.00</Typography>
                   </Grid>
                   <Grid item>
                     <Avatar

src/views/dashboard/Default/TotalGrowthBarChart.js

@@ -107,12 +107,7 @@ const TotalGrowthBarChart = ({ isLoading }) => {
                   </Grid>
                 </Grid>
                 <Grid item>
-                                    <TextField
-                                        id="standard-select-currency"
-                                        select
-                                        value={value}
-                                        onChange={(e) => setValue(e.target.value)}
-                                    >
+                  <TextField id="standard-select-currency" select value={value} onChange={(e) => setValue(e.target.value)}>
                     {status.map((option) => (
                       <MenuItem key={option.value} value={option.value}>
                         {option.label}

src/views/dashboard/Default/TotalIncomeLightCard.js

@@ -57,8 +57,7 @@ const TotalIncomeLightCard = ({ isLoading }) => {
                     sx={{
                       ...theme.typography.commonAvatar,
                       ...theme.typography.largeAvatar,
-                                            backgroundColor:
-                                                theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.warning.light,
+                      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.warning.light,
                       color: theme.palette.mode === 'dark' ? theme.palette.warning.dark : theme.palette.warning.dark
                     }}
                   >

src/views/dashboard/Default/TotalOrderLineChartCard.js

@@ -93,8 +93,7 @@ const TotalOrderLineChartCard = ({ isLoading }) => {
                       sx={{
                         ...theme.typography.commonAvatar,
                         ...theme.typography.largeAvatar,
-                                                backgroundColor:
-                                                    theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary[800],
+                        backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary[800],
                         color: '#fff',
                         mt: 1
                       }}
@@ -130,13 +129,9 @@ const TotalOrderLineChartCard = ({ isLoading }) => {
                     <Grid container alignItems="center">
                       <Grid item>
                         {timeValue ? (
-                                                    <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>
-                                                        $108
-                                                    </Typography>
+                          <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>$108</Typography>
                         ) : (
-                                                    <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>
-                                                        $961
-                                                    </Typography>
+                          <Typography sx={{ fontSize: '2.125rem', fontWeight: 500, mr: 1, mt: 1.75, mb: 0.75 }}>$961</Typography>
                         )}
                       </Grid>
                       <Grid item>
@@ -156,10 +151,7 @@ const TotalOrderLineChartCard = ({ isLoading }) => {
                           sx={{
                             fontSize: '1rem',
                             fontWeight: 500,
-                                                        color:
-                                                            theme.palette.mode === 'dark'
-                                                                ? theme.palette.text.secondary
-                                                                : theme.palette.primary[200]
+                            color: theme.palette.mode === 'dark' ? theme.palette.text.secondary : theme.palette.primary[200]
                           }}
                         >
                           Total Order

src/views/pages/authentication/AuthWrapper.js

@@ -3,9 +3,9 @@ import { styled } from '@mui/material/styles';
 
 // ==============================|| AUTHENTICATION 1 WRAPPER ||============================== //
 
-const AuthWrapper1 = styled('div')(({ theme }) => ({
+const AuthWrapper = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.primary.light,
   minHeight: '100vh'
 }));
 
-export default AuthWrapper1;
+export default AuthWrapper;

src/views/pages/authentication/AuthWrapper2.js

@@ -1,14 +0,0 @@
-// material-ui
-import { styled } from '@mui/material/styles';
-
-// ==============================|| AUTHENTICATION 1 WRAPPER ||============================== //
-
-const AuthWrapper2 = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.background.paper,
-  minHeight: '100vh',
-  [theme.breakpoints.down('lg')]: {
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light
-  }
-}));
-
-export default AuthWrapper2;

src/views/pages/authentication/auth-forms/AuthLogin.js

@@ -8,7 +8,6 @@ import {
   Box,
   Button,
   Checkbox,
-  Divider,
   FormControl,
   FormControlLabel,
   FormHelperText,
@@ -18,8 +17,7 @@ import {
   InputLabel,
   OutlinedInput,
   Stack,
-  Typography,
-  useMediaQuery
+  Typography
 } from '@mui/material';
 
 // third party
@@ -27,7 +25,6 @@ import * as Yup from 'yup';
 import { Formik } from 'formik';
 
 // project imports
-import useConfig from 'hooks/useConfig';
 import useAuth from 'hooks/useAuth';
 import useScriptRef from 'hooks/useScriptRef';
 import AnimateButton from 'ui-component/extended/AnimateButton';
@@ -36,26 +33,14 @@ import AnimateButton from 'ui-component/extended/AnimateButton';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
-import Google from 'assets/images/icons/social-google.svg';
-
 // ============================|| FIREBASE - LOGIN ||============================ //
 
 const FirebaseLogin = ({ loginProp, ...others }) => {
   const theme = useTheme();
+  const { login } = useAuth();
   const scriptedRef = useScriptRef();
-  const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
-  const { borderRadius } = useConfig();
   const [checked, setChecked] = React.useState(true);
 
-  const { firebaseEmailPasswordSignIn, firebaseGoogleSignIn } = useAuth();
-  const googleHandler = async () => {
-    try {
-      await firebaseGoogleSignIn();
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
   const [showPassword, setShowPassword] = React.useState(false);
   const handleClickShowPassword = () => {
     setShowPassword(!showPassword);
@@ -68,58 +53,6 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
   return (
     <>
       <Grid container direction="column" justifyContent="center" spacing={2}>
-        <Grid item xs={12}>
-          <AnimateButton>
-            <Button
-              disableElevation
-              fullWidth
-              onClick={googleHandler}
-              size="large"
-              variant="outlined"
-              sx={{
-                color: 'grey.700',
-                backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
-                borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.light + 20 : theme.palette.grey[100]
-              }}
-            >
-              <Box sx={{ mr: { xs: 1, sm: 2, width: 20 } }}>
-                <img src={Google} alt="google" width={16} height={16} style={{ marginRight: matchDownSM ? 8 : 16 }} />
-              </Box>
-              Sign in with Google
-            </Button>
-          </AnimateButton>
-        </Grid>
-        <Grid item xs={12}>
-          <Box
-            sx={{
-              alignItems: 'center',
-              display: 'flex'
-            }}
-          >
-            <Divider sx={{ flexGrow: 1 }} orientation="horizontal" />
-
-            <Button
-              variant="outlined"
-              sx={{
-                cursor: 'unset',
-                m: 2,
-                py: 0.5,
-                px: 7,
-                borderColor:
-                  theme.palette.mode === 'dark' ? `${theme.palette.dark.light + 20} !important` : `${theme.palette.grey[100]} !important`,
-                color: `${theme.palette.grey[900]} !important`,
-                fontWeight: 500,
-                borderRadius: `${borderRadius}px`
-              }}
-              disableRipple
-              disabled
-            >
-              OR
-            </Button>
-
-            <Divider sx={{ flexGrow: 1 }} orientation="horizontal" />
-          </Box>
-        </Grid>
         <Grid item xs={12} container alignItems="center" justifyContent="center">
           <Box sx={{ mb: 2 }}>
             <Typography variant="subtitle1">Sign in with Email address</Typography>
@@ -129,31 +62,17 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
 
       <Formik
         initialValues={{
-          email: 'info@codedthemes.com',
-          password: '123456',
+          userid: 'xitdev',
+          passwd: 'xitdev',
           submit: null
         }}
         validationSchema={Yup.object().shape({
-          email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
-          password: Yup.string().max(255).required('Password is required')
+          userid: Yup.string().max(255).required('User ID is required'),
+          passwd: Yup.string().max(255).required('Password is required')
         })}
         onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
           try {
-            await firebaseEmailPasswordSignIn(values.email, values.password).then(
-              () => {
-                // WARNING: do not set any formik state here as formik might be already destroyed here. You may get following error by doing so.
-                // Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.
-                // To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
-                // github issue: https://github.com/formium/formik/issues/2430
-              },
-              (err) => {
-                if (scriptedRef.current) {
-                  setStatus({ success: false });
-                  setErrors({ submit: err.message });
-                  setSubmitting(false);
-                }
-              }
-            );
+            await login(values.userid, values.passwd);
           } catch (err) {
             console.error(err);
             if (scriptedRef.current) {
@@ -166,32 +85,32 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
       >
         {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
           <form noValidate onSubmit={handleSubmit} {...others}>
-            <FormControl fullWidth error={Boolean(touched.email && errors.email)} sx={{ ...theme.typography.customInput }}>
-              <InputLabel htmlFor="outlined-adornment-email-login">Email Address / Username</InputLabel>
+            <FormControl fullWidth error={Boolean(touched.userid && errors.userid)} sx={{ ...theme.typography.customInput }}>
+              <InputLabel htmlFor="userid">User ID</InputLabel>
               <OutlinedInput
-                id="outlined-adornment-email-login"
-                type="email"
-                value={values.email}
-                name="email"
+                id="userid"
+                type="text"
+                value={values.userid}
+                name="userid"
                 onBlur={handleBlur}
                 onChange={handleChange}
-                label="Email Address / Username"
+                label="User ID"
                 inputProps={{}}
               />
-              {touched.email && errors.email && (
-                <FormHelperText error id="standard-weight-helper-text-email-login">
-                  {errors.email}
+              {touched.userid && errors.userid && (
+                <FormHelperText error id="standard-weight-helper-text-userid-login">
+                  {errors.userid}
                 </FormHelperText>
               )}
             </FormControl>
 
-            <FormControl fullWidth error={Boolean(touched.password && errors.password)} sx={{ ...theme.typography.customInput }}>
-              <InputLabel htmlFor="outlined-adornment-password-login">Password</InputLabel>
+            <FormControl fullWidth error={Boolean(touched.passwd && errors.passwd)} sx={{ ...theme.typography.customInput }}>
+              <InputLabel htmlFor="passwd">Password</InputLabel>
               <OutlinedInput
-                id="outlined-adornment-password-login"
+                id="passwd"
                 type={showPassword ? 'text' : 'password'}
-                value={values.password}
-                name="password"
+                value={values.passwd}
+                name="passwd"
                 onBlur={handleBlur}
                 onChange={handleChange}
                 endAdornment={
@@ -210,9 +129,9 @@ const FirebaseLogin = ({ loginProp, ...others }) => {
                 label="Password"
                 inputProps={{}}
               />
-              {touched.password && errors.password && (
+              {touched.passwd && errors.passwd && (
                 <FormHelperText error id="standard-weight-helper-text-password-login">
-                  {errors.password}
+                  {errors.passwd}
                 </FormHelperText>
               )}
             </FormControl>

src/views/pages/authentication/authentication/ForgotPassword.js

@@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles';
 import { Divider, Grid, Typography, useMediaQuery } from '@mui/material';
 
 // project imports
-import AuthWrapper1 from '../AuthWrapper1';
+import AuthWrapper from '../AuthWrapper';
 import AuthCardWrapper from '../AuthCardWrapper';
 import Logo from 'ui-component/Logo';
 import AuthForgotPassword from '../auth-forms/AuthForgotPassword';
@@ -20,7 +20,7 @@ const ForgotPassword = () => {
   const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
-    <AuthWrapper1>
+    <AuthWrapper>
       <Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
         <Grid item xs={12}>
           <Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}>
@@ -56,7 +56,7 @@ const ForgotPassword = () => {
                     <Grid item container direction="column" alignItems="center" xs={12}>
                       <Typography
                         component={Link}
-                        to={isLoggedIn ? '/pages/login/login3' : '/login'}
+                        to={isLoggedIn ? '/pages/login/login' : '/login'}
                         variant="subtitle1"
                         sx={{ textDecoration: 'none' }}
                       >
@@ -73,7 +73,7 @@ const ForgotPassword = () => {
           <AuthFooter />
         </Grid>
       </Grid>
-    </AuthWrapper1>
+    </AuthWrapper>
   );
 };
 

src/views/pages/authentication/authentication/Login.js

@@ -1,11 +1,10 @@
 import { Link } from 'react-router-dom';
 
 // material-ui
-import { useTheme } from '@mui/material/styles';
-import { Divider, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
+import { Divider, Grid, Typography } from '@mui/material';
 
 // project imports
-import AuthWrapper1 from '../AuthWrapper1';
+import AuthWrapper from '../AuthWrapper';
 import AuthCardWrapper from '../AuthCardWrapper';
 import AuthLogin from '../auth-forms/AuthLogin';
 import Logo from 'ui-component/Logo';
@@ -17,12 +16,10 @@ import useAuth from 'hooks/useAuth';
 // ================================|| AUTH3 - LOGIN ||================================ //
 
 const Login = () => {
-  const theme = useTheme();
   const { isLoggedIn } = useAuth();
-  const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
-    <AuthWrapper1>
+    <AuthWrapper>
       <Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
         <Grid item xs={12}>
           <Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}>
@@ -34,20 +31,6 @@ const Login = () => {
                       <Logo />
                     </Link>
                   </Grid>
-                  <Grid item xs={12}>
-                    <Grid container direction={matchDownSM ? 'column-reverse' : 'row'} alignItems="center" justifyContent="center">
-                      <Grid item>
-                        <Stack alignItems="center" justifyContent="center" spacing={1}>
-                          <Typography color={theme.palette.secondary.main} gutterBottom variant={matchDownSM ? 'h3' : 'h2'}>
-                            Hi, Welcome Back
-                          </Typography>
-                          <Typography variant="caption" fontSize="16px" textAlign={matchDownSM ? 'center' : 'inherit'}>
-                            Enter your credentials to continue
-                          </Typography>
-                        </Stack>
-                      </Grid>
-                    </Grid>
-                  </Grid>
                   <Grid item xs={12}>
                     <AuthLogin />
                   </Grid>
@@ -58,7 +41,7 @@ const Login = () => {
                     <Grid item container direction="column" alignItems="center" xs={12}>
                       <Typography
                         component={Link}
-                        to={isLoggedIn ? '/pages/register/register3' : '/register'}
+                        to={isLoggedIn ? '/pages/register/register' : '/register'}
                         variant="subtitle1"
                         sx={{ textDecoration: 'none' }}
                       >
@@ -75,7 +58,7 @@ const Login = () => {
           <AuthFooter />
         </Grid>
       </Grid>
-    </AuthWrapper1>
+    </AuthWrapper>
   );
 };
 

src/views/pages/authentication/authentication/Register.js

@@ -5,7 +5,7 @@ import { useTheme } from '@mui/material/styles';
 import { Divider, Grid, Stack, Typography, useMediaQuery } from '@mui/material';
 
 // project imports
-import AuthWrapper1 from '../AuthWrapper1';
+import AuthWrapper from '../AuthWrapper';
 import AuthCardWrapper from '../AuthCardWrapper';
 import Logo from 'ui-component/Logo';
 import AuthRegister from '../auth-forms/AuthRegister';
@@ -22,7 +22,7 @@ const Register = () => {
   const matchDownSM = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
-    <AuthWrapper1>
+    <AuthWrapper>
       <Grid container direction="column" justifyContent="flex-end" sx={{ minHeight: '100vh' }}>
         <Grid item xs={12}>
           <Grid container justifyContent="center" alignItems="center" sx={{ minHeight: 'calc(100vh - 68px)' }}>
@@ -75,7 +75,7 @@ const Register = () => {
           <AuthFooter />
         </Grid>
       </Grid>
-    </AuthWrapper1>
+    </AuthWrapper>
   );
 };