diff --git a/client/src/pages/404.jsx b/client/src/pages/404.jsx
index 23882b2..9738fe3 100644
--- a/client/src/pages/404.jsx
+++ b/client/src/pages/404.jsx
@@ -1,9 +1,9 @@
 const NotFoundPage = () => {
-    return (
-        <div>
-            <h3>404 Page not found</h3>
-        </div>
-    )
-}
+  return (
+    <div>
+      <h3>404 Page not found</h3>
+    </div>
+  );
+};
 
-export default NotFoundPage;
\ No newline at end of file
+export default NotFoundPage;
diff --git a/client/src/pages/JamiMessenger.jsx b/client/src/pages/JamiMessenger.jsx
index 9760146..017a9b9 100644
--- a/client/src/pages/JamiMessenger.jsx
+++ b/client/src/pages/JamiMessenger.jsx
@@ -1,11 +1,13 @@
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom';
 
-import Messenger from "./messenger.jsx"
+import Messenger from './messenger.jsx';
 
 export default function JamiMessenger(props) {
-    return <Routes>
-        <Route path="addContact/:contactId" element={<Messenger />} />
-        <Route path="conversation/:conversationId" element={<Messenger />} />
-        <Route index path="*" element={<Messenger />} />
+  return (
+    <Routes>
+      <Route path="addContact/:contactId" element={<Messenger />} />
+      <Route path="conversation/:conversationId" element={<Messenger />} />
+      <Route index path="*" element={<Messenger />} />
     </Routes>
+  );
 }
diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
index ae59d1b..f4d3921 100644
--- a/client/src/pages/accountCreation.jsx
+++ b/client/src/pages/accountCreation.jsx
@@ -3,7 +3,6 @@
 import ListItemLink from '../components/ListItemLink';
 
 export default function AccountCreationDialog(props) {
-
   return (
     <Container>
       <Card>
@@ -12,7 +11,8 @@
             Create new account
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
-            Welcome to the Jami web node setup.<br />
+            Welcome to the Jami web node setup.
+            <br />
             Let's start by creating a new administrator account to control access to the server configuration.
           </Typography>
         </CardContent>
@@ -20,22 +20,38 @@
         <List>
           <ListItemLink
             to="/newAccount/rendezVous"
-            icon={<Avatar><RoomRounded /></Avatar>}
+            icon={
+              <Avatar>
+                <RoomRounded />
+              </Avatar>
+            }
             primary="Rendez-vous point"
-            secondary="A Rendez-vous account provides a unique space suitable to easily organize meetings" />
+            secondary="A Rendez-vous account provides a unique space suitable to easily organize meetings"
+          />
           <Divider />
           <ListItemLink
             to="/newAccount/jami"
-            icon={<Avatar><GroupOutlined /></Avatar>}
+            icon={
+              <Avatar>
+                <GroupOutlined />
+              </Avatar>
+            }
             primary="Jami account"
-            secondary="A pesonal communication account to join a Rendez-vous point or directly contact other Jami users" />
+            secondary="A pesonal communication account to join a Rendez-vous point or directly contact other Jami users"
+          />
           <Divider />
           <ListItemLink
             to="/newAccount/sip"
-            icon={<Avatar><DialerSipRounded /></Avatar>}
+            icon={
+              <Avatar>
+                <DialerSipRounded />
+              </Avatar>
+            }
             primary="SIP Account"
-            secondary="Connect with standard SIP communication providers or classic telephony services" />
+            secondary="Connect with standard SIP communication providers or classic telephony services"
+          />
         </List>
       </Card>
-    </Container>)
+    </Container>
+  );
 }
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 65728d8..77c033a 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,7 +1,7 @@
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react';
 import { Avatar, Card, CardHeader, Container, List } from '@mui/material';
-import Header from '../components/Header'
-import authManager from '../AuthManager'
+import Header from '../components/Header';
+import authManager from '../AuthManager';
 import Account from '../../../model/Account';
 import LoadingPage from '../components/loading';
 import ListItemLink from '../components/ListItemLink';
@@ -12,60 +12,73 @@
 
 const variants = {
   enter: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: "-50px" },
-}
+  exit: { opacity: 0, y: '-50px' },
+};
 
 const AccountSelection = (props) => {
-  const navigate = useNavigate()
-  const [loaded, setLoaded] = useState(false)
-  const [error, setError] = useState(false)
-  const [accounts, setAccounts] = useState([])
+  const navigate = useNavigate();
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+  const [accounts, setAccounts] = useState([]);
 
   useEffect(() => {
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts`, {signal: controller.signal})
-      .then(res => res.json())
-      .then(result => {
-        console.log(result)
-        if (result.length === 0) {
-          navigate('/newAccount')
-        } else {
-          setLoaded(true)
-          setAccounts(result.map(account => Account.from(account)))
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then(
+        (result) => {
+          console.log(result);
+          if (result.length === 0) {
+            navigate('/newAccount');
+          } else {
+            setLoaded(true);
+            setAccounts(result.map((account) => Account.from(account)));
+          }
+        },
+        (error) => {
+          console.log(`get error ${error}`);
+          setLoaded(true);
+          setError(true);
         }
-      }, error => {
-        console.log(`get error ${error}`)
-        setLoaded(true)
-        setError(true)
-      }).catch(e => console.log(e))
-   // return () => controller.abort() // crash on React18
-  }, [])
+      )
+      .catch((e) => console.log(e));
+    // return () => controller.abort() // crash on React18
+  }, []);
 
-  if (!loaded)
-    return <LoadingPage />
+  if (!loaded) return <LoadingPage />;
   return (
     <Fragment>
       <Header />
-      <Container maxWidth="sm" style={{paddingBottom:32}}>
+      <Container maxWidth="sm" style={{ paddingBottom: 32 }}>
         <motion.div drag="x" initial="exit" animate="enter" exit="exit" variants={variants}>
-        <Card style={{marginTop:32, marginBottom:32}}>
-          <CardHeader title="Choose an account" />
-          <List>
-            {accounts.map(account => <ListItemLink key={account.getId()}
-              icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
-              to={`/account/${account.getId()}/settings`}
-              primary={account.getDisplayName()}
-              secondary={account.getDisplayUri()} />)}
-            <ListItemLink
-              icon={<Avatar><AddRounded /></Avatar>}
-              to='/newAccount'
-              primary="Create new account" />
-          </List>
-        </Card>
+          <Card style={{ marginTop: 32, marginBottom: 32 }}>
+            <CardHeader title="Choose an account" />
+            <List>
+              {accounts.map((account) => (
+                <ListItemLink
+                  key={account.getId()}
+                  icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
+                  to={`/account/${account.getId()}/settings`}
+                  primary={account.getDisplayName()}
+                  secondary={account.getDisplayUri()}
+                />
+              ))}
+              <ListItemLink
+                icon={
+                  <Avatar>
+                    <AddRounded />
+                  </Avatar>
+                }
+                to="/newAccount"
+                primary="Create new account"
+              />
+            </List>
+          </Card>
         </motion.div>
       </Container>
     </Fragment>
   );
-}
+};
 
-export default AccountSelection
\ No newline at end of file
+export default AccountSelection;
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index 9808efd..e7d08c2 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -1,45 +1,55 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 import { Container, CircularProgress } from '@mui/material';
-import Header from '../components/Header'
-import AccountPreferences from '../components/AccountPreferences'
-import authManager from '../AuthManager'
-import Account from '../../../model/Account'
-import { useAppSelector, useAppDispatch } from '../../redux/hooks';
+import Header from '../components/Header';
+import AccountPreferences from '../components/AccountPreferences';
+import authManager from '../AuthManager';
+import Account from '../../../model/Account';
+import { useAppDispatch } from '../../redux/hooks';
 import { setAccountId, setAccountObject } from '../../redux/appSlice';
 
 const AccountSettings = (props) => {
-  console.log("ACCOUNT SETTINGS", props.account)
-  const accountId = props.accountId || useParams().accountId
+  console.log('ACCOUNT SETTINGS', props.account);
+  const accountId = props.accountId || useParams().accountId;
   const dispatch = useAppDispatch();
 
-  const [state, setState] = useState({ loaded: false })
+  const [state, setState] = useState({ loaded: false });
 
   useEffect(() => {
-    dispatch(setAccountId(accountId))
+    dispatch(setAccountId(accountId));
 
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${accountId}`, { signal: controller.signal })
-      .then(res => res.json())
-      .then(result => {
-        let account = Account.from(result)
-        account.setDevices(result.devices)
-        dispatch(setAccountObject(account))
-        setState({ loaded: true, account: account})
-
-      }).catch(e => console.log(e))
-     // return () => controller.abort() // crash on React18
-  }, [accountId])
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then((result) => {
+        let account = Account.from(result);
+        account.setDevices(result.devices);
+        dispatch(setAccountObject(account));
+        setState({ loaded: true, account: account });
+      })
+      .catch((e) => console.log(e));
+    // return () => controller.abort() // crash on React18
+  }, [accountId]);
 
   return (
     <Container maxWidth="sm">
       <Header />
-      {state.loaded ? <AccountPreferences account={state.account} onAccontChanged={account => setState(state => {
-        state.account = account
-        return state
-      })} /> : <CircularProgress />}
+      {state.loaded ? (
+        <AccountPreferences
+          account={state.account}
+          onAccontChanged={(account) =>
+            setState((state) => {
+              state.account = account;
+              return state;
+            })
+          }
+        />
+      ) : (
+        <CircularProgress />
+      )}
     </Container>
-  )
-}
+  );
+};
 
-export default AccountSettings;
\ No newline at end of file
+export default AccountSettings;
diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
index 702b01d..0fbd21b 100644
--- a/client/src/pages/addContactPage.jsx
+++ b/client/src/pages/addContactPage.jsx
@@ -1,50 +1,52 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 
 import { Box, Container, Fab, Card, CardContent, Typography } from '@mui/material';
 import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
-import authManager from '../AuthManager'
+import authManager from '../AuthManager';
 import { useAppDispatch } from '../../redux/hooks';
 import { setRefreshFromSlice } from '../../redux/appSlice';
 
-
 export default function AddContactPage(props) {
   const navigate = useNavigate();
-  const accountId = props.accountId || props.match.params.accountId
-  const contactId = props.contactId || props.match.params.contactId
+  const accountId = props.accountId || props.match.params.accountId;
+  const contactId = props.contactId || props.match.params.contactId;
   const dispatch = useAppDispatch();
 
-  const handleClick = async e => {
-    const response = await authManager.fetch(`/api/accounts/${accountId}/conversations`, {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({members:[contactId]})
-    }).then(res => {
-      dispatch(setRefreshFromSlice())
-      return res.json()
-    })
+  const handleClick = async (e) => {
+    const response = await authManager
+      .fetch(`/api/accounts/${accountId}/conversations`, {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ members: [contactId] }),
+      })
+      .then((res) => {
+        dispatch(setRefreshFromSlice());
+        return res.json();
+      });
 
-    console.log(response)
+    console.log(response);
     if (response.conversationId) {
-      navigate(`/account/${accountId}/conversation/${response.conversationId}`)
+      navigate(`/account/${accountId}/conversation/${response.conversationId}`);
     }
-  }
+  };
 
   return (
-    <Container className='messenger'>
-      <Card variant='outlined' style={{ borderRadius: 16, maxWidth: 560, margin: "16px auto" }}>
+    <Container className="messenger">
+      <Card variant="outlined" style={{ borderRadius: 16, maxWidth: 560, margin: '16px auto' }}>
         <CardContent>
-          <Typography variant='h6'>Jami key ID</Typography>
-          <Typography variant='body1'>{contactId}</Typography>
-          <Box style={{textAlign: 'center', marginTop: 16}}>
-          <Fab variant='extended' color='primary' onClick={handleClick}>
-            <GroupAddRounded/>
-            Add contact
-          </Fab>
+          <Typography variant="h6">Jami key ID</Typography>
+          <Typography variant="body1">{contactId}</Typography>
+          <Box style={{ textAlign: 'center', marginTop: 16 }}>
+            <Fab variant="extended" color="primary" onClick={handleClick}>
+              <GroupAddRounded />
+              Add contact
+            </Fab>
           </Box>
         </CardContent>
       </Card>
-    </Container>)
+    </Container>
+  );
 }
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
index a551569..8d47b48 100644
--- a/client/src/pages/jamiAccountCreation.jsx
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -1,36 +1,36 @@
-import { useState } from 'react'
+import { useState } from 'react';
 import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@mui/material';
 import { AddRounded } from '@mui/icons-material';
 import UsernameChooser from '../components/UsernameChooser';
-import authManager from '../AuthManager'
+import authManager from '../AuthManager';
 import { useNavigate } from 'react-router';
 
 export default function JamiAccountDialog(props) {
-  const [name, setName] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(false)
-  const navigate = useNavigate()
+  const [name, setName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const navigate = useNavigate();
 
-  const onSubmit = async event => {
-    event.preventDefault()
-    setLoading(true)
-    const result = await authManager.fetch('/api/accounts', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({ registerName: name })
-    })
-      .then(res => res.json())
-      .catch(error => {
-        setLoading(false)
-        setError(error)
+  const onSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+    const result = await authManager
+      .fetch('/api/accounts', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ registerName: name }),
       })
-    console.log(result)
-    if (result && result.accountId)
-      navigate(`/account/${result.accountId}/settings`)
-  }
+      .then((res) => res.json())
+      .catch((error) => {
+        setLoading(false);
+        setError(error);
+      });
+    console.log(result);
+    if (result && result.accountId) navigate(`/account/${result.accountId}/settings`);
+  };
 
   return (
     <Container>
@@ -40,7 +40,8 @@
             Create Jami account
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
-            Welcome to the Jami web node setup.<br />
+            Welcome to the Jami web node setup.
+            <br />
             Let's start by creating a new administrator account to control access to the server configuration.
           </Typography>
 
@@ -51,10 +52,11 @@
         <CardActions>
           {error && <Typography color="error">Error: {JSON.stringify(error)}</Typography>}
           <Fab color="primary" type="submit" variant="extended" disabled={!name || loading}>
-            <AddRounded/>
+            <AddRounded />
             Register name
           </Fab>
         </CardActions>
       </Card>
-    </Container>)
+    </Container>
+  );
 }
diff --git a/client/src/pages/loginDialog.jsx b/client/src/pages/loginDialog.jsx
index ef647e8..9a7ff0c 100644
--- a/client/src/pages/loginDialog.jsx
+++ b/client/src/pages/loginDialog.jsx
@@ -1,4 +1,4 @@
-import { Component } from 'react'
+import { Component } from 'react';
 
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -11,48 +11,49 @@
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 
-import authManager from '../AuthManager'
+import authManager from '../AuthManager';
 
 function Copyright() {
-    return (
-        <Typography variant="body2" color="textSecondary" align="center">
-            {'Copyright © 2016-'}{new Date().getFullYear()}{' Savoir-faire Linux Inc.'}
-            <Link color="inherit" href="https://jami.net/">
-                Jami.net
-        </Link>{' '}
-            {'.'}
-        </Typography>
-    );
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © 2016-'}
+      {new Date().getFullYear()}
+      {' Savoir-faire Linux Inc.'}
+      <Link color="inherit" href="https://jami.net/">
+        Jami.net
+      </Link>{' '}
+      {'.'}
+    </Typography>
+  );
 }
 
 class SignInPage extends Component {
+  constructor(props) {
+    console.log('SignInPage ' + props.open);
+    super(props);
+    this.state = {
+      submitted: false,
+      loading: false,
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.localLogin = this.localLogin.bind(this);
+  }
 
-    constructor(props) {
-        console.log("SignInPage " + props.open)
-        super(props)
-        this.state = {
-            submitted: false,
-            loading: false,
-        }
-        this.handleSubmit = this.handleSubmit.bind(this);
-        this.localLogin = this.localLogin.bind(this);
-    }
+  handleusername(text) {
+    this.setState({ username: text.target.value });
+  }
 
-    handleusername(text) {
-        this.setState({ username: text.target.value })
-    }
+  handlePassword(text) {
+    this.setState({ password: text.target.value });
+  }
 
-    handlePassword(text) {
-        this.setState({ password: text.target.value })
-    }
-
-    localLogin() {
-        this.setState({
-            submitted: true,
-            loading: true
-        })
-        authManager.authenticate('admin', 'admin')
-        /*fetch('/api/localLogin?username=none&password=none', {
+  localLogin() {
+    this.setState({
+      submitted: true,
+      loading: true,
+    });
+    authManager.authenticate('admin', 'admin');
+    /*fetch('/api/localLogin?username=none&password=none', {
             header: { "Content-Type": "application/json" },
             method: "POST",
             credentials: 'same-origin'
@@ -80,111 +81,109 @@
                     errorMessage: e.toString()
                 })
             })*/
-    }
+  }
 
-    handleSubmit(event) {
-        event.preventDefault();
-        let obj = {}
-        obj.username = this.state.username;
-        obj.password = this.state.password;
+  handleSubmit(event) {
+    event.preventDefault();
+    let obj = {};
+    obj.username = this.state.username;
+    obj.password = this.state.password;
 
+    this.setState({
+      submitted: true,
+      loading: true,
+    });
+
+    fetch('/api/login?username=' + obj.username + '&password=' + obj.password, {
+      header: {
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+      credentials: 'same-origin',
+      //body: JSON.stringify({ obj })
+    })
+      .then((res) => {
+        if (res.status === '200') {
+          this.setState({
+            redirect: true,
+          });
+        } else if (res.status === '401') {
+          this.setState({
+            loading: false,
+            error: true,
+            open: true,
+            errorMessage: 'Wrong credentials! Your are not allowed to connect',
+          });
+        }
+        //this.setState({ session: res });
+      })
+      .catch((e) => {
         this.setState({
-            submitted: true,
-            loading: true
-        })
+          loading: false,
+          error: true,
+          open: true,
+          errorMessage: e.toString(),
+        });
+      });
+  }
 
-        fetch('/api/login?username=' + obj.username + '&password=' + obj.password,
-            {
-                header: {
-                    "Content-Type": "application/json"
-                },
-                method: "POST",
-                credentials: 'same-origin'
-                //body: JSON.stringify({ obj })
-            }
-        ).then((res) => {
-            if (res.status === '200') {
-                this.setState({
-                    redirect: true
-                });
-            } else if (res.status === '401') {
-                this.setState({
-                    loading: false,
-                    error: true,
-                    open: true,
-                    errorMessage: "Wrong credentials! Your are not allowed to connect"
-                })
-            }
-            //this.setState({ session: res });
-        }).catch((e) => {
-            this.setState({
-                loading: false,
-                error: true,
-                open: true,
-                errorMessage: e.toString()
-            })
-        })
-    }
+  render() {
+    console.log('SignInPage render ' + this.props.open);
+    return (
+      <Dialog open={this.props.open}>
+        <DialogTitle>Se connecter</DialogTitle>
+        <DialogContent>
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className="" /*{classes.submit}*/
+            onClick={() => {
+              this.localLogin();
+            }}
+          >
+            Compte local
+          </Button>
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            id="username"
+            label="LDAP Savoir-faire Linux"
+            name="username"
+            autoComplete="email"
+            autoFocus
+            onChange={(text) => {
+              this.handleusername(text);
+            }}
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Mot de passe"
+            type="password"
+            id="password"
+            autoComplete="current-password"
+            onChange={(text) => {
+              this.handlePassword(text);
+            }}
+          />
+          <FormControlLabel control={<Checkbox value="remember" color="primary" />} label="Se rapeller de moi" />
+        </DialogContent>
 
-    render() {
-        console.log("SignInPage render " + this.props.open)
-        return (
-            <Dialog open={this.props.open}>
-                <DialogTitle>Se connecter</DialogTitle>
-                <DialogContent>
-                    <Button
-                        type="submit"
-                        fullWidth
-                        variant="contained"
-                        color="primary"
-                        className=""/*{classes.submit}*/
-                        onClick={() => { this.localLogin() }}
-                    >
-                        Compte local
-                    </Button>
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        id="username"
-                        label="LDAP Savoir-faire Linux"
-                        name="username"
-                        autoComplete="email"
-                        autoFocus
-                        onChange={(text) => { this.handleusername(text) }}
-                    />
-                    <TextField
-                        variant="outlined"
-                        margin="normal"
-                        required
-                        fullWidth
-                        name="password"
-                        label="Mot de passe"
-                        type="password"
-                        id="password"
-                        autoComplete="current-password"
-                        onChange={(text) => { this.handlePassword(text) }}
-                    />
-                    <FormControlLabel
-                        control={<Checkbox value="remember" color="primary" />}
-                        label="Se rapeller de moi"
-                    />
-                </DialogContent>
-
-                <DialogActions>
-                    <Button
-                        type="submit"
-                        size="medium"
-                        onClick={this.handleSubmit}
-                    >
-                        Se connecter
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        );
-    }
+        <DialogActions>
+          <Button type="submit" size="medium" onClick={this.handleSubmit}>
+            Se connecter
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
 }
 
-
-export default SignInPage;
\ No newline at end of file
+export default SignInPage;
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index a256290..f8d5907 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react'
-import Header from '../components/Header'
-import NewContactForm from '../components/NewContactForm'
+import { useEffect, useState } from 'react';
+import Header from '../components/Header';
+import NewContactForm from '../components/NewContactForm';
 
 //import Sound from 'react-sound';
 import ConversationList from '../components/ConversationList';
-import authManager from '../AuthManager'
-import Conversation from '../../../model/Conversation'
-import Contact from '../../../model/Contact'
+import authManager from '../AuthManager';
+import Conversation from '../../../model/Conversation';
+import Contact from '../../../model/Contact';
 import ConversationView from '../components/ConversationView';
 import AddContactPage from './addContactPage.jsx';
 import LoadingPage from '../components/loading';
@@ -14,80 +14,75 @@
 import { Stack } from '@mui/material';
 import { useAppSelector } from '../../redux/hooks';
 
-
 const Messenger = (props) => {
   const { refresh } = useAppSelector((state) => state.app);
 
-  const [conversations, setConversations] = useState(undefined)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [searchResult, setSearchResults] = useState(undefined)
+  const [conversations, setConversations] = useState(undefined);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResult, setSearchResults] = useState(undefined);
 
-  const params = useParams()
-  const accountId = props.accountId || params.accountId
-  const conversationId = props.conversationId || params.conversationId
-  const contactId = props.contactId || params.contactId
+  const params = useParams();
+  const accountId = props.accountId || params.accountId;
+  const conversationId = props.conversationId || params.conversationId;
+  const contactId = props.contactId || params.contactId;
 
   useEffect(() => {
-    console.log("REFRESH CONVERSATIONS FROM MESSENGER")
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${accountId}/conversations`, {signal: controller.signal})
-    .then(res => res.json())
-    .then(result => {
-      console.log(result)
-      setConversations(Object.values(result).map(c => Conversation.from(accountId, c)))
-    })
+    console.log('REFRESH CONVERSATIONS FROM MESSENGER');
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}/conversations`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then((result) => {
+        console.log(result);
+        setConversations(Object.values(result).map((c) => Conversation.from(accountId, c)));
+      });
     // return () => controller.abort()
-  }, [accountId, refresh])
+  }, [accountId, refresh]);
 
   useEffect(() => {
-    if (!searchQuery)
-      return
-    const controller = new AbortController()
-    authManager.fetch(`/api/accounts/${accountId}/ns/name/${searchQuery}`, {signal: controller.signal})
-    .then(response => {
-      if (response.status === 200) {
-        return response.json()
-      } else {
-        throw new Error(response.status)
-      }
-    }).then(response => {
-      console.log(response)
-      const contact = new Contact(response.address)
-      contact.setRegisteredName(response.name)
-      setSearchResults(contact ? Conversation.fromSingleContact(accountId, contact) : undefined)
-    }).catch(e => {
-      setSearchResults(undefined)
-    })
-   // return () => controller.abort() // crash on React18
-  }, [accountId, searchQuery])
+    if (!searchQuery) return;
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/accounts/${accountId}/ns/name/${searchQuery}`, { signal: controller.signal })
+      .then((response) => {
+        if (response.status === 200) {
+          return response.json();
+        } else {
+          throw new Error(response.status);
+        }
+      })
+      .then((response) => {
+        console.log(response);
+        const contact = new Contact(response.address);
+        contact.setRegisteredName(response.name);
+        setSearchResults(contact ? Conversation.fromSingleContact(accountId, contact) : undefined);
+      })
+      .catch((e) => {
+        setSearchResults(undefined);
+      });
+    // return () => controller.abort() // crash on React18
+  }, [accountId, searchQuery]);
 
-  console.log("Messenger render")
+  console.log('Messenger render');
   return (
-    <Stack
-      direction="row"
-      height="100vh"
-      width="100vw"
-    >
-      <Stack
-        flexGrow={0}
-        flexShrink={0}
-        overflow="auto"
-      >
+    <Stack direction="row" height="100vh" width="100vw">
+      <Stack flexGrow={0} flexShrink={0} overflow="auto">
         <Header />
         <NewContactForm onChange={setSearchQuery} />
         {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
-        {conversations ?
-          <ConversationList search={searchResult} conversations={conversations} accountId={accountId} /> :
-          <div className="rooms-list"><LoadingPage /></div>
-        }
+        {conversations ? (
+          <ConversationList search={searchResult} conversations={conversations} accountId={accountId} />
+        ) : (
+          <div className="rooms-list">
+            <LoadingPage />
+          </div>
+        )}
       </Stack>
-      <Stack
-        flexGrow={1}
-      >
+      <Stack flexGrow={1}>
         {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
       </Stack>
     </Stack>
-  )
-}
+  );
+};
 
-export default Messenger
\ No newline at end of file
+export default Messenger;
diff --git a/client/src/pages/serverConfiguration.jsx b/client/src/pages/serverConfiguration.jsx
index 5c80131..8ac85df 100644
--- a/client/src/pages/serverConfiguration.jsx
+++ b/client/src/pages/serverConfiguration.jsx
@@ -1,31 +1,32 @@
-import Header from '../components/Header'
-import AccountPreferences from '../components/AccountPreferences'
-import Container from '@mui/material/Container'
-import CircularProgress from '@mui/material/CircularProgress'
-import authManager from '../AuthManager'
-import Account from '../../../model/Account'
+import Header from '../components/Header';
+import AccountPreferences from '../components/AccountPreferences';
+import Container from '@mui/material/Container';
+import CircularProgress from '@mui/material/CircularProgress';
+import authManager from '../AuthManager';
+import Account from '../../../model/Account';
 
 const ServerOverview = (props) => {
-
-  this.accountId = props.accountId || props.match.params.accountId
+  this.accountId = props.accountId || props.match.params.accountId;
 
   useEffect(() => {
-    const controller = new AbortController()
-    authManager.fetch(`/api/serverConfig`, {signal: controller.signal})
-      .then(res => res.json())
-      .then(result => {
-        console.log(result)
-        setState({loaded: true, account: Account.from(result)})
-      }).catch(e => console.log(e))
-     // return () => controller.abort() // crash on React18
-  }, [accountId])
+    const controller = new AbortController();
+    authManager
+      .fetch(`/api/serverConfig`, { signal: controller.signal })
+      .then((res) => res.json())
+      .then((result) => {
+        console.log(result);
+        setState({ loaded: true, account: Account.from(result) });
+      })
+      .catch((e) => console.log(e));
+    // return () => controller.abort() // crash on React18
+  }, [accountId]);
 
   return (
-    <Container maxWidth="sm" className="app" >
+    <Container maxWidth="sm" className="app">
       <Header />
       {this.state.loaded ? <AccountPreferences account={this.state.account} /> : <CircularProgress />}
     </Container>
-  )
-}
+  );
+};
 
-export default ServerOverview
\ No newline at end of file
+export default ServerOverview;
diff --git a/client/src/pages/serverSetup.jsx b/client/src/pages/serverSetup.jsx
index eaefc51..cf9b3eb 100644
--- a/client/src/pages/serverSetup.jsx
+++ b/client/src/pages/serverSetup.jsx
@@ -1,62 +1,70 @@
-import { useState } from 'react'
+import { useState } from 'react';
 
-import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material'
-import GroupAddRounded from '@mui/icons-material/GroupAddRounded'
-import authManager from '../AuthManager'
+import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material';
+import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
+import authManager from '../AuthManager';
 
 export default function ServerSetup(props) {
-  const [password, setPassword] = useState('')
-  const [passwordRepeat, setPasswordRepeat] = useState('')
-  const [loading, setLoading] = useState(false)
+  const [password, setPassword] = useState('');
+  const [passwordRepeat, setPasswordRepeat] = useState('');
+  const [loading, setLoading] = useState(false);
 
-  const isValid = () => password && password === passwordRepeat
+  const isValid = () => password && password === passwordRepeat;
 
-  const handleSubmit = e => {
-    e.preventDefault()
-    setLoading(true)
-    if (!isValid())
-      return
-    authManager.setup(password)
-  }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
+    if (!isValid()) return;
+    authManager.setup(password);
+  };
 
   return (
-    <Container className='message-list'>
+    <Container className="message-list">
       <Card disabled={loading}>
         <CardContent component="form" onSubmit={handleSubmit}>
           <Typography gutterBottom variant="h5" component="h2">
-          Jami Web Node setup
+            Jami Web Node setup
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
-            Welcome to the Jami web node setup.<br/>
+            Welcome to the Jami web node setup.
+            <br />
             Let's start by creating a new administrator account to control access to the server configuration.
           </Typography>
 
           <Box style={{ textAlign: 'center', marginTop: 8, marginBottom: 16 }}>
-          <div><Input value="admin" name="username" autoComplete="username" disabled /></div>
-          <div><Input
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-            name="password"
-            type='password'
-            placeholder="New password"
-            autoComplete="new-password" />
-          </div>
-          <div><Input
-            value={passwordRepeat}
-            onChange={e => setPasswordRepeat(e.target.value)}
-            name="password"
-            error={!!passwordRepeat && !isValid()}
-            type='password'
-            placeholder="Repeat password"
-            autoComplete="new-password" /></div>
+            <div>
+              <Input value="admin" name="username" autoComplete="username" disabled />
+            </div>
+            <div>
+              <Input
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                name="password"
+                type="password"
+                placeholder="New password"
+                autoComplete="new-password"
+              />
+            </div>
+            <div>
+              <Input
+                value={passwordRepeat}
+                onChange={(e) => setPasswordRepeat(e.target.value)}
+                name="password"
+                error={!!passwordRepeat && !isValid()}
+                type="password"
+                placeholder="Repeat password"
+                autoComplete="new-password"
+              />
+            </div>
           </Box>
           <Box style={{ textAlign: 'center', marginTop: 24 }}>
-            <Fab variant='extended' color='primary' type='submit' disabled={!isValid()}>
-              <GroupAddRounded/>
+            <Fab variant="extended" color="primary" type="submit" disabled={!isValid()}>
+              <GroupAddRounded />
               Create admin account
             </Fab>
           </Box>
         </CardContent>
       </Card>
-    </Container>)
+    </Container>
+  );
 }