[FEAT] Auth

next.config.js

@@ -4,6 +4,25 @@ const nextConfig = {
   swcMinify: true,
   poweredByHeader: false,
   output: 'standalone',
+  async redirects() {
+    return [
+      {
+        source: '/auth/register/code',
+        destination: '/auth/register',
+        permanent: true,
+      },
+      {
+        source: '/auth/recoveryPassword/code',
+        destination: '/auth/recoveryPassword',
+        permanent: true,
+      },
+      {
+        source: '/auth/recoveryPassword/new',
+        destination: '/auth/recoveryPassword',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "ucrm-web-client",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/app/auth/auth.api.ts

@@ -1,25 +1,25 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { HYDRATE } from 'next-redux-wrapper';
-import { HOST_URL } from '../constants';
 import {
-  GetVerificationCodePayload,
+  GetVerifyCodePayload,
   RegisterPayload,
   RegisterResponse,
   LoginPayload,
   LoginResponse,
+  GetRecoveryCodePayload,
+  RecoveryPasswordPayload,
 } from './auth.types';
-import { HTTP_METHODS as HTTP } from '../constants';
+import { HTTP_METHODS as HTTP, AUTH_API_URL } from '../constants';
 
 export const authApi = createApi({
   baseQuery: fetchBaseQuery({
-    baseUrl: HOST_URL + '/users',
+    baseUrl: AUTH_API_URL,
     prepareHeaders: (headers) => {
       const token = window.localStorage.getItem('token') || '';
       headers.set('Authorization', token);
-
       return headers;
     },
-    credentials: 'include',
+    credentials: 'same-origin',
   }),
   reducerPath: 'api/auth',
   extractRehydrationInfo(action, { reducerPath }) {
@@ -28,23 +28,30 @@ export const authApi = createApi({
     }
   },
   endpoints: (builder) => ({
-    getVerificationCode: builder.mutation<GetVerificationCodePayload, void>({
-      query: (data) => ({ url: '/verificationCode', method: HTTP.POST, body: data }),
+    getVerifyCode: builder.mutation<void, GetVerifyCodePayload>({
+      query: (data) => ({ url: '/sendVerifyCode', method: HTTP.POST, body: data }),
     }),
-    register: builder.mutation<RegisterPayload, RegisterResponse>({
+    register: builder.mutation<RegisterResponse, RegisterPayload>({
       query: (data) => ({ url: '/signUp', method: HTTP.POST, body: data }),
     }),
-    login: builder.mutation<LoginPayload, LoginResponse>({
+    login: builder.mutation<LoginResponse, LoginPayload>({
       query: (data) => ({ url: '/signIn', method: HTTP.POST, body: data }),
     }),
+    getRecoveryCode: builder.mutation<void, GetRecoveryCodePayload>({
+      query: (data) => ({ url: '/sendRecoveryCode', method: HTTP.POST, body: data }),
+    }),
+    recoveryPassword: builder.mutation<void, RecoveryPasswordPayload>({
+      query: (data) => ({ url: '/recoveryPassword', method: HTTP.POST, body: data }),
+    }),
   }),
 });
 
 export const {
-  useGetVerificationCodeMutation,
+  useGetVerifyCodeMutation,
   useRegisterMutation,
   useLoginMutation,
+  useGetRecoveryCodeMutation,
+  useRecoveryPasswordMutation,
+  endpoints: { getVerifyCode, register, login, getRecoveryCode, recoveryPassword },
   util: { getRunningOperationPromises },
 } = authApi;
-
-export const { getVerificationCode, register, login } = authApi.endpoints;

src/app/auth/auth.slice.ts

@@ -1,8 +1,8 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { AuthState } from './auth.types';
+import { login, register } from './auth.api';
 
 const initialState: AuthState = {
-  isLogin: false,
   token: '',
   user: null,
 };
@@ -11,12 +11,36 @@ const authSlice = createSlice({
   name: 'auth',
   initialState,
   reducers: {
-    logout: (state) => {
+    logout: () => {
       window.localStorage.removeItem('token');
-      state.isLogin = false;
-      state.token = '';
+      return initialState;
     },
   },
+  extraReducers: (builder) => {
+    builder
+      .addMatcher(register.matchFulfilled, (state, { payload: { token, user } }) => {
+        window.localStorage.setItem('token', token);
+
+        state.token = token;
+        state.user = {
+          id: user.id,
+          email: user.email,
+          avatarUrl: user.avatar_url,
+          createdAt: user.created_at,
+        };
+      })
+      .addMatcher(login.matchFulfilled, (state, { payload: { token, user } }) => {
+        window.localStorage.setItem('token', token);
+
+        state.token = token;
+        state.user = {
+          id: user.id,
+          email: user.email,
+          avatarUrl: user.avatar_url,
+          createdAt: user.created_at,
+        };
+      });
+  },
 });
 
-export const { actions: authAction, reducer: authReducer } = authSlice;
+export const { actions: authActions, reducer: authReducer } = authSlice;

src/app/auth/auth.types.ts

@@ -1,22 +1,26 @@
 export type Email = string;
 export type Token = string;
 
-export type GetVerificationCodePayload = {
+type CodePayload = {
   email: Email;
 };
 
+export type GetVerifyCodePayload = CodePayload;
+
 type AuthPayload = {
   email: Email;
   password: string;
 };
 
-export type RegisterPayload = AuthPayload & {
-  verificationCode: number;
+type CodeDto = {
+  code: number;
 };
 
+export type RegisterPayload = AuthPayload & CodeDto;
+
 export type UserDto = {
   id: string;
-  created_at: string;
+  created_at: Date;
   email: Email;
   avatar_url: string;
 };
@@ -38,7 +42,10 @@ export type LoginPayload = AuthPayload;
 export type LoginResponse = AuthResponse;
 
 export type AuthState = {
-  isLogin: boolean;
   token: Token;
   user: User | null;
 };
+
+export type GetRecoveryCodePayload = CodePayload;
+
+export type RecoveryPasswordPayload = AuthPayload & CodeDto;

src/app/constants.ts

@@ -1,4 +1,5 @@
 export const HOST_URL = process.env.host || 'http://localhost:8081/api/v1';
+export const AUTH_API_URL = HOST_URL + '/users';
 
 export enum HTTP_METHODS {
   GET = 'GET',

src/app/store.ts

@@ -14,7 +14,7 @@ const makeStore = () =>
   });
 
 type AppStore = ReturnType<typeof makeStore>;
-type RootState = ReturnType<AppStore['getState']>;
+export type RootState = ReturnType<AppStore['getState']>;
 type AppDispatch = AppStore['dispatch'];
 
 export const useTypedDispatch = () => useDispatch<AppDispatch>();

src/components/Code/Code.tsx

@@ -0,0 +1,43 @@
+import { FC, PropsWithChildren, useEffect } from 'react';
+import { Box, TextField, Typography, TextFieldProps } from '@mui/material';
+import { useTimer } from '@/hooks/useTimer';
+import { LoadingButton } from '../UI/LoadingButton';
+
+interface CodeProps {
+  onTimerRestart?: () => void;
+}
+
+export const Code: FC<PropsWithChildren<CodeProps & TextFieldProps>> = ({
+  children,
+  onTimerRestart = () => undefined,
+  ...rest
+}) => {
+  const { mins, secs, start, restart, isOver } = useTimer({ expiredTime: 300 });
+
+  const restartTimer = () => {
+    onTimerRestart();
+    restart();
+  };
+
+  useEffect(() => {
+    start();
+  }, [start]);
+
+  return (
+    <>
+      <TextField {...(rest as TextFieldProps)} />
+      {!isOver && (
+        <Box>
+          <Typography component="span">
+            You may resend in {mins.toString().padStart(2, '0')}:{secs.toString().padStart(2, '0')}
+          </Typography>
+        </Box>
+      )}
+      {isOver && (
+        <LoadingButton variant="text" onClick={restartTimer}>
+          Resend
+        </LoadingButton>
+      )}
+    </>
+  );
+};

src/components/Code/index.tsx

@@ -0,0 +1 @@
+export { Code } from './Code';

src/components/Header.tsx

@@ -1,18 +1,21 @@
-import { AppBar, Toolbar, Typography, Button, IconButton } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
+import NextLink from 'next/link';
+import { AppBar, Toolbar, Typography } from '@mui/material';
+import Nav from './Nav';
 
 export default function Header() {
   return (
     <AppBar position="static">
       <Toolbar>
-        <IconButton sx={{ mr: 2 }} size="large" edge="start" color="inherit" aria-label="menu">
-          <MenuIcon />
-        </IconButton>
-        <Typography sx={{ flexGrow: 1 }} variant="h6" component="div">
-          UCRM
-        </Typography>
-        <Button color="inherit">Login</Button>
-        <Button color="inherit">Register</Button>
+        <NextLink href="/">
+          <Typography
+            sx={{ marginRight: 'auto', ':hover': { cursor: 'pointer' } }}
+            variant="h6"
+            component="a"
+          >
+            UCRM
+          </Typography>
+        </NextLink>
+        <Nav />
       </Toolbar>
     </AppBar>
   );

src/components/Nav.tsx

@@ -0,0 +1,37 @@
+import { NextPage } from 'next';
+import NextLink from 'next/link';
+import { Button, Stack } from '@mui/material';
+import { useTypedSelector, useTypedDispatch } from '@/app/store';
+import { authActions } from '@/app/auth/auth.slice';
+
+const Nav: NextPage = () => {
+  const dispatch = useTypedDispatch();
+  const logout = () => dispatch(authActions.logout());
+  const isLoggedIn = useTypedSelector((state) => !!state.auth.user);
+
+  return (
+    <Stack direction="row" spacing={2}>
+      {isLoggedIn && (
+        <Button color="inherit" variant="outlined" onClick={logout}>
+          Logout
+        </Button>
+      )}
+      {!isLoggedIn && (
+        <>
+          <NextLink href="/auth/login">
+            <Button color="inherit" variant="text">
+              Login
+            </Button>
+          </NextLink>
+          <NextLink href="/auth/register">
+            <Button color="inherit" variant="outlined">
+              Register
+            </Button>
+          </NextLink>
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default Nav;

src/components/UI/LoadingButton.tsx

@@ -0,0 +1,38 @@
+import { FC, PropsWithChildren } from 'react';
+import { Stack, Button, CircularProgress, SxProps, Box, ButtonProps } from '@mui/material';
+
+interface LoadingButtonProps {
+  children: React.ReactNode;
+  type?: 'button' | 'submit' | 'reset';
+  loading?: boolean;
+  sx?: SxProps;
+}
+
+export const LoadingButton: FC<PropsWithChildren<LoadingButtonProps & ButtonProps>> = ({
+  children,
+  type = 'button',
+  loading = false,
+  sx = {},
+  ...rest
+}) => {
+  return (
+    <Button
+      sx={{
+        color: loading ? 'grey.500' : '',
+        backgroundColor: loading ? 'grey500' : '',
+        appearance: loading ? 'none' : 'auto',
+        cursor: loading ? 'not-allowed' : 'pointer',
+        ...sx,
+      }}
+      disabled={loading}
+      type={type}
+      {...rest}
+    >
+      <Stack direction="row" alignItems="center" spacing={1}>
+        {loading && <CircularProgress color="inherit" size={16} />}
+        {loading && <Box>Pending</Box>}
+        {!loading && <Box>{children}</Box>}
+      </Stack>
+    </Button>
+  );
+};

src/contexts/Root.context.tsx

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { RegisterProvider } from './auth/Register.context';
+import { RecoveryPasswordProvider } from './auth/RecoveryPassword.context';
+
+export const RootContext: FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <RegisterProvider>
+      <RecoveryPasswordProvider>{children}</RecoveryPasswordProvider>
+    </RegisterProvider>
+  </>
+);