Feat/linking front to api

apps/api/src/app/auth/auth.service.ts

@@ -26,14 +26,13 @@ export class AuthService {
   async register(
     registerData: Pick<User, 'email' | 'password'>
   ): Promise<User> {
-    const password = await bcrypt.hash(
-      registerData.password,
-      this.configService.get('PASSWORD_SALT_ROUND')
-    );
+    const password = await bcrypt.hash(registerData.password, 12);
 
     const userExists = await this.userService.getUserByEmail(
-      registerData.email
+      registerData.email,
+      true
     );
+
     if (userExists) {
       throw new ConflictException(AuthError.EMAIL_ALREADY_EXISTS);
     }

apps/api/src/app/message/message.controller.ts

@@ -2,17 +2,20 @@ import { Body, Controller, Get, Param, Post } from '@nestjs/common';
 import { MessageService } from './message.service';
 import { CreateMessageCommand } from './commands';
 import { ApiTags } from '@nestjs/swagger';
+import { Public } from '../auth/decorators';
 
 @ApiTags('Message')
 @Controller('message')
 export class MessageController {
   constructor(private readonly messageService: MessageService) {}
 
+  @Public()
   @Get()
   getMessages() {
     return this.messageService.getMessages();
   }
 
+  @Public()
   @Get('receiver/:id')
   getMessagesByReceiverId(@Param('id') id: string) {
     return this.messageService.getMessagesByReceiverId(id);
@@ -23,6 +26,7 @@ export class MessageController {
     return this.messageService.getMessageById(id);
   }
 
+  @Public()
   @Post()
   createMessage(@Body() data: CreateMessageCommand) {
     return this.messageService.createMessage(data);

apps/api/src/app/user/user.service.ts

@@ -24,10 +24,13 @@ export class UserService {
     return user;
   }
 
-  async getUserByEmail(email: string): Promise<User> {
+  async getUserByEmail(
+    email: string,
+    verification: boolean = false
+  ): Promise<User> {
     const user = await this.prisma.user.findFirst({ where: { email } });
 
-    if (!user) {
+    if (!user && !verification) {
       throw new NotFoundException(UserError.USER_NOT_FOUND);
     }
 

apps/front/components/chat/ChatBox.tsx

@@ -5,70 +5,140 @@ import { useRef } from 'react';
 import MessageItem from './message';
 import { BasicButton } from '../forms/Button';
 
-export default function ChatBox() {
-    const [messages, setMessages] = useState([
-        { text: 'Bonjour, comment puis-je vous aider?', user: 'user1', timestamp: new Date() },
-        { text: 'Voici un exemple de message.', user: 'user2', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
+interface ChatProps {
+  chats: [{ text: string; user: string; timestamp: Date }];
+  onMessageSent: (messageText: string) => void;
+}
+
+export default function ChatBox({ chats, onMessageSent }: ChatProps) {
+  const dummyMessages = [
+    {
+      text: 'Bonjour, comment puis-je vous aider?',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Voici un exemple de message.',
+      user: 'user2',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+  ];
+  const [messages, setMessages] = useState([...dummyMessages, ...chats]);
 
-    ]);
-    const [inputValue, setInputValue] = useState(''); 
-    const handleKeyPress = (event: React.KeyboardEvent) => {
-        if (event.key === 'Enter' && !event.shiftKey) { // Vérifier si la touche "Entrée" est pressée sans "Shift"
-            event.preventDefault(); // Prévenir le comportement par défaut (saut de ligne)
-            sendMessage();
-        }
-    };
-    const inputRef = useRef<HTMLInputElement>(null);
-    const sendMessage = () => {
-        if (inputRef.current && inputRef.current.value.trim() !== '') { 
-            setMessages([...messages, { text: inputRef.current.value, user: 'user2', timestamp: new Date() }]);
-            inputRef.current.value = "";
-            setInputValue(''); 
-        }
-    };
+  const [inputValue, setInputValue] = useState('');
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      sendMessage();
+    }
+  };
+  const inputRef = useRef<HTMLInputElement>(null);
+  const sendMessage = () => {
+    if (inputRef.current && inputRef.current.value.trim() !== '') {
+      setMessages([
+        ...messages,
+        { text: inputRef.current.value, user: 'user2', timestamp: new Date() },
+      ]);
+      onMessageSent(inputRef.current.value);
+      inputRef.current.value = '';
+      setInputValue('');
+    }
+  };
 
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => { 
-        setInputValue(event.target.value);
-    };
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    };
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
 
-    useEffect(() => {
-        scrollToBottom();
-    }, [messages]);
-    return (
-        <Box sx={{ position: 'relative', height: '100%', width: '100%' }}>
-
-        <Box sx={{ height: 'calc(100% - 60px)', overflowY: 'auto' }}>
-            {messages.map((message, index) => (
-            <MessageItem text={message.text} user={message.user} timestamp={message.timestamp} key={index} />
-            ))}
-            <div ref={messagesEndRef} />
-        </Box>
-            <Box sx={{ position: 'sticky', bottom: 0, display: 'flex', justifyContent: 'flex-end', marginTop: 2 }}>                
-                <BasicInput
-                        label=''
-                        variant='outlined'
-                        forwardedRef={inputRef}
-                        value={inputValue}
-                        onChange={handleInputChange} 
-                />
-                <BasicButton
-                    buttonVariant='contained'
-                    buttonColor='primary'
-                    onClick={sendMessage}
-                    chat='yes'
-                    disabled={inputValue.trim() === ''} 
-                />
-            </Box>
-        </Box>
-    );
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        height: '100%',
+        width: '100%',
+      }}
+    >
+      <Box
+        sx={{
+          height: 'calc(100% - 60px)',
+          overflowY: 'auto',
+          paddingX: '2%',
+        }}
+      >
+        {messages.map((message, index) => (
+          <MessageItem
+            text={message.text}
+            user={message.user}
+            timestamp={message.timestamp}
+            key={index}
+          />
+        ))}
+        <div ref={messagesEndRef} />
+      </Box>
+      <Box
+        sx={{
+          backgroundColor: 'background.default',
+          position: 'sticky',
+          bottom: 0,
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginTop: 2,
+          zIndex: 999,
+          width: '100%',
+        }}
+      >
+        <BasicInput
+          label=""
+          variant="outlined"
+          forwardedRef={inputRef}
+          value={inputValue}
+          onChange={handleInputChange}
+          onKeyPress={handleKeyPress}
+        />
+        <BasicButton
+          buttonVariant="contained"
+          buttonColor="primary"
+          onClick={sendMessage}
+          chat="yes"
+          disabled={inputValue.trim() === ''}
+        />
+      </Box>
+    </Box>
+  );
 }

apps/front/components/forms/Button.tsx

@@ -8,19 +8,30 @@ interface BasicButtonProps {
   buttonColor: 'primary' | 'secondary';
   chat: 'yes' | 'no';
   disabled?: boolean;
+  buttonWidth?: number;
 }
 
 export function BasicButton(props: BasicButtonProps) {
-  const { buttonText, buttonVariant, onClick, buttonColor, chat, disabled } = props;
+  const {
+    buttonText,
+    buttonVariant,
+    onClick,
+    buttonColor,
+    chat,
+    disabled,
+    buttonWidth,
+  } = props;
 
   const buttonContent = chat === 'yes' ? <SendIcon /> : buttonText;
 
   return (
     <Button
       variant={buttonVariant}
-      color={buttonColor}
       onClick={onClick}
-      sx={{ color: 'white' }}
+      sx={{
+        color: buttonColor,
+        width: buttonWidth ? `${buttonWidth}%` : undefined,
+      }}
       disabled={disabled}
     >
       {buttonContent}

apps/front/components/forms/Input.tsx

@@ -7,24 +7,31 @@ interface BasicInputProps {
   variant?: 'standard' | 'filled' | 'outlined';
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export default function BasicInput(props: BasicInputProps) {
+  const { label, variant, forwardedRef, value, onChange, onKeyPress } = props;
+
   const handleKeyPress = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' && !event.shiftKey) { 
-        event.preventDefault(); 
-
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
     }
-};
+  };
   return (
     <TextField
-      sx={{ flexGrow: 1, marginRight: 1 }} 
+      sx={{
+        flexGrow: 1,
+        minWidth: '40%',
+        marginRight: 1,
+      }}
       className="standard-basic"
-      label={props.label !== '' ? props.label : undefined}
-      variant={props.variant || 'standard'}
-      inputRef={props.forwardedRef}
-      value={props.value} 
-      onChange={props.onChange}
+      label={label !== '' ? label : undefined}
+      variant={variant || 'standard'}
+      inputRef={forwardedRef}
+      value={value}
+      onChange={onChange}
+      onKeyPress={onKeyPress}
     />
   );
 }