Merge pull request #122 from HGU-WALAB/#121/login&signup-page

#121/login&signup page
HGU-WALAB · Jan 24, 2024 · df9c5c3 · df9c5c3
2 parents eafa5f6 + 2568d87
commit df9c5c3
Show file tree

Hide file tree

Showing 12 changed files with 231 additions and 254 deletions.
diff --git a/public/index.html b/public/index.html
@@ -20,7 +20,7 @@
     rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@900&display=swap" rel="stylesheet" />
 
-  <title>Minimal UI Kit</title>
+  <title>HANSPACE</title>
 
   <meta name="description"
     content="The starting point for your next project with Minimal UI Kit, built on the newest version of Material-UI ©, ready to be customized to your style" />

diff --git a/src/api/userApi.ts b/src/api/userApi.ts
@@ -1,17 +1,6 @@
 import axiosInstance, { endpoints } from 'src/utils/axios';
 
-// TODO : Add type
-// export const userLogin = async (data: any) => {
-//   const response = axiosInstance.post(endpoints.auth.login, data);
-//   return response;
-// };
-
 export const GetFirstInfo = async () => {
   const response = axiosInstance.get(endpoints.auth.info);
   return response;
 };
-
-// export const GetUser = async () => {
-//   const response = await axios.get(endpoints.user.list);
-//   return response;
-// };
diff --git a/src/auth/context/jwt/auth-provider.tsx b/src/auth/context/jwt/auth-provider.tsx
@@ -127,12 +127,10 @@ export function AuthProvider({ children }: Props) {
   }, [initialize]);
 
   // LOGIN
-  // const login = useCallback(async (email: string, password: string) => {
-  const login = useCallback(async (name: string, email: string) => {
+  const login = useCallback(async (email: string, password: string) => {
     const data = {
-      name,
       email,
-      // password,
+      password,
     };
 
     const res = await axios.post(`${BASE_URL}${endpoints.auth.login}`, data);

diff --git a/src/auth/context/jwt/utils.ts b/src/auth/context/jwt/utils.ts
@@ -43,7 +43,7 @@ export const tokenExpired = (exp: number) => {
 
   // Test token expires after 10s
   // const timeLeft = currentTime + 10000 - currentTime; // ~10s
-  const timeLeft = exp * 1000 - currentTime;
+  const timeLeft = exp * 10000 - currentTime;
 
   clearTimeout(expiredTimer);
 

diff --git a/src/auth/types.ts b/src/auth/types.ts
@@ -24,8 +24,7 @@ export type AuthStateType = {
 // ----------------------------------------------------------------------
 
 type CanRemove = {
-  login?: (name: string, email: string) => Promise<void>;
-  // login?: (email: string, password: string) => Promise<void>;
+  login?: (email: string, password: string) => Promise<void>;
   register?: (
     email: string,
     password: string,
@@ -52,8 +51,7 @@ export type JWTContextType = CanRemove & {
   loading: boolean;
   authenticated: boolean;
   unauthenticated: boolean;
-  login: (name: string, email: string) => Promise<void>;
-  // login: (email: string, password: string) => Promise<void>;
+  login: (email: string, password: string) => Promise<void>;
   register: (email: string, password: string, firstName: string, lastName: string) => Promise<void>;
   logout: () => Promise<void>;
 };

diff --git a/src/sections/auth/jwt/jwt-login-view.tsx b/src/sections/auth/jwt/jwt-login-view.tsx
@@ -9,13 +9,18 @@ import Alert from '@mui/material/Alert';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 // routes
-import { useRouter } from 'src/routes/hooks';
+import { useSearchParams, useRouter } from 'src/routes/hooks';
 // config
 import { PATH_AFTER_LOGIN } from 'src/config-global';
 // auth
 import { useAuthContext } from 'src/auth/hooks';
 // components
 import FormProvider, { RHFTextField } from 'src/components/hook-form';
+import { IconButton, InputAdornment } from '@mui/material';
+import { RouterLink } from 'src/routes/components';
+import { paths } from 'src/routes/paths';
+import Iconify from 'src/components/iconify';
+import { useBoolean } from 'src/hooks/use-boolean';
 
 // ----------------------------------------------------------------------
 
@@ -24,16 +29,22 @@ export default function JwtLoginView() {
 
   const router = useRouter();
 
+  const searchParams = useSearchParams();
+
+  const returnTo = searchParams.get('returnTo');
+
+  const password = useBoolean();
+
   const [errorMsg, setErrorMsg] = useState('');
 
   const LoginSchema = Yup.object().shape({
-    name: Yup.string().required('name is required'),
     email: Yup.string().required('Email is required').email('Email must be a valid email address'),
+    password: Yup.string().required('Password is required'),
   });
 
   const defaultValues = {
-    name: '최혜림',
     email: '[email protected]',
+    password: '1234',
   };
 
   const methods = useForm({
@@ -49,9 +60,9 @@ export default function JwtLoginView() {
 
   const onSubmit = handleSubmit(async (data) => {
     try {
-      await login?.(data.name, data.email);
+      await login?.(data.email, data.password);
 
-      router.push(PATH_AFTER_LOGIN);
+      router.push(returnTo || PATH_AFTER_LOGIN);
     } catch (error) {
       console.error(error);
       reset();
@@ -61,18 +72,26 @@ export default function JwtLoginView() {
 
   const renderHead = (
     <Stack spacing={2} sx={{ mb: 5 }}>
-      <Typography variant="h4">Sign in to Hanspace</Typography>
+      <Typography variant="h4">Hanspace 입장하기</Typography>
+
+      <Stack direction="row" spacing={0.5}>
+        <Typography variant="body2">회원이 아니세요?</Typography>
+
+        <Link component={RouterLink} href={paths.auth.jwt.register} variant="subtitle2">
+          회원가입
+        </Link>
+      </Stack>
     </Stack>
   );
 
   const renderForm = (
     <Stack spacing={2.5}>
       {!!errorMsg && <Alert severity="error">{errorMsg}</Alert>}
 
-      <RHFTextField name="name" label="name" />
+      {/* <RHFTextField name="name" label="name" /> */}
       <RHFTextField name="email" label="Email address" />
 
-      {/* <RHFTextField
+      <RHFTextField
         name="password"
         label="Password"
         type={password.value ? 'text' : 'password'}
@@ -85,11 +104,7 @@ export default function JwtLoginView() {
             </InputAdornment>
           ),
         }}
-      /> */}
-
-      <Link variant="body2" color="inherit" underline="always" sx={{ alignSelf: 'flex-end' }}>
-        Forgot password?
-      </Link>
+      />
 
       <LoadingButton
         fullWidth

diff --git a/src/sections/home/view.tsx b/src/sections/home/view.tsx
@@ -39,8 +39,8 @@ export default function HomeView() {
 
   useEffect(() => {
     try {
-      GetFirstInfo().then((res) => {
-        login?.(res.data.name, res.data.email);
+      GetFirstInfo().then((res: any) => {
+        login?.(res.data.email, res.data.password);
         setUserInfo({ email: res.data.email, name: res.data.name, hanRole: res.data.hanRole });
         setDeptInfo(res.data.departmentResponses);
       });

diff --git a/src/sections/reservelist/view/reserve-list-view.tsx b/src/sections/reservelist/view/reserve-list-view.tsx
@@ -95,6 +95,7 @@ export default function ReserveListView() {
   const { refetch } = useQuery(['reserveList', deptId], async () => {
     await axiosInstance.get(`${endpoints.reserve.list}/${deptId}`).then((res) => {
       setTableData(res.data);
+      console.log(res.data);
     });
   });
 
@@ -246,14 +247,14 @@ export default function ReserveListView() {
                 <Tooltip title="Add">
                   <IconButton color="primary" onClick={confirm.onTrue}>
                     <Button variant="outlined" color="primary">
-                      전체 승인
+                      선택 승인
                     </Button>
                   </IconButton>
                 </Tooltip>
                 <Tooltip title="Delete">
                   <IconButton color="primary" onClick={confirm.onTrue}>
                     <Button variant="outlined" color="error">
-                      전체 삭제
+                      선택 삭제
                     </Button>
                   </IconButton>
                 </Tooltip>

diff --git a/src/sections/user/user-quick-edit-form.tsx b/src/sections/user/user-quick-edit-form.tsx
@@ -18,16 +18,18 @@ import { IUserItem } from 'src/types/user';
 // components
 import { useSnackbar } from 'src/components/snackbar';
 import FormProvider, { RHFSelect } from 'src/components/hook-form';
+import axiosInstance, { endpoints } from 'src/utils/axios';
 
 // ----------------------------------------------------------------------
 
 type Props = {
   open: boolean;
   onClose: VoidFunction;
   currentUser?: IUserItem;
+  refetch: VoidFunction;
 };
 
-export default function UserQuickEditForm({ currentUser, open, onClose }: Props) {
+export default function UserQuickEditForm({ currentUser, open, onClose, refetch }: Props) {
   const { enqueueSnackbar } = useSnackbar();
 
   const NewUserSchema = Yup.object().shape({
@@ -56,10 +58,14 @@ export default function UserQuickEditForm({ currentUser, open, onClose }: Props)
     try {
       await new Promise((resolve) => setTimeout(resolve, 500));
       reset();
-      onClose();
+      // onClose();
       enqueueSnackbar('Update success!');
 
-      // await axios.patch(endpoints.user.update, { data });
+      // await axiosInstance.patch(endpoints.user.update, { data }).then((res) => {
+      //   refetch();
+      // });
+
+      // TODO: 백엔드 물어보기
 
       console.info('DATA', data);
     } catch (error) {

diff --git a/src/sections/user/user-table-row.tsx b/src/sections/user/user-table-row.tsx
@@ -26,6 +26,7 @@ type Props = {
   row: IUserItem;
   onSelectRow: VoidFunction;
   onDeleteRow: VoidFunction;
+  refetch: VoidFunction;
 };
 
 const Rows = styled.div`
@@ -41,8 +42,9 @@ export default function UserTableRow({
   onEditRow,
   onSelectRow,
   onDeleteRow,
+  refetch,
 }: Props) {
-  const { name, sid, deptName, email, deptRole, approve } = row;
+  const { member, deptRole, approve } = row;
 
   const quickEdit = useBoolean();
 
@@ -57,8 +59,8 @@ export default function UserTableRow({
 
         <TableCell sx={{ display: 'flex', alignItems: 'center' }}>
           <ListItemText
-            primary={name}
-            secondary={sid}
+            primary={member.name}
+            secondary={member.sid}
             primaryTypographyProps={{ typography: 'body2' }}
             secondaryTypographyProps={{
               component: 'span',
@@ -67,15 +69,15 @@ export default function UserTableRow({
           />
         </TableCell>
 
-        <TableCell sx={{ whiteSpace: 'nowrap' }}>{deptName}</TableCell>
+        <TableCell sx={{ whiteSpace: 'nowrap' }}>{member.deptName}</TableCell>
 
-        <TableCell sx={{ whiteSpace: 'nowrap' }}>{email}</TableCell>
+        <TableCell sx={{ whiteSpace: 'nowrap' }}>{member.email}</TableCell>
 
         <TableCell>
           <Label
             variant="soft"
             color={
-              (approve === '승인 대기' && 'error') ||
+              (approve === '미승인' && 'error') ||
               (deptRole === '관리자' && 'success') ||
               (deptRole === '사용자' && 'secondary') ||
               'default'
@@ -85,7 +87,7 @@ export default function UserTableRow({
           </Label>
         </TableCell>
 
-        {approve === '승인 대기' && (
+        {approve === '미승인' && (
           <TableCell>
             <Rows>
               <Button variant="outlined" color="primary">
@@ -97,17 +99,24 @@ export default function UserTableRow({
             </Rows>
           </TableCell>
         )}
+        {approve !== '미승인' && <div />}
 
-        {approve !== '승인 대기' && <div />}
-
-        <TableCell align="right" sx={{ px: 1, whiteSpace: 'nowrap' }}>
-          <IconButton color={popover.open ? 'inherit' : 'default'} onClick={popover.onOpen}>
-            <Iconify icon="eva:more-vertical-fill" />
-          </IconButton>
-        </TableCell>
+        {approve !== '미승인' && (
+          <TableCell align="right" sx={{ px: 1, whiteSpace: 'nowrap' }}>
+            <IconButton color={popover.open ? 'inherit' : 'default'} onClick={popover.onOpen}>
+              <Iconify icon="eva:more-vertical-fill" />
+            </IconButton>
+          </TableCell>
+        )}
+        {approve === '미승인' && <div />}
       </TableRow>
 
-      <UserQuickEditForm currentUser={row} open={quickEdit.value} onClose={quickEdit.onFalse} />
+      <UserQuickEditForm
+        currentUser={row}
+        open={quickEdit.value}
+        onClose={quickEdit.onFalse}
+        refetch={refetch}
+      />
 
       <CustomPopover
         open={popover.open}