chore():refacto WebRTC + fix CI

.github/workflows/coverage-front.yml

@@ -12,5 +12,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20.x
+      - name: install
+        run: npm --prefix ./frontend-web install
       - name: build
         run: npm --prefix ./frontend-web run build

.github/workflows/npm.yml

@@ -12,5 +12,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20.x
+      - name: install
+        run: npm --prefix ./frontend-web install
       - name: build
         run: npm --prefix frontend-web run build

backend/src/main/java/com/mercure/config/SecurityConfig.java

@@ -15,8 +15,6 @@
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.security.web.SecurityFilterChain;
 import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
-import org.springframework.security.web.csrf.CookieCsrfTokenRepository;
-import org.springframework.security.web.csrf.CsrfTokenRepository;
 
 @Configuration
 public class SecurityConfig {
@@ -52,6 +50,7 @@ public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
                         .requestMatchers("/auth").permitAll()
                         .requestMatchers("/health-check").permitAll()
                         .anyRequest().authenticated())
+                .logout(AbstractHttpConfigurer::disable)
                 .sessionManagement(httpSecuritySessionManagementConfigurer -> httpSecuritySessionManagementConfigurer.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                 .authenticationProvider(authenticationProvider())
                 .addFilterBefore(jwtWebConfig, UsernamePasswordAuthenticationFilter.class);

backend/src/main/java/com/mercure/dto/AuthUserDTO.java

@@ -16,7 +16,9 @@ public class AuthUserDTO {
 
     private int id;
 
-    private String username;
+    private String firstName;
+
+    private String lastName;
 
     private String firstGroupUrl;
 

backend/src/main/java/com/mercure/mapper/UserMapper.java

@@ -70,6 +70,6 @@ public AuthUserDTO toLightUserDTO(UserEntity userEntity) {
         Optional<GroupEntity> groupUrl = groups.stream().findFirst();
         String lastGroupUrl = groupUrl.isPresent() ? groupUrl.get().getUrl() : "";
         allUserGroups.sort(new ComparatorListGroupDTO());
-        return new AuthUserDTO(userEntity.getId(), userEntity.getFirstName(), lastGroupUrl, userEntity.getWsToken(), allUserGroups);
+        return new AuthUserDTO(userEntity.getId(), userEntity.getFirstName(), userEntity.getLastName(), lastGroupUrl, userEntity.getWsToken(), allUserGroups);
     }
 }

frontend-web/Dockerfile

@@ -0,0 +1,16 @@
+FROM nginx:mainline-alpine3.18-slim
+
+RUN rm /etc/nginx/conf.d/default.conf
+RUN echo 'server { \
+              listen       80; \
+              server_name  localhost; \
+          \
+              location / { \
+                  root   /usr/share/nginx/html; \
+                  index  index.html index.htm; \
+                  try_files $uri $uri/ /index.html; \
+              } \
+          }' >> /etc/nginx/conf.d/default.conf
+RUN rm -rf /usr/share/nginx/html/*
+
+COPY dist /usr/share/nginx/html

frontend-web/src/components/home.tsx

@@ -1,4 +1,4 @@
-import {Card, CardContent, Grid, Typography} from "@mui/material"
+import {Box, Card, CardContent, Grid, Typography} from "@mui/material"
 import React, {useEffect} from "react"
 import {generateColorMode} from "./utils/enable-dark-mode"
 import {useThemeContext} from "../context/theme-context"
@@ -13,31 +13,32 @@ export const HomeComponent = (): React.JSX.Element => {
     }, [])
 
     return (
-        <div className={generateColorMode(theme)} style={{height: "100%"}}>
-            <Grid container style={{height: "100%", verticalAlign: "middle"}}>
-                <Grid item xs={6}>
-                    <Card variant="outlined">
-                        <CardContent>
-                            <Typography variant="h5" gutterBottom>
-                                Welcome to FastLiteMessage
-                            </Typography>
+        <div className={generateColorMode(theme)} style={{height: "100%", display: "flex", alignItems: "center"}}>
+            <Grid sx={{m: 2}} container xs={12}>
+                <Card variant="outlined">
+                    <CardContent>
+                        <Typography variant="h5" gutterBottom>
+                            Welcome to FastLiteMessage
+                        </Typography>
 
-                            <img src={"/assets/icons/landing_logo.svg"} height={"300"} alt={"test svg"}/>
-
-                            <Typography variant="h5" gutterBottom>
-                                Simple, fast and secure
-                            </Typography>
-                            <div>FastLiteMessage allow to communicate with other people, create groups, make
-                                serverless video calls in an easy way. Log into your account or register to start
-                                using FastLiteMessage.
-                            </div>
-                            <FooterComponent/>
-                        </CardContent>
-                    </Card>
-                </Grid>
-                <Grid xs={6}>
-                    <LoginComponent/>
-                </Grid>
+                        <Typography variant="h6" gutterBottom>
+                            Simple, fast and secure
+                        </Typography>
+                        <Box sx={{display: "flex"}}>
+                            <Box display={"flex"} flexDirection={"column"}>
+                                <img src={"/assets/icons/landing_logo.svg"} height={"150"} alt={"test svg"}/>
+                                <Box>
+                                    FastLiteMessage allows to communicate with other people everywhere, create groups, make
+                                    serverless video calls in an easy way. Log into your account or register to start
+                                    using FastLiteMessage.
+                                </Box>
+                                <img src={"/assets/icons/landing_logo2.svg"} height={"150"} alt={"test svg"}/>
+                            </Box>
+                            <LoginComponent/>
+                        </Box>
+                        <FooterComponent/>
+                    </CardContent>
+                </Card>
             </Grid>
         </div>
     )

frontend-web/src/components/login/LoginComponent.tsx

@@ -1,18 +1,21 @@
-import LockIcon from "@mui/icons-material/Lock"
 import {Button, Grid, TextField, Typography} from "@mui/material"
 import React, {useContext, useEffect, useState} from "react"
 import {Link, useNavigate} from "react-router-dom"
 import {useThemeContext} from "../../context/theme-context"
-import {generateIconColorMode, generateLinkColorMode} from "../utils/enable-dark-mode"
+import {generateLinkColorMode} from "../utils/enable-dark-mode"
 import {HttpGroupService} from "../../service/http-group-service"
 import {LoaderContext} from "../../context/loader-context"
 import {AlertAction, AlertContext} from "../../context/AlertContext"
+import {UserContext} from "../../context/UserContext"
+import {GroupContext, GroupContextAction} from "../../context/GroupContext"
 
 export function LoginComponent(): React.JSX.Element {
     const [username, setUsername] = useState("")
     const [password, setPassword] = useState("")
 
     const navigate = useNavigate()
+    const {setUser} = useContext(UserContext)!
+    const {changeGroupState} = useContext(GroupContext)!
     const {dispatch} = useContext(AlertContext)!
     const {setLoading} = useContext(LoaderContext)
     const {theme} = useThemeContext()
@@ -48,10 +51,15 @@ export function LoginComponent(): React.JSX.Element {
     const login = async () => {
         setLoading(true)
         try {
-            await httpService.authenticate({
+            const {data} = await httpService.authenticate({
                 username,
                 password
             })
+            setUser(data)
+            changeGroupState({
+                type: GroupContextAction.SET_GROUPS,
+                payload: data.groups
+            })
             navigate("/t/messages")
         } catch (err: any) {
             dispatch({
@@ -74,23 +82,18 @@ export function LoginComponent(): React.JSX.Element {
         <div className={theme}
              style={{
                  height: "100%",
-                 width: "100%"
+                 width: "100%",
+                 display: "flex",
+                 justifyContent: "center",
+                 alignItems: "center"
              }}>
             <div className={"main-register-form"}>
-                <div style={{
-                    display: "flex",
-                    justifyContent: "center"
-                }}>
-                    <LockIcon fontSize={"large"}
-                              className={generateIconColorMode(theme)}
-                    />
-                </div>
-                <Typography component="h1" variant="h5">
+                <Typography variant="h6" gutterBottom>
                     Sign in
                 </Typography>
-                <div>
-                    <Grid container spacing={2}>
-                        <Grid item xs={12}>
+                <Grid>
+                    <Grid container>
+                        <Grid item sx={{my: 1}} xs={12}>
                             <TextField label={"Username"}
                                        name={"username"}
                                        value={username}
@@ -100,7 +103,7 @@ export function LoginComponent(): React.JSX.Element {
                                        multiline={false}
                                        type={"text"}/>
                         </Grid>
-                        <Grid item xs={12}>
+                        <Grid item sx={{my: 1}} xs={12}>
                             <TextField label={"Password"}
                                        name={"password"}
                                        value={password}
@@ -112,21 +115,19 @@ export function LoginComponent(): React.JSX.Element {
                             />
                         </Grid>
                     </Grid>
-                    <div>
-                        <Grid item xs={12}>
-                            <Button
-                                disabled={username === "" || password === ""}
-                                className={"button-register-form"}
-                                style={{marginTop: "15px"}}
-                                onClick={(event) => submitLogin(event)}
-                                fullWidth
-                                variant="outlined"
-                                color="primary"
-                            >
-                                Sign in
-                            </Button>
-                        </Grid>
-                    </div>
+                    <Grid item xs={12}>
+                        <Button
+                            disabled={username === "" || password === ""}
+                            className={"button-register-form"}
+                            style={{marginTop: "15px"}}
+                            onClick={(event) => submitLogin(event)}
+                            fullWidth
+                            variant="outlined"
+                            color="primary"
+                        >
+                            Sign in
+                        </Button>
+                    </Grid>
                     <Grid container justifyContent={"space-between"}>
                         <Link className={"lnk"}
                               style={{color: generateLinkColorMode(theme)}}
@@ -139,7 +140,7 @@ export function LoginComponent(): React.JSX.Element {
                             Sign up
                         </Link>
                     </Grid>
-                </div>
+                </Grid>
             </div>
         </div>
     )

frontend-web/src/components/register/register-form.css

@@ -2,7 +2,6 @@
     text-align: center;
     display: flex;
     flex-direction: column;
-    align-items: center;
 }
 
 @media (max-width: 1250px) {

frontend-web/src/components/user-account/UseAccountComponent.tsx

@@ -14,10 +14,14 @@ import {HttpGroupService} from "../../service/http-group-service"
 import {AlertAction, AlertContext} from "../../context/AlertContext"
 import {capitalize} from "@mui/material"
 import {UserContext} from "../../context/UserContext"
+import {useNavigate} from "react-router-dom"
+import {LoaderContext} from "../../context/loader-context"
 
 export function AccountMenu() {
     const {dispatch} = useContext(AlertContext)!
     const {user} = useContext(UserContext)!
+    const {setLoading} = useContext(LoaderContext)
+    const navigate = useNavigate()
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
     const open = Boolean(anchorEl)
 
@@ -42,13 +46,35 @@ export function AccountMenu() {
     }
 
     async function logout() {
+        setLoading(true)
         const http = new HttpGroupService()
-        await http.logout()
-        dispatch({
-            type: AlertAction.ADD_ALERT,
-            payload: {alert: "success", id: crypto.randomUUID(), isOpen: true, text: "You have successfully logged out"}
-        })
-        handleClose()
+        try {
+            await http.logout()
+            dispatch({
+                type: AlertAction.ADD_ALERT,
+                payload: {
+                    alert: "success",
+                    id: crypto.randomUUID(),
+                    isOpen: true,
+                    text: "You have successfully logged out"
+                }
+            })
+            navigate("/login")
+        } catch (error) {
+            dispatch({
+                type: AlertAction.ADD_ALERT,
+                payload: {
+                    alert: "error",
+                    id: crypto.randomUUID(),
+                    isOpen: true,
+                    text: "Cannot perform logout. Unexpected error."
+                }
+            })
+        } finally {
+            handleClose()
+            setLoading(false)
+        }
+
     }
 
     return (