OV-8: protect routing

backend/src/bundles/users/user.repository.ts

@@ -20,6 +20,12 @@ class UserRepository implements Repository {
         return user ? UserEntity.initialize(user) : null;
     }
 
+    public async findById(userId: number): Promise<UserEntity | null> {
+        const user = await this.userModel.query().findById(userId).execute();
+
+        return user ? UserEntity.initialize(user) : null;
+    }
+
     public async findAll(): Promise<UserEntity[]> {
         const users = await this.userModel.query().execute();
 

backend/src/bundles/users/user.service.ts

@@ -24,6 +24,10 @@ class UserService implements Service {
         return await this.userRepository.findByEmail(email);
     }
 
+    public async findById(userId: number): Promise<UserEntity | null> {
+        return await this.userRepository.findById(userId);
+    }
+
     public async findAll(): Promise<UserGetAllResponseDto> {
         const items = await this.userRepository.findAll();
 

backend/src/bundles/users/users.ts

@@ -16,6 +16,7 @@ export {
     type UserSignUpRequestDto,
     type UserSignUpResponseDto,
 } from './types/types.js';
+export { type UserEntity } from './user.entity.js';
 export { UserModel } from './user.model.js';
 export {
     userSignInValidationSchema,

backend/src/common/constants/constants.ts

@@ -1 +1,2 @@
 export { USER_PASSWORD_SALT_ROUNDS } from './user.constants.js';
+export { WHITE_ROUTES } from './white-routes.constants.js';

backend/src/common/constants/white-routes.constants.ts

@@ -0,0 +1,8 @@
+import { ApiPath, AuthApiPath } from 'shared';
+
+const WHITE_ROUTES = [
+    `/api/v1${ApiPath.AUTH}${AuthApiPath.SIGN_IN}`,
+    `/api/v1${ApiPath.AUTH}${AuthApiPath.SIGN_UP}`,
+];
+
+export { WHITE_ROUTES };

backend/src/common/plugins/auth/auth-jwt.plugin.ts

@@ -0,0 +1,60 @@
+import fp from 'fastify-plugin';
+import { HttpCode, HttpError, HttpHeader } from 'shared';
+
+import { userService } from '~/bundles/users/users.js';
+import { tokenService } from '~/common/services/services.js';
+
+import { ErrorMessage, Hook } from './enums/enums.js';
+
+type Options = {
+    routesWhiteList: string[];
+};
+
+const authenticateJWT = fp<Options>((fastify, options, done) => {
+    fastify.decorateRequest('user', null);
+
+    fastify.addHook(Hook.PRE_HANDLER, async (request) => {
+        const isRouteInWhiteList = options.routesWhiteList.includes(
+            request.url,
+        );
+
+        if (isRouteInWhiteList) {
+            return;
+        }
+
+        const authHeader = request.headers[HttpHeader.AUTHORIZATION];
+
+        if (!authHeader) {
+            throw new HttpError({
+                message: ErrorMessage.MISSING_TOKEN,
+                status: HttpCode.UNAUTHORIZED,
+            });
+        }
+
+        const [, token] = authHeader.split(' ');
+
+        const userId = await tokenService.getUserIdFromToken(token as string);
+
+        if (!userId) {
+            throw new HttpError({
+                message: ErrorMessage.INVALID_TOKEN,
+                status: HttpCode.UNAUTHORIZED,
+            });
+        }
+
+        const user = await userService.findById(userId);
+
+        if (!user) {
+            throw new HttpError({
+                message: ErrorMessage.MISSING_USER,
+                status: HttpCode.BAD_REQUEST,
+            });
+        }
+
+        request.user = user;
+    });
+
+    done();
+});
+
+export { authenticateJWT };

backend/src/common/plugins/auth/enums/enums.ts

@@ -0,0 +1,2 @@
+export { ErrorMessage } from './error-message.enum.js';
+export { Hook } from './hook.enum.js';

backend/src/common/plugins/auth/enums/error-message.enum.ts

@@ -0,0 +1,7 @@
+const ErrorMessage = {
+    MISSING_TOKEN: 'You are not logged in',
+    INVALID_TOKEN: 'Token is no longer valid. Please log in again.',
+    MISSING_USER: 'User with this id does not exist.',
+} as const;
+
+export { ErrorMessage };

backend/src/common/plugins/auth/enums/hook.enum.ts

@@ -0,0 +1,5 @@
+const Hook = {
+    PRE_HANDLER: 'preHandler',
+} as const;
+
+export { Hook };

backend/src/common/plugins/plugins.ts

@@ -0,0 +1 @@
+export { authenticateJWT } from './auth/auth-jwt.plugin.js';

backend/src/common/server-application/base-server-app.ts

@@ -22,6 +22,8 @@ import {
     type ValidationSchema,
 } from '~/common/types/types.js';
 
+import { WHITE_ROUTES } from '../constants/constants.js';
+import { authenticateJWT } from '../plugins/plugins.js';
 import {
     type ServerApp,
     type ServerAppApi,
@@ -122,6 +124,12 @@ class BaseServerApp implements ServerApp {
         );
     }
 
+    private registerPlugins(): void {
+        this.app.register(authenticateJWT, {
+            routesWhiteList: WHITE_ROUTES,
+        });
+    }
+
     private initValidationCompiler(): void {
         this.app.setValidatorCompiler(
             ({ schema }: { schema: ValidationSchema }) => {
@@ -200,6 +208,8 @@ class BaseServerApp implements ServerApp {
 
         await this.initMiddlewares();
 
+        this.registerPlugins();
+
         this.initValidationCompiler();
 
         this.initErrorHandler();

backend/src/common/types/fastify.d.ts

@@ -0,0 +1,9 @@
+import 'fastify';
+
+import { type UserEntity } from '~/bundles/users/users.js';
+
+declare module 'fastify' {
+    interface FastifyRequest {
+        user: UserEntity;
+    }
+}

backend/src/common/types/repository.type.ts

@@ -4,6 +4,7 @@ type Repository<T = unknown> = {
     create(payload: unknown): Promise<T>;
     update(): Promise<T>;
     delete(): Promise<boolean>;
+    findById(userId: number): Promise<T | null>;
 };
 
 export { type Repository };

backend/src/common/types/service.type.ts

@@ -3,6 +3,7 @@ type Service<T = unknown> = {
     findAll(): Promise<{
         items: T[];
     }>;
+    findById(userId: number): Promise<T | null>;
     create(payload: unknown): Promise<T>;
     update(): Promise<T>;
     delete(): Promise<boolean>;

frontend/src/bundles/common/components/button/button.tsx

@@ -6,7 +6,7 @@ type Properties = {
 };
 
 const Button: React.FC<Properties> = ({ type = 'button', label }) => (
-    <LibraryButton type={type} color="brand.900" width="full">
+    <LibraryButton type={type} width="full">
         {label}
     </LibraryButton>
 );

frontend/src/bundles/common/components/components.ts

@@ -1,11 +1,16 @@
 export { Button } from './button/button.js';
 export { Input } from './input/input.js';
 export { Link } from './link/link.js';
+export { Loader } from './loader/loader.js';
+export { Overlay } from './overlay/overlay.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export {
     Box,
+    Circle,
     ChakraProvider as ComponentsProvider,
+    Flex,
     Heading,
+    Text,
     VStack,
 } from '@chakra-ui/react';
 export { FormikProvider as FormProvider } from 'formik';

frontend/src/bundles/common/components/loader/libs/constants/constants.ts

@@ -0,0 +1 @@
+export { SPIN_ANIMATION } from './spin-animation.constant.js';

frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts

@@ -0,0 +1,8 @@
+import { keyframes } from '@chakra-ui/react';
+
+const SPIN_ANIMATION = keyframes`
+    0% { transform: rotate(0deg);}
+    100% { transform: rotate(360deg)}
+`;
+
+export { SPIN_ANIMATION };

frontend/src/bundles/common/components/loader/loader.tsx

@@ -0,0 +1,32 @@
+import { Box, Circle, Flex, Text } from '@chakra-ui/react';
+
+import { SPIN_ANIMATION } from './libs/constants/constants.js';
+
+const Loader = (): JSX.Element => {
+    return (
+        <Flex flexDirection="column" alignItems="center">
+            <Box position="relative" width="100px" height="100px">
+                <Circle
+                    size="full"
+                    backgroundColor="white"
+                    color="text.default"
+                >
+                    LOGO
+                </Circle>
+                <Circle
+                    position="absolute"
+                    inset="0"
+                    borderWidth="5px"
+                    borderColor="shadow.200"
+                    borderTopColor="brand.secondary.300"
+                    animation={`${SPIN_ANIMATION} 1s linear infinite`}
+                />
+            </Box>
+            <Text fontSize="lg" marginTop="10px">
+                Loading...
+            </Text>
+        </Flex>
+    );
+};
+
+export { Loader };

frontend/src/bundles/common/components/overlay/overlay.tsx

@@ -0,0 +1,26 @@
+import { Fade, Flex } from '@chakra-ui/react';
+
+type Properties = {
+    isOpen: boolean;
+    children: React.ReactNode;
+};
+
+const Overlay = ({ isOpen, children }: Properties): JSX.Element => {
+    return (
+        <Fade in={isOpen}>
+            <Flex
+                width="full"
+                height="full"
+                position="absolute"
+                background="shadow.700"
+                color="white"
+                justifyContent="center"
+                alignItems="center"
+            >
+                {children}
+            </Flex>
+        </Fade>
+    );
+};
+
+export { Overlay };

frontend/src/bundles/users/components/components.ts

@@ -0,0 +1 @@
+export { UserCard } from './user-card/user-card.js';

frontend/src/bundles/users/components/user-card/user-card.tsx

@@ -0,0 +1,32 @@
+import {
+    Button,
+    Circle,
+    Flex,
+    Text,
+    VStack,
+} from '~/bundles/common/components/components.js';
+
+const UserCard: React.FC = () => (
+    <VStack rounded="lg" bg="background.600" spacing="10px" p="15px 5px 10px">
+        <Flex
+            w="full"
+            align="center"
+            color="brand.secondary.900"
+            gap="15px"
+            pl="10px"
+        >
+            {/* TODO: replace Circle and Text content with dynamic values */}
+            <Circle
+                size="40px"
+                border="2px solid"
+                borderColor="brand.secondary.900"
+            >
+                FN
+            </Circle>
+            <Text>Firstname Lastname</Text>
+        </Flex>
+        <Button label="Create video" />
+    </VStack>
+);
+
+export { UserCard };

frontend/src/framework/theme/styles/colors.styles.ts

@@ -1,7 +1,28 @@
 const colors = {
+    white: '#ffffff',
+    background: {
+        900: '#0a0049',
+        600: '#35399a',
+        300: '#3c9cf5',
+        50: '#e2e1ec',
+    },
     brand: {
         900: '#1a365d',
         200: '#b3e0ff',
+        secondary: {
+            300: '#ff6e1c',
+            600: '#eb5500',
+            900: '#e13b00',
+        },
+    },
+    shadow: {
+        200: 'rgba(0, 0, 0, 0.2)',
+        700: 'rgba(0, 0, 0, 0.7)',
+    },
+    typography: {
+        900: '#181b1a',
+        600: '#616271',
+        300: '#989898',
     },
     text: {
         default: '#36454f',