prettier stuff

2025-12-06 06:36:12 +00:00 · 2022-02-21 18:22:23 +01:00
parent bf6c4330da
commit fadfedfbbb
25 changed files with 30828 additions and 30692 deletions
--- a/web-app/package-lock.json
+++ b/web-app/package-lock.json
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -1,57 +1,56 @@
 {
-  "name": "web-app",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@mui-treasury/components": "^1.10.1",
-    "@mui/icons-material": "^5.3.1",
-    "@mui/lab": "^5.0.0-alpha.68",
-    "@mui/material": "^5.3.1",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12  .1.2",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.0",
-    "@types/node": "^16.11.21",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-router-dom": "^5.3.3",
-    "color": "^4.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.2.1",
-    "react-scripts": "5.0.0",
-    "typescript": "^4.5.4",
-    "web-vitals": "^2.1.3"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "webpack": "webpack",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/preset-typescript": "^7.16.7",
-    "ts-loader": "^9.2.6"
-  }
+	"name": "web-app",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@emotion/react": "^11.7.1",
+		"@emotion/styled": "^11.6.0",
+		"@mui-treasury/components": "^1.10.1",
+		"@mui/icons-material": "^5.3.1",
+		"@mui/lab": "^5.0.0-alpha.68",
+		"@mui/material": "^5.3.1",
+		"@testing-library/jest-dom": "^5.16.1",
+		"@testing-library/react": "^12  .1.2",
+		"@testing-library/user-event": "^13.5.0",
+		"@types/jest": "^27.4.0",
+		"@types/node": "^16.11.21",
+		"@types/react": "^17.0.38",
+		"@types/react-dom": "^17.0.11",
+		"@types/react-router-dom": "^5.3.3",
+		"color": "^4.2.0",
+		"prettier": "^2.5.1",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"react-router-dom": "^6.2.1",
+		"react-scripts": "5.0.0",
+		"typescript": "^4.5.4",
+		"web-vitals": "^2.1.3"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"webpack": "webpack",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject",
+		"pretty": "prettier --write \"./**/*.{ts,tsx,json}\""
+	},
+	"prettier": {
+		"useTabs": true
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"@babel/preset-typescript": "^7.16.7",
+		"ts-loader": "^9.2.6"
+	}
 }
--- a/web-app/public/manifest.json
+++ b/web-app/public/manifest.json
@@ -1,25 +1,25 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+	"short_name": "React App",
+	"name": "Create React App Sample",
+	"icons": [
+		{
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
+		},
+		{
+			"src": "logo192.png",
+			"type": "image/png",
+			"sizes": "192x192"
+		},
+		{
+			"src": "logo512.png",
+			"type": "image/png",
+			"sizes": "512x512"
+		}
+	],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
 }
--- a/web-app/src/Aeris.theme.tsx
+++ b/web-app/src/Aeris.theme.tsx
@@ -1,20 +1,20 @@
-import { createTheme } from '@mui/material/styles';
+import { createTheme } from "@mui/material/styles";

 const aerisTheme = createTheme({
-    palette: {
-        primary: {
-            light: "#62717b",
-            main: "#37474F",
-            dark: "#101f27",
-            contrastText: "#ffffff"
-        },
-        secondary: {
-            light: "#ff94c2",
-            main: "#F06292",
-            dark: "#ba2d65",
-            contrastText: "#000000"
-        }
-    }
+	palette: {
+		primary: {
+			light: "#62717b",
+			main: "#37474F",
+			dark: "#101f27",
+			contrastText: "#ffffff",
+		},
+		secondary: {
+			light: "#ff94c2",
+			main: "#F06292",
+			dark: "#ba2d65",
+			contrastText: "#000000",
+		},
+	},
 });

-export default aerisTheme;
+export default aerisTheme;
--- a/web-app/src/App.test.tsx
+++ b/web-app/src/App.test.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";

-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test("renders learn react link", () => {
+	render(<App />);
+	const linkElement = screen.getByText(/learn react/i);
+	expect(linkElement).toBeInTheDocument();
 });
--- a/web-app/src/App.tsx
+++ b/web-app/src/App.tsx
@@ -1,155 +1,161 @@
-import type { PipelineBoxProps } from './components/Pipelines/PipelineBox';
-import { GenericButtonProps }  from './components/GenericButton';
-import { Typography, Box, Button } from '@mui/material';
-import type { ServiceProps } from './components/types';
-import './App.css';
+import type { PipelineBoxProps } from "./components/Pipelines/PipelineBox";
+import { GenericButtonProps } from "./components/GenericButton";
+import { Typography, Box, Button } from "@mui/material";
+import type { ServiceProps } from "./components/types";
+import "./App.css";

 import { PipelineTriggersProps } from "./pages/PipelineSetup";

 import { useNavigate } from "react-router-dom";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import * as React from "react";
-  /*
+/*
  <PipelineBoxesLayout data={data} />
          <PipelineModal height="500" width="500"> 
            <PipelineBoxesLayout data={data} />
          </PipelineModal>
  */

-
-
 export default function App() {
+	let svc: ServiceProps = {
+		altText: "youTube",
+		imageSrc:
+			"https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
+	};
+	let svc2: ServiceProps = {
+		altText: "Spotify",
+		imageSrc:
+			"https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg",
+	};

-  let svc: ServiceProps = {
-    altText: "youTube", imageSrc: "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg" 
-  }
-  let svc2: ServiceProps = {
-    altText: "Spotify", imageSrc: "https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg" 
-  }
+	let data: Array<PipelineBoxProps> = [
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+		{
+			title: "Lorem ipsum behm uit's long",
+			statusText:
+				"Lego Star Wars: The Skywalker Saga is an upcoming Lego-themed action-adventure game developed by Traveller's Tales and published by Warner Bros. Interactive Entertainment. It will be the sixth entry in TT Games' Lego Star Wars series of video games and the successor to Lego Star Wars: The Force",
+			service1: svc2,
+			service2: svc,
+		},
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+		{
+			title: "Lorem ipsum behm uit's long",
+			statusText: "Vive la france !",
+			service1: svc2,
+			service2: svc,
+		},
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+		{
+			title: "Lorem ipsum behm uit's long",
+			statusText: "Vive la france !",
+			service1: svc2,
+			service2: svc,
+		},
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+		{
+			title: "Lorem ipsum behm uit's long",
+			statusText: "Vive la france !",
+			service1: svc2,
+			service2: svc,
+		},
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+	];

-  let data:Array<PipelineBoxProps> = [
-    {
-      title: 'My super action',
-      statusText: "Last: 2d ago", 
-      service1: svc ,
-      service2: svc2
-    },
-    {
-      title: 'Lorem ipsum behm uit\'s long',
-      statusText: "Lego Star Wars: The Skywalker Saga is an upcoming Lego-themed action-adventure game developed by Traveller's Tales and published by Warner Bros. Interactive Entertainment. It will be the sixth entry in TT Games' Lego Star Wars series of video games and the successor to Lego Star Wars: The Force", 
-      service1: svc2 ,
-      service2: svc
-    },
-    {
-      title: 'My super action',
-      statusText: "Last: 2d ago", 
-      service1: svc ,
-      service2: svc2
-    },
-    {
-      title: 'Lorem ipsum behm uit\'s long',
-      statusText: "Vive la france !", 
-      service1: svc2 ,
-      service2: svc
-    },
-    {
-      title: 'My super action',
-      statusText: "Last: 2d ago", 
-      service1: svc ,
-      service2: svc2
-    },
-    {
-      title: 'Lorem ipsum behm uit\'s long',
-      statusText: "Vive la france !", 
-      service1: svc2 ,
-      service2: svc
-    },
-    {
-      title: 'My super action',
-      statusText: "Last: 2d ago", 
-      service1: svc ,
-      service2: svc2
-    },
-    {
-      title: 'Lorem ipsum behm uit\'s long',
-      statusText: "Vive la france !", 
-      service1: svc2 ,
-      service2: svc
-    },
-    {
-      title: 'My super action',
-      statusText: "Last: 2d ago", 
-      service1: svc ,
-      service2: svc2
-    },
-  ]
+	let actions: Array<GenericButtonProps> = [
+		{
+			title: "Une vidéo à été rg erg ergr rgrg  publiée",
+			service: svc,
+			trailingIcon: <MoreVertIcon />,
+		},
+		{
+			title: "Riz aux oignons",
+			service: svc2,
+			trailingIcon: <MoreVertIcon />,
+		},
+	];

+	let triggersAvailable: Array<PipelineTriggersProps> = [
+		{
+			name: "Test",
+			triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2"),
+		},
+		{
+			name: "Test 2",
+			triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2"),
+		},
+		{
+			name: "Test 3",
+			triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2"),
+		},
+	];

-  let actions: Array<GenericButtonProps> = [
-    {
-      title: "Une vidéo à été rg erg ergr rgrg  publiée",
-      service: svc,
-      trailingIcon: <MoreVertIcon/>
-    },
-    {
-      title: "Riz aux oignons",
-      service: svc2,
-      trailingIcon: <MoreVertIcon/>
-    },
-  ]
+	const navigate = useNavigate();

-  let triggersAvailable: Array<PipelineTriggersProps> = [
-    {
-      name: "Test",
-      triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2")
-    },
-    {
-      name: "Test 2",
-      triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2")
-    },
-    {
-      name: "Test 3",
-      triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2")
-    }
-  ]
+	const pushToLogin = () => {
+		navigate("/auth");
+	};

-    const navigate = useNavigate();
-
-    const pushToLogin = () => {
-        navigate("/auth");
-    }
-
-  return (
-    <div className="App">
-      <header className="App-header">
-        <div id='container'>
-          <Box  sx={{ display: 'flex', flexDirection: 'column', alignItems: "center" }}>
-            <Box
-                component="img"
-
-                alt="Aeris Logo"
-                src={require("./assets/logo-white.png")}
-            />
-            <br/>
-            <Typography
-                variant="h4"
-                style={{ textAlign: 'center', maxWidth: '75%' }}
-            >
-                Professional, personnal action-reaction manager
-            </Typography>
-            <br/>
-            <Button
-                id="toConnect"
-                variant="contained"
-                color="secondary"
-                className="EndStartupBtn"
-                onClick={pushToLogin}
-            >
-                Connect to Aeris
-            </Button>
-          </Box>
-        </div>
-      </header>
-    </div>
-  );
+	return (
+		<div className="App">
+			<header className="App-header">
+				<div id="container">
+					<Box
+						sx={{
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+						}}
+					>
+						<Box
+							component="img"
+							alt="Aeris Logo"
+							src={require("./assets/logo-white.png")}
+						/>
+						<br />
+						<Typography
+							variant="h4"
+							style={{ textAlign: "center", maxWidth: "75%" }}
+						>
+							Professional, personnal action-reaction manager
+						</Typography>
+						<br />
+						<Button
+							id="toConnect"
+							variant="contained"
+							color="secondary"
+							className="EndStartupBtn"
+							onClick={pushToLogin}
+						>
+							Connect to Aeris
+						</Button>
+					</Box>
+				</div>
+			</header>
+		</div>
+	);
 }
--- a/web-app/src/components/Animated
+++ b/web-app/src/components/Animated
@@ -1,3 +1,3 @@
 export default () => {
-    return <div></div>
-}
+	return <div></div>;
+};
--- a/web-app/src/components/GenericButton.tsx
+++ b/web-app/src/components/GenericButton.tsx
@@ -1,42 +1,74 @@
-import { Box, CardContent, Typography, CardMedia, IconButton } from "@mui/material";
-import Card from "@mui/material/Card"
-import type { ServiceProps } from './types'
-
+import {
+	Box,
+	CardContent,
+	Typography,
+	CardMedia,
+	IconButton,
+} from "@mui/material";
+import Card from "@mui/material/Card";
+import type { ServiceProps } from "./types";

 interface GenericButtonProps {
-    title: string,
+	title: string;

-    service: ServiceProps
+	service: ServiceProps;

-    trailingIcon: JSX.Element
+	trailingIcon: JSX.Element;
 }

-export type { GenericButtonProps }
+export type { GenericButtonProps };

-export default function GenericButton({ title, service, trailingIcon }: GenericButtonProps)
-{
-    return (
-        <Card sx={{ display:"flex", alignItems:"center", borderRadius:"15px", width:"500px" }}>
-            <Box className="GenericButtonMedia"  sx={{ display:"flex", width:'15%', alignItems:"center", justifyContent:"center" }}>
-                <CardMedia
-                    component="img"
-                    sx={{ width: "50%" }}
-                    image={ service.imageSrc }
-                    alt={ service.altText }
-                />
-            </Box>
-            <Box sx={{ width: '70%', alignItems:"center", justifyContent:"center"  }}>
-                <CardContent>
-                    <Typography variant="h6" noWrap align="center" >
-                        { title }
-                    </Typography>
-                </CardContent>
-            </Box>
-            <Box sx={{ width: '15%', display:"flex", alignItems:"center", justifyContent:"center" }}>
-                <IconButton color="secondary" aria-label="Options" component="span" >
-                    { trailingIcon }
-                </IconButton>
-            </Box>
+export default function GenericButton({
+	title,
+	service,
+	trailingIcon,
+}: GenericButtonProps) {
+	return (
+		<Card
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				borderRadius: "15px",
+				width: "500px",
+			}}
+		>
+			<Box
+				className="GenericButtonMedia"
+				sx={{
+					display: "flex",
+					width: "15%",
+					alignItems: "center",
+					justifyContent: "center",
+				}}
+			>
+				<CardMedia
+					component="img"
+					sx={{ width: "50%" }}
+					image={service.imageSrc}
+					alt={service.altText}
+				/>
+			</Box>
+			<Box
+				sx={{ width: "70%", alignItems: "center", justifyContent: "center" }}
+			>
+				<CardContent>
+					<Typography variant="h6" noWrap align="center">
+						{title}
+					</Typography>
+				</CardContent>
+			</Box>
+			<Box
+				sx={{
+					width: "15%",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+				}}
+			>
+				<IconButton color="secondary" aria-label="Options" component="span">
+					{trailingIcon}
+				</IconButton>
+			</Box>
 		</Card>
-    );
+	);
 }
--- a/web-app/src/components/PipelineActionList.tsx
+++ b/web-app/src/components/PipelineActionList.tsx
@@ -1,35 +1,33 @@
-import GenericButton, { GenericButtonProps } from './GenericButton';
-import { Typography, Grid } from '@mui/material'
+import GenericButton, { GenericButtonProps } from "./GenericButton";
+import { Typography, Grid } from "@mui/material";

 interface PipelineActionListProps {
-    title: string,
-    actions: Array<GenericButtonProps>
-
+	title: string;
+	actions: Array<GenericButtonProps>;
 }

 export type { PipelineActionListProps };

-export default function PipelineActionList({ title, actions } : PipelineActionListProps) {
-    return (
-        <div>
-          <Typography align='left' >
-            { title }
-          </Typography>
-          <Grid
-          container
-          direction="column"
-          spacing={2}
-          justifyContent="flex-start"
-          alignItems="flex-start"
-          >
-            {actions.map((el, index) => (
-              <Grid item sm={10} md={10} lg={5}  xl={4} key={index} >
-                <GenericButton 
-                    {...el}
-                    />
-              </Grid>
-            ))}
-          </Grid>
-        </div>
-    );
-}
+export default function PipelineActionList({
+	title,
+	actions,
+}: PipelineActionListProps) {
+	return (
+		<div>
+			<Typography align="left">{title}</Typography>
+			<Grid
+				container
+				direction="column"
+				spacing={2}
+				justifyContent="flex-start"
+				alignItems="flex-start"
+			>
+				{actions.map((el, index) => (
+					<Grid item sm={10} md={10} lg={5} xl={4} key={index}>
+						<GenericButton {...el} />
+					</Grid>
+				))}
+			</Grid>
+		</div>
+	);
+}
--- a/web-app/src/components/Pipelines/PipelineBox.tsx
+++ b/web-app/src/components/Pipelines/PipelineBox.tsx
@@ -1,64 +1,84 @@
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Typography from '@mui/material/Typography';
-import { CardActionArea } from '@mui/material';
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Typography from "@mui/material/Typography";
+import { CardActionArea } from "@mui/material";

-import { useTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-
-import "./PipelineBox.css"
-import { borderRadius } from '@mui/system';
-import type { ServiceProps } from './../types'
+import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";

+import "./PipelineBox.css";
+import { borderRadius } from "@mui/system";
+import type { ServiceProps } from "./../types";

 interface PipelineBoxProps {
 	// title of the pipeline box
-	title: string,
+	title: string;
 	// utc in seconds or anything useful to display
-	statusText: string,
-	service1: ServiceProps,
-	service2: ServiceProps,
-	onClickCallback?: React.MouseEventHandler<HTMLButtonElement>
+	statusText: string;
+	service1: ServiceProps;
+	service2: ServiceProps;
+	onClickCallback?: React.MouseEventHandler<HTMLButtonElement>;
 }

-export type { PipelineBoxProps }
+export type { PipelineBoxProps };

-export default function PipelineBox({ title, statusText, service1, service2, onClickCallback }: PipelineBoxProps) {
+export default function PipelineBox({
+	title,
+	statusText,
+	service1,
+	service2,
+	onClickCallback,
+}: PipelineBoxProps) {
 	const theme = useTheme();

 	return (
-		<Card sx={{ alignItems:"center", borderRadius:"15px" }}>
-			<CardActionArea onClick={onClickCallback} >
-				<Box sx={{ display: 'flex', flexDirection: 'row'}} >
-					<Box sx={{ flexDirection: 'column', width:"70%" }}>
+		<Card sx={{ alignItems: "center", borderRadius: "15px" }}>
+			<CardActionArea onClick={onClickCallback}>
+				<Box sx={{ display: "flex", flexDirection: "row" }}>
+					<Box sx={{ flexDirection: "column", width: "70%" }}>
 						<CardContent>
-							<Typography variant="h5" noWrap align="left" >
-								{ title }
+							<Typography variant="h5" noWrap align="left">
+								{title}
 							</Typography>
-							<Typography variant="subtitle2" color="text.secondary" noWrap align="left"  >
-								{ statusText }
+							<Typography
+								variant="subtitle2"
+								color="text.secondary"
+								noWrap
+								align="left"
+							>
+								{statusText}
 							</Typography>
 						</CardContent>
 					</Box>
-					<Box sx={{ display: 'flex', width:"30%" , flexDirection: 'row', padding:'10px', alignItems:"center", justifyContent:"center", flexWrap: "true" }}>
+					<Box
+						sx={{
+							display: "flex",
+							width: "30%",
+							flexDirection: "row",
+							padding: "10px",
+							alignItems: "center",
+							justifyContent: "center",
+							flexWrap: "true",
+						}}
+					>
 						<CardMedia
 							component="img"
 							sx={{ width: "30%" }}
-							image={ service1.imageSrc }
-							alt={ service1.altText }
+							image={service1.imageSrc}
+							alt={service1.altText}
 						/>
 						<ArrowForwardIcon sx={{ height: 38, width: 38 }} />
 						<CardMedia
 							component="img"
 							sx={{ width: "30%" }}
-							image={ service2.imageSrc }
-							alt={ service2.altText }
+							image={service2.imageSrc}
+							alt={service2.altText}
 						/>
 					</Box>
 				</Box>
 			</CardActionArea>
 		</Card>
 	);
-}
+}
--- a/web-app/src/components/Pipelines/PipelineBoxesLayout.tsx
+++ b/web-app/src/components/Pipelines/PipelineBoxesLayout.tsx
@@ -1,28 +1,25 @@
-import { Group } from "@mui/icons-material"
-import { Grid } from "@mui/material"
-import PipelineBox, { PipelineBoxProps } from './PipelineBox';
-
+import { Group } from "@mui/icons-material";
+import { Grid } from "@mui/material";
+import PipelineBox, { PipelineBoxProps } from "./PipelineBox";

 interface PipelineLayoutProps {
-    data: Array<PipelineBoxProps>
+	data: Array<PipelineBoxProps>;
 }

-export default ({ data } : PipelineLayoutProps) => {
-    return (
-        <Grid
-        container
-        direction="row"
-        spacing={4}
-        justifyContent="space-around"
-        alignItems="flex-start"
-        >
-             {data.map((el, index) => (
-          <Grid item sm={10} md={10} lg={5}  xl={4} key={index} >
-             <PipelineBox 
-                {...el}
-                />
-          </Grid>
-        ))}
-        </Grid>
-    )
-}
+export default ({ data }: PipelineLayoutProps) => {
+	return (
+		<Grid
+			container
+			direction="row"
+			spacing={4}
+			justifyContent="space-around"
+			alignItems="flex-start"
+		>
+			{data.map((el, index) => (
+				<Grid item sm={10} md={10} lg={5} xl={4} key={index}>
+					<PipelineBox {...el} />
+				</Grid>
+			))}
+		</Grid>
+	);
+};
--- a/web-app/src/components/Pipelines/PipelineCreation.tsx
+++ b/web-app/src/components/Pipelines/PipelineCreation.tsx
@@ -1,119 +1,126 @@
-import StepButton from '@mui/material/StepButton';
-import Typography from '@mui/material/Typography';
-import Stepper from '@mui/material/Stepper';
-import Button from '@mui/material/Button';
-import Step from '@mui/material/Step';
-import Box from '@mui/material/Box';
-import * as React from 'react';
+import StepButton from "@mui/material/StepButton";
+import Typography from "@mui/material/Typography";
+import Stepper from "@mui/material/Stepper";
+import Button from "@mui/material/Button";
+import Step from "@mui/material/Step";
+import Box from "@mui/material/Box";
+import * as React from "react";

-const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+const steps = [
+	"Select campaign settings",
+	"Create an ad group",
+	"Create an ad",
+];

 export default function PipelineCreation() {
-  const [activeStep, setActiveStep] = React.useState(0);
-  const [completed, setCompleted] = React.useState<{
-    [k: number]: boolean;
-  }>({});
+	const [activeStep, setActiveStep] = React.useState(0);
+	const [completed, setCompleted] = React.useState<{
+		[k: number]: boolean;
+	}>({});

-  const totalSteps = () => {
-    return steps.length;
-  };
+	const totalSteps = () => {
+		return steps.length;
+	};

-  const completedSteps = () => {
-    return Object.keys(completed).length;
-  };
+	const completedSteps = () => {
+		return Object.keys(completed).length;
+	};

-  const isLastStep = () => {
-    return activeStep === totalSteps() - 1;
-  };
+	const isLastStep = () => {
+		return activeStep === totalSteps() - 1;
+	};

-  const allStepsCompleted = () => {
-    return completedSteps() === totalSteps();
-  };
+	const allStepsCompleted = () => {
+		return completedSteps() === totalSteps();
+	};

-  const handleNext = () => {
-    const newActiveStep =
-      isLastStep() && !allStepsCompleted()
-        ? // It's the last step, but not all steps have been completed,
-          // find the first step that has been completed
-          steps.findIndex((step, i) => !(i in completed))
-        : activeStep + 1;
-    setActiveStep(newActiveStep);
-  };
+	const handleNext = () => {
+		const newActiveStep =
+			isLastStep() && !allStepsCompleted()
+				? // It's the last step, but not all steps have been completed,
+				  // find the first step that has been completed
+				  steps.findIndex((step, i) => !(i in completed))
+				: activeStep + 1;
+		setActiveStep(newActiveStep);
+	};

-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
+	const handleBack = () => {
+		setActiveStep((prevActiveStep) => prevActiveStep - 1);
+	};

-  const handleStep = (step: number) => () => {
-    setActiveStep(step);
-  };
+	const handleStep = (step: number) => () => {
+		setActiveStep(step);
+	};

-  const handleComplete = () => {
-    const newCompleted = completed;
-    newCompleted[activeStep] = true;
-    setCompleted(newCompleted);
-    handleNext();
-  };
+	const handleComplete = () => {
+		const newCompleted = completed;
+		newCompleted[activeStep] = true;
+		setCompleted(newCompleted);
+		handleNext();
+	};

-  const handleReset = () => {
-    setActiveStep(0);
-    setCompleted({});
-  };
+	const handleReset = () => {
+		setActiveStep(0);
+		setCompleted({});
+	};

-  return (
-    <Box sx={{ width: '100%' }}>
-      <Stepper nonLinear activeStep={activeStep}>
-        {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]}>
-            <StepButton color="inherit" onClick={handleStep(index)}>
-              {label}
-            </StepButton>
-          </Step>
-        ))}
-      </Stepper>
-      <div>
-        {allStepsCompleted() ? (
-          <React.Fragment>
-            <Typography sx={{ mt: 2, mb: 1 }}>
-              All steps completed - you&apos;re finished
-            </Typography>
-            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-              <Box sx={{ flex: '1 1 auto' }} />
-              <Button onClick={handleReset}>Reset</Button>
-            </Box>
-          </React.Fragment>
-        ) : (
-          <React.Fragment>
-            <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
-            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-              <Button
-                color="inherit"
-                disabled={activeStep === 0}
-                onClick={handleBack}
-                sx={{ mr: 1 }}
-              >
-                Back
-              </Button>
-              <Box sx={{ flex: '1 1 auto' }} />
-              <Button onClick={handleNext} sx={{ mr: 1 }}>
-                Next
-              </Button>
-              {activeStep !== steps.length &&
-                (completed[activeStep] ? (
-                  <Typography variant="caption" sx={{ display: 'inline-block' }}>
-                    Step {activeStep + 1} already completed
-                  </Typography>
-                ) : (
-                  <Button onClick={handleComplete}>
-                    {completedSteps() === totalSteps() - 1
-                      ? 'Finish'
-                      : 'Complete Step'}
-                  </Button>
-                ))}
-            </Box>
-          </React.Fragment>
-        )}
-      </div>
-    </Box>
-  );
+	return (
+		<Box sx={{ width: "100%" }}>
+			<Stepper nonLinear activeStep={activeStep}>
+				{steps.map((label, index) => (
+					<Step key={label} completed={completed[index]}>
+						<StepButton color="inherit" onClick={handleStep(index)}>
+							{label}
+						</StepButton>
+					</Step>
+				))}
+			</Stepper>
+			<div>
+				{allStepsCompleted() ? (
+					<React.Fragment>
+						<Typography sx={{ mt: 2, mb: 1 }}>
+							All steps completed - you&apos;re finished
+						</Typography>
+						<Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+							<Box sx={{ flex: "1 1 auto" }} />
+							<Button onClick={handleReset}>Reset</Button>
+						</Box>
+					</React.Fragment>
+				) : (
+					<React.Fragment>
+						<Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+						<Box sx={{ display: "flex", flexDirection: "row", pt: 2 }}>
+							<Button
+								color="inherit"
+								disabled={activeStep === 0}
+								onClick={handleBack}
+								sx={{ mr: 1 }}
+							>
+								Back
+							</Button>
+							<Box sx={{ flex: "1 1 auto" }} />
+							<Button onClick={handleNext} sx={{ mr: 1 }}>
+								Next
+							</Button>
+							{activeStep !== steps.length &&
+								(completed[activeStep] ? (
+									<Typography
+										variant="caption"
+										sx={{ display: "inline-block" }}
+									>
+										Step {activeStep + 1} already completed
+									</Typography>
+								) : (
+									<Button onClick={handleComplete}>
+										{completedSteps() === totalSteps() - 1
+											? "Finish"
+											: "Complete Step"}
+									</Button>
+								))}
+						</Box>
+					</React.Fragment>
+				)}
+			</div>
+		</Box>
+	);
 }
--- a/web-app/src/components/Pipelines/PipelineModal.tsx
+++ b/web-app/src/components/Pipelines/PipelineModal.tsx
@@ -1,64 +1,73 @@
 import { makeStyles } from "@material-ui/core/styles";
-import IconButton from '@mui/material/IconButton';
+import IconButton from "@mui/material/IconButton";
 import Backdrop from "@material-ui/core/Backdrop";
 import CloseIcon from "@material-ui/icons/Close";
 import Fade from "@material-ui/core/Fade";
-import Modal from '@mui/material/Modal';
+import Modal from "@mui/material/Modal";

-import { useTheme } from '@mui/material/styles';
+import { useTheme } from "@mui/material/styles";

-const useStyles = makeStyles(theme => ({
-    modal: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    paper: {
-      backgroundColor: theme.palette.background.paper,
-      borderRadius: 14,
-      border: "2px solid gray",
-      boxShadow: theme.shadows[5],
-      padding: theme.spacing(2, 4, 3)
-    }
-  }));
+const useStyles = makeStyles((theme) => ({
+	modal: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	paper: {
+		backgroundColor: theme.palette.background.paper,
+		borderRadius: 14,
+		border: "2px solid gray",
+		boxShadow: theme.shadows[5],
+		padding: theme.spacing(2, 4, 3),
+	},
+}));

 interface PipelineModalProps {
-    isOpen: boolean,
-    children: React.ReactNode,
-    handleClose: () => void
+	isOpen: boolean;
+	children: React.ReactNode;
+	handleClose: () => void;
 }

-export default function PipelineModal({ isOpen, children, handleClose } : PipelineModalProps ) {
-    const classes = useStyles();
-    const theme = useTheme();
-    //             <Button onClick={handleOpen}>Show pipeline</Button>
+export default function PipelineModal({
+	isOpen,
+	children,
+	handleClose,
+}: PipelineModalProps) {
+	const classes = useStyles();
+	const theme = useTheme();
+	//             <Button onClick={handleOpen}>Show pipeline</Button>

-    return (
-        <div>
-            <Modal
-                className={classes.modal}
-                aria-labelledby="simple-modal-title"
-                aria-describedby="simple-modal-description"
-                open={isOpen}
-                onClose={handleClose}
-                closeAfterTransition
-                BackdropComponent={Backdrop}
-                BackdropProps={{
-                  timeout: 500
-                }}
-            >
-                <Fade in={isOpen} >
-                    <div className={classes.paper} >
-                        <IconButton
-                            onClick={handleClose}
-                            style={{cursor:'pointer', float:'right', marginTop: '5px', width: '20px'}}
-                        >
-                            <CloseIcon/>
-                        </IconButton>
-                        { children }
-                    </div>
-                </Fade>
-            </Modal>
-        </div>
-    )
-}
+	return (
+		<div>
+			<Modal
+				className={classes.modal}
+				aria-labelledby="simple-modal-title"
+				aria-describedby="simple-modal-description"
+				open={isOpen}
+				onClose={handleClose}
+				closeAfterTransition
+				BackdropComponent={Backdrop}
+				BackdropProps={{
+					timeout: 500,
+				}}
+			>
+				<Fade in={isOpen}>
+					<div className={classes.paper}>
+						<IconButton
+							onClick={handleClose}
+							style={{
+								cursor: "pointer",
+								float: "right",
+								marginTop: "5px",
+								width: "20px",
+							}}
+						>
+							<CloseIcon />
+						</IconButton>
+						{children}
+					</div>
+				</Fade>
+			</Modal>
+		</div>
+	);
+}
--- a/web-app/src/components/Pipelines/PipelineNameSetup.tsx
+++ b/web-app/src/components/Pipelines/PipelineNameSetup.tsx
@@ -1,54 +1,56 @@
 import LoadingButton from "@mui/lab/LoadingButton";
 import Typography from "@mui/material/Typography";
-import {Grid, TextField} from "@mui/material";
-import {Save} from "@mui/icons-material";
+import { Grid, TextField } from "@mui/material";
+import { Save } from "@mui/icons-material";
 import Box from "@mui/material/Box";

-import { PipelineActionListProps } from '../PipelineActionList';
+import { PipelineActionListProps } from "../PipelineActionList";

 //TODO Need to add dynamic number of parameter and a map to create TextFields dynamicly
-export default function PipelineNameSetup({ title } : PipelineActionListProps) {
-    //TODO at line 23, take a look to make Typography size dynamic in order to avoir textWrap when modal is too tiny
-    return (
-        <div>
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    marginBottom: "35px"
-                }}
-            >
-                <Typography variant="h4" noWrap align="left" minWidth={300}>
-                    '{ title }' Parameters
-                </Typography>
-            </Box>
-            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: "center" }} >
-                <TextField
-                    id="params_1"
-                    label="Parameter 1 name"
-                    placeholder="Parameter 1 name"
-                    variant="standard"
-                />
-                <TextField
-                    sx={{ marginTop: "20px" }}
-                    id="params_2"
-                    label="Parameter 2 name"
-                    placeholder="Parameter 2 name"
-                    variant="standard"
-                />
-                <LoadingButton
-                    sx={{ marginTop: "30px" }}
-                    color="secondary"
-                    loading={false}
-                    loadingPosition="start"
-                    startIcon={<Save />}
-                    variant="contained"
-                >
-                    Save
-                </LoadingButton>
-            </Box>
-        </div>
-    )
-}
+export default function PipelineNameSetup({ title }: PipelineActionListProps) {
+	//TODO at line 23, take a look to make Typography size dynamic in order to avoir textWrap when modal is too tiny
+	return (
+		<div>
+			<Box
+				sx={{
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					justifyContent: "space-between",
+					marginBottom: "35px",
+				}}
+			>
+				<Typography variant="h4" noWrap align="left" minWidth={300}>
+					'{title}' Parameters
+				</Typography>
+			</Box>
+			<Box
+				sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
+			>
+				<TextField
+					id="params_1"
+					label="Parameter 1 name"
+					placeholder="Parameter 1 name"
+					variant="standard"
+				/>
+				<TextField
+					sx={{ marginTop: "20px" }}
+					id="params_2"
+					label="Parameter 2 name"
+					placeholder="Parameter 2 name"
+					variant="standard"
+				/>
+				<LoadingButton
+					sx={{ marginTop: "30px" }}
+					color="secondary"
+					loading={false}
+					loadingPosition="start"
+					startIcon={<Save />}
+					variant="contained"
+				>
+					Save
+				</LoadingButton>
+			</Box>
+		</div>
+	);
+}
--- a/web-app/src/components/Pipelines/ServiceSetup.tsx
+++ b/web-app/src/components/Pipelines/ServiceSetup.tsx
@@ -1,100 +1,113 @@
 import Typography from "@mui/material/Typography";
-import {Login, Logout} from "@mui/icons-material";
+import { Login, Logout } from "@mui/icons-material";
 import Box from "@mui/material/Box";

 import GenericButton from "../GenericButton";
-import {ServiceProps} from "../types";
-import {Grid} from "@mui/material";
+import { ServiceProps } from "../types";
+import { Grid } from "@mui/material";

 export default function ServiceSetupModal() {
-    const services: Array<ServiceProps> = [
-        {
-            imageSrc: "https://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg",
-            altText: "Twitter"
-        },
-        {
-            imageSrc: "https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg",
-            altText: "Spotify"
-        },
-        {
-            imageSrc: "https://upload.wikimedia.org/wikipedia/commons/d/d7/GitHub_font_awesome.svg",
-            altText: "GitHub"
-        },
-        {
-            imageSrc: "https://cdn.worldvectorlogo.com/logos/discord.svg",
-            altText: "Discord"
-        },
-        {
-            imageSrc: "https://upload.wikimedia.org/wikipedia/commons/3/39/Google_Mail.svg",
-            altText: "Gmail"
-        },
-        {
-            imageSrc: "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
-            altText: "YouTube"
-        }
-    ]
+	const services: Array<ServiceProps> = [
+		{
+			imageSrc:
+				"https://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg",
+			altText: "Twitter",
+		},
+		{
+			imageSrc:
+				"https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg",
+			altText: "Spotify",
+		},
+		{
+			imageSrc:
+				"https://upload.wikimedia.org/wikipedia/commons/d/d7/GitHub_font_awesome.svg",
+			altText: "GitHub",
+		},
+		{
+			imageSrc: "https://cdn.worldvectorlogo.com/logos/discord.svg",
+			altText: "Discord",
+		},
+		{
+			imageSrc:
+				"https://upload.wikimedia.org/wikipedia/commons/3/39/Google_Mail.svg",
+			altText: "Gmail",
+		},
+		{
+			imageSrc:
+				"https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
+			altText: "YouTube",
+		},
+	];

-    return (
-        <div>
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    marginBottom: "25px"
-                }}
-            >
-                <Typography variant="h4" noWrap align="left">
-                    Services
-                </Typography>
-            </Box>
-            <Grid container spacing={4}>
-                <Grid item xs container direction='column' spacing={2}>
-                    <Grid item>
-                        <Typography variant="h6" noWrap align="left">
-                            Available
-                        </Typography>
-                        <Box
-                            sx={{
-                                flexDirection: 'column',
-                                alignItems: "center",
-                                justifyContent: "space-between",
-                                marginRight: "10px"
-                            }}
-                        >
-                            { services.map((elem, index) => (
-                                <Grid item mb={4} key={index}>
-                                    <GenericButton service={elem} title={elem.altText} trailingIcon={<Login/>}/>
-                                </Grid>
-                            )) }
-                        </Box>
-                    </Grid>
-                </Grid>
-                <Grid item xs={12} sm container>
-                    <Grid item xs container direction="column" spacing={2}>
-                        <Grid item xs>
-                            <Typography variant="h6" noWrap align="right">
-                                Linked
-                            </Typography>
-                            <Box
-                                sx={{
-                                    flexDirection: 'column',
-                                    alignItems: "center",
-                                    justifyContent: "space-between",
-                                    marginRight: "10px"
-                                }}
-                            >
-                                { services.map((elem, index) => (
-                                    <Grid item mb={4} key={index}>
-                                        <GenericButton service={elem} title={elem.altText} trailingIcon={<Logout/>}/>
-                                    </Grid>
-                                )) }
-                            </Box>
-                        </Grid>
-                    </Grid>
-                </Grid>
-            </Grid>
-        </div>
-    )
-}
+	return (
+		<div>
+			<Box
+				sx={{
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					justifyContent: "space-between",
+					marginBottom: "25px",
+				}}
+			>
+				<Typography variant="h4" noWrap align="left">
+					Services
+				</Typography>
+			</Box>
+			<Grid container spacing={4}>
+				<Grid item xs container direction="column" spacing={2}>
+					<Grid item>
+						<Typography variant="h6" noWrap align="left">
+							Available
+						</Typography>
+						<Box
+							sx={{
+								flexDirection: "column",
+								alignItems: "center",
+								justifyContent: "space-between",
+								marginRight: "10px",
+							}}
+						>
+							{services.map((elem, index) => (
+								<Grid item mb={4} key={index}>
+									<GenericButton
+										service={elem}
+										title={elem.altText}
+										trailingIcon={<Login />}
+									/>
+								</Grid>
+							))}
+						</Box>
+					</Grid>
+				</Grid>
+				<Grid item xs={12} sm container>
+					<Grid item xs container direction="column" spacing={2}>
+						<Grid item xs>
+							<Typography variant="h6" noWrap align="right">
+								Linked
+							</Typography>
+							<Box
+								sx={{
+									flexDirection: "column",
+									alignItems: "center",
+									justifyContent: "space-between",
+									marginRight: "10px",
+								}}
+							>
+								{services.map((elem, index) => (
+									<Grid item mb={4} key={index}>
+										<GenericButton
+											service={elem}
+											title={elem.altText}
+											trailingIcon={<Logout />}
+										/>
+									</Grid>
+								))}
+							</Box>
+						</Grid>
+					</Grid>
+				</Grid>
+			</Grid>
+		</div>
+	);
+}
--- a/web-app/src/components/types.tsx
+++ b/web-app/src/components/types.tsx
@@ -1,10 +1,8 @@
-
-
 interface ServiceProps {
 	// the image src preferable to use svg files
-	imageSrc: string,
+	imageSrc: string;
 	// the alt text (screen readers, etc)
-	altText: string
+	altText: string;
 }

-export type { ServiceProps }
+export type { ServiceProps };
--- a/web-app/src/index.tsx
+++ b/web-app/src/index.tsx
@@ -1,13 +1,13 @@
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import './App.css';
+import * as React from "react";
+import ReactDOM from "react-dom";
+import "./App.css";

-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import AuthComponent from "./pages/Login/LoginPage";
-import PipelinePage from './pages/HomePage'
-import {ThemeProvider} from "@mui/material";
+import PipelinePage from "./pages/HomePage";
+import { ThemeProvider } from "@mui/material";

 import theme from "./Aeris.theme";

@@ -15,28 +15,28 @@ import theme from "./Aeris.theme";
 * Creates the routing tree.
 */
 function AerisRouter() {
-    return (
-        <ThemeProvider theme={theme}>
-            <div className="App">
-                <header className="App-header">
-                    <BrowserRouter>
-                        <Routes>
-                            <Route path='/' element={<App />}/>
-                            <Route path='/auth' element={<AuthComponent />}/>
-                            <Route path='/pipelines' element={<PipelinePage />}/>
-                        </Routes>
-                    </BrowserRouter>
-                </header>
-            </div>
-        </ThemeProvider>
-    );
+	return (
+		<ThemeProvider theme={theme}>
+			<div className="App">
+				<header className="App-header">
+					<BrowserRouter>
+						<Routes>
+							<Route path="/" element={<App />} />
+							<Route path="/auth" element={<AuthComponent />} />
+							<Route path="/pipelines" element={<PipelinePage />} />
+						</Routes>
+					</BrowserRouter>
+				</header>
+			</div>
+		</ThemeProvider>
+	);
 }

 ReactDOM.render(
-  <React.StrictMode>
-      <AerisRouter/>
-  </React.StrictMode>,
-  document.getElementById('root')
+	<React.StrictMode>
+		<AerisRouter />
+	</React.StrictMode>,
+	document.getElementById("root")
 );

 // If you want to start measuring performance in your app, pass a function
--- a/web-app/src/pages/HomePage.tsx
+++ b/web-app/src/pages/HomePage.tsx
@@ -1,205 +1,225 @@
-import PipelineBoxesLayout from '../components/Pipelines/PipelineBoxesLayout';
-import type { PipelineBoxProps } from '../components/Pipelines/PipelineBox';
-import PipelineModal from '../components/Pipelines/PipelineModal';
-import { GenericButtonProps }  from '../components/GenericButton';
-import type { ServiceProps } from '../components/types';
-import PipelineEditPage from './PipelineEditPage';
-import Box from '@mui/material/Box';
-import Fab from '@mui/material/Fab';
-import AddIcon from '@mui/icons-material/Add';
+import PipelineBoxesLayout from "../components/Pipelines/PipelineBoxesLayout";
+import type { PipelineBoxProps } from "../components/Pipelines/PipelineBox";
+import PipelineModal from "../components/Pipelines/PipelineModal";
+import { GenericButtonProps } from "../components/GenericButton";
+import type { ServiceProps } from "../components/types";
+import PipelineEditPage from "./PipelineEditPage";
+import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+import AddIcon from "@mui/icons-material/Add";

 import { makeStyles } from "@material-ui/core/styles";
 import { MoreVert } from "@mui/icons-material";
-import { useState } from 'react';
-import { PipelineEditPageProps } from './PipelineEditPage';
-import PipelineSetupModal, { PipelineTriggersProps } from './PipelineSetup';
+import { useState } from "react";
+import { PipelineEditPageProps } from "./PipelineEditPage";
+import PipelineSetupModal, { PipelineTriggersProps } from "./PipelineSetup";
 import PipelineNameSetup from "../components/Pipelines/PipelineNameSetup";

-
-const useStyles = makeStyles(theme => ({
-    divHomePage: {
-      display: "contents",
-    },
-  }));
-
+const useStyles = makeStyles((theme) => ({
+	divHomePage: {
+		display: "contents",
+	},
+}));

 export default function HomePage() {
-    const classes = useStyles();
-    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-    const [modalData, setModalData] = useState<PipelineEditPageProps>({
-      title: "",
-      trigger: {
-        title: "",
-        service: {
-          imageSrc: "",
-          altText: "",
-        },
-        trailingIcon: <MoreVert />
-      },
-      actions: [{
-        title: "",
-        service: {
-          imageSrc: "",
-          altText: "",
-        },
-        trailingIcon: <MoreVert />
-      }]
-    } as PipelineEditPageProps );
+	const classes = useStyles();
+	const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+	const [modalData, setModalData] = useState<PipelineEditPageProps>({
+		title: "",
+		trigger: {
+			title: "",
+			service: {
+				imageSrc: "",
+				altText: "",
+			},
+			trailingIcon: <MoreVert />,
+		},
+		actions: [
+			{
+				title: "",
+				service: {
+					imageSrc: "",
+					altText: "",
+				},
+				trailingIcon: <MoreVert />,
+			},
+		],
+	} as PipelineEditPageProps);

-    let svc: ServiceProps = {
-        altText: "youTube", imageSrc: "https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg" 
-      }
-      let svc2: ServiceProps = {
-        altText: "Spotify", imageSrc: "https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg" 
-      }
+	let svc: ServiceProps = {
+		altText: "youTube",
+		imageSrc:
+			"https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_full-color_icon_%282017%29.svg",
+	};
+	let svc2: ServiceProps = {
+		altText: "Spotify",
+		imageSrc:
+			"https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg",
+	};

-      let actions: Array<GenericButtonProps> = [
-        {
-          title: "Une vidéo à été rg erg ergr rgrg  publiée",
-          service: svc,
-          trailingIcon: <MoreVert/>
-        },
-        {
-          title: "Riz aux oignons",
-          service: svc2,
-          trailingIcon: <MoreVert/>
-        },
-      ]
+	let actions: Array<GenericButtonProps> = [
+		{
+			title: "Une vidéo à été rg erg ergr rgrg  publiée",
+			service: svc,
+			trailingIcon: <MoreVert />,
+		},
+		{
+			title: "Riz aux oignons",
+			service: svc2,
+			trailingIcon: <MoreVert />,
+		},
+	];

-    
-      let data:Array<PipelineBoxProps> = [
-        {
-          title: 'My super action',
-          statusText: "Last: 2d ago", 
-          service1: svc ,
-          service2: svc2,
-          onClickCallback: () => {
-            setModalData({
-              title: "louis",
-              trigger: actions[0],
-              trailingIcon: <MoreVert />,
-              actions: actions
-            } as PipelineEditPageProps );
-            setIsModalOpen(!isModalOpen);
-          } 
-        },
-        {
-          title: 'Lorem ipsum behm uit\'s long',
-          statusText: "Lego Star Wars: The Skywalker Saga is an upcoming Lego-themed action-adventure game developed by Traveller's Tales and published by Warner Bros.", 
-          service1: svc2 ,
-          service2: svc,
-          onClickCallback: () => {
-            setModalData({
-              title: "clickable",
-              trigger: {
-                title: "Eh oui j'ai été set autrement",
-                service: {
-                  imageSrc: "https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg",
-                  altText: "github logo",
-                },
-                trailingIcon: <MoreVert />
-              },
-              actions: [{
-                title: "j'aime l'eau",
-                service: {
-                  imageSrc: "https://upload.wikimedia.org/wikipedia/sco/9/9f/Twitter_bird_logo_2012.svg",
-                  altText: "twitter logo",
-                },
-                trailingIcon: <AddIcon />
-              }]
-            } as PipelineEditPageProps );
-            setIsModalOpen(!isModalOpen);
-          } 
-        },
-        {
-          title: 'Vous êtes débiles bande de trou du cul',
-          statusText: "Last: 2d ago", 
-          service1: svc ,
-          service2: svc2
-        },
-        {
-          title: 'Lorem ipsum behm uit\'s long',
-          statusText: "Vive la france !", 
-          service1: svc2 ,
-          service2: svc
-        },
-        {
-          title: 'My super action',
-          statusText: "Last: 2d ago", 
-          service1: svc ,
-          service2: svc2
-        },
-        {
-          title: 'Lorem ipsum behm uit\'s long',
-          statusText: "Vive la france !", 
-          service1: svc2 ,
-          service2: svc
-        },
-        {
-          title: 'My super action',
-          statusText: "Last: 2d ago", 
-          service1: svc ,
-          service2: svc2
-        },
-        {
-          title: 'Lorem ipsum behm uit\'s long',
-          statusText: "Vive la france !", 
-          service1: svc2 ,
-          service2: svc
-        },
-        {
-          title: 'My super action',
-          statusText: "Last: 2d ago", 
-          service1: svc ,
-          service2: svc2
-        },
-      ]
+	let data: Array<PipelineBoxProps> = [
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+			onClickCallback: () => {
+				setModalData({
+					title: "louis",
+					trigger: actions[0],
+					trailingIcon: <MoreVert />,
+					actions: actions,
+				} as PipelineEditPageProps);
+				setIsModalOpen(!isModalOpen);
+			},
+		},
+		{
+			title: "Lorem ipsum behm uit's long",
+			statusText:
+				"Lego Star Wars: The Skywalker Saga is an upcoming Lego-themed action-adventure game developed by Traveller's Tales and published by Warner Bros.",
+			service1: svc2,
+			service2: svc,
+			onClickCallback: () => {
+				setModalData({
+					title: "clickable",
+					trigger: {
+						title: "Eh oui j'ai été set autrement",
+						service: {
+							imageSrc:
+								"https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg",
+							altText: "github logo",
+						},
+						trailingIcon: <MoreVert />,
+					},
+					actions: [
+						{
+							title: "j'aime l'eau",
+							service: {
+								imageSrc:
+									"https://upload.wikimedia.org/wikipedia/sco/9/9f/Twitter_bird_logo_2012.svg",
+								altText: "twitter logo",
+							},
+							trailingIcon: <AddIcon />,
+						},
+					],
+				} as PipelineEditPageProps);
+				setIsModalOpen(!isModalOpen);
+			},
+		},
+		{
+			title: "Vous êtes débiles bande de trou du cul",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+		{
+			title: "Lorem ipsum behm uit's long",
+			statusText: "Vive la france !",
+			service1: svc2,
+			service2: svc,
+		},
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+		{
+			title: "Lorem ipsum behm uit's long",
+			statusText: "Vive la france !",
+			service1: svc2,
+			service2: svc,
+		},
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+		{
+			title: "Lorem ipsum behm uit's long",
+			statusText: "Vive la france !",
+			service1: svc2,
+			service2: svc,
+		},
+		{
+			title: "My super action",
+			statusText: "Last: 2d ago",
+			service1: svc,
+			service2: svc2,
+		},
+	];

-      let triggersAvailable: Array<PipelineTriggersProps> = [
-        {
-          name: "Test",
-          triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2")
-        },
-        {
-          name: "Test 2",
-          triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2")
-        },
-        {
-          name: "Test 3",
-          triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2")
-        }
-      ]
+	let triggersAvailable: Array<PipelineTriggersProps> = [
+		{
+			name: "Test",
+			triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2"),
+		},
+		{
+			name: "Test 2",
+			triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2"),
+		},
+		{
+			name: "Test 3",
+			triggers: new Array<String>("Lorem Ipsum", "Lorem Ipsum 2"),
+		},
+	];

+	return (
+		<div className={classes.divHomePage}>
+			<PipelineBoxesLayout data={data} />
+			<PipelineModal
+				isOpen={isModalOpen}
+				handleClose={() => setIsModalOpen(false)}
+			>
+				<PipelineEditPage {...modalData} />
+			</PipelineModal>

-      return (
-          <div className={classes.divHomePage} >
-            <PipelineBoxesLayout data={data} />
-            <PipelineModal isOpen={isModalOpen} handleClose={ () => setIsModalOpen(false) } >
-                <PipelineEditPage
-                    {...modalData}
-                />
-            </PipelineModal>
-
-            <Box sx={{ '& > :not(style)': { m: 1 }, position:"fixed", bottom: "5px", right:"5px" }}>
-              <Fab size="medium" color="secondary" aria-label="add" onClick={() => {
-                 setModalData({
-                  title: "Nouvelle pipeline",
-                  trigger: {
-                    title: "Ajouter une action",
-                    service: {
-                      imageSrc: "https://upload.wikimedia.org/wikipedia/commons/5/55/Question_Mark.svg",
-                      altText: "Action inconnue",
-                    },
-                    trailingIcon: <AddIcon />
-                  },
-                  actions: []
-                } as PipelineEditPageProps );
-                setIsModalOpen(!isModalOpen);
-              }}>
-                <AddIcon />
-              </Fab>
-          </Box>
-        </div>
-      );
-
-}
+			<Box
+				sx={{
+					"& > :not(style)": { m: 1 },
+					position: "fixed",
+					bottom: "5px",
+					right: "5px",
+				}}
+			>
+				<Fab
+					size="medium"
+					color="secondary"
+					aria-label="add"
+					onClick={() => {
+						setModalData({
+							title: "Nouvelle pipeline",
+							trigger: {
+								title: "Ajouter une action",
+								service: {
+									imageSrc:
+										"https://upload.wikimedia.org/wikipedia/commons/5/55/Question_Mark.svg",
+									altText: "Action inconnue",
+								},
+								trailingIcon: <AddIcon />,
+							},
+							actions: [],
+						} as PipelineEditPageProps);
+						setIsModalOpen(!isModalOpen);
+					}}
+				>
+					<AddIcon />
+				</Fab>
+			</Box>
+		</div>
+	);
+}
--- a/web-app/src/pages/Login/LoginPage.tsx
+++ b/web-app/src/pages/Login/LoginPage.tsx
@@ -1,342 +1,355 @@
-import React, { useReducer, useEffect } from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import React, { useReducer, useEffect } from "react";
+import { makeStyles, Theme } from "@material-ui/core/styles";

 import { useNavigate, Link as RouterLink } from "react-router-dom";

-import {InputAdornment, Typography} from "@mui/material";
-import { AccountCircle, Lock } from '@mui/icons-material';
+import { InputAdornment, Typography } from "@mui/material";
+import { AccountCircle, Lock } from "@mui/icons-material";

-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import Card from '@material-ui/core/Card';
+import CardContent from "@material-ui/core/CardContent";
+import CardActions from "@material-ui/core/CardActions";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
 import Box from "@mui/material/Box";

 import aerisTheme from "../../Aeris.theme";

 const useStyles = makeStyles((theme: Theme) => ({
-        container: {
-            display: 'absolute',
-            flex: 0.5,
-            margin: `${theme.spacing(0)} auto`
-        },
-        loginBtn: {
-            display: 'absolute',
-            backgroundColor: aerisTheme.palette.secondary.main,
-            color: aerisTheme.palette.primary.contrastText,
-            minWidth: 150,
-            margin: `${theme.spacing(0)} auto`
-        },
-        switchBtn: {
-            backgroundColor: aerisTheme.palette.primary.main,
-            color: aerisTheme.palette.primary.contrastText,
-            minWidth: 150,
-            margin: `${theme.spacing(0)} auto`,
-        },
-        media: {
-            display: 'absolute',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: 354.75,
-            height: 478.5,
-            marginBottom: 5
-        },
-        card: {
-            display: 'absolute',
-            margin: `${theme.spacing(0)} auto`
-        }
-    })
-);
+	container: {
+		display: "absolute",
+		flex: 0.5,
+		margin: `${theme.spacing(0)} auto`,
+	},
+	loginBtn: {
+		display: "absolute",
+		backgroundColor: aerisTheme.palette.secondary.main,
+		color: aerisTheme.palette.primary.contrastText,
+		minWidth: 150,
+		margin: `${theme.spacing(0)} auto`,
+	},
+	switchBtn: {
+		backgroundColor: aerisTheme.palette.primary.main,
+		color: aerisTheme.palette.primary.contrastText,
+		minWidth: 150,
+		margin: `${theme.spacing(0)} auto`,
+	},
+	media: {
+		display: "absolute",
+		justifyContent: "center",
+		alignItems: "center",
+		width: 354.75,
+		height: 478.5,
+		marginBottom: 5,
+	},
+	card: {
+		display: "absolute",
+		margin: `${theme.spacing(0)} auto`,
+	},
+}));

 //state type

 type State = {
-    username: string
-    password: string
-    confirmedPassword: string
-    isButtonDisabled: boolean
-    helperText: string
-    isError: boolean
-    authMode: string
-    isConfirmButtonVisible: boolean
+	username: string;
+	password: string;
+	confirmedPassword: string;
+	isButtonDisabled: boolean;
+	helperText: string;
+	isError: boolean;
+	authMode: string;
+	isConfirmButtonVisible: boolean;
 };

 const initialState: State = {
-    username: '',
-    password: '',
-    confirmedPassword: '',
-    isButtonDisabled: true,
-    helperText: '',
-    isError: false,
-    authMode: 'login',
-    isConfirmButtonVisible: false
+	username: "",
+	password: "",
+	confirmedPassword: "",
+	isButtonDisabled: true,
+	helperText: "",
+	isError: false,
+	authMode: "login",
+	isConfirmButtonVisible: false,
 };

-type Action = { type: 'setUsername', payload: string }
-    | { type: 'setPassword', payload: string }
-    | { type: 'setConfirmedPassword', payload: string }
-    | { type: 'setIsButtonDisabled', payload: boolean }
-    | { type: 'loginSuccess', payload: string }
-    | { type: 'loginFailed', payload: string }
-    | { type: 'setIsError', payload: boolean }
-    | { type: 'setAuthMode', payload: string }
-    | { type: 'setIsConfirmButtonVisible', payload: boolean };
+type Action =
+	| { type: "setUsername"; payload: string }
+	| { type: "setPassword"; payload: string }
+	| { type: "setConfirmedPassword"; payload: string }
+	| { type: "setIsButtonDisabled"; payload: boolean }
+	| { type: "loginSuccess"; payload: string }
+	| { type: "loginFailed"; payload: string }
+	| { type: "setIsError"; payload: boolean }
+	| { type: "setAuthMode"; payload: string }
+	| { type: "setIsConfirmButtonVisible"; payload: boolean };

 const reducer = (state: State, action: Action): State => {
-    switch (action.type) {
-        case 'setUsername':
-            return {
-                ...state,
-                username: action.payload
-            };
-        case 'setPassword':
-            return {
-                ...state,
-                password: action.payload
-            };
-        case 'setConfirmedPassword':
-            return {
-                ...state,
-                confirmedPassword: action.payload
-            };
-        case 'setIsButtonDisabled':
-            return {
-                ...state,
-                isButtonDisabled: action.payload
-            };
-        case 'loginSuccess':
-            return {
-                ...state,
-                helperText: action.payload,
-                isError: false
-            };
-        case 'loginFailed':
-            return {
-                ...state,
-                helperText: action.payload,
-                isError: true
-            };
-        case 'setIsError':
-            return {
-                ...state,
-                isError: action.payload
-            };
-        case 'setAuthMode':
-            return {
-                ...state,
-                authMode: action.payload
-            }
-        case 'setIsConfirmButtonVisible':
-            return {
-                ...state,
-                isConfirmButtonVisible: action.payload
-            }
-    }
-}
+	switch (action.type) {
+		case "setUsername":
+			return {
+				...state,
+				username: action.payload,
+			};
+		case "setPassword":
+			return {
+				...state,
+				password: action.payload,
+			};
+		case "setConfirmedPassword":
+			return {
+				...state,
+				confirmedPassword: action.payload,
+			};
+		case "setIsButtonDisabled":
+			return {
+				...state,
+				isButtonDisabled: action.payload,
+			};
+		case "loginSuccess":
+			return {
+				...state,
+				helperText: action.payload,
+				isError: false,
+			};
+		case "loginFailed":
+			return {
+				...state,
+				helperText: action.payload,
+				isError: true,
+			};
+		case "setIsError":
+			return {
+				...state,
+				isError: action.payload,
+			};
+		case "setAuthMode":
+			return {
+				...state,
+				authMode: action.payload,
+			};
+		case "setIsConfirmButtonVisible":
+			return {
+				...state,
+				isConfirmButtonVisible: action.payload,
+			};
+	}
+};

 export default function AuthComponent(this: any) {
-    const classes = useStyles();
-    const navigate = useNavigate();
-    const [state, dispatch] = useReducer(reducer, initialState);
+	const classes = useStyles();
+	const navigate = useNavigate();
+	const [state, dispatch] = useReducer(reducer, initialState);

-    useEffect(() => {
-        if (state.username.trim() && state.password.trim()) {
-            if (!state.isConfirmButtonVisible) {
-                dispatch({
-                    type: 'setIsButtonDisabled',
-                    payload: false
-                });
-            } else if (state.isConfirmButtonVisible && state.password == state.confirmedPassword) {
-                dispatch({
-                    type: 'setIsButtonDisabled',
-                    payload: false
-                });
-            } else {
-                dispatch({
-                    type: 'setIsButtonDisabled',
-                    payload: true
-                });
-            }
-        } else {
-            dispatch({
-                type: 'setIsButtonDisabled',
-                payload: true
-            });
-        }
-    }, [state.username, state.password]);
+	useEffect(() => {
+		if (state.username.trim() && state.password.trim()) {
+			if (!state.isConfirmButtonVisible) {
+				dispatch({
+					type: "setIsButtonDisabled",
+					payload: false,
+				});
+			} else if (
+				state.isConfirmButtonVisible &&
+				state.password == state.confirmedPassword
+			) {
+				dispatch({
+					type: "setIsButtonDisabled",
+					payload: false,
+				});
+			} else {
+				dispatch({
+					type: "setIsButtonDisabled",
+					payload: true,
+				});
+			}
+		} else {
+			dispatch({
+				type: "setIsButtonDisabled",
+				payload: true,
+			});
+		}
+	}, [state.username, state.password]);

-    const handleLogin = () => {
-        if (state.username === 'abc@email.com' && state.password === 'password') {
-            dispatch({
-                type: 'loginSuccess',
-                payload: 'Login Successfully'
-            });
-            navigate("/pipelines");
-        } else {
-            dispatch({
-                type: 'loginFailed',
-                payload: 'Incorrect username or password'
-            });
-        }
-    };
+	const handleLogin = () => {
+		if (state.username === "abc@email.com" && state.password === "password") {
+			dispatch({
+				type: "loginSuccess",
+				payload: "Login Successfully",
+			});
+			navigate("/pipelines");
+		} else {
+			dispatch({
+				type: "loginFailed",
+				payload: "Incorrect username or password",
+			});
+		}
+	};

-    const handleKeyPress = (event: React.KeyboardEvent) => {
-        if (event.keyCode === 13 || event.which === 13) {
-            state.isButtonDisabled || handleLogin();
-        }
-    };
+	const handleKeyPress = (event: React.KeyboardEvent) => {
+		if (event.keyCode === 13 || event.which === 13) {
+			state.isButtonDisabled || handleLogin();
+		}
+	};

-    const handleUsernameChange: React.ChangeEventHandler<HTMLInputElement> =
-        (event) => {
-            dispatch({
-                type: 'setUsername',
-                payload: event.target.value
-            });
-        };
+	const handleUsernameChange: React.ChangeEventHandler<HTMLInputElement> = (
+		event
+	) => {
+		dispatch({
+			type: "setUsername",
+			payload: event.target.value,
+		});
+	};

-    const handlePasswordChange: React.ChangeEventHandler<HTMLInputElement> =
-        (event) => {
-            dispatch({
-                type: 'setPassword',
-                payload: event.target.value
-            });
-        }
+	const handlePasswordChange: React.ChangeEventHandler<HTMLInputElement> = (
+		event
+	) => {
+		dispatch({
+			type: "setPassword",
+			payload: event.target.value,
+		});
+	};

-    const handleConfirmedPasswordChange: React.ChangeEventHandler<HTMLInputElement> =
-        (event) => {
-            dispatch({
-                type: 'setConfirmedPassword',
-                payload: event.target.value
-            });
-        }
+	const handleConfirmedPasswordChange: React.ChangeEventHandler<
+		HTMLInputElement
+	> = (event) => {
+		dispatch({
+			type: "setConfirmedPassword",
+			payload: event.target.value,
+		});
+	};

-    return (
-        <div>
-            <Box
-                component="img"
-                className={classes.media}
-                alt="Aeris Logo"
-                src={require("../../assets/logo-white.png")}
-            />
-            <form className={classes.container} noValidate autoComplete="on">
-                <Card className={classes.card}>
-                    <CardContent>
-                        <div>
-                            <TextField
-                                error={state.isError}
-                                required
-                                id="email"
-                                type="email"
-                                label="Email"
-                                placeholder="Email"
-                                margin="normal"
-                                variant='outlined'
-                                size="small"
-                                onChange={handleUsernameChange}
-                                InputProps={{
-                                    startAdornment: (
-                                        <InputAdornment position="start">
-                                            <AccountCircle />
-                                        </InputAdornment>
-                                    )
-                                }}
-                                onKeyPress={handleKeyPress}
-                            />
-                            <br />
-                            <TextField
-                                className="inputRounded"
-                                error={state.isError}
-                                required
-                                id="password"
-                                type="password"
-                                label="Password"
-                                placeholder="Password"
-                                margin="normal"
-                                variant='outlined'
-                                size="small"
-                                helperText={state.helperText}
-                                onChange={handlePasswordChange}
-                                InputProps={{
-                                    startAdornment: (
-                                        <InputAdornment position="start">
-                                            <Lock />
-                                        </InputAdornment>
-                                    )
-                                }}
-                                onKeyPress={handleKeyPress}
-                            />
-                            <br />
-                            {state.isConfirmButtonVisible ?
-                                <TextField
-                                    className="inputRounded"
-                                    error={state.isError}
-                                    required
-                                    id="confirm_password"
-                                    type="password"
-                                    label="Confirm password"
-                                    placeholder="Password"
-                                    margin="normal"
-                                    variant='outlined'
-                                    size="small"
-                                    helperText={state.helperText}
-                                    onChange={handleConfirmedPasswordChange}
-                                    InputProps={{
-                                        startAdornment: (
-                                            <InputAdornment position="start">
-                                                <Lock />
-                                            </InputAdornment>
-                                        )
-                                    }}
-                                    onKeyPress={handleKeyPress}
-                                /> : null
-                            }
-                        </div>
-                    </CardContent>
-                    <CardActions>
-                        <Button
-                            variant="contained"
-                            size="large"
-                            className={classes.loginBtn}
-                            onClick={handleLogin}
-                            disabled={state.isButtonDisabled}>
-                            {state.authMode === 'login' ? 'Connection' : "Signup"}
-                        </Button>
-                        <Button
-                            variant="text"
-                            size="large"
-                            className={classes.switchBtn}
-                            onClick={() => {
-                                dispatch({
-                                    type: 'setIsButtonDisabled',
-                                    payload: state.authMode === 'login' ? true : state.isButtonDisabled
-                                });
-                                dispatch({
-                                    type: 'setAuthMode',
-                                    payload: state.authMode === 'login' ? 'auth' : 'login'
-                                });
-                                dispatch({
-                                    type: 'setIsConfirmButtonVisible',
-                                    payload: !state.isConfirmButtonVisible
-                                });
-                            }}>
-                            {state.authMode === 'login' ? "Signup" : "Connection"}
-                        </Button>
-                    </CardActions>
-                    <CardActions style={{ justifyContent: 'center', alignContent: 'center' }}>
-                        <Button
-                            disableFocusRipple disableRipple
-                            style={{ textTransform: "none" }}
-                            variant="text" color="primary"
-                            onClick={() => {
-                                navigate('/forget');
-                            }}
-                        >
-                            Forgot password ?
-                        </Button>
-                    </CardActions>
-                </Card>
-            </form>
-        </div>
-    );
-}
+	return (
+		<div>
+			<Box
+				component="img"
+				className={classes.media}
+				alt="Aeris Logo"
+				src={require("../../assets/logo-white.png")}
+			/>
+			<form className={classes.container} noValidate autoComplete="on">
+				<Card className={classes.card}>
+					<CardContent>
+						<div>
+							<TextField
+								error={state.isError}
+								required
+								id="email"
+								type="email"
+								label="Email"
+								placeholder="Email"
+								margin="normal"
+								variant="outlined"
+								size="small"
+								onChange={handleUsernameChange}
+								InputProps={{
+									startAdornment: (
+										<InputAdornment position="start">
+											<AccountCircle />
+										</InputAdornment>
+									),
+								}}
+								onKeyPress={handleKeyPress}
+							/>
+							<br />
+							<TextField
+								className="inputRounded"
+								error={state.isError}
+								required
+								id="password"
+								type="password"
+								label="Password"
+								placeholder="Password"
+								margin="normal"
+								variant="outlined"
+								size="small"
+								helperText={state.helperText}
+								onChange={handlePasswordChange}
+								InputProps={{
+									startAdornment: (
+										<InputAdornment position="start">
+											<Lock />
+										</InputAdornment>
+									),
+								}}
+								onKeyPress={handleKeyPress}
+							/>
+							<br />
+							{state.isConfirmButtonVisible ? (
+								<TextField
+									className="inputRounded"
+									error={state.isError}
+									required
+									id="confirm_password"
+									type="password"
+									label="Confirm password"
+									placeholder="Password"
+									margin="normal"
+									variant="outlined"
+									size="small"
+									helperText={state.helperText}
+									onChange={handleConfirmedPasswordChange}
+									InputProps={{
+										startAdornment: (
+											<InputAdornment position="start">
+												<Lock />
+											</InputAdornment>
+										),
+									}}
+									onKeyPress={handleKeyPress}
+								/>
+							) : null}
+						</div>
+					</CardContent>
+					<CardActions>
+						<Button
+							variant="contained"
+							size="large"
+							className={classes.loginBtn}
+							onClick={handleLogin}
+							disabled={state.isButtonDisabled}
+						>
+							{state.authMode === "login" ? "Connection" : "Signup"}
+						</Button>
+						<Button
+							variant="text"
+							size="large"
+							className={classes.switchBtn}
+							onClick={() => {
+								dispatch({
+									type: "setIsButtonDisabled",
+									payload:
+										state.authMode === "login" ? true : state.isButtonDisabled,
+								});
+								dispatch({
+									type: "setAuthMode",
+									payload: state.authMode === "login" ? "auth" : "login",
+								});
+								dispatch({
+									type: "setIsConfirmButtonVisible",
+									payload: !state.isConfirmButtonVisible,
+								});
+							}}
+						>
+							{state.authMode === "login" ? "Signup" : "Connection"}
+						</Button>
+					</CardActions>
+					<CardActions
+						style={{ justifyContent: "center", alignContent: "center" }}
+					>
+						<Button
+							disableFocusRipple
+							disableRipple
+							style={{ textTransform: "none" }}
+							variant="text"
+							color="primary"
+							onClick={() => {
+								navigate("/forget");
+							}}
+						>
+							Forgot password ?
+						</Button>
+					</CardActions>
+				</Card>
+			</form>
+		</div>
+	);
+}
--- a/web-app/src/pages/PipelineEditPage.tsx
+++ b/web-app/src/pages/PipelineEditPage.tsx
@@ -1,80 +1,103 @@
-import { Box, Typography, FormGroup, FormControlLabel, Switch, Grid } from "@mui/material"
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward"
+import {
+	Box,
+	Typography,
+	FormGroup,
+	FormControlLabel,
+	Switch,
+	Grid,
+} from "@mui/material";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import PipelineActionList from "../components/PipelineActionList";
 import AddBoxIcon from "@mui/icons-material/AddBox";
 import DeleteIcon from "@mui/icons-material/Delete";
-import LoadingButton from '@mui/lab/LoadingButton';
-import { styled } from '@mui/material/styles';
-import GenericButton from "../components/GenericButton"
+import LoadingButton from "@mui/lab/LoadingButton";
+import { styled } from "@mui/material/styles";
+import GenericButton from "../components/GenericButton";

 import { GenericButtonProps } from "./../components/GenericButton";

 export interface PipelineEditPageProps {
-  title: string,
-  trigger: GenericButtonProps,
-  actions: Array<GenericButtonProps>
+	title: string;
+	trigger: GenericButtonProps;
+	actions: Array<GenericButtonProps>;
 }

-export default function PipelineEditPage({ title, trigger, actions } : PipelineEditPageProps) {
-    return (
-        <div>
-            <Box  sx={{ display: 'flex', flexDirection: 'row', alignItems: "center", justifyContent: "space-between"}} >
-            <Typography variant="h2" noWrap align="left"  >
-                { title }
-            </Typography>
-            <FormGroup>
-              <FormControlLabel control={<Switch defaultChecked />} color="secondary" label="Pipeline activée" />
-            </FormGroup>
-          </Box>
-          <Box  sx={{ display: 'flex', flexDirection: 'row', alignItems: "center"}} >
-            <Grid
-            container
-            direction="column"
-            spacing={2}
-            justifyContent="flex-start"
-            alignItems="flex-start"
-            >
-              {[trigger].map((el, index) => (
-                <Grid item sm={10} md={10} lg={5}  xl={4} key={index} >
-                  <GenericButton 
-                      {...el}
-                      />
-                </Grid>
-              ))}
-            </Grid>
+export default function PipelineEditPage({
+	title,
+	trigger,
+	actions,
+}: PipelineEditPageProps) {
+	return (
+		<div>
+			<Box
+				sx={{
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					justifyContent: "space-between",
+				}}
+			>
+				<Typography variant="h2" noWrap align="left">
+					{title}
+				</Typography>
+				<FormGroup>
+					<FormControlLabel
+						control={<Switch defaultChecked />}
+						color="secondary"
+						label="Pipeline activée"
+					/>
+				</FormGroup>
+			</Box>
+			<Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+				<Grid
+					container
+					direction="column"
+					spacing={2}
+					justifyContent="flex-start"
+					alignItems="flex-start"
+				>
+					{[trigger].map((el, index) => (
+						<Grid item sm={10} md={10} lg={5} xl={4} key={index}>
+							<GenericButton {...el} />
+						</Grid>
+					))}
+				</Grid>

-            <ArrowForwardIcon sx={{ height: 38, width: 38 }} />
+				<ArrowForwardIcon sx={{ height: 38, width: 38 }} />

-            <Grid
-              container
-              direction="column"
-              spacing={2}
-              justifyContent="flex-start"
-              alignItems="flex-start"
-              >
-                {actions.map((el, index) => (
-                  <Grid item sm={10} md={10} lg={5}  xl={4} key={index} >
-                    <GenericButton 
-                        {...el}
-                        />
-                  </Grid>
-                ))}
-            </Grid>
-              
-          </Box>
+				<Grid
+					container
+					direction="column"
+					spacing={2}
+					justifyContent="flex-start"
+					alignItems="flex-start"
+				>
+					{actions.map((el, index) => (
+						<Grid item sm={10} md={10} lg={5} xl={4} key={index}>
+							<GenericButton {...el} />
+						</Grid>
+					))}
+				</Grid>
+			</Box>

-          <LoadingButton
-                color="secondary"
-                loading={false}
-                loadingPosition="start"
-                startIcon={<AddBoxIcon />}
-                variant="contained"
-              >
-                Ajouter une réaction
-              </LoadingButton>
-            <LoadingButton variant="contained" color="error" startIcon={<DeleteIcon />} loadingPosition="start" loading={false} >
-              Supprimer la pipeline
-            </LoadingButton>
-        </div>
-    );
-}
+			<LoadingButton
+				color="secondary"
+				loading={false}
+				loadingPosition="start"
+				startIcon={<AddBoxIcon />}
+				variant="contained"
+			>
+				Ajouter une réaction
+			</LoadingButton>
+			<LoadingButton
+				variant="contained"
+				color="error"
+				startIcon={<DeleteIcon />}
+				loadingPosition="start"
+				loading={false}
+			>
+				Supprimer la pipeline
+			</LoadingButton>
+		</div>
+	);
+}
--- a/web-app/src/pages/PipelineSetup.tsx
+++ b/web-app/src/pages/PipelineSetup.tsx
@@ -1,138 +1,128 @@
-import {Google, GitHub, MusicNote, Twitter, YouTube} from '@mui/icons-material';
+import {
+	Google,
+	GitHub,
+	MusicNote,
+	Twitter,
+	YouTube,
+} from "@mui/icons-material";

-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import Typography from '@mui/material/Typography';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Typography from "@mui/material/Typography";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";

 interface PipelineTriggersProps {
-    name: String,
-    triggers: Array<String>
+	name: String;
+	triggers: Array<String>;
 }

 interface PipelineSetupPageProps {
-    actionName: String,
-    data: Array<PipelineTriggersProps>
+	actionName: String;
+	data: Array<PipelineTriggersProps>;
 }

 export type { PipelineSetupPageProps, PipelineTriggersProps };

-export default function PipelineSetupModal({ actionName, data } : PipelineSetupPageProps) {
+export default function PipelineSetupModal({
+	actionName,
+	data,
+}: PipelineSetupPageProps) {
+	const servicesItems = [
+		{
+			name: "Twitter",
+			key: "twitter",
+			icon: <Twitter />,
+		},
+		{
+			name: "GitHub",
+			key: "github",
+			icon: <GitHub />,
+		},
+		{
+			name: "Google",
+			key: "google",
+			icon: <Google />,
+		},
+		{
+			name: "YouTube",
+			key: "youtube",
+			icon: <YouTube />,
+		},
+		{
+			name: "Spotify",
+			key: "spotify",
+			icon: <MusicNote />,
+		},
+	];

-    const servicesItems = [
-        {
-            name: "Twitter",
-            key: "twitter",
-            icon: <Twitter/>
-        },
-        {
-            name: "GitHub",
-            key: "github",
-            icon: <GitHub/>
-        },
-        {
-            name: "Google",
-            key: "google",
-            icon: <Google/>
-        },
-        {
-            name: "YouTube",
-            key: "youtube",
-            icon: <YouTube/>
-        },
-        {
-            name: "Spotify",
-            key: "spotify",
-            icon: <MusicNote/>
-        }
-    ]
-
-    //TODO On line 63, need to change number 11 to number of available actions
-    return (
-        <div>
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    marginBottom: "100px"
-                }}
-            >
-                <Typography variant="h2" noWrap align="left">
-                    Setup Action: {actionName}
-                </Typography>
-            </Box>
-            <Box
-                sx={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: "right",
-                    justifyContent: "flex-end"
-                }}
-            >
-                <Typography variant="h3" noWrap align="right"
-                            sx={{mr: 4}}
-                >
-                    11 available actions for
-                </Typography>
-                <Select
-                    autoWidth
-                    variant="standard"
-                    defaultValue={"twitter"}
-                >
-                    {servicesItems.map((item, index) => (
-                        <MenuItem value={item.key}>
-                            <img
-                                loading="lazy"
-                                width="20"
-                                src={`https://flagcdn.com/w20/ad.png`}
-                                srcSet={`https://flagcdn.com/w40/ad.png 2x`}
-                                alt={`Flag of Andorra`}
-                            />
-                                <ListItemIcon>
-                                    {item.icon}
-                                </ListItemIcon>
-                                <ListItemText primary={item.name}/>
-                        </MenuItem>
-                    ))}
-                </Select>
-            </Box>
-            <Grid
-                container
-                direction="row"
-                justifyContent="space-around"
-                rowSpacing={4}
-                alignItems="flex-start"
-            >
-                {data.map((el, index) => (
-                    <Grid
-                        item
-                        sm={10}
-                        md={10}
-                        lg={5}
-                        xl={4}
-                        key={0}
-                    >
-                        <Box
-                            alignItems='center' justifyContent='center'
-                        >
-                            <Select
-                                autoWidth
-                                defaultValue={0}
-                            > {el.triggers.map((elem, index) => (
-                                <MenuItem value={index}>
-                                    <ListItemText primary={elem}/>
-                                </MenuItem>
-                            ))}
-                            </Select>
-                        </Box>
-                    </Grid>
-                ))}
-            </Grid>
-        </div>
-    )
-}
+	//TODO On line 63, need to change number 11 to number of available actions
+	return (
+		<div>
+			<Box
+				sx={{
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					justifyContent: "space-between",
+					marginBottom: "100px",
+				}}
+			>
+				<Typography variant="h2" noWrap align="left">
+					Setup Action: {actionName}
+				</Typography>
+			</Box>
+			<Box
+				sx={{
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "right",
+					justifyContent: "flex-end",
+				}}
+			>
+				<Typography variant="h3" noWrap align="right" sx={{ mr: 4 }}>
+					11 available actions for
+				</Typography>
+				<Select autoWidth variant="standard" defaultValue={"twitter"}>
+					{servicesItems.map((item, index) => (
+						<MenuItem value={item.key}>
+							<img
+								loading="lazy"
+								width="20"
+								src={`https://flagcdn.com/w20/ad.png`}
+								srcSet={`https://flagcdn.com/w40/ad.png 2x`}
+								alt={`Flag of Andorra`}
+							/>
+							<ListItemIcon>{item.icon}</ListItemIcon>
+							<ListItemText primary={item.name} />
+						</MenuItem>
+					))}
+				</Select>
+			</Box>
+			<Grid
+				container
+				direction="row"
+				justifyContent="space-around"
+				rowSpacing={4}
+				alignItems="flex-start"
+			>
+				{data.map((el, index) => (
+					<Grid item sm={10} md={10} lg={5} xl={4} key={0}>
+						<Box alignItems="center" justifyContent="center">
+							<Select autoWidth defaultValue={0}>
+								{" "}
+								{el.triggers.map((elem, index) => (
+									<MenuItem value={index}>
+										<ListItemText primary={elem} />
+									</MenuItem>
+								))}
+							</Select>
+						</Box>
+					</Grid>
+				))}
+			</Grid>
+		</div>
+	);
+}
--- a/web-app/src/reportWebVitals.ts
+++ b/web-app/src/reportWebVitals.ts
@@ -1,15 +1,15 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from "web-vitals";

 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
+	if (onPerfEntry && onPerfEntry instanceof Function) {
+		import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+			getCLS(onPerfEntry);
+			getFID(onPerfEntry);
+			getFCP(onPerfEntry);
+			getLCP(onPerfEntry);
+			getTTFB(onPerfEntry);
+		});
+	}
 };

 export default reportWebVitals;
--- a/web-app/src/setupTests.ts
+++ b/web-app/src/setupTests.ts
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
--- a/web-app/src/utils/globals.tsx
+++ b/web-app/src/utils/globals.tsx
@@ -1,2 +1 @@
-
-import { ServiceProps } from "../components/types";
+import { ServiceProps } from "../components/types";
--- a/web-app/tsconfig.json
+++ b/web-app/tsconfig.json
@@ -1,30 +1,23 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext",
-      "es6"
-    ],
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "strictNullChecks": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-  ]
-}
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext", "es6"],
+		"noImplicitAny": true,
+		"noImplicitThis": true,
+		"strictNullChecks": true,
+		"allowJs": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noFallthroughCasesInSwitch": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx"
+	},
+	"include": ["src"]
+}