Format all files with no breaking changes
Lint all files using `npm run lint -- --fix`.
Format all files using `prettier --write "**/*.{ts,tsx,js,jsx,json}"`
No breaking change, only code style is modified.
Gitlab: #29
Change-Id: I4f034a7fb4d3eea10bcd3e38b44a65a1046de62f
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>
+ );
}