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/App.js b/client/src/App.js
index 2505137..65c9400 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -4,31 +4,30 @@
License: AGPL-3
*/
import { ThemeProvider } from '@mui/material/styles';
-import { useState, useEffect } from 'react'
-import { Route, Routes, Navigate } from 'react-router-dom'
-import authManager from './AuthManager'
+import { useState, useEffect } from 'react';
+import { Route, Routes, Navigate } from 'react-router-dom';
+import authManager from './AuthManager';
-import SignInPage from "./pages/loginDialog.jsx"
-import JamiMessenger from "./pages/JamiMessenger.jsx"
-import AccountSettings from "./pages/accountSettings.jsx"
-import AccountSelection from "./pages/accountSelection.jsx"
-import ServerSetup from "./pages/serverSetup.jsx"
-import AccountCreationDialog from "./pages/accountCreation.jsx"
-import NotFoundPage from "./pages/404.jsx"
-import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
-import WelcomeAnimation from './components/welcome'
-import defaultTheme from './themes/default'
-import ContactList from './components/ContactList';
+import SignInPage from './pages/loginDialog.jsx';
+import JamiMessenger from './pages/JamiMessenger.jsx';
+import AccountSettings from './pages/accountSettings.jsx';
+import AccountSelection from './pages/accountSelection.jsx';
+import ServerSetup from './pages/serverSetup.jsx';
+import AccountCreationDialog from './pages/accountCreation.jsx';
+import NotFoundPage from './pages/404.jsx';
+import JamiAccountDialog from './pages/jamiAccountCreation.jsx';
+import WelcomeAnimation from './components/welcome';
+import defaultTheme from './themes/default';
import { ThemeDemonstrator } from './themes/ThemeDemonstrator';
// import { useSelector, useDispatch } from 'react-redux'
// import { useAppSelector, useAppDispatch } from '../redux/hooks'
const Home = (props) => {
- console.log(`home ${props}`)
+ console.log(`home ${props}`);
- return <Navigate to="/account" />
-}
+ return <Navigate to="/account" />;
+};
const App = (props) => {
// const count = useSelector(state => state.counter.value)
@@ -49,15 +48,10 @@
return () => authManager.deinit();
}, []);
- console.log("App render");
+ console.log('App render');
if (displayWelcome) {
- return (
- <WelcomeAnimation
- showSetup={!state.auth.setupComplete}
- onComplete={() => setDisplayWelcome(false)}
- />
- );
+ return <WelcomeAnimation showSetup={!state.auth.setupComplete} onComplete={() => setDisplayWelcome(false)} />;
} else if (!state.auth.setupComplete) {
return (
<Routes>
@@ -87,11 +81,9 @@
<Route path="/" index element={<Home />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
- {!state.auth.authenticated && (
- <SignInPage key="signin" open={!state.auth.authenticated} />
- )}
+ {!state.auth.authenticated && <SignInPage key="signin" open={!state.auth.authenticated} />}
</ThemeProvider>
);
};
-export default App
+export default App;
diff --git a/client/src/AuthManager.js b/client/src/AuthManager.js
index 21800cc..60c903b 100644
--- a/client/src/AuthManager.js
+++ b/client/src/AuthManager.js
@@ -18,169 +18,164 @@
*/
class AuthManager {
- constructor() {
- console.log("AuthManager()")
- this.authenticating = false
+ constructor() {
+ console.log('AuthManager()');
+ this.authenticating = false;
- this.state = {
- initialized: false,
- authenticated: true,
- setupComplete: true,
- error: false
- }
+ this.state = {
+ initialized: false,
+ authenticated: true,
+ setupComplete: true,
+ error: false,
+ };
- this.tasks = []
- this.onAuthChanged = undefined
+ this.tasks = [];
+ this.onAuthChanged = undefined;
- if (initData) {
- console.log("Using static initData")
- this.setInitData(initData)
- return
- }
+ if (initData) {
+ console.log('Using static initData');
+ this.setInitData(initData);
+ return;
}
+ }
- isAuthenticated() {
- return this.state.authenticated
+ isAuthenticated() {
+ return this.state.authenticated;
+ }
+
+ getState() {
+ return this.state;
+ }
+
+ setInitData(data) {
+ this.authenticating = false;
+ this.state.initialized = true;
+ if (data.username) {
+ Object.assign(this.state, {
+ authenticated: true,
+ setupComplete: true,
+ error: false,
+ user: { username: data.username, type: data.type },
+ });
+ } else {
+ Object.assign(this.state, {
+ authenticated: false,
+ setupComplete: 'setupComplete' in data ? data.setupComplete : true,
+ error: false,
+ });
}
-
- getState() {
- return this.state
- }
-
- setInitData(data) {
- this.authenticating = false
- this.state.initialized = true
- if (data.username) {
- Object.assign(this.state, {
- authenticated: true,
- setupComplete: true,
- error: false,
- user: { username: data.username, type: data.type }
- })
- } else {
- Object.assign(this.state, {
- authenticated: false,
- setupComplete: 'setupComplete' in data ? data.setupComplete : true,
- error: false
- })
- }
- console.log("Init ended")
- /*if (this.onAuthChanged)
+ console.log('Init ended');
+ /*if (this.onAuthChanged)
this.onAuthChanged(this.state)*/
- }
+ }
- init(cb) {
- this.onAuthChanged = cb
- if (this.state.initialized || this.authenticating)
- return
- /*if (initData) {
+ init(cb) {
+ this.onAuthChanged = cb;
+ if (this.state.initialized || this.authenticating) return;
+ /*if (initData) {
console.log("Using static initData")
this.setInitData(initData)
return
}*/
- this.authenticating = true
- fetch('/auth')
- .then(async (response) => {
- this.authenticating = false
- this.state.initialized = true
- if (response.status === 200) {
- this.setInitData(await response.json())
- } else if (response.status === 401) {
- this.setInitData(await response.json())
- } else {
- this.state.error = true
- if (this.onAuthChanged)
- this.onAuthChanged(this.state)
- }
- }).catch(e => {
- this.authenticating = false
- console.log(e)
- })
- }
-
- deinit() {
- console.log("Deinit")
- this.onAuthChanged = undefined
- }
-
- async setup(password) {
- if (this.authenticating || this.state.setupComplete)
- return
- console.log("Starting setup")
- this.authenticating = true
- const response = await fetch(`/setup`, {
- method: 'POST',
- headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({ password })
- })
- console.log(response)
- if (response.ok) {
- console.log("Success, going home")
- //navigate('/')
+ this.authenticating = true;
+ fetch('/auth')
+ .then(async (response) => {
+ this.authenticating = false;
+ this.state.initialized = true;
+ if (response.status === 200) {
+ this.setInitData(await response.json());
+ } else if (response.status === 401) {
+ this.setInitData(await response.json());
} else {
+ this.state.error = true;
+ if (this.onAuthChanged) this.onAuthChanged(this.state);
}
- this.authenticating = false
- this.state.setupComplete = true
- if (this.onAuthChanged)
- this.onAuthChanged(this.state)
- return response.ok
- }
+ })
+ .catch((e) => {
+ this.authenticating = false;
+ console.log(e);
+ });
+ }
- authenticate(username, password) {
- if (this.authenticating)
- return
- console.log("Starting authentication")
- this.authenticating = true
- fetch(`/auth/local?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, { method:"POST" })
- .then(response => {
- console.log(response)
- this.authenticating = false
- this.state.authenticated = response.ok && response.status === 200
- if (this.onAuthChanged)
- this.onAuthChanged(this.state)
- while (this.tasks.length !== 0) {
- const task = this.tasks.shift()
- if (this.state.authenticated)
- fetch(task.url, task.init)
- .then(res => task.resolve(res))
- .catch(e => console.log("Error executing pending task: " + e))
- else
- task.reject(new Error("Authentication failed"))
- }
- }).catch(e => {
- this.authenticating = false
- console.log(e)
- })
- }
+ deinit() {
+ console.log('Deinit');
+ this.onAuthChanged = undefined;
+ }
- disconnect() {
- console.log("Disconnect")
- this.state.authenticated = false
- if (this.onAuthChanged)
- this.onAuthChanged(this.state)
+ async setup(password) {
+ if (this.authenticating || this.state.setupComplete) return;
+ console.log('Starting setup');
+ this.authenticating = true;
+ const response = await fetch(`/setup`, {
+ method: 'POST',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ password }),
+ });
+ console.log(response);
+ if (response.ok) {
+ console.log('Success, going home');
+ //navigate('/')
+ } else {
}
+ this.authenticating = false;
+ this.state.setupComplete = true;
+ if (this.onAuthChanged) this.onAuthChanged(this.state);
+ return response.ok;
+ }
- fetch(url, init) {
- console.log(`fetch ${url}`)
- if (!this.state.authenticated) {
- if (!init || !init.method || init.method === 'GET') {
- return new Promise((resolve, reject) => this.tasks.push({url, init, resolve, reject}))
- } else {
- return new Promise((resolve, reject) => reject("Not authenticated"))
- }
+ authenticate(username, password) {
+ if (this.authenticating) return;
+ console.log('Starting authentication');
+ this.authenticating = true;
+ fetch(`/auth/local?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, {
+ method: 'POST',
+ })
+ .then((response) => {
+ console.log(response);
+ this.authenticating = false;
+ this.state.authenticated = response.ok && response.status === 200;
+ if (this.onAuthChanged) this.onAuthChanged(this.state);
+ while (this.tasks.length !== 0) {
+ const task = this.tasks.shift();
+ if (this.state.authenticated)
+ fetch(task.url, task.init)
+ .then((res) => task.resolve(res))
+ .catch((e) => console.log('Error executing pending task: ' + e));
+ else task.reject(new Error('Authentication failed'));
}
- return fetch(url, init)
- .then(response => {
- if (response.status === 401) {
- this.disconnect()
- return this.fetch(url, init)
- }
- return response
- })
+ })
+ .catch((e) => {
+ this.authenticating = false;
+ console.log(e);
+ });
+ }
+
+ disconnect() {
+ console.log('Disconnect');
+ this.state.authenticated = false;
+ if (this.onAuthChanged) this.onAuthChanged(this.state);
+ }
+
+ fetch(url, init) {
+ console.log(`fetch ${url}`);
+ if (!this.state.authenticated) {
+ if (!init || !init.method || init.method === 'GET') {
+ return new Promise((resolve, reject) => this.tasks.push({ url, init, resolve, reject }));
+ } else {
+ return new Promise((resolve, reject) => reject('Not authenticated'));
+ }
}
+ return fetch(url, init).then((response) => {
+ if (response.status === 401) {
+ this.disconnect();
+ return this.fetch(url, init);
+ }
+ return response;
+ });
+ }
}
-export default new AuthManager()
\ No newline at end of file
+export default new AuthManager();
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 68509f2..c267af4 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,17 +1,34 @@
-import { useState } from 'react'
+import { useState } from 'react';
-import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Toolbar, IconButton, ListItemAvatar, Input, TextField } from '@mui/material'
-import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@mui/icons-material'
+import {
+ List,
+ ListItem,
+ ListItemIcon,
+ ListItemSecondaryAction,
+ ListItemText,
+ ListSubheader,
+ Switch,
+ Typography,
+ Grid,
+ Paper,
+ CardContent,
+ Card,
+ Toolbar,
+ IconButton,
+ ListItemAvatar,
+ TextField,
+} from '@mui/material';
+import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@mui/icons-material';
-import Account from '../../../model/Account'
-import JamiIdCard from './JamiIdCard'
-import ConversationAvatar from './ConversationAvatar'
-import ConversationsOverviewCard from './ConversationsOverviewCard'
+import Account from '../../../model/Account';
+import JamiIdCard from './JamiIdCard';
+import ConversationAvatar from './ConversationAvatar';
+import ConversationsOverviewCard from './ConversationsOverviewCard';
-import authManager from '../AuthManager'
-import { motion } from 'framer-motion'
+import authManager from '../AuthManager';
+import { motion } from 'framer-motion';
-const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] }
+const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] };
const thumbnailVariants = {
initial: { scale: 0.9, opacity: 0 },
@@ -19,50 +36,44 @@
exit: {
scale: 0.5,
opacity: 0,
- transition: { duration: 1.5, ...transition }
- }
-}
+ transition: { duration: 1.5, ...transition },
+ },
+};
export default function AccountPreferences(props) {
const account = props.account;
let devices = [];
for (var i in account.devices) devices.push([i, account.devices[i]]);
- console.log(devices)
+ console.log(devices);
const isJamiAccount = account.getType() === Account.TYPE_JAMI;
- const alias = isJamiAccount ? "Jami account" : "SIP account";
+ const alias = isJamiAccount ? 'Jami account' : 'SIP account';
const moderators = account.getDefaultModerators();
- const [defaultModeratorUri, setDefaultModeratorUri] = useState("");
+ const [defaultModeratorUri, setDefaultModeratorUri] = useState('');
const [details, setDetails] = useState(account.getDetails());
const addModerator = () => {
if (defaultModeratorUri) {
- authManager.fetch(
- `/api/accounts/${account.getId()}/defaultModerators/${defaultModeratorUri}`,
- { method: "PUT" }
- );
- setDefaultModeratorUri("");
+ authManager.fetch(`/api/accounts/${account.getId()}/defaultModerators/${defaultModeratorUri}`, { method: 'PUT' });
+ setDefaultModeratorUri('');
}
};
const removeModerator = (uri) =>
- authManager.fetch(
- `/api/accounts/${account.getId()}/defaultModerators/${uri}`,
- { method: "DELETE" }
- );
+ authManager.fetch(`/api/accounts/${account.getId()}/defaultModerators/${uri}`, { method: 'DELETE' });
const handleToggle = (key, value) => {
console.log(`handleToggle ${key} ${value}`);
const newDetails = {};
- newDetails[key] = value ? "true" : "false";
+ newDetails[key] = value ? 'true' : 'false';
console.log(newDetails);
authManager.fetch(`/api/accounts/${account.getId()}`, {
- method: "POST",
+ method: 'POST',
headers: {
- Accept: "application/json",
- "Content-Type": "application/json",
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
},
body: JSON.stringify(newDetails),
});
@@ -125,11 +136,7 @@
{devices.map((device) => (
<ListItem>
<GroupRounded />
- <ListItemText
- id="switch-list-label-rendezvous"
- primary={device[1]}
- secondary={device[0]}
- />
+ <ListItemText id="switch-list-label-rendezvous" primary={device[1]} secondary={device[0]} />
</ListItem>
))}
{/* <ListItemTextsion> */}
@@ -152,19 +159,14 @@
<ListItemIcon>
<GroupRounded />
</ListItemIcon>
- <ListItemText
- id="switch-list-label-rendezvous"
- primary="Rendez-Vous point"
- />
+ <ListItemText id="switch-list-label-rendezvous" primary="Rendez-Vous point" />
<ListItemSecondaryAction>
<Switch
edge="end"
- onChange={(e) =>
- handleToggle("Account.rendezVous", e.target.checked)
- }
- checked={details["Account.rendezVous"] === "true"}
+ onChange={(e) => handleToggle('Account.rendezVous', e.target.checked)}
+ checked={details['Account.rendezVous'] === 'true'}
inputProps={{
- "aria-labelledby": "switch-list-label-rendezvous",
+ 'aria-labelledby': 'switch-list-label-rendezvous',
}}
/>
</ListItemSecondaryAction>
@@ -175,18 +177,13 @@
<ListItemIcon>
<PhoneCallbackRounded />
</ListItemIcon>
- <ListItemText
- id="switch-list-label-publicin"
- primary="Allow connection from unkown peers"
- />
+ <ListItemText id="switch-list-label-publicin" primary="Allow connection from unkown peers" />
<ListItemSecondaryAction>
<Switch
edge="end"
- onChange={(e) =>
- handleToggle("DHT.PublicInCalls", e.target.checked)
- }
- checked={details["DHT.PublicInCalls"] === "true"}
- inputProps={{ "aria-labelledby": "switch-list-label-publicin" }}
+ onChange={(e) => handleToggle('DHT.PublicInCalls', e.target.checked)}
+ checked={details['DHT.PublicInCalls'] === 'true'}
+ inputProps={{ 'aria-labelledby': 'switch-list-label-publicin' }}
/>
</ListItemSecondaryAction>
</ListItem>
@@ -224,10 +221,7 @@
</ListItemAvatar>
<ListItemText primary={moderator.getDisplayName()} />
<ListItemSecondaryAction>
- <IconButton
- onClick={(e) => removeModerator(moderator.uri)}
- size="large"
- >
+ <IconButton onClick={(e) => removeModerator(moderator.uri)} size="large">
<DeleteRounded />
</IconButton>
</ListItemSecondaryAction>
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index f3f4efa..7da8375 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,20 +1,20 @@
-import List from "@mui/material/List";
-import authManager from "../AuthManager";
-import ConversationAvatar from "./ConversationAvatar";
+import List from '@mui/material/List';
+import authManager from '../AuthManager';
+import ConversationAvatar from './ConversationAvatar';
import Modal from 'react-modal';
-import { useState, useEffect } from "react";
-import { Person } from "@mui/icons-material";
-import { useAppDispatch, useAppSelector } from "../../redux/hooks";
-import { ListItem, ListItemAvatar, ListItemText } from "@mui/material";
+import { useState, useEffect } from 'react';
+import { Person } from '@mui/icons-material';
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material';
const customStyles = {
content: {
- top: "50%",
- left: "50%",
- right: "auto",
- bottom: "auto",
- marginRight: "-50%",
- transform: "translate(-50%, -50%)",
+ top: '50%',
+ left: '50%',
+ right: 'auto',
+ bottom: 'auto',
+ marginRight: '-50%',
+ transform: 'translate(-50%, -50%)',
},
};
@@ -47,23 +47,20 @@
})
.then((res) => res.json())
.then((result) => {
- console.log("CONTACT LIST - DETAILS: ", result);
+ console.log('CONTACT LIST - DETAILS: ', result);
})
- .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
+ .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
};
const removeOrBlock = (typeOfRemove) => {
- console.log("REMOVE");
+ console.log('REMOVE');
setBlockOrRemove(false);
const controller = new AbortController();
authManager
- .fetch(
- `/api/accounts/${accountId}/contacts/${typeOfRemove}/${currentContact.id}`,
- {
- signal: controller.signal,
- method: "DELETE",
- }
- )
+ .fetch(`/api/accounts/${accountId}/contacts/${typeOfRemove}/${currentContact.id}`, {
+ signal: controller.signal,
+ method: 'DELETE',
+ })
.then((res) => res.json())
.then((result) => {})
.catch((e) => console.log(`ERROR ${typeOfRemove}ing CONTACT : `, e));
@@ -78,7 +75,7 @@
})
.then((res) => res.json())
.then((result) => {
- console.log("CONTACTS: ", result)
+ console.log('CONTACTS: ', result);
setContacts(result);
});
return () => controller.abort();
@@ -108,7 +105,7 @@
<div
onClick={() => {
- console.log("open dialog Supprimer: ");
+ console.log('open dialog Supprimer: ');
setBlockOrRemove(false);
closeModal();
openModalDelete();
@@ -120,7 +117,7 @@
<div
onClick={() => {
- console.log("open dialog BLOCK: ");
+ console.log('open dialog BLOCK: ');
setBlockOrRemove(true);
closeModal();
openModalDelete();
@@ -132,7 +129,7 @@
<div
onClick={() => {
- console.log("open details contact for: ");
+ console.log('open details contact for: ');
closeModal();
openModalDetails();
getContactDetails();
@@ -148,13 +145,12 @@
style={customStyles}
contentLabel="Merci de confirmer"
>
- Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"} ce
- contact?
+ Voulez vous vraiment {blockOrRemove ? 'bloquer' : 'supprimer'} ce contact?
<br />
{blockOrRemove ? (
- <button onClick={() => removeOrBlock("block")}>Bloquer</button>
+ <button onClick={() => removeOrBlock('block')}>Bloquer</button>
) : (
- <button onClick={() => removeOrBlock("remove")}>Supprimer</button>
+ <button onClick={() => removeOrBlock('remove')}>Supprimer</button>
)}
<button onClick={closeModalDelete}>Annuler</button>
</Modal>
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
index ea9fcb0..dbf78e1 100644
--- a/client/src/components/ConversationAvatar.js
+++ b/client/src/components/ConversationAvatar.js
@@ -1,9 +1,5 @@
-import { Avatar } from '@mui/material'
+import { Avatar } from '@mui/material';
-export default function ConversationAvatar({displayName,...props}) {
- return <Avatar
- {...props}
- alt={displayName}
- src="/broken"
- />
+export default function ConversationAvatar({ displayName, ...props }) {
+ return <Avatar {...props} alt={displayName} src="/broken" />;
}
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index d81ebb2..38628ad 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -1,6 +1,6 @@
-import List from '@mui/material/List'
-import { useEffect } from "react";
-import ConversationListItem from './ConversationListItem'
+import List from '@mui/material/List';
+import { useEffect } from 'react';
+import ConversationListItem from './ConversationListItem';
import ListSubheader from '@mui/material/ListSubheader';
import Conversation from '../../../model/Conversation';
import { GroupRounded as GroupIcon } from '@mui/icons-material';
@@ -8,31 +8,34 @@
import { useAppSelector } from '../../redux/hooks';
export default function ConversationList(props) {
- const { refresh } = useAppSelector((state) => state.app)
+ const { refresh } = useAppSelector((state) => state.app);
- useEffect(() => {
- console.log("refresh list");
- }, [refresh])
+ useEffect(() => {
+ console.log('refresh list');
+ }, [refresh]);
- return (
- <div className="rooms-list">
- <List>
- {props.search instanceof Conversation &&
- (<div>
- <ListSubheader>Public directory</ListSubheader>
- <ConversationListItem conversation={props.search} />
- <ListSubheader>Conversations</ListSubheader>
- </div>)}
- {props.conversations.map(conversation =>
- <ConversationListItem key={conversation.getId()} conversation={conversation} />
- )}
- {props.conversations.length === 0 && (
- <div className="list-placeholder">
- <GroupIcon color="disabled" fontSize="large" />
- <Typography className="subtitle" variant="subtitle2">No conversation yet</Typography>
- </div>
- )}
- </List>
- </div>
- )
+ return (
+ <div className="rooms-list">
+ <List>
+ {props.search instanceof Conversation && (
+ <div>
+ <ListSubheader>Public directory</ListSubheader>
+ <ConversationListItem conversation={props.search} />
+ <ListSubheader>Conversations</ListSubheader>
+ </div>
+ )}
+ {props.conversations.map((conversation) => (
+ <ConversationListItem key={conversation.getId()} conversation={conversation} />
+ ))}
+ {props.conversations.length === 0 && (
+ <div className="list-placeholder">
+ <GroupIcon color="disabled" fontSize="large" />
+ <Typography className="subtitle" variant="subtitle2">
+ No conversation yet
+ </Typography>
+ </div>
+ )}
+ </List>
+ </div>
+ );
}
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index e0b8e49..aab6dc1 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,17 +1,16 @@
import Modal from 'react-modal';
-import authManager from '../AuthManager'
-import ConversationAvatar from './ConversationAvatar'
-import Conversation from '../../../model/Conversation'
-import { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom"
-import { ListItem, Stack, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material'
+import authManager from '../AuthManager';
+import ConversationAvatar from './ConversationAvatar';
+import Conversation from '../../../model/Conversation';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ListItem, Stack, ListItemAvatar, ListItemText, Box, Typography } from '@mui/material';
import { RemoveContactIcon, VideoCallIcon } from './svgIcons';
import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon } from './svgIcons';
-import { QRCodeCanvas} from 'qrcode.react';
+import { QRCodeCanvas } from 'qrcode.react';
import { setRefreshFromSlice } from '../../redux/appSlice';
import { useAppDispatch } from '../../redux/hooks';
-
const customStyles = {
content: {
// right: "auto",
@@ -21,68 +20,68 @@
// padding: "16px"
// top: "1364px",
- left: "94px",
- width: "180px",
- height: "262px",
- background: "#FFFFFF 0% 0% no-repeat padding-box",
- boxShadow: "3px 3px 7px #00000029",
- borderRadius: "5px 20px 20px 20px",
- opacity: "1",
+ left: '94px',
+ width: '180px',
+ height: '262px',
+ background: '#FFFFFF 0% 0% no-repeat padding-box',
+ boxShadow: '3px 3px 7px #00000029',
+ borderRadius: '5px 20px 20px 20px',
+ opacity: '1',
- textAlign: "left",
- font: "normal normal normal 12px/26px Ubuntu",
- letterSpacing: "0px",
- color: "#000000",
+ textAlign: 'left',
+ font: 'normal normal normal 12px/26px Ubuntu',
+ letterSpacing: '0px',
+ color: '#000000',
},
};
const cancelStyles = {
content: {
- left: "94px",
- width: "300px",
- height: "220px",
- background: "#FFFFFF 0% 0% no-repeat padding-box",
- boxShadow: "3px 3px 7px #00000029",
- borderRadius: "20px",
- opacity: "1",
+ left: '94px',
+ width: '300px',
+ height: '220px',
+ background: '#FFFFFF 0% 0% no-repeat padding-box',
+ boxShadow: '3px 3px 7px #00000029',
+ borderRadius: '20px',
+ opacity: '1',
- textAlign: "left",
- font: "normal normal normal 12px/26px Ubuntu",
- letterSpacing: "0px",
- color: "#000000",
+ textAlign: 'left',
+ font: 'normal normal normal 12px/26px Ubuntu',
+ letterSpacing: '0px',
+ color: '#000000',
},
};
const contactDetailsStyles = {
content: {
- left: "94px",
- width: "450px",
- height: "450px",
- background: "#FFFFFF 0% 0% no-repeat padding-box",
- boxShadow: "3px 3px 7px #00000029",
- borderRadius: "20px",
- opacity: "1",
+ left: '94px',
+ width: '450px',
+ height: '450px',
+ background: '#FFFFFF 0% 0% no-repeat padding-box',
+ boxShadow: '3px 3px 7px #00000029',
+ borderRadius: '20px',
+ opacity: '1',
- textAlign: "left",
- font: "normal normal normal 12px/26px Ubuntu",
- letterSpacing: "0px",
- color: "#000000",
+ textAlign: 'left',
+ font: 'normal normal normal 12px/26px Ubuntu',
+ letterSpacing: '0px',
+ color: '#000000',
},
};
const stackStyles = {
- flexDirection: "row",
- marginBottom: "4px",
- spacing: "40px",
+ flexDirection: 'row',
+ marginBottom: '4px',
+ spacing: '40px',
flex: 1,
- alignItems: "center",
+ alignItems: 'center',
};
const iconTextStyle = {
- marginRight: "10px",
+ marginRight: '10px',
};
-const iconColor = "#005699";
+const iconColor = '#005699';
export default function ConversationListItem(props) {
const { conversationId, contactId } = useParams();
@@ -98,10 +97,8 @@
const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
const [blockOrRemove, setBlockOrRemove] = useState(true);
- const [userId, setUserId] = useState(
- conversation?.getFirstMember()?.contact.getUri()
- );
- const [isSwarm, setIsSwarm] = useState("true");
+ const [userId, setUserId] = useState(conversation?.getFirstMember()?.contact.getUri());
+ const [isSwarm, setIsSwarm] = useState('true');
const openModal = (e) => {
e.preventDefault();
@@ -117,43 +114,37 @@
let subtitle;
function afterOpenModal() {
// references are now sync'd and can be accessed.
- subtitle.style.color = "#f00";
+ subtitle.style.color = '#f00';
}
const getContactDetails = () => {
const controller = new AbortController();
authManager
- .fetch(
- `/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`,
- {
- signal: controller.signal,
- }
- )
+ .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/details/${userId}`, {
+ signal: controller.signal,
+ })
.then((res) => res.json())
.then((result) => {
- console.log("CONTACT LIST - DETAILS: ", result);
+ console.log('CONTACT LIST - DETAILS: ', result);
})
- .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
+ .catch((e) => console.log('ERROR GET CONTACT DETAILS: ', e));
};
const removeOrBlock = (typeOfRemove) => {
console.log(typeOfRemove);
setBlockOrRemove(false);
- console.log("EEEH", typeOfRemove, conversation.getAccountId(), userId);
+ console.log('EEEH', typeOfRemove, conversation.getAccountId(), userId);
const controller = new AbortController();
authManager
- .fetch(
- `/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`,
- {
- signal: controller.signal,
- method: "DELETE",
- }
- )
+ .fetch(`/api/accounts/${conversation.getAccountId()}/contacts/${typeOfRemove}/${userId}`, {
+ signal: controller.signal,
+ method: 'DELETE',
+ })
.then((res) => res.json())
.then((result) => {
- console.log("propre");
+ console.log('propre');
dispatch(setRefreshFromSlice());
})
.catch((e) => {
@@ -163,10 +154,7 @@
closeModalDelete();
};
-
- const uri = conversation.getId()
- ? `conversation/${conversation.getId()}`
- : `addContact/${userId}`;
+ const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${userId}`;
if (conversation instanceof Conversation) {
return (
<div onContextMenu={openModal}>
@@ -219,7 +207,7 @@
<Stack
onClick={() => {
- console.log("open details contact for: ");
+ console.log('open details contact for: ');
closeModal();
openModalDetails();
getContactDetails();
@@ -269,35 +257,33 @@
style={contactDetailsStyles}
contentLabel="Détails contact"
>
- <Stack direction={"row"} alignContent="flex-end">
- <Stack direction={"column"}>
- <div style={{ height: "100px" }}>
- <ConversationAvatar
- displayName={conversation.getDisplayNameNoFallback()}
- />
+ <Stack direction={'row'} alignContent="flex-end">
+ <Stack direction={'column'}>
+ <div style={{ height: '100px' }}>
+ <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
</div>
<div
style={{
- fontSize: "20px",
- marginBottom: "20px",
- height: "20px",
+ fontSize: '20px',
+ marginBottom: '20px',
+ height: '20px',
}}
>
Informations
</div>
<Typography variant="caption">Nom d'utilisateur</Typography>
- <div style={{ height: "20px" }} />
+ <div style={{ height: '20px' }} />
<Typography variant="caption">Identifiant </Typography>
- <div style={{ height: "20px" }} />
+ <div style={{ height: '20px' }} />
<div
style={{
flex: 1,
- height: "150px",
- direction: "column",
- flexDirection: "column",
+ height: '150px',
+ direction: 'column',
+ flexDirection: 'column',
// alignSelf: "flex-end",
}}
>
@@ -307,54 +293,52 @@
<Typography variant="caption">est un swarm </Typography>
</Stack>
- <Stack direction={"column"}>
+ <Stack direction={'column'}>
<div
style={{
- fontWeight: "bold",
- fontSize: "20px",
- height: "100px",
+ fontWeight: 'bold',
+ fontSize: '20px',
+ height: '100px',
}}
>
- {conversation.getDisplayNameNoFallback() + "(resolved name)"}
+ {conversation.getDisplayNameNoFallback() + '(resolved name)'}
</div>
<div
style={{
- height: "40px",
+ height: '40px',
}}
/>
<Typography variant="caption">
- <div style={{ fontWeight: "bold" }}>
- {conversation.getDisplayNameNoFallback()}
- </div>
+ <div style={{ fontWeight: 'bold' }}>{conversation.getDisplayNameNoFallback()}</div>
</Typography>
- <div style={{ height: "20px" }} />
+ <div style={{ height: '20px' }} />
<Typography variant="caption">
- <div style={{ fontWeight: "bold" }}> {userId}</div>
+ <div style={{ fontWeight: 'bold' }}> {userId}</div>
</Typography>
- <div style={{ height: "20px" }} />
+ <div style={{ height: '20px' }} />
- <div height={"40px"}>
+ <div height={'40px'}>
<QRCodeCanvas value={`${userId}`} />
</div>
<Typography variant="caption">
- <div style={{ fontWeight: "bold" }}> {isSwarm}</div>
+ <div style={{ fontWeight: 'bold' }}> {isSwarm}</div>
</Typography>
</Stack>
</Stack>
<div
onClick={closeModalDetails}
style={{
- width: "100px",
- borderStyle: "solid",
- textAlign: "center",
- borderRadius: "5px",
- marginLeft: "150px",
- marginTop: "10px",
+ width: '100px',
+ borderStyle: 'solid',
+ textAlign: 'center',
+ borderRadius: '5px',
+ marginLeft: '150px',
+ marginTop: '10px',
}}
>
<Typography variant="caption">Fermer</Typography>
@@ -370,49 +354,39 @@
contentLabel="Merci de confirmer"
>
<Typography variant="h4">Merci de confirmer</Typography>
- <Stack
- direction={"column"}
- justifyContent="space-around"
- spacing={"75px"}
- >
- <div style={{ textAlign: "center", marginTop: "10%" }}>
+ <Stack direction={'column'} justifyContent="space-around" spacing={'75px'}>
+ <div style={{ textAlign: 'center', marginTop: '10%' }}>
<Typography variant="body2">
- Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"}{" "}
- ce contact?
+ Voulez vous vraiment {blockOrRemove ? 'bloquer' : 'supprimer'} ce contact?
</Typography>
</div>
- <Stack
- direction={"row"}
- top={"25px"}
- alignSelf="center"
- spacing={1}
- >
+ <Stack direction={'row'} top={'25px'} alignSelf="center" spacing={1}>
<Box
onClick={() => {
- if (blockOrRemove) removeOrBlock("block");
- else removeOrBlock("remove");
+ if (blockOrRemove) removeOrBlock('block');
+ else removeOrBlock('remove');
}}
style={{
- width: "100px",
- textAlign: "center",
- borderStyle: "solid",
- borderColor: "red",
- borderRadius: "10px",
- color: "red",
+ width: '100px',
+ textAlign: 'center',
+ borderStyle: 'solid',
+ borderColor: 'red',
+ borderRadius: '10px',
+ color: 'red',
}}
>
- {blockOrRemove ? "Bloquer" : "Supprimer"}
+ {blockOrRemove ? 'Bloquer' : 'Supprimer'}
</Box>
<Box
onClick={closeModalDelete}
style={{
- width: "100px",
- textAlign: "center",
- paddingLeft: "12px",
- paddingRight: "12px",
- borderStyle: "solid",
- borderRadius: "10px",
+ width: '100px',
+ textAlign: 'center',
+ paddingLeft: '12px',
+ paddingRight: '12px',
+ borderStyle: 'solid',
+ borderRadius: '10px',
}}
>
Annuler
@@ -426,19 +400,12 @@
button
alignItems="flex-start"
selected={isSelected}
- onClick={() =>
- navigate(`/account/${conversation.getAccountId()}/${uri}`)
- }
+ onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}
>
<ListItemAvatar>
- <ConversationAvatar
- displayName={conversation.getDisplayNameNoFallback()}
- />
+ <ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} />
</ListItemAvatar>
- <ListItemText
- primary={conversation.getDisplayName()}
- secondary={conversation.getDisplayUri()}
- />
+ <ListItemText primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
</ListItem>
</div>
);
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index 9d12665..c286f8a 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react'
+import { useCallback, useContext, useEffect, useState } from 'react';
import MessageList from './MessageList';
import SendMessageForm from './SendMessageForm';
import Conversation from '../../../model/Conversation';
@@ -8,107 +8,99 @@
import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/conversation';
import { SocketContext } from '../contexts/socket';
-const ConversationView = props => {
- const socket = useContext(SocketContext)
- const [conversation, setConversation] = useState()
- const [messages, setMessages] = useState([])
- const [isLoading, setIsLoading] = useState(true)
- const [error, setError] = useState(false)
+const ConversationView = (props) => {
+ const socket = useContext(SocketContext);
+ const [conversation, setConversation] = useState();
+ const [messages, setMessages] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(false);
- const conversationQuery = useConversationQuery(props.accountId, props.conversationId)
- const messagesQuery = useMessagesQuery(props.accountId, props.conversationId)
- const sendMessageMutation = useSendMessageMutation(props.accountId, props.conversationId)
+ const conversationQuery = useConversationQuery(props.accountId, props.conversationId);
+ const messagesQuery = useMessagesQuery(props.accountId, props.conversationId);
+ const sendMessageMutation = useSendMessageMutation(props.accountId, props.conversationId);
useEffect(() => {
if (conversationQuery.isSuccess) {
- const conversation = Conversation.from(props.accountId, conversationQuery.data)
- setConversation(conversation)
+ const conversation = Conversation.from(props.accountId, conversationQuery.data);
+ setConversation(conversation);
}
- }, [conversationQuery.data])
+ }, [conversationQuery.data]);
useEffect(() => {
if (messagesQuery.isSuccess) {
- const sortedMessages = sortMessages(messagesQuery.data)
- setMessages(sortedMessages)
+ const sortedMessages = sortMessages(messagesQuery.data);
+ setMessages(sortedMessages);
}
- }, [messagesQuery.data])
+ }, [messagesQuery.data]);
useEffect(() => {
- setIsLoading(conversationQuery.isLoading || messagesQuery.isLoading)
- }, [conversationQuery.isLoading, messagesQuery.isLoading])
-
- useEffect(() => {
- setError(conversationQuery.isError || messagesQuery.isError)
- }, [conversationQuery.isError, messagesQuery.isError])
-
- const sendMessage = useCallback(
- (message) => sendMessageMutation.mutate(message),
- [sendMessageMutation]
- )
+ setIsLoading(conversationQuery.isLoading || messagesQuery.isLoading);
+ }, [conversationQuery.isLoading, messagesQuery.isLoading]);
useEffect(() => {
- if (!conversation)
- return
- console.log(`io set conversation ${props.conversationId} `+ socket)
- if (socket)
- socket.emit('conversation', { accountId: props.accountId, conversationId: props.conversationId })
- socket.off('newMessage')
+ setError(conversationQuery.isError || messagesQuery.isError);
+ }, [conversationQuery.isError, messagesQuery.isError]);
+
+ const sendMessage = useCallback((message) => sendMessageMutation.mutate(message), [sendMessageMutation]);
+
+ useEffect(() => {
+ if (!conversation) return;
+ console.log(`io set conversation ${props.conversationId} ` + socket);
+ if (socket) socket.emit('conversation', { accountId: props.accountId, conversationId: props.conversationId });
+ socket.off('newMessage');
socket.on('newMessage', (data) => {
- console.log("newMessage")
- setMessages(
- (messages) => addMessage(messages, data)
- )
- })
- }, [socket, setMessages])
+ console.log('newMessage');
+ setMessages((messages) => addMessage(messages, data));
+ });
+ }, [socket, setMessages]);
if (isLoading) {
- return <LoadingPage />
+ return <LoadingPage />;
} else if (error) {
- return <div>Error loading {props.conversationId}</div>
+ return <div>Error loading {props.conversationId}</div>;
}
return (
- <Stack
- flexGrow={1}
- height="100%"
- >
+ <Stack flexGrow={1} height="100%">
<Stack direction="row" flexGrow={0}>
<Box style={{ margin: 16, flexShrink: 0 }}>
<ConversationAvatar displayName={conversation?.getDisplayNameNoFallback()} />
</Box>
- <Box style={{ flex: "1 1 auto", overflow: 'hidden' }}>
- <Typography className="title" variant="h6">{conversation?.getDisplayName()}</Typography>
- <Typography className="subtitle" variant="subtitle1" >{props.conversationId}</Typography>
+ <Box style={{ flex: '1 1 auto', overflow: 'hidden' }}>
+ <Typography className="title" variant="h6">
+ {conversation?.getDisplayName()}
+ </Typography>
+ <Typography className="subtitle" variant="subtitle1">
+ {props.conversationId}
+ </Typography>
</Box>
</Stack>
<Stack flexGrow={1} overflow="auto" direction="column-reverse">
- <MessageList
- messages={messages}
- />
+ <MessageList messages={messages} />
</Stack>
<Stack flexGrow={0}>
<SendMessageForm onSend={sendMessage} />
</Stack>
</Stack>
- )
-}
+ );
+};
const addMessage = (sortedMessages, message) => {
if (sortedMessages.length === 0) {
- return [message]
+ return [message];
} else if (message.id === sortedMessages[sortedMessages.length - 1].linearizedParent) {
- return [...sortedMessages, message]
+ return [...sortedMessages, message];
} else if (message.linearizedParent === sortedMessages[0].id) {
- return [message, ...sortedMessages]
+ return [message, ...sortedMessages];
} else {
- console.log("Can't insert message " + message.id)
+ console.log("Can't insert message " + message.id);
}
-}
+};
const sortMessages = (messages) => {
- let sortedMessages = []
- messages.forEach(message => sortedMessages = addMessage(sortedMessages, message))
- return sortedMessages
-}
+ let sortedMessages = [];
+ messages.forEach((message) => (sortedMessages = addMessage(sortedMessages, message)));
+ return sortedMessages;
+};
-export default ConversationView
\ No newline at end of file
+export default ConversationView;
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 04f74f5..baf5bf8 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -1,29 +1,30 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
import { Card, CardActionArea, CardContent, CircularProgress, Typography } from '@mui/material';
import { useNavigate, useParams } from 'react-router';
-import authManager from '../AuthManager'
+import authManager from '../AuthManager';
import Conversation from '../../../model/Conversation';
export default function ConversationsOverviewCard(props) {
- const navigate = useNavigate()
- const accountId = props.accountId || useParams().accountId
- const [loaded, setLoaded] = useState(false)
- const [conversations, setConversations] = useState([])
+ const navigate = useNavigate();
+ const accountId = props.accountId || useParams().accountId;
+ const [loaded, setLoaded] = useState(false);
+ const [conversations, setConversations] = useState([]);
useEffect(() => {
- const controller = new AbortController()
- authManager.fetch(`/api/accounts/${accountId}/conversations`, { signal: controller.signal })
- .then(res => res.json())
- .then(result => {
- console.log(result)
- setLoaded(true)
- setConversations(Object.values(result).map(c => Conversation.from(accountId, c)))
- })
+ const controller = new AbortController();
+ authManager
+ .fetch(`/api/accounts/${accountId}/conversations`, { signal: controller.signal })
+ .then((res) => res.json())
+ .then((result) => {
+ console.log(result);
+ setLoaded(true);
+ setConversations(Object.values(result).map((c) => Conversation.from(accountId, c)));
+ });
// return () => controller.abort() // crash on React18
- }, [accountId])
+ }, [accountId]);
return (
- <Card onClick={() => navigate(`/account/${accountId}`)} >
+ <Card onClick={() => navigate(`/account/${accountId}`)}>
<CardActionArea>
<CardContent>
<Typography color="textSecondary" gutterBottom>
@@ -35,5 +36,5 @@
</CardContent>
</CardActionArea>
</Card>
- )
+ );
}
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 0c3eda4..165ff1b 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -1,35 +1,30 @@
-import { useState } from 'react'
-import { Box, Button, Menu, MenuItem } from '@mui/material'
-import { useNavigate, useParams } from "react-router-dom"
-import authManager from '../AuthManager'
+import { useState } from 'react';
+import { Box, Button, Menu, MenuItem } from '@mui/material';
+import { useNavigate, useParams } from 'react-router-dom';
+import authManager from '../AuthManager';
export default function Header() {
- const navigate = useNavigate()
- const [anchorEl, setAnchorEl] = useState(null)
- const handleClick = (event) => setAnchorEl(event.currentTarget)
- const handleClose = () => setAnchorEl(null)
- const params = useParams()
+ const navigate = useNavigate();
+ const [anchorEl, setAnchorEl] = useState(null);
+ const handleClick = (event) => setAnchorEl(event.currentTarget);
+ const handleClose = () => setAnchorEl(null);
+ const params = useParams();
- const goToAccountSelection = () => navigate(`/account`)
- const goToContacts = () => navigate(`/Contacts`)
- const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`)
+ const goToAccountSelection = () => navigate(`/account`);
+ const goToContacts = () => navigate(`/Contacts`);
+ const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`);
return (
<Box>
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
Menu
</Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
+ <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem onClick={goToAccountSelection}>Change account</MenuItem>
<MenuItem onClick={goToContacts}>Contacts</MenuItem>
{params.accountId && <MenuItem onClick={goToAccountSettings}>Account settings</MenuItem>}
<MenuItem onClick={() => authManager.disconnect()}>Log out</MenuItem>
</Menu>
- </Box>
- )
-}
\ No newline at end of file
+ </Box>
+ );
+}
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.js
index b999780a..e25610b 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.js
@@ -1,23 +1,26 @@
import { Box, Card, CardContent, Typography } from '@mui/material';
export default function JamiIdCard(props) {
- const account = props.account
- const registeredName = account.getRegisteredName()
- return <Card style={{marginBottom:16}}>
+ const account = props.account;
+ const registeredName = account.getRegisteredName();
+ return (
+ <Card style={{ marginBottom: 16 }}>
<CardContent>
<Box>
- <Typography color="textSecondary">
- Jami ID
- </Typography>
- <Typography variant="h5" component="h2" gutterBottom noWrap>{account.getUri()}</Typography>
+ <Typography color="textSecondary">Jami ID</Typography>
+ <Typography variant="h5" component="h2" gutterBottom noWrap>
+ {account.getUri()}
+ </Typography>
</Box>
- {registeredName && <Box>
- <Typography color="textSecondary" >
- Jami username
- </Typography>
- <Typography variant="h5" component="h2" noWrap>{registeredName}</Typography>
+ {registeredName && (
+ <Box>
+ <Typography color="textSecondary">Jami username</Typography>
+ <Typography variant="h5" component="h2" noWrap>
+ {registeredName}
+ </Typography>
</Box>
- }
+ )}
</CardContent>
</Card>
+ );
}
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
index c72a268..8080de2 100644
--- a/client/src/components/ListItemLink.js
+++ b/client/src/components/ListItemLink.js
@@ -1,4 +1,4 @@
-import { useMemo, forwardRef } from 'react'
+import { useMemo, forwardRef } from 'react';
import PropTypes from 'prop-types';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
@@ -6,20 +6,23 @@
import { Link as RouterLink } from 'react-router-dom';
function ListItemLink(props) {
- const { icon, primary, secondary, to, account } = props
+ const { icon, primary, secondary, to, account } = props;
const renderLink = useMemo(
- () => forwardRef((itemProps, ref) => {
- console.log("LIST ITEM LINK: ", account, itemProps)
- return <RouterLink to={to} ref={ref} {...itemProps} state={account}/>}),
- [to])
+ () =>
+ forwardRef((itemProps, ref) => {
+ console.log('LIST ITEM LINK: ', account, itemProps);
+ return <RouterLink to={to} ref={ref} {...itemProps} state={account} />;
+ }),
+ [to]
+ );
return (
<ListItem button component={renderLink}>
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
<ListItemText primary={primary} secondary={secondary} />
</ListItem>
- )
+ );
}
ListItemLink.propTypes = {
@@ -27,7 +30,7 @@
primary: PropTypes.string.isRequired,
secondary: PropTypes.string,
to: PropTypes.string.isRequired,
- account: PropTypes.object
-}
+ account: PropTypes.object,
+};
-export default ListItemLink
\ No newline at end of file
+export default ListItemLink;
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index c7f22f1..7626c6e 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,76 +1,56 @@
-import { Box, Chip, Divider, List, ListItemButton, ListItemText, Stack, Tooltip, Typography } from "@mui/material"
-import { styled } from "@mui/material/styles";
-import dayjs from "dayjs"
-import isToday from "dayjs/plugin/isToday"
-import isYesterday from "dayjs/plugin/isYesterday"
-import React, { useCallback, useMemo, useState } from "react"
-import { useTranslation } from "react-i18next"
-import { EmojiButton, MoreButton, ReplyMessageButton } from "./buttons";
-import ConversationAvatar from "./ConversationAvatar"
-import { OppositeArrowsIcon, TrashBinIcon, TwoSheetsIcon } from "./svgIcons"
+import { Box, Chip, Divider, List, ListItemButton, ListItemText, Stack, Tooltip, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EmojiButton, MoreButton, ReplyMessageButton } from './buttons';
+import ConversationAvatar from './ConversationAvatar';
+import { OppositeArrowsIcon, TrashBinIcon, TwoSheetsIcon } from './svgIcons';
-dayjs.extend(isToday)
-dayjs.extend(isYesterday)
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
export const MessageCall = (props) => {
- return (
- <Stack
- alignItems="center"
- >
- "Appel"
- </Stack>
- )
-}
+ return <Stack alignItems="center">"Appel"</Stack>;
+};
export const MessageInitial = (props) => {
- const { t } = useTranslation()
- return (
- <Stack
- alignItems="center"
- >
- {t("message_swarm_created")}
- </Stack>
- )
-}
+ const { t } = useTranslation();
+ return <Stack alignItems="center">{t('message_swarm_created')}</Stack>;
+};
export const MessageDataTransfer = (props) => {
return (
<MessageBubble
- backgroundColor={"#E5E5E5"}
+ backgroundColor={'#E5E5E5'}
position={props.position}
isFirstOfGroup={props.isFirstOfGroup}
isLastOfGroup={props.isLastOfGroup}
>
"data-transfer"
</MessageBubble>
- )
-}
+ );
+};
export const MessageMember = (props) => {
- const { t } = useTranslation()
+ const { t } = useTranslation();
return (
- <Stack
- alignItems="center"
- >
+ <Stack alignItems="center">
<Chip
sx={{
- width: "fit-content",
+ width: 'fit-content',
}}
- label={t("message_user_joined", {user: props.message.author})}
+ label={t('message_user_joined', { user: props.message.author })}
/>
</Stack>
- )
-}
+ );
+};
export const MessageMerge = (props) => {
- return (
- <Stack
- alignItems="center"
- >
- "merge"
- </Stack>
- )
-}
+ return <Stack alignItems="center">"merge"</Stack>;
+};
export const MessageText = (props) => {
return (
@@ -84,37 +64,35 @@
{props.message.body}
</Typography>
</MessageBubble>
- )
-}
+ );
+};
-export const MessageDate = ({time}) => {
- let textDate
+export const MessageDate = ({ time }) => {
+ let textDate;
if (time.isToday()) {
- textDate = "Today"
- }
- else if (time.isYesterday()) {
- textDate = "Yesterday"
- }
- else {
- const date = time.date().toString().padStart(2,'0')
- const month = (time.month()+1).toString().padStart(2,'0')
- textDate = `${date}/${month}/${time.year()}`
+ textDate = 'Today';
+ } else if (time.isYesterday()) {
+ textDate = 'Yesterday';
+ } else {
+ const date = time.date().toString().padStart(2, '0');
+ const month = (time.month() + 1).toString().padStart(2, '0');
+ textDate = `${date}/${month}/${time.year()}`;
}
return (
- <Box marginTop="30px" >
+ <Box marginTop="30px">
<Divider
sx={{
- ".MuiDivider-wrapper": {
+ '.MuiDivider-wrapper': {
margin: 0,
padding: 0,
},
- "&::before": {
- borderTop: "1px solid #E5E5E5",
+ '&::before': {
+ borderTop: '1px solid #E5E5E5',
},
- "&::after": {
- borderTop: "1px solid #E5E5E5",
+ '&::after': {
+ borderTop: '1px solid #E5E5E5',
},
}}
>
@@ -129,37 +107,28 @@
</Typography>
</Divider>
</Box>
- )
-}
+ );
+};
-export const MessageTime = ({time, hasDateOnTop}) => {
- const hour = time.hour().toString().padStart(2,'0')
- const minute = time.minute().toString().padStart(2,'0')
- const textTime = `${hour}:${minute}`
+export const MessageTime = ({ time, hasDateOnTop }) => {
+ const hour = time.hour().toString().padStart(2, '0');
+ const minute = time.minute().toString().padStart(2, '0');
+ const textTime = `${hour}:${minute}`;
return (
- <Stack
- direction="row"
- justifyContent="center"
- margin="30px"
- marginTop={hasDateOnTop ? "20px" : "30px"}
- >
- <Typography
- variant="caption"
- color="#A7A7A7"
- fontWeight={700}
- >
+ <Stack direction="row" justifyContent="center" margin="30px" marginTop={hasDateOnTop ? '20px' : '30px'}>
+ <Typography variant="caption" color="#A7A7A7" fontWeight={700}>
{textTime}
</Typography>
</Stack>
- )
-}
+ );
+};
export const MessageBubblesGroup = (props) => {
- const isUser = false // should access user from the store
- const position = isUser ? "end" : "start"
- const bubbleColor = isUser ? "#005699" : "#E5E5E5"
- const textColor = isUser ? "white" : "black"
+ const isUser = false; // should access user from the store
+ const position = isUser ? 'end' : 'start';
+ const bubbleColor = isUser ? '#005699' : '#E5E5E5';
+ const textColor = isUser ? 'white' : 'black';
return (
<Stack // Row for a group of message bubbles with the user's infos
@@ -168,234 +137,202 @@
alignItems="end"
spacing="10px"
>
- {
- !isUser
- &&
- <ConversationAvatar
- displayName="TempDisplayName"
- sx={{ width: "22px", height: "22px", fontSize: "15px" }}
- />
- }
+ {!isUser && (
+ <ConversationAvatar displayName="TempDisplayName" sx={{ width: '22px', height: '22px', fontSize: '15px' }} />
+ )}
<Stack // Container to align the bubbles to the same side of a row
width="66.66%"
alignItems={position}
>
- <ParticipantName
- name={props.messages[0]?.author}
- position={position}
- />
+ <ParticipantName name={props.messages[0]?.author} position={position} />
<Stack // Container for a group of message bubbles
spacing="6px"
alignItems={position}
direction="column-reverse"
>
- {props.messages.map(
- (message, index) => {
- let Component
- switch (message.type) {
- case "text/plain":
- Component = MessageText
- break
- case "application/data-transfer+json":
- Component = MessageDataTransfer
- break
- }
- return (
- <Component // Single message
- key={message.id}
- message={message}
- textColor={textColor}
- position={position}
- bubbleColor={bubbleColor}
- isFirstOfGroup={index == props.messages.length-1}
- isLastOfGroup={index == 0}
- />
- )
+ {props.messages.map((message, index) => {
+ let Component;
+ switch (message.type) {
+ case 'text/plain':
+ Component = MessageText;
+ break;
+ case 'application/data-transfer+json':
+ Component = MessageDataTransfer;
+ break;
}
- )}
+ return (
+ <Component // Single message
+ key={message.id}
+ message={message}
+ textColor={textColor}
+ position={position}
+ bubbleColor={bubbleColor}
+ isFirstOfGroup={index == props.messages.length - 1}
+ isLastOfGroup={index == 0}
+ />
+ );
+ })}
</Stack>
</Stack>
</Stack>
- )
-}
+ );
+};
const MessageTooltip = styled(({ className, ...props }) => {
- const [open, setOpen] = useState(false)
- const emojis = ["😎", "😄", "😍"] // Should be last three used emojis
+ const [open, setOpen] = useState(false);
+ const emojis = ['😎', '😄', '😍']; // Should be last three used emojis
const additionalOptions = [
{
Icon: TwoSheetsIcon,
- text: "Copy",
+ text: 'Copy',
action: () => {},
},
{
Icon: OppositeArrowsIcon,
- text: "Transfer",
+ text: 'Transfer',
action: () => {},
},
{
Icon: TrashBinIcon,
- text: "Delete message",
+ text: 'Delete message',
action: () => {},
},
- ]
+ ];
- const toggleMoreMenu = useCallback(
- () => setOpen(open => !open),
- [setOpen]
- )
+ const toggleMoreMenu = useCallback(() => setOpen((open) => !open), [setOpen]);
- const onClose = useCallback(
- () => {
- setOpen(false)
- },
- [setOpen]
- )
+ const onClose = useCallback(() => {
+ setOpen(false);
+ }, [setOpen]);
return (
<Tooltip
{...props}
classes={{ tooltip: className }} // Required for styles. Don't know why
- placement={props.position == "start" ? "right-start" : "left-start"}
+ placement={props.position == 'start' ? 'right-start' : 'left-start'}
PopperProps={{
modifiers: [
{
- name: "offset",
+ name: 'offset',
options: {
- offset: [-2, -30],
+ offset: [-2, -30],
},
},
],
}}
onClose={onClose}
title={
- <Stack> {/* Whole tooltip's content */}
+ <Stack>
+ {' '}
+ {/* Whole tooltip's content */}
<Stack // Main options
direction="row"
spacing="16px"
>
- {
- emojis.map(
- emoji => <EmojiButton key={emoji} emoji={emoji}/>
- )
- }
- <ReplyMessageButton/>
- <MoreButton
- onClick={toggleMoreMenu}
- />
+ {emojis.map((emoji) => (
+ <EmojiButton key={emoji} emoji={emoji} />
+ ))}
+ <ReplyMessageButton />
+ <MoreButton onClick={toggleMoreMenu} />
</Stack>
- {open && // Additional menu options
+ {open && ( // Additional menu options
<>
- <Divider sx={{paddingTop:"16px"}}/>
- <List sx={{padding: 0, paddingTop: "8px", marginBottom: "-8px"}}>
- {
- additionalOptions.map(
- (option) => (
- <ListItemButton
- key={option.text}
- sx={{
- padding: "8px",
- }}
+ <Divider sx={{ paddingTop: '16px' }} />
+ <List sx={{ padding: 0, paddingTop: '8px', marginBottom: '-8px' }}>
+ {additionalOptions.map((option) => (
+ <ListItemButton
+ key={option.text}
+ sx={{
+ padding: '8px',
+ }}
+ >
+ <Stack // Could not find proper way to set spacing between ListItemIcon and ListItemText
+ direction="row"
+ spacing="16px"
>
- <Stack // Could not find proper way to set spacing between ListItemIcon and ListItemText
- direction="row"
- spacing="16px"
- >
- <option.Icon
- sx={{
- height: "16px",
- margin: 0,
- color: theme => theme.palette.primary.dark,
- }}
- />
- <ListItemText
- primary={option.text}
- primaryTypographyProps={{
- fontSize: "12px",
- lineHeight: "16px",
- }}
- sx={{
- height: "16px",
- margin: 0,
- }}
- />
- </Stack>
- </ListItemButton>
- )
- )
- }
- </List>
+ <option.Icon
+ sx={{
+ height: '16px',
+ margin: 0,
+ color: (theme) => theme.palette.primary.dark,
+ }}
+ />
+ <ListItemText
+ primary={option.text}
+ primaryTypographyProps={{
+ fontSize: '12px',
+ lineHeight: '16px',
+ }}
+ sx={{
+ height: '16px',
+ margin: 0,
+ }}
+ />
+ </Stack>
+ </ListItemButton>
+ ))}
+ </List>
</>
- }
+ )}
</Stack>
}
/>
- )
+ );
})(({ theme, position }) => {
- const largeRadius = "20px"
- const smallRadius = "5px"
+ const largeRadius = '20px';
+ const smallRadius = '5px';
return {
- backgroundColor: "white",
- padding: "16px",
- boxShadow: "3px 3px 7px #00000029",
+ backgroundColor: 'white',
+ padding: '16px',
+ boxShadow: '3px 3px 7px #00000029',
borderRadius: largeRadius,
- borderStartStartRadius: position == "start" ? smallRadius : largeRadius,
- borderStartEndRadius: position == "end" ? smallRadius : largeRadius,
- }
+ borderStartStartRadius: position == 'start' ? smallRadius : largeRadius,
+ borderStartEndRadius: position == 'end' ? smallRadius : largeRadius,
+ };
});
const MessageBubble = (props) => {
- const largeRadius = "20px"
- const smallRadius = "5px"
+ const largeRadius = '20px';
+ const smallRadius = '5px';
const radius = useMemo(() => {
- if (props.position == "start") {
+ if (props.position == 'start') {
return {
borderStartStartRadius: props.isFirstOfGroup ? largeRadius : smallRadius,
borderStartEndRadius: largeRadius,
borderEndStartRadius: props.isLastOfGroup ? largeRadius : smallRadius,
borderEndEndRadius: largeRadius,
- }
+ };
}
return {
borderStartStartRadius: largeRadius,
borderStartEndRadius: props.isFirstOfGroup ? largeRadius : smallRadius,
borderEndStartRadius: largeRadius,
borderEndEndRadius: props.isLastOfGroup ? largeRadius : smallRadius,
- }
- }, [props.isFirstOfGroup, props.isLastOfGroup, props.position])
+ };
+ }, [props.isFirstOfGroup, props.isLastOfGroup, props.position]);
return (
- <MessageTooltip
- position={props.position}
- >
+ <MessageTooltip position={props.position}>
<Box
sx={{
- width: "fit-content",
+ width: 'fit-content',
backgroundColor: props.backgroundColor,
- padding: "16px",
+ padding: '16px',
...radius,
}}
>
{props.children}
</Box>
</MessageTooltip>
- )
-}
+ );
+};
const ParticipantName = (props) => {
return (
- <Box
- marginBottom="6px"
- marginLeft="16px"
- marginRight="16px"
- >
- <Typography
- variant="caption"
- color="#A7A7A7"
- fontWeight={700}
- >
+ <Box marginBottom="6px" marginLeft="16px" marginRight="16px">
+ <Typography variant="caption" color="#A7A7A7" fontWeight={700}>
{props.name}
</Typography>
</Box>
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index a6084a7..0dc4975 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,30 +1,31 @@
-import dayjs from "dayjs"
-import { useMemo } from 'react'
-import dayOfYear from 'dayjs/plugin/dayOfYear'
-import isBetween from 'dayjs/plugin/isBetween'
-import { Stack } from "@mui/system"
-import { MessageCall, MessageDate, MessageInitial, MessageMember, MessageBubblesGroup, MessageTime, MessageMerge } from "./Message"
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import dayOfYear from 'dayjs/plugin/dayOfYear';
+import isBetween from 'dayjs/plugin/isBetween';
+import { Stack } from '@mui/system';
+import {
+ MessageCall,
+ MessageDate,
+ MessageInitial,
+ MessageMember,
+ MessageBubblesGroup,
+ MessageTime,
+ MessageMerge,
+} from './Message';
-dayjs.extend(dayOfYear)
-dayjs.extend(isBetween)
+dayjs.extend(dayOfYear);
+dayjs.extend(isBetween);
export default function MessageList(props) {
- const messagesComponents = useMemo(
- () => buildMessagesList(props.messages),
- [props.messages]
- )
+ const messagesComponents = useMemo(() => buildMessagesList(props.messages), [props.messages]);
return (
- <Stack
- marginLeft="16px"
- marginRight="16px"
- direction="column-reverse"
- >
- {messagesComponents?.map(
- ({Component, id, props}) => <Component key={id} {...props}/>
- )}
+ <Stack marginLeft="16px" marginRight="16px" direction="column-reverse">
+ {messagesComponents?.map(({ Component, id, props }) => (
+ <Component key={id} {...props} />
+ ))}
</Stack>
- )
+ );
}
const buildMessagesList = (messages) => {
@@ -32,124 +33,125 @@
return null;
}
- const components = []
- let lastTime = dayjs.unix(messages[0].timestamp)
- let lastAuthor = messages[0].author
- let messageBubblesGroup = []
+ const components = [];
+ let lastTime = dayjs.unix(messages[0].timestamp);
+ let lastAuthor = messages[0].author;
+ let messageBubblesGroup = [];
const pushMessageBubblesGroup = () => {
if (messageBubblesGroup.length == 0) {
- return
+ return;
}
components.push({
id: `group-${messageBubblesGroup[0].id}`,
Component: MessageBubblesGroup,
props: { messages: messageBubblesGroup },
- })
- messageBubblesGroup = []
- }
+ });
+ messageBubblesGroup = [];
+ };
const pushMessageCall = (message) => {
components.push({
id: `call-${message.id}`,
Component: MessageCall,
props: { message },
- })
- }
+ });
+ };
const pushMessageMember = (message) => {
components.push({
id: `member-${message.id}`,
Component: MessageMember,
props: { message },
- })
- }
+ });
+ };
const pushMessageMerge = (message) => {
components.push({
id: `merge-${message.id}`,
Component: MessageMerge,
props: { message },
- })
- }
+ });
+ };
- const pushMessageTime = (message, time, hasDateOnTop=false) => {
+ const pushMessageTime = (message, time, hasDateOnTop = false) => {
components.push({
id: `time-${message.id}`,
Component: MessageTime,
props: { time, hasDateOnTop },
- })
- }
+ });
+ };
const pushMessageDate = (message, time) => {
components.push({
id: `date-${message.id}`,
Component: MessageDate,
- props: { time }
- })
- }
+ props: { time },
+ });
+ };
const pushMessageInitial = (message) => {
components.push({
id: `initial-${message.id}`,
Component: MessageInitial,
- props: { message }
- })
- }
+ props: { message },
+ });
+ };
- messages.forEach(message => { // most recent messages first
+ messages.forEach((message) => {
+ // most recent messages first
switch (message.type) {
- case "text/plain":
- case "application/data-transfer+json":
+ case 'text/plain':
+ case 'application/data-transfer+json':
if (lastAuthor != message.author) {
- pushMessageBubblesGroup()
+ pushMessageBubblesGroup();
}
- messageBubblesGroup.push(message)
- break
- case "application/call-history+json":
- pushMessageBubblesGroup()
- pushMessageCall(message)
- break
- case "member":
- pushMessageBubblesGroup()
- pushMessageMember(message)
- break
- case "merge":
- pushMessageBubblesGroup()
- pushMessageMerge(message)
- break
- case "initial":
+ messageBubblesGroup.push(message);
+ break;
+ case 'application/call-history+json':
+ pushMessageBubblesGroup();
+ pushMessageCall(message);
+ break;
+ case 'member':
+ pushMessageBubblesGroup();
+ pushMessageMember(message);
+ break;
+ case 'merge':
+ pushMessageBubblesGroup();
+ pushMessageMerge(message);
+ break;
+ case 'initial':
default:
- break
+ break;
}
- const time = dayjs.unix(message.timestamp)
- if (message.type == "initial") {
- pushMessageBubblesGroup()
- pushMessageTime(message, time, true)
- pushMessageDate(message, time)
- pushMessageInitial(message)
- }
- else {
- if ( // If the date is different
- lastTime?.year() != time.year()
- || lastTime?.dayOfYear() != time.dayOfYear()
- ) {
- pushMessageBubblesGroup()
- pushMessageTime(message, time, true)
- pushMessageDate(message, time)
- }
- else if ( // If more than 5 minutes have passed since the last message
- !lastTime.isBetween(time, time?.add(5, "minute"))
+ const time = dayjs.unix(message.timestamp);
+ if (message.type == 'initial') {
+ pushMessageBubblesGroup();
+ pushMessageTime(message, time, true);
+ pushMessageDate(message, time);
+ pushMessageInitial(message);
+ } else {
+ if (
+ // If the date is different
+ lastTime?.year() != time.year() ||
+ lastTime?.dayOfYear() != time.dayOfYear()
) {
- pushMessageBubblesGroup()
- pushMessageTime(message, time)
+ pushMessageBubblesGroup();
+ pushMessageTime(message, time, true);
+ pushMessageDate(message, time);
+ } else if (
+ // If more than 5 minutes have passed since the last message
+ !lastTime.isBetween(time, time?.add(5, 'minute'))
+ ) {
+ pushMessageBubblesGroup();
+ pushMessageTime(message, time);
}
- lastTime = time
- lastAuthor = message.author
+ lastTime = time;
+ lastAuthor = message.author;
}
- })
+ });
- return components
-}
+ return components;
+};
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index 9482948..db0ce31 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,32 +1,34 @@
-import { useState } from 'react'
+import { useState } from 'react';
import { InputBase, InputAdornment } from '@mui/material';
import { SearchRounded } from '@mui/icons-material';
export default function NewContactForm(props) {
- const [value, setValue] = useState('')
+ const [value, setValue] = useState('');
- const handleChange = event => {
- setValue(event.target.value)
- if (props.onChange)
- props.onChange(event.target.value)
- }
+ const handleChange = (event) => {
+ setValue(event.target.value);
+ if (props.onChange) props.onChange(event.target.value);
+ };
- const handleSubmit = event => {
- event.preventDefault()
- if (value && props.onSubmit)
- props.onSubmit(value)
- }
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ if (value && props.onSubmit) props.onSubmit(value);
+ };
- return (
- <form className="main-search" onSubmit={handleSubmit} noValidate autoComplete="off">
- <InputBase
- className="main-search-input"
- type="search"
- placeholder="Ajouter un contact"
- value={value}
- onChange={handleChange}
- startAdornment={<InputAdornment position="start"><SearchRounded /></InputAdornment>}
- />
- </form>
- )
+ return (
+ <form className="main-search" onSubmit={handleSubmit} noValidate autoComplete="off">
+ <InputBase
+ className="main-search-input"
+ type="search"
+ placeholder="Ajouter un contact"
+ value={value}
+ onChange={handleChange}
+ startAdornment={
+ <InputAdornment position="start">
+ <SearchRounded />
+ </InputAdornment>
+ }
+ />
+ </form>
+ );
}
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index df520ff..d46883c 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,32 +1,36 @@
-import { useState, useCallback } from 'react'
-import { Divider, InputBase } from '@mui/material'
-import { RecordVideoMessageButton, RecordVoiceMessageButton, SelectEmojiButton, SendMessageButton, UploadFileButton } from './buttons';
+import { useState, useCallback } from 'react';
+import { Divider, InputBase } from '@mui/material';
+import {
+ RecordVideoMessageButton,
+ RecordVoiceMessageButton,
+ SelectEmojiButton,
+ SendMessageButton,
+ UploadFileButton,
+} from './buttons';
import { Stack } from '@mui/system';
export default function SendMessageForm(props) {
- const [currentMessage, setCurrentMessage] = useState("")
+ const [currentMessage, setCurrentMessage] = useState('');
- const handleSubmit = e => {
- e.preventDefault()
+ const handleSubmit = (e) => {
+ e.preventDefault();
if (currentMessage) {
- props.onSend(currentMessage)
- setCurrentMessage('')
+ props.onSend(currentMessage);
+ setCurrentMessage('');
}
- }
- const handleInputChange = (event) => setCurrentMessage(event.target.value)
+ };
+ const handleInputChange = (event) => setCurrentMessage(event.target.value);
const onEmojiSelected = useCallback(
(emoji) => setCurrentMessage((currentMessage) => currentMessage + emoji),
- [setCurrentMessage],
- )
+ [setCurrentMessage]
+ );
return (
- <Stack
- padding="30px 16px 0px 16px"
- >
+ <Stack padding="30px 16px 0px 16px">
<Divider
sx={{
- bordeTop: "1px solid #E5E5E5",
+ bordeTop: '1px solid #E5E5E5',
}}
/>
<Stack
@@ -38,31 +42,27 @@
spacing="20px"
padding="16px 0px"
>
- <UploadFileButton/>
- <RecordVoiceMessageButton/>
- <RecordVideoMessageButton/>
+ <UploadFileButton />
+ <RecordVoiceMessageButton />
+ <RecordVideoMessageButton />
- <Stack
- flexGrow={1}
- >
+ <Stack flexGrow={1}>
<InputBase
placeholder="Write something nice"
value={currentMessage}
onChange={handleInputChange}
sx={{
- fontSize: "15px",
- color: "black",
- "& ::placeholder": {
- color: "#7E7E7E",
+ fontSize: '15px',
+ color: 'black',
+ '& ::placeholder': {
+ color: '#7E7E7E',
opacity: 1,
},
}}
/>
</Stack>
- <SelectEmojiButton
- onEmojiSelected={onEmojiSelected}
- />
- { currentMessage && <SendMessageButton type="submit"/> }
+ <SelectEmojiButton onEmojiSelected={onEmojiSelected} />
+ {currentMessage && <SendMessageButton type="submit" />}
</Stack>
</Stack>
);
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 7703639..0061701 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -1,48 +1,59 @@
-import { useEffect, useState } from 'react'
-import usePromise from "react-fetch-hook/usePromise"
-import { InputAdornment, TextField } from '@mui/material'
-import { SearchRounded } from '@mui/icons-material'
-import authManager from '../AuthManager'
+import { useEffect, useState } from 'react';
+import usePromise from 'react-fetch-hook/usePromise';
+import { InputAdornment, TextField } from '@mui/material';
+import { SearchRounded } from '@mui/icons-material';
+import authManager from '../AuthManager';
-const isInputValid = input => input && input.length > 2
+const isInputValid = (input) => input && input.length > 2;
export default function UsernameChooser(props) {
- const [query, setQuery] = useState('')
+ const [query, setQuery] = useState('');
- const { isLoading, data, error } = usePromise(() => isInputValid(query) ? authManager.fetch(`/api/ns/name/${query}`)
- .then(res => {
- if (res.status === 200)
- return res.json()
- else throw res.status
- }) : new Promise((res, rej) => rej(400)),
- [query])
+ const { isLoading, data, error } = usePromise(
+ () =>
+ isInputValid(query)
+ ? authManager.fetch(`/api/ns/name/${query}`).then((res) => {
+ if (res.status === 200) return res.json();
+ else throw res.status;
+ })
+ : new Promise((res, rej) => rej(400)),
+ [query]
+ );
useEffect(() => {
if (!isLoading) {
- if (error === 404)
- props.setName(query)
- else
- props.setName('')
+ if (error === 404) props.setName(query);
+ else props.setName('');
}
- }, [query, isLoading, data, error])
+ }, [query, isLoading, data, error]);
- const handleChange = event => setQuery(event.target.value)
+ const handleChange = (event) => setQuery(event.target.value);
return (
- <TextField
- className="main-search-input"
- type="search"
- placeholder="Register a unique name"
- error={!error}
- label={isLoading ? 'Searching...' : (error && error !== 400 ? 'This name is available' : (data && data.address ? 'This name is not available' : ''))}
- value={query}
- disabled={props.disabled}
- onChange={handleChange}
- InputProps={{
- startAdornment: (
- <InputAdornment position="start"><SearchRounded /></InputAdornment>
- )
- }}
- />
- )
+ <TextField
+ className="main-search-input"
+ type="search"
+ placeholder="Register a unique name"
+ error={!error}
+ label={
+ isLoading
+ ? 'Searching...'
+ : error && error !== 400
+ ? 'This name is available'
+ : data && data.address
+ ? 'This name is not available'
+ : ''
+ }
+ value={query}
+ disabled={props.disabled}
+ onChange={handleChange}
+ InputProps={{
+ startAdornment: (
+ <InputAdornment position="start">
+ <SearchRounded />
+ </InputAdornment>
+ ),
+ }}
+ />
+ );
}
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index d0db1c0..1b26c03 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,328 +1,245 @@
-import { QuestionMark } from "@mui/icons-material";
-import { Box, ClickAwayListener, IconButton, Popper } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import EmojiPicker from "emoji-picker-react";
-import React, { useState, useCallback } from "react";
-import { Arrow2Icon, Arrow3Icon, ArrowIcon, CameraIcon, CameraInBubbleIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EmojiIcon, EyeIcon, FolderIcon, InfoIcon, MicroInBubbleIcon, PaperClipIcon, PenIcon, SaltireIcon } from "./svgIcons";
+import { QuestionMark } from '@mui/icons-material';
+import { Box, ClickAwayListener, IconButton, Popper } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import EmojiPicker from 'emoji-picker-react';
+import React, { useState, useCallback } from 'react';
+import {
+ Arrow2Icon,
+ Arrow3Icon,
+ ArrowIcon,
+ CameraIcon,
+ CameraInBubbleIcon,
+ CancelIcon,
+ CrossedEyeIcon,
+ CrossIcon,
+ EmojiIcon,
+ EyeIcon,
+ FolderIcon,
+ InfoIcon,
+ MicroInBubbleIcon,
+ PaperClipIcon,
+ PenIcon,
+ SaltireIcon,
+} from './svgIcons';
-const RoundButton = styled(
- ({Icon, ...props}) => (
- <IconButton {...props} disableRipple={true}>
- <Icon fontSize="inherit"/>
- </IconButton>
- )
-)(({theme}) => ({
- border: `1px solid ${theme.palette.primary.dark}`,
- color: theme.palette.primary.dark,
- fontSize: "15px",
- "&:hover": {
- background: theme.palette.primary.light,
- },
- "&:active": {
- color: "#FFF",
- background: theme.palette.primary.dark,
- },
- "&.MuiIconButton-sizeSmall": {
- height: "15px",
- width: "15px",
- },
- "&.MuiIconButton-sizeMedium": {
- height: "30px",
- width: "30px",
- },
- "&.MuiIconButton-sizeLarge": {
- height: "53px",
- width: "53px",
- }
+const RoundButton = styled(({ Icon, ...props }) => (
+ <IconButton {...props} disableRipple={true}>
+ <Icon fontSize="inherit" />
+ </IconButton>
+))(({ theme }) => ({
+ border: `1px solid ${theme.palette.primary.dark}`,
+ color: theme.palette.primary.dark,
+ fontSize: '15px',
+ '&:hover': {
+ background: theme.palette.primary.light,
+ },
+ '&:active': {
+ color: '#FFF',
+ background: theme.palette.primary.dark,
+ },
+ '&.MuiIconButton-sizeSmall': {
+ height: '15px',
+ width: '15px',
+ },
+ '&.MuiIconButton-sizeMedium': {
+ height: '30px',
+ width: '30px',
+ },
+ '&.MuiIconButton-sizeLarge': {
+ height: '53px',
+ width: '53px',
+ },
}));
export const CancelPictureButton = (props) => {
- return (
- <RoundButton {...props}
- aria-label="remove picture"
- Icon={CancelIcon}
- size="large"
- />
- )
-}
+ return <RoundButton {...props} aria-label="remove picture" Icon={CancelIcon} size="large" />;
+};
export const EditPictureButton = (props) => {
- return (
- <RoundButton {...props}
- aria-label="edit picture"
- Icon={PenIcon}
- size="large"
- />
- )
-}
+ return <RoundButton {...props} aria-label="edit picture" Icon={PenIcon} size="large" />;
+};
export const UploadPictureButton = (props) => {
- return (
- <RoundButton {...props}
- aria-label="upload picture"
- Icon={FolderIcon}
- size="large"
- />
- )
-}
+ return <RoundButton {...props} aria-label="upload picture" Icon={FolderIcon} size="large" />;
+};
export const TakePictureButton = (props) => {
- return (
- <RoundButton {...props}
- aria-label="take picture"
- Icon={CameraIcon}
- size="large"
- />
- )
-}
+ return <RoundButton {...props} aria-label="take picture" Icon={CameraIcon} size="large" />;
+};
export const InfoButton = (props) => {
- return (
- <RoundButton {...props}
- aria-label="informations"
- Icon={InfoIcon}
- size="small"
- />
- )
-}
+ return <RoundButton {...props} aria-label="informations" Icon={InfoIcon} size="small" />;
+};
export const TipButton = (props) => {
- return (
- <RoundButton {...props}
- aria-label="tip"
- Icon={QuestionMark}
- size="medium"
- />
- )
-}
+ return <RoundButton {...props} aria-label="tip" Icon={QuestionMark} size="medium" />;
+};
-export const MoreButton = styled(
- (props) => {
- return (
- <IconButton
- {...props}
- disableRipple={true}
- aria-label="more"
- >
- <CrossIcon fontSize="inherit"/>
- </IconButton>
- )
- }
-)(({theme}) => ({
- border: `1px solid ${theme.palette.primary.dark}`,
- color: theme.palette.primary.dark,
- fontSize: "10px",
- height: "20px",
- width: "20px",
- "&:hover": {
- background: theme.palette.primary.light,
- },
- "&:active": {
- color: "#FFF",
- background: theme.palette.primary.dark,
- },
-}))
+export const MoreButton = styled((props) => {
+ return (
+ <IconButton {...props} disableRipple={true} aria-label="more">
+ <CrossIcon fontSize="inherit" />
+ </IconButton>
+ );
+})(({ theme }) => ({
+ border: `1px solid ${theme.palette.primary.dark}`,
+ color: theme.palette.primary.dark,
+ fontSize: '10px',
+ height: '20px',
+ width: '20px',
+ '&:hover': {
+ background: theme.palette.primary.light,
+ },
+ '&:active': {
+ color: '#FFF',
+ background: theme.palette.primary.dark,
+ },
+}));
-export const BackButton = styled(
- (props) => {
- return (
- <IconButton
- {...props}
- disableRipple={true}
- aria-label="back"
- >
- <ArrowIcon fontSize="inherit"/>
- </IconButton>
- )
- }
-)(({theme}) => ({
- color: theme.palette.primary.dark,
- fontSize: "15px",
- height: "30px",
- width: "51px",
- borderRadius: "5px",
- "&:hover": {
- background: theme.palette.primary.light,
- },
-}))
+export const BackButton = styled((props) => {
+ return (
+ <IconButton {...props} disableRipple={true} aria-label="back">
+ <ArrowIcon fontSize="inherit" />
+ </IconButton>
+ );
+})(({ theme }) => ({
+ color: theme.palette.primary.dark,
+ fontSize: '15px',
+ height: '30px',
+ width: '51px',
+ borderRadius: '5px',
+ '&:hover': {
+ background: theme.palette.primary.light,
+ },
+}));
-export const CloseButton = styled(
- (props) => {
- return (
- <IconButton
- {...props}
- disableRipple={true}
- aria-label="close"
- >
- <SaltireIcon fontSize="inherit"/>
- </IconButton>
- )
- }
-)(({theme}) => ({
- color: theme.palette.primary.dark,
- fontSize: "15px",
- height: "30px",
- width: "30px",
- borderRadius: "5px",
- "&:hover": {
- background: theme.palette.primary.light,
- },
-}))
+export const CloseButton = styled((props) => {
+ return (
+ <IconButton {...props} disableRipple={true} aria-label="close">
+ <SaltireIcon fontSize="inherit" />
+ </IconButton>
+ );
+})(({ theme }) => ({
+ color: theme.palette.primary.dark,
+ fontSize: '15px',
+ height: '30px',
+ width: '30px',
+ borderRadius: '5px',
+ '&:hover': {
+ background: theme.palette.primary.light,
+ },
+}));
-export const ToggleVisibilityButton = styled(
- ({visible, ...props}) => {
- const Icon = visible ? CrossedEyeIcon : EyeIcon
- return (
- <IconButton {...props} disableRipple={true}>
- <Icon fontSize="inherit"/>
- </IconButton>
- )
- }
-)(({theme}) => ({
- color: theme.palette.primary.dark,
- fontSize: "15px",
- height: "15px",
- width: "15px",
- "&:hover": {
- background: theme.palette.primary.light,
- },
-}))
+export const ToggleVisibilityButton = styled(({ visible, ...props }) => {
+ const Icon = visible ? CrossedEyeIcon : EyeIcon;
+ return (
+ <IconButton {...props} disableRipple={true}>
+ <Icon fontSize="inherit" />
+ </IconButton>
+ );
+})(({ theme }) => ({
+ color: theme.palette.primary.dark,
+ fontSize: '15px',
+ height: '15px',
+ width: '15px',
+ '&:hover': {
+ background: theme.palette.primary.light,
+ },
+}));
-const SquareButton = styled(
- ({Icon, ...props}) => (
- <IconButton {...props} disableRipple={true}>
- <Icon fontSize="inherit"/>
- </IconButton>
- )
-)(({theme}) => ({
- color: "#7E7E7E",
- fontSize: "25px",
- height: "36px",
- width: "36px",
- borderRadius: "5px",
- "&:hover": {
- background: "#E5E5E5",
- },
+const SquareButton = styled(({ Icon, ...props }) => (
+ <IconButton {...props} disableRipple={true}>
+ <Icon fontSize="inherit" />
+ </IconButton>
+))(({ theme }) => ({
+ color: '#7E7E7E',
+ fontSize: '25px',
+ height: '36px',
+ width: '36px',
+ borderRadius: '5px',
+ '&:hover': {
+ background: '#E5E5E5',
+ },
}));
export const RecordVideoMessageButton = (props) => {
- return (
- <SquareButton {...props}
- aria-label="record video message"
- Icon={CameraInBubbleIcon}
- />
- )
-}
+ return <SquareButton {...props} aria-label="record video message" Icon={CameraInBubbleIcon} />;
+};
export const RecordVoiceMessageButton = (props) => {
- return (
- <SquareButton {...props}
- aria-label="record voice message"
- Icon={MicroInBubbleIcon}
- />
- )
-}
+ return <SquareButton {...props} aria-label="record voice message" Icon={MicroInBubbleIcon} />;
+};
export const UploadFileButton = (props) => {
- return (
- <SquareButton {...props}
- aria-label="upload file"
- Icon={PaperClipIcon}
- />
- )
-}
+ return <SquareButton {...props} aria-label="upload file" Icon={PaperClipIcon} />;
+};
export const SendMessageButton = (props) => {
- return (
- <SquareButton {...props}
- aria-label="send message"
- Icon={Arrow2Icon}
- />
- )
-}
+ return <SquareButton {...props} aria-label="send message" Icon={Arrow2Icon} />;
+};
-export const ReplyMessageButton = styled(
- ({Icon, ...props}) => (
- <IconButton
- {...props}
- disableRipple={true}
- aria-label="send message"
- >
- <Arrow3Icon fontSize="inherit"/>
- </IconButton>
- )
-)(({theme}) => ({
- color: theme.palette.primary.dark,
- fontSize: "20px",
- height: "20px",
- width: "20px",
- borderRadius: "5px",
- "&:hover": {
- background: "#E5E5E5",
- },
+export const ReplyMessageButton = styled(({ Icon, ...props }) => (
+ <IconButton {...props} disableRipple={true} aria-label="send message">
+ <Arrow3Icon fontSize="inherit" />
+ </IconButton>
+))(({ theme }) => ({
+ color: theme.palette.primary.dark,
+ fontSize: '20px',
+ height: '20px',
+ width: '20px',
+ borderRadius: '5px',
+ '&:hover': {
+ background: '#E5E5E5',
+ },
}));
-export const EmojiButton = styled(
- ({emoji, ...props}) => (
- <IconButton {...props} disableRipple={true}>
- {emoji}
- </IconButton>
- )
-)(({theme}) => ({
- color: "white",
- fontSize: "20px",
- height: "20px",
- width: "20px",
+export const EmojiButton = styled(({ emoji, ...props }) => (
+ <IconButton {...props} disableRipple={true}>
+ {emoji}
+ </IconButton>
+))(({ theme }) => ({
+ color: 'white',
+ fontSize: '20px',
+ height: '20px',
+ width: '20px',
}));
export const SelectEmojiButton = (props) => {
- const [anchorEl, setAnchorEl] = useState(null)
-
- const handleOpenEmojiPicker = useCallback(
- e => setAnchorEl(anchorEl ? null : e.currentTarget),
- [anchorEl],
- )
-
- const handleClose = useCallback(
- () => setAnchorEl(null),
- [setAnchorEl],
- )
-
- const onEmojiClick = useCallback(
- (e, emojiObject) => {
- props.onEmojiSelected(emojiObject.emoji)
- handleClose()
- },
- [handleClose, props.onEmojiSelected],
- )
-
- const open = Boolean(anchorEl)
- const id = open ? 'simple-popover' : undefined
-
- return (
- <ClickAwayListener onClickAway={handleClose}>
- <Box>
- <SquareButton
- aria-describedby={id}
- aria-label="select emoji"
- Icon={EmojiIcon}
- onClick={handleOpenEmojiPicker}
- />
- <Popper
- id={id}
- open={open}
- anchorEl={anchorEl}
- onClose={handleClose}
- >
- <EmojiPicker.default
- onEmojiClick={onEmojiClick}
- disableAutoFocus={true}
- disableSkinTonePicker={true}
- native
- />
- </Popper>
- </Box>
- </ClickAwayListener>
- )
-}
+ const [anchorEl, setAnchorEl] = useState(null);
+ const handleOpenEmojiPicker = useCallback((e) => setAnchorEl(anchorEl ? null : e.currentTarget), [anchorEl]);
+
+ const handleClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);
+
+ const onEmojiClick = useCallback(
+ (e, emojiObject) => {
+ props.onEmojiSelected(emojiObject.emoji);
+ handleClose();
+ },
+ [handleClose, props.onEmojiSelected]
+ );
+
+ const open = Boolean(anchorEl);
+ const id = open ? 'simple-popover' : undefined;
+
+ return (
+ <ClickAwayListener onClickAway={handleClose}>
+ <Box>
+ <SquareButton
+ aria-describedby={id}
+ aria-label="select emoji"
+ Icon={EmojiIcon}
+ onClick={handleOpenEmojiPicker}
+ />
+ <Popper id={id} open={open} anchorEl={anchorEl} onClose={handleClose}>
+ <EmojiPicker.default
+ onEmojiClick={onEmojiClick}
+ disableAutoFocus={true}
+ disableSkinTonePicker={true}
+ native
+ />
+ </Popper>
+ </Box>
+ </ClickAwayListener>
+ );
+};
diff --git a/client/src/components/inputs.js b/client/src/components/inputs.js
index aec48d3..42ca4be 100644
--- a/client/src/components/inputs.js
+++ b/client/src/components/inputs.js
@@ -1,174 +1,187 @@
-import { Stack, TextField } from "@mui/material"
-import { styled } from "@mui/material/styles"
-import { useState, useCallback, useEffect } from "react";
-import { InfoButton, ToggleVisibilityButton } from "./buttons"
-import { CheckedIcon, RoundSaltireIcon, LockIcon, PenIcon, PersonIcon } from "./svgIcons"
+import { Stack, TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useState, useCallback, useEffect } from 'react';
+import { InfoButton, ToggleVisibilityButton } from './buttons';
+import { CheckedIcon, RoundSaltireIcon, LockIcon, PenIcon, PersonIcon } from './svgIcons';
-const iconsHeight = "16px"
-const StyledCheckedIconSuccess = styled(CheckedIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.success.main}))
-const StyledRoundSaltireIconError = styled(RoundSaltireIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.error.main}))
-const StyledPenIconLight = styled(PenIcon)({height: iconsHeight, color: "#03B9E9"})
-const StyledPenIconDark = styled(PenIcon)(({theme}) => ({height: iconsHeight, color: theme.palette.primary.dark}))
-const StyledPersonIconLight = styled(PersonIcon)({height: iconsHeight, color: "#03B9E9"})
-const StyledLockIcon = styled(LockIcon)({height: iconsHeight, color: "#03B9E9"})
+const iconsHeight = '16px';
+const StyledCheckedIconSuccess = styled(CheckedIcon)(({ theme }) => ({
+ height: iconsHeight,
+ color: theme.palette.success.main,
+}));
+const StyledRoundSaltireIconError = styled(RoundSaltireIcon)(({ theme }) => ({
+ height: iconsHeight,
+ color: theme.palette.error.main,
+}));
+const StyledPenIconLight = styled(PenIcon)({ height: iconsHeight, color: '#03B9E9' });
+const StyledPenIconDark = styled(PenIcon)(({ theme }) => ({ height: iconsHeight, color: theme.palette.primary.dark }));
+const StyledPersonIconLight = styled(PersonIcon)({ height: iconsHeight, color: '#03B9E9' });
+const StyledLockIcon = styled(LockIcon)({ height: iconsHeight, color: '#03B9E9' });
-export const UsernameInput = ({infoButtonProps, ...props}) => {
- const [isSelected, setIsSelected] = useState(false);
- const [input, setInput] = useState(props.defaultValue);
- const [startAdornment, setStartAdornment] = useState()
+export const UsernameInput = ({ infoButtonProps, ...props }) => {
+ const [isSelected, setIsSelected] = useState(false);
+ const [input, setInput] = useState(props.defaultValue);
+ const [startAdornment, setStartAdornment] = useState();
- const onChange = useCallback((event) => {
- setInput(event.target.value)
- props.onChange?.(event)
- }, [props.onChange])
+ const onChange = useCallback(
+ (event) => {
+ setInput(event.target.value);
+ props.onChange?.(event);
+ },
+ [props.onChange]
+ );
- useEffect(() => {
- /* Handle startAdornment */
- let Icon = StyledPersonIconLight
- let visibility = "visible"
- if (props.error) {
- Icon = StyledRoundSaltireIconError
- }
- else if (props.success) {
- Icon = StyledCheckedIconSuccess
- }
- else if (!isSelected && !input) {
- visibility = "hidden" // keep icon's space so text does not move
- }
- setStartAdornment(<Icon sx={{visibility}}/>)
- }, [props.error, props.success, isSelected, input])
-
- return (
- <TextField
- {...props}
- label="Choose an identifier"
- variant="standard"
- InputLabelProps={{ shrink: !!(isSelected || input) }}
- onChange={onChange}
- InputProps={{
- startAdornment,
- endAdornment: <InfoButton {...infoButtonProps}/>,
- }}
- onFocus={() => setIsSelected(true)}
- onBlur={() => setIsSelected(false)}
- />
- )
-}
-
-export const PasswordInput = ({infoButtonProps, ...props}) => {
- const [showPassword, setShowPassword] = useState(false);
- const [isSelected, setIsSelected] = useState(false);
- const [input, setInput] = useState(props.defaultValue);
- const [startAdornment, setStartAdornment] = useState()
-
- const toggleShowPassword = () => {
- setShowPassword((showPassword) => !showPassword);
+ useEffect(() => {
+ /* Handle startAdornment */
+ let Icon = StyledPersonIconLight;
+ let visibility = 'visible';
+ if (props.error) {
+ Icon = StyledRoundSaltireIconError;
+ } else if (props.success) {
+ Icon = StyledCheckedIconSuccess;
+ } else if (!isSelected && !input) {
+ visibility = 'hidden'; // keep icon's space so text does not move
}
+ setStartAdornment(<Icon sx={{ visibility }} />);
+ }, [props.error, props.success, isSelected, input]);
- const onChange = useCallback((event) => {
- setInput(event.target.value)
- props.onChange?.(event)
- }, [props.onChange])
+ return (
+ <TextField
+ {...props}
+ label="Choose an identifier"
+ variant="standard"
+ InputLabelProps={{ shrink: !!(isSelected || input) }}
+ onChange={onChange}
+ InputProps={{
+ startAdornment,
+ endAdornment: <InfoButton {...infoButtonProps} />,
+ }}
+ onFocus={() => setIsSelected(true)}
+ onBlur={() => setIsSelected(false)}
+ />
+ );
+};
- useEffect(() => {
- /* Handle startAdornment */
- let Icon = StyledLockIcon
- let visibility = "visible"
- if (props.error) {
- Icon = StyledRoundSaltireIconError
- }
- else if (props.success) {
- Icon = StyledCheckedIconSuccess
- }
- else if (!isSelected && !input) {
- visibility = "hidden" // keep icon's space so text does not move
- }
- setStartAdornment(<Icon sx={{visibility}}/>)
- }, [props.error, props.success, isSelected, input])
+export const PasswordInput = ({ infoButtonProps, ...props }) => {
+ const [showPassword, setShowPassword] = useState(false);
+ const [isSelected, setIsSelected] = useState(false);
+ const [input, setInput] = useState(props.defaultValue);
+ const [startAdornment, setStartAdornment] = useState();
- return (
- <TextField
- {...props}
- label="Password"
- type={showPassword ? "text" : "password"}
- variant="standard"
- autoComplete="current-password"
- InputLabelProps={{ shrink: !!(isSelected || input) }}
- onChange={onChange}
- InputProps={{
- startAdornment,
- endAdornment: <Stack direction="row" spacing="14px">
- <InfoButton {...infoButtonProps}/>
- <ToggleVisibilityButton
- visible={showPassword}
- onClick={toggleShowPassword}
- />
- </Stack>,
- }}
- onFocus={() => setIsSelected(true)}
- onBlur={() => setIsSelected(false)}
- />
- )
-}
+ const toggleShowPassword = () => {
+ setShowPassword((showPassword) => !showPassword);
+ };
+
+ const onChange = useCallback(
+ (event) => {
+ setInput(event.target.value);
+ props.onChange?.(event);
+ },
+ [props.onChange]
+ );
+
+ useEffect(() => {
+ /* Handle startAdornment */
+ let Icon = StyledLockIcon;
+ let visibility = 'visible';
+ if (props.error) {
+ Icon = StyledRoundSaltireIconError;
+ } else if (props.success) {
+ Icon = StyledCheckedIconSuccess;
+ } else if (!isSelected && !input) {
+ visibility = 'hidden'; // keep icon's space so text does not move
+ }
+ setStartAdornment(<Icon sx={{ visibility }} />);
+ }, [props.error, props.success, isSelected, input]);
+
+ return (
+ <TextField
+ {...props}
+ label="Password"
+ type={showPassword ? 'text' : 'password'}
+ variant="standard"
+ autoComplete="current-password"
+ InputLabelProps={{ shrink: !!(isSelected || input) }}
+ onChange={onChange}
+ InputProps={{
+ startAdornment,
+ endAdornment: (
+ <Stack direction="row" spacing="14px">
+ <InfoButton {...infoButtonProps} />
+ <ToggleVisibilityButton visible={showPassword} onClick={toggleShowPassword} />
+ </Stack>
+ ),
+ }}
+ onFocus={() => setIsSelected(true)}
+ onBlur={() => setIsSelected(false)}
+ />
+ );
+};
export const NickNameInput = (props) => {
- const [isSelected, setIsSelected] = useState(false);
- const [input, setInput] = useState(props.defaultValue);
- const [startAdornmentVisibility, setStartAdornmentVisibility] = useState()
+ const [isSelected, setIsSelected] = useState(false);
+ const [input, setInput] = useState(props.defaultValue);
+ const [startAdornmentVisibility, setStartAdornmentVisibility] = useState();
- const onChange = useCallback((event) => {
- setInput(event.target.value)
- props.onChange?.(event)
- }, [props.onChange])
+ const onChange = useCallback(
+ (event) => {
+ setInput(event.target.value);
+ props.onChange?.(event);
+ },
+ [props.onChange]
+ );
- useEffect(() => {
- setStartAdornmentVisibility((isSelected || input) ? "visible" : "hidden")
- }, [isSelected, input])
+ useEffect(() => {
+ setStartAdornmentVisibility(isSelected || input ? 'visible' : 'hidden');
+ }, [isSelected, input]);
- return (
- <TextField
- {...props}
- label="Nickname, surname..."
- variant="standard"
- InputLabelProps={{ shrink: !!(isSelected || input) }}
- onChange={onChange}
- InputProps={{
- startAdornment: <StyledPenIconLight sx={{visibility: startAdornmentVisibility}}/>,
- }}
- onFocus={() => setIsSelected(true)}
- onBlur={() => setIsSelected(false)}
- />
- )
-}
+ return (
+ <TextField
+ {...props}
+ label="Nickname, surname..."
+ variant="standard"
+ InputLabelProps={{ shrink: !!(isSelected || input) }}
+ onChange={onChange}
+ InputProps={{
+ startAdornment: <StyledPenIconLight sx={{ visibility: startAdornmentVisibility }} />,
+ }}
+ onFocus={() => setIsSelected(true)}
+ onBlur={() => setIsSelected(false)}
+ />
+ );
+};
export const RegularInput = (props) => {
- const [isSelected, setIsSelected] = useState(false);
- const [input, setInput] = useState(props.defaultValue);
- const [startAdornmentVisibility, setStartAdornmentVisibility] = useState()
- const [endAdornmentVisibility, setEndAdornmentVisibility] = useState()
+ const [isSelected, setIsSelected] = useState(false);
+ const [input, setInput] = useState(props.defaultValue);
+ const [startAdornmentVisibility, setStartAdornmentVisibility] = useState();
+ const [endAdornmentVisibility, setEndAdornmentVisibility] = useState();
- const onChange = useCallback((event) => {
- setInput(event.target.value)
- props.onChange?.(event)
- }, [props.onChange])
+ const onChange = useCallback(
+ (event) => {
+ setInput(event.target.value);
+ props.onChange?.(event);
+ },
+ [props.onChange]
+ );
- useEffect(() => {
- setStartAdornmentVisibility((isSelected || input) ? "visible" : "hidden")
- setEndAdornmentVisibility((isSelected || input) ? "hidden" : "visible")
- }, [isSelected, input])
+ useEffect(() => {
+ setStartAdornmentVisibility(isSelected || input ? 'visible' : 'hidden');
+ setEndAdornmentVisibility(isSelected || input ? 'hidden' : 'visible');
+ }, [isSelected, input]);
- return (
- <TextField
- {...props}
- variant="standard"
- InputLabelProps={{ shrink: !!(isSelected || input) }}
- onChange={onChange}
- InputProps={{
- startAdornment: <StyledPenIconLight sx={{visibility: startAdornmentVisibility}}/>,
- endAdornment: <StyledPenIconDark sx={{visibility: endAdornmentVisibility}}/>,
- }}
- onFocus={() => setIsSelected(true)}
- onBlur={() => setIsSelected(false)}
- />
- )
-}
+ return (
+ <TextField
+ {...props}
+ variant="standard"
+ InputLabelProps={{ shrink: !!(isSelected || input) }}
+ onChange={onChange}
+ InputProps={{
+ startAdornment: <StyledPenIconLight sx={{ visibility: startAdornmentVisibility }} />,
+ endAdornment: <StyledPenIconDark sx={{ visibility: endAdornmentVisibility }} />,
+ }}
+ onFocus={() => setIsSelected(true)}
+ onBlur={() => setIsSelected(false)}
+ />
+ );
+};
diff --git a/client/src/components/loading.js b/client/src/components/loading.js
index a928a22..d9836e1 100644
--- a/client/src/components/loading.js
+++ b/client/src/components/loading.js
@@ -1,7 +1,9 @@
import { CircularProgress, Container } from '@mui/material';
export default function LoadingPage() {
- return <Container style={{ textAlign: "center" }}>
- <CircularProgress style={{ margin: 32 }} />
+ return (
+ <Container style={{ textAlign: 'center' }}>
+ <CircularProgress style={{ margin: 32 }} />
</Container>
-}
\ No newline at end of file
+ );
+}
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index 621d457..617eb20 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -1,4 +1,4 @@
-import { SvgIcon } from "@mui/material"
+import { SvgIcon } from '@mui/material';
/*
We use SvgIcon so the icons can be handled more easily by Material ui components.
@@ -11,190 +11,213 @@
*/
export const ArrowIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 -3 20 20">
- <g>
- <path d="M0.302825536,7.53652162 L6.27862638,13.4439361 L6.37822306,13.542393 C6.77660979,13.9362206 7.47378655,13.8377637 7.77257659,13.4439361 C8.07136664,13.0501085 8.07136664,12.3609101 7.67297991,12.0655394 L3.39032264,7.83189235 L18.9274048,7.83189235 C19.5249849,7.83189235 19.9233716,7.43806472 19.9233716,6.84732327 C19.9233716,6.25658182 19.5249849,5.86275419 18.9274048,5.86275419 L3.39032264,5.86275419 L7.67297991,1.62910716 C7.97176996,1.23527953 7.97176996,0.742994993 7.67297991,0.349167363 C7.27459319,-0.0446602682 6.67701311,-0.143117176 6.27862638,0.250710455 L0.302825536,6.15812492 C0.00403549366,6.45349564 -0.0955611871,6.84732327 0.103632174,7.2411509 C0.103632174,7.33960781 0.203228855,7.43806472 0.302825536,7.53652162" id="Fill-1"></path>
- </g>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 -3 20 20">
+ <g>
+ <path
+ d="M0.302825536,7.53652162 L6.27862638,13.4439361 L6.37822306,13.542393 C6.77660979,13.9362206 7.47378655,13.8377637 7.77257659,13.4439361 C8.07136664,13.0501085 8.07136664,12.3609101 7.67297991,12.0655394 L3.39032264,7.83189235 L18.9274048,7.83189235 C19.5249849,7.83189235 19.9233716,7.43806472 19.9233716,6.84732327 C19.9233716,6.25658182 19.5249849,5.86275419 18.9274048,5.86275419 L3.39032264,5.86275419 L7.67297991,1.62910716 C7.97176996,1.23527953 7.97176996,0.742994993 7.67297991,0.349167363 C7.27459319,-0.0446602682 6.67701311,-0.143117176 6.27862638,0.250710455 L0.302825536,6.15812492 C0.00403549366,6.45349564 -0.0955611871,6.84732327 0.103632174,7.2411509 C0.103632174,7.33960781 0.203228855,7.43806472 0.302825536,7.53652162"
+ id="Fill-1"
+ ></path>
+ </g>
+ </SvgIcon>
+ );
+};
export const Arrow2Icon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 21.776 20.23">
- <path style={{fill:"none", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:"1.75px"}} d="M.219 18.221a.771.771 0 0 1-.143-.87l3.942-8.124L.076 1.1A.77.77 0 0 1 1.085.068l18.461 8.461a.765.765 0 0 1 0 1.394L1.085 18.385a.771.771 0 0 1-.867-.164Z" transform="translate(.903 .901)"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 21.776 20.23">
+ <path
+ style={{ fill: 'none', stroke: '#7e7e7e', strokeMiterlimit: 10, strokeWidth: '1.75px' }}
+ d="M.219 18.221a.771.771 0 0 1-.143-.87l3.942-8.124L.076 1.1A.77.77 0 0 1 1.085.068l18.461 8.461a.765.765 0 0 1 0 1.394L1.085 18.385a.771.771 0 0 1-.867-.164Z"
+ transform="translate(.903 .901)"
+ />
+ </SvgIcon>
+ );
+};
export const Arrow3Icon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 21.045 14.743">
- <path d="m15.54 32.48 8.635 6.49a.2.2 0 0 0 .319-.174V34.74c9.823.666 10.982 4.984 10.982 4.984 0-8.982-7.186-10.228-10.982-10.257v-3.651a.187.187 0 0 0-.319-.145l-8.635 6.49a.227.227 0 0 0 0 .319Z" transform="translate(-14.93 -25.11)" style={{fill:"none", stroke:"#005699"}}/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 21.045 14.743">
+ <path
+ d="m15.54 32.48 8.635 6.49a.2.2 0 0 0 .319-.174V34.74c9.823.666 10.982 4.984 10.982 4.984 0-8.982-7.186-10.228-10.982-10.257v-3.651a.187.187 0 0 0-.319-.145l-8.635 6.49a.227.227 0 0 0 0 .319Z"
+ transform="translate(-14.93 -25.11)"
+ style={{ fill: 'none', stroke: '#005699' }}
+ />
+ </SvgIcon>
+ );
+};
export const CameraIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="2 3 20 19">
- <path d="M3.6 20.3c-.4 0-.8-.2-1.1-.5-.2-.2-.4-.6-.4-.9V7.7c-.1-.3.1-.7.4-1 .2-.3.5-.4.8-.5H7.9l1.2-2.5h5.7L16 6.2h4.3c.4 0 .8.2 1.1.5.2.2.4.6.4.9v11.2c0 .4-.2.8-.5 1.1-.2.2-.6.4-.9.4H3.6zm0-12.6-.1 11v.1h17.1V7.7h-5.3L14 5.2h-4L8.8 7.7H3.6zm8.4 9.7c-1.2 0-2.3-.5-3.2-1.3-.8-.8-1.3-2-1.3-3.2 0-1.2.5-2.3 1.3-3.2.8-.8 2-1.3 3.2-1.3 1.2 0 2.3.5 3.2 1.3.8.8 1.3 2 1.3 3.2s-.5 2.3-1.3 3.2c-.9.8-2 1.3-3.2 1.3zm0-7.5c-.8 0-1.6.3-2.1.9S9 12.1 9 12.9s.3 1.6.9 2.1c1.1 1.1 3.1 1.1 4.3 0 .6-.6.9-1.3.9-2.1s-.3-1.6-.9-2.1c-.6-.6-1.4-.9-2.2-.9z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="2 3 20 19">
+ <path d="M3.6 20.3c-.4 0-.8-.2-1.1-.5-.2-.2-.4-.6-.4-.9V7.7c-.1-.3.1-.7.4-1 .2-.3.5-.4.8-.5H7.9l1.2-2.5h5.7L16 6.2h4.3c.4 0 .8.2 1.1.5.2.2.4.6.4.9v11.2c0 .4-.2.8-.5 1.1-.2.2-.6.4-.9.4H3.6zm0-12.6-.1 11v.1h17.1V7.7h-5.3L14 5.2h-4L8.8 7.7H3.6zm8.4 9.7c-1.2 0-2.3-.5-3.2-1.3-.8-.8-1.3-2-1.3-3.2 0-1.2.5-2.3 1.3-3.2.8-.8 2-1.3 3.2-1.3 1.2 0 2.3.5 3.2 1.3.8.8 1.3 2 1.3 3.2s-.5 2.3-1.3 3.2c-.9.8-2 1.3-3.2 1.3zm0-7.5c-.8 0-1.6.3-2.1.9S9 12.1 9 12.9s.3 1.6.9 2.1c1.1 1.1 3.1 1.1 4.3 0 .6-.6.9-1.3.9-2.1s-.3-1.6-.9-2.1c-.6-.6-1.4-.9-2.2-.9z" />
+ </SvgIcon>
+ );
+};
export const CameraInBubbleIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 25 25">
- <path d="M25 25H12.5A12.379 12.379 0 0 1 0 12.5 12.379 12.379 0 0 1 12.5 0 12.379 12.379 0 0 1 25 12.5ZM12.5 1.75a11 11 0 0 0-7.625 3.125 10.865 10.865 0 0 0 0 15.25A10.781 10.781 0 0 0 12.5 23.25h10.75V12.5a11 11 0 0 0-3.125-7.625A11 11 0 0 0 12.5 1.75Z"/>
- <path d="M15.125 18.375H6.75a1.329 1.329 0 0 1-1.5-1.25v-8a1.465 1.465 0 0 1 1.375-1.25H15a1.286 1.286 0 0 1 1.375 1.25v.75l1.375-.75A1.146 1.146 0 0 1 19.125 9a1.034 1.034 0 0 1 .625 1v6.25a1.248 1.248 0 0 1-.625 1.125 1.479 1.479 0 0 1-1.25-.125L16.5 16.5v.75a1.276 1.276 0 0 1-1.375 1.125Zm-8.25-1.625h8v-1.625a1.08 1.08 0 0 1 .375-.75.8.8 0 0 1 .75 0l2 1.125v-4.75l-1.875 1.125a.8.8 0 0 1-.75 0 .685.685 0 0 1-.5-.75V9.5h-8Zm11.875-.875Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 25 25">
+ <path d="M25 25H12.5A12.379 12.379 0 0 1 0 12.5 12.379 12.379 0 0 1 12.5 0 12.379 12.379 0 0 1 25 12.5ZM12.5 1.75a11 11 0 0 0-7.625 3.125 10.865 10.865 0 0 0 0 15.25A10.781 10.781 0 0 0 12.5 23.25h10.75V12.5a11 11 0 0 0-3.125-7.625A11 11 0 0 0 12.5 1.75Z" />
+ <path d="M15.125 18.375H6.75a1.329 1.329 0 0 1-1.5-1.25v-8a1.465 1.465 0 0 1 1.375-1.25H15a1.286 1.286 0 0 1 1.375 1.25v.75l1.375-.75A1.146 1.146 0 0 1 19.125 9a1.034 1.034 0 0 1 .625 1v6.25a1.248 1.248 0 0 1-.625 1.125 1.479 1.479 0 0 1-1.25-.125L16.5 16.5v.75a1.276 1.276 0 0 1-1.375 1.125Zm-8.25-1.625h8v-1.625a1.08 1.08 0 0 1 .375-.75.8.8 0 0 1 .75 0l2 1.125v-4.75l-1.875 1.125a.8.8 0 0 1-.75 0 .685.685 0 0 1-.5-.75V9.5h-8Zm11.875-.875Z" />
+ </SvgIcon>
+ );
+};
export const CancelIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="2 2 20 20">
- <path d="M12 2C6.4771525 2 2 6.4771525 2 12s4.4771525 10 10 10 10-4.4771525 10-10S17.5228475 2 12 2Zm0 1.33333168c2.0746076-.00128199 4.079864.74684198 5.6466667 2.10666832L5.39333333 17.5933333c-2.17561675-2.5749862-2.66070945-6.17789412-1.2436087-9.23660098C5.56682538 5.29802546 8.62897124 3.33855529 12 3.33333168Zm0 17.33333502c-2.08385186-.000638-4.09692832-.7561338-5.66666667-2.1266667L18.5866667 6.38c2.1903962 2.57136307 2.6872505 6.1810635 1.2730136 9.2485834C18.4454435 18.6961032 15.3778286 20.6624553 12 20.6666667Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="2 2 20 20">
+ <path d="M12 2C6.4771525 2 2 6.4771525 2 12s4.4771525 10 10 10 10-4.4771525 10-10S17.5228475 2 12 2Zm0 1.33333168c2.0746076-.00128199 4.079864.74684198 5.6466667 2.10666832L5.39333333 17.5933333c-2.17561675-2.5749862-2.66070945-6.17789412-1.2436087-9.23660098C5.56682538 5.29802546 8.62897124 3.33855529 12 3.33333168Zm0 17.33333502c-2.08385186-.000638-4.09692832-.7561338-5.66666667-2.1266667L18.5866667 6.38c2.1903962 2.57136307 2.6872505 6.1810635 1.2730136 9.2485834C18.4454435 18.6961032 15.3778286 20.6624553 12 20.6666667Z" />
+ </SvgIcon>
+ );
+};
export const CheckedIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 16 16">
- <path d="M11.138 5.152 6.802 9.486l-1.936-1.94a.64205296.64205296 0 0 0-.908.908l2.39 2.394a.642.642 0 0 0 .908 0l4.79-4.785a.6431145.6431145 0 0 0-.908-.911Z"/>
- <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 1.284A6.716 6.716 0 1 0 14.716 8 6.723 6.723 0 0 0 8 1.284Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 16">
+ <path d="M11.138 5.152 6.802 9.486l-1.936-1.94a.64205296.64205296 0 0 0-.908.908l2.39 2.394a.642.642 0 0 0 .908 0l4.79-4.785a.6431145.6431145 0 0 0-.908-.911Z" />
+ <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 1.284A6.716 6.716 0 1 0 14.716 8 6.723 6.723 0 0 0 8 1.284Z" />
+ </SvgIcon>
+ );
+};
export const CrossedEyeIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 15.931 12.145">
- <path d="M7.933 10.41a7.081 7.081 0 0 1-3.7-1.292 12.409 12.409 0 0 1-2.874-2.717.237.237 0 0 1 0-.366 14.122 14.122 0 0 1 2.429-2.372L3 2.873a14.6 14.6 0 0 0-2.836 2.93.629.629 0 0 0 .019.87 13.62 13.62 0 0 0 4.222 3.834 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.848-.848a5.577 5.577 0 0 1-2.119.462ZM15.74 5.784a13.154 13.154 0 0 0-4.26-3.856A7.284 7.284 0 0 0 8.145.941a6.436 6.436 0 0 0-2.892.6l.848.848a5.691 5.691 0 0 1 1.793-.348 5.788 5.788 0 0 1 2.583.617 11.437 11.437 0 0 1 3.586 2.783c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 13.993 13.993 0 0 1-2.256 2.275l.79.79a14.6 14.6 0 0 0 2.6-2.737.658.658 0 0 0-.016-.91Z"/>
- <path d="m9.687 5.974 1 1a3.349 3.349 0 0 0 .1-.752 2.867 2.867 0 0 0-2.835-2.848 2.576 2.576 0 0 0-.771.116l1.022 1.021a1.738 1.738 0 0 1 1.484 1.463ZM5.311 5.205a2.6 2.6 0 0 0-.193 1.022A2.867 2.867 0 0 0 7.971 9.06a3.005 3.005 0 0 0 1.022-.193l-.906-.906h-.135a1.749 1.749 0 0 1-1.734-1.773v-.077ZM2.882.173A.514.514 0 0 0 2.493 0a.659.659 0 0 0-.556.386.49.49 0 0 0 .135.578l11.007 11.007a.514.514 0 0 0 .386.173.659.659 0 0 0 .559-.386.49.49 0 0 0-.131-.577Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 15.931 12.145">
+ <path d="M7.933 10.41a7.081 7.081 0 0 1-3.7-1.292 12.409 12.409 0 0 1-2.874-2.717.237.237 0 0 1 0-.366 14.122 14.122 0 0 1 2.429-2.372L3 2.873a14.6 14.6 0 0 0-2.836 2.93.629.629 0 0 0 .019.87 13.62 13.62 0 0 0 4.222 3.834 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.848-.848a5.577 5.577 0 0 1-2.119.462ZM15.74 5.784a13.154 13.154 0 0 0-4.26-3.856A7.284 7.284 0 0 0 8.145.941a6.436 6.436 0 0 0-2.892.6l.848.848a5.691 5.691 0 0 1 1.793-.348 5.788 5.788 0 0 1 2.583.617 11.437 11.437 0 0 1 3.586 2.783c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 13.993 13.993 0 0 1-2.256 2.275l.79.79a14.6 14.6 0 0 0 2.6-2.737.658.658 0 0 0-.016-.91Z" />
+ <path d="m9.687 5.974 1 1a3.349 3.349 0 0 0 .1-.752 2.867 2.867 0 0 0-2.835-2.848 2.576 2.576 0 0 0-.771.116l1.022 1.021a1.738 1.738 0 0 1 1.484 1.463ZM5.311 5.205a2.6 2.6 0 0 0-.193 1.022A2.867 2.867 0 0 0 7.971 9.06a3.005 3.005 0 0 0 1.022-.193l-.906-.906h-.135a1.749 1.749 0 0 1-1.734-1.773v-.077ZM2.882.173A.514.514 0 0 0 2.493 0a.659.659 0 0 0-.556.386.49.49 0 0 0 .135.578l11.007 11.007a.514.514 0 0 0 .386.173.659.659 0 0 0 .559-.386.49.49 0 0 0-.131-.577Z" />
+ </SvgIcon>
+ );
+};
export const CrossIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 10 10">
- <path d="M32 979.362a.652.652 0 0 0-.652.652v3.7h-3.7a.652.652 0 0 0 0 1.3h3.7v3.7a.652.652 0 0 0 1.3 0v-3.7h3.7a.652.652 0 0 0 0-1.3h-3.7v-3.7a.652.652 0 0 0-.648-.652Z" transform="translate(-27 -979.362)"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 10 10">
+ <path
+ d="M32 979.362a.652.652 0 0 0-.652.652v3.7h-3.7a.652.652 0 0 0 0 1.3h3.7v3.7a.652.652 0 0 0 1.3 0v-3.7h3.7a.652.652 0 0 0 0-1.3h-3.7v-3.7a.652.652 0 0 0-.648-.652Z"
+ transform="translate(-27 -979.362)"
+ />
+ </SvgIcon>
+ );
+};
export const SaltireIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="5 5 14 14">
- <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="5 5 14 14">
+ <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+ </SvgIcon>
+ );
+};
export const EmojiIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 25 25">
- <path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.537 12.537 0 0 0 12.5 0Zm0 23.25A10.75 10.75 0 1 1 23.25 12.5 10.749 10.749 0 0 1 12.5 23.25Z"/>
- <path d="M18.25 14a.688.688 0 0 0-.625.25 9.558 9.558 0 0 1-5.125 1.625 7.867 7.867 0 0 1-5.125-1.625C7.25 14 6.875 14 6.75 14a1.34 1.34 0 0 0-.75.25c-.125.125-.125.5-.125.75a.853.853 0 0 0 .375.625A10.559 10.559 0 0 0 12.5 17.5a11.419 11.419 0 0 0 6.25-1.875 1.726 1.726 0 0 0 .375-.5V15a.937.937 0 0 0-.125-.625ZM7.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.049 1.049 0 0 0 7.5 8.5a1.049 1.049 0 0 0-1.125 1.125A1.049 1.049 0 0 0 7.5 10.75ZM17.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.116 1.116 0 0 0 17.5 8.5a1.208 1.208 0 0 0-1.125 1.125.994.994 0 0 0 1.125 1.125Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 25 25">
+ <path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.537 12.537 0 0 0 12.5 0Zm0 23.25A10.75 10.75 0 1 1 23.25 12.5 10.749 10.749 0 0 1 12.5 23.25Z" />
+ <path d="M18.25 14a.688.688 0 0 0-.625.25 9.558 9.558 0 0 1-5.125 1.625 7.867 7.867 0 0 1-5.125-1.625C7.25 14 6.875 14 6.75 14a1.34 1.34 0 0 0-.75.25c-.125.125-.125.5-.125.75a.853.853 0 0 0 .375.625A10.559 10.559 0 0 0 12.5 17.5a11.419 11.419 0 0 0 6.25-1.875 1.726 1.726 0 0 0 .375-.5V15a.937.937 0 0 0-.125-.625ZM7.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.049 1.049 0 0 0 7.5 8.5a1.049 1.049 0 0 0-1.125 1.125A1.049 1.049 0 0 0 7.5 10.75ZM17.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.116 1.116 0 0 0 17.5 8.5a1.208 1.208 0 0 0-1.125 1.125.994.994 0 0 0 1.125 1.125Z" />
+ </SvgIcon>
+ );
+};
export const EyeIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 15.931 10.568">
- <path d="M7.933 9.469a7.081 7.081 0 0 1-3.7-1.292A12.409 12.409 0 0 1 1.359 5.46a.237.237 0 0 1 0-.366c.733-.892 3.322-3.276 4.685-3.702l-.791-.79a18.682 18.682 0 0 0-5.089 4.26.629.629 0 0 0 .019.867 13.62 13.62 0 0 0 4.222 3.837 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.847-.853a5.577 5.577 0 0 1-2.12.467Z"/>
- <path d="M15.74 4.843A13.154 13.154 0 0 0 11.48.987 7.284 7.284 0 0 0 8.145 0a6.436 6.436 0 0 0-2.892.6l.848.848A5.691 5.691 0 0 1 7.894 1.1a5.788 5.788 0 0 1 2.583.617A11.437 11.437 0 0 1 14.063 4.5c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 17.151 17.151 0 0 1-4.627 3.6l.79.79a21.4 21.4 0 0 0 4.973-4.067.658.658 0 0 0-.018-.905Z"/>
- <g transform="translate(4.952 1.963)" style={{"stroke": "#005699", "fill": "none"}}>
- <circle cx="3" cy="3" r="3" style={{"stroke": "none"}}/>
- <circle cx="3" cy="3" r="2.5"/>
- </g>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 15.931 10.568">
+ <path d="M7.933 9.469a7.081 7.081 0 0 1-3.7-1.292A12.409 12.409 0 0 1 1.359 5.46a.237.237 0 0 1 0-.366c.733-.892 3.322-3.276 4.685-3.702l-.791-.79a18.682 18.682 0 0 0-5.089 4.26.629.629 0 0 0 .019.867 13.62 13.62 0 0 0 4.222 3.837 7.4 7.4 0 0 0 3.547 1 7.067 7.067 0 0 0 2.948-.711l-.847-.853a5.577 5.577 0 0 1-2.12.467Z" />
+ <path d="M15.74 4.843A13.154 13.154 0 0 0 11.48.987 7.284 7.284 0 0 0 8.145 0a6.436 6.436 0 0 0-2.892.6l.848.848A5.691 5.691 0 0 1 7.894 1.1a5.788 5.788 0 0 1 2.583.617A11.437 11.437 0 0 1 14.063 4.5c.193.212.347.424.54.636a.209.209 0 0 1 .019.289 17.151 17.151 0 0 1-4.627 3.6l.79.79a21.4 21.4 0 0 0 4.973-4.067.658.658 0 0 0-.018-.905Z" />
+ <g transform="translate(4.952 1.963)" style={{ stroke: '#005699', fill: 'none' }}>
+ <circle cx="3" cy="3" r="3" style={{ stroke: 'none' }} />
+ <circle cx="3" cy="3" r="2.5" />
+ </g>
+ </SvgIcon>
+ );
+};
export const FolderIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 17.504 14.812">
- <path d="M15.484 14.812H2.02a.675.675 0 0 1-.666-.578L.007 4.809a.674.674 0 0 1 .665-.769h.673V.673A.674.674 0 0 1 2.02 0h4.039a.676.676 0 0 1 .373.113l1.85 1.233h7.2a.674.674 0 0 1 .673.673v2.02h.673a.675.675 0 0 1 .667.769l-1.346 9.426a.677.677 0 0 1-.665.578ZM1.449 5.387 2.6 13.466h12.3l1.154-8.079Zm1.244-4.04v2.692h12.118V2.693H8.078A.677.677 0 0 1 7.7 2.58L5.855 1.346Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 17.504 14.812">
+ <path d="M15.484 14.812H2.02a.675.675 0 0 1-.666-.578L.007 4.809a.674.674 0 0 1 .665-.769h.673V.673A.674.674 0 0 1 2.02 0h4.039a.676.676 0 0 1 .373.113l1.85 1.233h7.2a.674.674 0 0 1 .673.673v2.02h.673a.675.675 0 0 1 .667.769l-1.346 9.426a.677.677 0 0 1-.665.578ZM1.449 5.387 2.6 13.466h12.3l1.154-8.079Zm1.244-4.04v2.692h12.118V2.693H8.078A.677.677 0 0 1 7.7 2.58L5.855 1.346Z" />
+ </SvgIcon>
+ );
+};
export const InfoIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="2 2 20 20">
- <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="2 2 20 20">
+ <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
+ </SvgIcon>
+ );
+};
export const LockIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 12.727 15.636">
- <path d="M10.727 15.636H2a2 2 0 0 1-2-2V7.454a2 2 0 0 1 2-2h8.727a2 2 0 0 1 2 2v6.182a2 2 0 0 1-2 2ZM2 6.545a.91.91 0 0 0-.909.909v6.182a.91.91 0 0 0 .909.909h8.727a.908.908 0 0 0 .909-.909V7.454a.908.908 0 0 0-.909-.909Z"/>
- <path d="M10.363 6.546h-8A.546.546 0 0 1 1.818 6V4.181a4.048 4.048 0 0 1 1.35-2.974A4.73 4.73 0 0 1 6.364 0a4.729 4.729 0 0 1 3.195 1.207 4.048 4.048 0 0 1 1.35 2.974V6a.546.546 0 0 1-.546.546Zm-4-5.455a3.645 3.645 0 0 0-2.462.923 2.918 2.918 0 0 0-.993 2.167v1.274h6.91V4.181a2.918 2.918 0 0 0-.993-2.167 3.644 3.644 0 0 0-2.461-.923ZM6.363 11.272a1.636 1.636 0 1 1 1.636-1.636 1.638 1.638 0 0 1-1.636 1.636Zm0-2.182a.545.545 0 1 0 .545.545.546.546 0 0 0-.545-.544Z"/>
- <path d="M5.818 10.727v1.819a.5455.5455 0 1 0 1.091 0v-1.819a.5455.5455 0 0 0-1.091 0Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 12.727 15.636">
+ <path d="M10.727 15.636H2a2 2 0 0 1-2-2V7.454a2 2 0 0 1 2-2h8.727a2 2 0 0 1 2 2v6.182a2 2 0 0 1-2 2ZM2 6.545a.91.91 0 0 0-.909.909v6.182a.91.91 0 0 0 .909.909h8.727a.908.908 0 0 0 .909-.909V7.454a.908.908 0 0 0-.909-.909Z" />
+ <path d="M10.363 6.546h-8A.546.546 0 0 1 1.818 6V4.181a4.048 4.048 0 0 1 1.35-2.974A4.73 4.73 0 0 1 6.364 0a4.729 4.729 0 0 1 3.195 1.207 4.048 4.048 0 0 1 1.35 2.974V6a.546.546 0 0 1-.546.546Zm-4-5.455a3.645 3.645 0 0 0-2.462.923 2.918 2.918 0 0 0-.993 2.167v1.274h6.91V4.181a2.918 2.918 0 0 0-.993-2.167 3.644 3.644 0 0 0-2.461-.923ZM6.363 11.272a1.636 1.636 0 1 1 1.636-1.636 1.638 1.638 0 0 1-1.636 1.636Zm0-2.182a.545.545 0 1 0 .545.545.546.546 0 0 0-.545-.544Z" />
+ <path d="M5.818 10.727v1.819a.5455.5455 0 1 0 1.091 0v-1.819a.5455.5455 0 0 0-1.091 0Z" />
+ </SvgIcon>
+ );
+};
export const MicroInBubbleIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 25 25">
- <g transform="translate(-2 -2)">
- <g transform="translate(2 2)">
- <path d="M23.375,5.625A12.372,12.372,0,0,0,14.5,2,12.379,12.379,0,0,0,2,14.5,12.379,12.379,0,0,0,14.5,27H27V14.5A12.372,12.372,0,0,0,23.375,5.625ZM25.25,25.25H14.5a11,11,0,0,1-7.625-3.125A10.781,10.781,0,0,1,3.75,14.5,11,11,0,0,1,6.875,6.875a10.865,10.865,0,0,1,15.25,0A10.781,10.781,0,0,1,25.25,14.5Z" transform="translate(-2 -2)"/>
- <path d="M16.6,10.35a.649.649,0,0,0-.25.5V12.6a3.125,3.125,0,0,1-6.25,0V10.85a.948.948,0,0,0-.25-.5.649.649,0,0,0-.5-.25h0a.649.649,0,0,0-.5.25.649.649,0,0,0-.25.5V12.6a4.563,4.563,0,0,0,3.875,4.5v.625H11.35a.625.625,0,0,0,0,1.25h3.5a.625.625,0,0,0,0-1.25H13.725V17.1A4.68,4.68,0,0,0,17.6,12.6V10.85a.948.948,0,0,0-.25-.5A.564.564,0,0,0,16.6,10.35Zm-7.25.125Z" transform="translate(-0.35 0.025)"/>
- </g>
- <g transform="translate(12.625 8.5)">
- <path d="M12.75,15.575a2.241,2.241,0,0,1-2.25-2.25V9.45a2.25,2.25,0,0,1,4.5,0v4A2.138,2.138,0,0,1,12.75,15.575Zm0-6.875a.72.72,0,0,0-.75.75v4a.75.75,0,1,0,1.5,0v-4A.807.807,0,0,0,12.75,8.7Z" transform="translate(-10.5 -7.2)"/>
- </g>
- </g>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 25 25">
+ <g transform="translate(-2 -2)">
+ <g transform="translate(2 2)">
+ <path
+ d="M23.375,5.625A12.372,12.372,0,0,0,14.5,2,12.379,12.379,0,0,0,2,14.5,12.379,12.379,0,0,0,14.5,27H27V14.5A12.372,12.372,0,0,0,23.375,5.625ZM25.25,25.25H14.5a11,11,0,0,1-7.625-3.125A10.781,10.781,0,0,1,3.75,14.5,11,11,0,0,1,6.875,6.875a10.865,10.865,0,0,1,15.25,0A10.781,10.781,0,0,1,25.25,14.5Z"
+ transform="translate(-2 -2)"
+ />
+ <path
+ d="M16.6,10.35a.649.649,0,0,0-.25.5V12.6a3.125,3.125,0,0,1-6.25,0V10.85a.948.948,0,0,0-.25-.5.649.649,0,0,0-.5-.25h0a.649.649,0,0,0-.5.25.649.649,0,0,0-.25.5V12.6a4.563,4.563,0,0,0,3.875,4.5v.625H11.35a.625.625,0,0,0,0,1.25h3.5a.625.625,0,0,0,0-1.25H13.725V17.1A4.68,4.68,0,0,0,17.6,12.6V10.85a.948.948,0,0,0-.25-.5A.564.564,0,0,0,16.6,10.35Zm-7.25.125Z"
+ transform="translate(-0.35 0.025)"
+ />
+ </g>
+ <g transform="translate(12.625 8.5)">
+ <path
+ d="M12.75,15.575a2.241,2.241,0,0,1-2.25-2.25V9.45a2.25,2.25,0,0,1,4.5,0v4A2.138,2.138,0,0,1,12.75,15.575Zm0-6.875a.72.72,0,0,0-.75.75v4a.75.75,0,1,0,1.5,0v-4A.807.807,0,0,0,12.75,8.7Z"
+ transform="translate(-10.5 -7.2)"
+ />
+ </g>
+ </g>
+ </SvgIcon>
+ );
+};
export const OppositeArrowsIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 16.123 17" style={{fill:"none", stroke: "#005699", fillRule:"evenodd"}}>
- <path d="M15.623 11.025a.358.358 0 0 0-.358-.358h-8.1v-1.4a.358.358 0 0 0-.537-.31l-2.972 1.717-2.977 1.72a.358.358 0 0 0 0 .62l2.977 1.718 2.975 1.719a.358.358 0 0 0 .537-.31v-1.4h8.1a.358.358 0 0 0 .358-.358v-3.36ZM.5 2.615a.358.358 0 0 1 .358-.358h8.1v-1.4a.358.358 0 0 1 .537-.31l2.976 1.718 2.977 1.72a.358.358 0 0 1 0 .62l-2.977 1.718-2.978 1.719a.358.358 0 0 1-.537-.31v-1.4h-8.1a.358.358 0 0 1-.358-.358v-3.36Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 16.123 17" style={{ fill: 'none', stroke: '#005699', fillRule: 'evenodd' }}>
+ <path d="M15.623 11.025a.358.358 0 0 0-.358-.358h-8.1v-1.4a.358.358 0 0 0-.537-.31l-2.972 1.717-2.977 1.72a.358.358 0 0 0 0 .62l2.977 1.718 2.975 1.719a.358.358 0 0 0 .537-.31v-1.4h8.1a.358.358 0 0 0 .358-.358v-3.36ZM.5 2.615a.358.358 0 0 1 .358-.358h8.1v-1.4a.358.358 0 0 1 .537-.31l2.976 1.718 2.977 1.72a.358.358 0 0 1 0 .62l-2.977 1.718-2.978 1.719a.358.358 0 0 1-.537-.31v-1.4h-8.1a.358.358 0 0 1-.358-.358v-3.36Z" />
+ </SvgIcon>
+ );
+};
export const PaperClipIcon = (props) => {
- return(
- <SvgIcon {...props} viewBox="0 0 12.208 25.75">
- <path
- style={{ fill:"#7e7e7e", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:".75px" }}
- d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
- />
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 12.208 25.75">
+ <path
+ style={{ fill: '#7e7e7e', stroke: '#7e7e7e', strokeMiterlimit: 10, strokeWidth: '.75px' }}
+ d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
+ />
+ </SvgIcon>
+ );
+};
export const PenIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 14.863 14.863">
- <path d="m0 14.863.025-5.4L9.49 0l5.373 5.388-3.941 3.941-.711-.715.918-.913-3.967-3.966-6.123 6.129v3.966H5l2.959-2.958.71.715L5.4 14.838ZM9.49 1.426l-1.6 1.6 3.946 3.946 1.6-1.6L9.49 1.427Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 14.863 14.863">
+ <path d="m0 14.863.025-5.4L9.49 0l5.373 5.388-3.941 3.941-.711-.715.918-.913-3.967-3.966-6.123 6.129v3.966H5l2.959-2.958.71.715L5.4 14.838ZM9.49 1.426l-1.6 1.6 3.946 3.946 1.6-1.6L9.49 1.427Z" />
+ </SvgIcon>
+ );
+};
export const PersonIcon = (props) => {
- return (
+ return (
<SvgIcon {...props} viewBox="0 0 24 24">
- <g stroke="#03B9E9" strokeWidth="1.75" fill="none" fillRule="evenodd" strokeLinejoin="round">
- <path d="M17 6.5c0 2.48522308-2.0147769 4.5-4.5 4.5C10.01477692 11 8 8.98522308 8 6.5 8 4.0147769 10.01477692 2 12.5 2 14.9852231 2 17 4.0147769 17 6.5ZM3 22c0-5.5228267 4.02947764-10 9.00005436-10C16.9705224 12 21 16.4771733 21 22"/>
- </g>
+ <g stroke="#03B9E9" strokeWidth="1.75" fill="none" fillRule="evenodd" strokeLinejoin="round">
+ <path d="M17 6.5c0 2.48522308-2.0147769 4.5-4.5 4.5C10.01477692 11 8 8.98522308 8 6.5 8 4.0147769 10.01477692 2 12.5 2 14.9852231 2 17 4.0147769 17 6.5ZM3 22c0-5.5228267 4.02947764-10 9.00005436-10C16.9705224 12 21 16.4771733 21 22" />
+ </g>
</SvgIcon>
- )
-}
+ );
+};
export const RoundCrossIcon = (props) => {
return (
@@ -217,17 +240,17 @@
<defs>
<style>.a{"fill:#005699;"}</style>
</defs> */}
- <g transform="translate(-3.7 -4.4)">
- <g transform="translate(3.7 4.4)">
- <g transform="translate(0 0)">
- <path
- class="a"
- d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
- transform="translate(-0.7 -0.4)"
- />
- </g>
+ <g transform="translate(-3.7 -4.4)">
+ <g transform="translate(3.7 4.4)">
+ <g transform="translate(0 0)">
+ <path
+ className="a"
+ d="M5.134,14.954a.869.869,0,0,1-.482-.1A1.252,1.252,0,0,1,3.881,13.7V11.773H3.3a2.614,2.614,0,0,1-2.6-2.7V3.1A2.675,2.675,0,0,1,3.3.4H14a2.635,2.635,0,0,1,2.7,2.7v5.88a2.694,2.694,0,0,1-2.7,2.7H9.086L6,14.569A1.222,1.222,0,0,1,5.134,14.954ZM3.3,1.653A1.547,1.547,0,0,0,1.76,3.292v5.88A1.585,1.585,0,0,0,3.3,10.713H5.037V13.8a.094.094,0,0,0,.1.1h.193L8.7,10.617h5.4A1.585,1.585,0,0,0,15.64,9.075V3.1A1.585,1.585,0,0,0,14.1,1.557H3.3Z"
+ transform="translate(-0.7 -0.4)"
+ />
</g>
</g>
+ </g>
{/* </svg> */}
</SvgIcon>
);
@@ -245,17 +268,17 @@
<defs>
<style>.a{"fill:#005699;"}</style>
</defs> */}
- <g transform="translate(-2.404 -1.956)">
- <g transform="translate(2.404 1.956)">
- <g transform="translate(0)">
- <path
- class="a"
- d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
- transform="translate(0.596 1.044)"
- />
- </g>
+ <g transform="translate(-2.404 -1.956)">
+ <g transform="translate(2.404 1.956)">
+ <g transform="translate(0)">
+ <path
+ className="a"
+ d="M10.417,14.956a6.077,6.077,0,0,1-1.676-.239C4.669,13.6.359,9.049-.44,4.9A5.052,5.052,0,0,1,1.237-.37h0a2.456,2.456,0,0,1,2.075-.639A1.767,1.767,0,0,1,4.51.109a7.417,7.417,0,0,0,.4.8c.718,1.357,1.2,2.395.4,3.273h-.08l-.4.319c-1.118.718-1.118.8-.958,1.038a9.647,9.647,0,0,0,4.39,4.869c.239.16.319.16,1.038-.8.16-.16.239-.319.4-.479l.08-.08c.958-.8,1.916-.16,3.432.718l.559.319a1.849,1.849,0,0,1,.958,1.277,2.7,2.7,0,0,1-.718,2A4.721,4.721,0,0,1,10.417,14.956ZM1.875.508A3.893,3.893,0,0,0,.6,4.659c.718,3.752,4.79,7.983,8.382,9.02a3.72,3.72,0,0,0,4.151-1.038,1.254,1.254,0,0,0,.479-1.118.761.761,0,0,0-.479-.559l-.479-.319c-1.277-.8-1.756-1.038-2.075-.8a1.741,1.741,0,0,1-.319.4c-.639.8-1.357,1.756-2.475,1.118A10.6,10.6,0,0,1,2.913,6.016C2.195,4.9,3.232,4.18,4.19,3.541L4.51,3.3c.239-.319,0-.8-.639-1.916a7.417,7.417,0,0,1-.4-.8A.72.72,0,0,0,2.993.109c-.239-.08-.639.08-1.118.4Z"
+ transform="translate(0.596 1.044)"
+ />
</g>
</g>
+ </g>
{/* </svg> */}
</SvgIcon>
);
@@ -273,15 +296,15 @@
<defs>
<style>.a{"fill:#005699;"}</style>
</defs> */}
- <g transform="translate(-4.4 -6)">
- <g transform="translate(4.4 6)">
- <path
- class="a"
- d="M12.485,13H2.759C1.923,13,1.4,12.5,1.4,11.9V2.1A1.166,1.166,0,0,1,2.655,1H12.38a1.073,1.073,0,0,1,1.15,1.1V3.6l2.2-1.3a1.173,1.173,0,0,1,1.15,0,.993.993,0,0,1,.523.9v7.7a.842.842,0,0,1-.523.9.832.832,0,0,1-1.046-.1l-2.2-1.3v1.5A1.073,1.073,0,0,1,12.485,13ZM2.55,11.9Zm0,0H12.59V9.4c-.1-.2-.1-.3.209-.4a.485.485,0,0,1,.523,0l2.824,1.7V3.4L13.322,5A.485.485,0,0,1,12.8,5a.537.537,0,0,1-.314-.4V2.1H2.759c-.209,0-.209.1-.209.1Z"
- transform="translate(-1.4 -1)"
- />
- </g>
+ <g transform="translate(-4.4 -6)">
+ <g transform="translate(4.4 6)">
+ <path
+ className="a"
+ d="M12.485,13H2.759C1.923,13,1.4,12.5,1.4,11.9V2.1A1.166,1.166,0,0,1,2.655,1H12.38a1.073,1.073,0,0,1,1.15,1.1V3.6l2.2-1.3a1.173,1.173,0,0,1,1.15,0,.993.993,0,0,1,.523.9v7.7a.842.842,0,0,1-.523.9.832.832,0,0,1-1.046-.1l-2.2-1.3v1.5A1.073,1.073,0,0,1,12.485,13ZM2.55,11.9Zm0,0H12.59V9.4c-.1-.2-.1-.3.209-.4a.485.485,0,0,1,.523,0l2.824,1.7V3.4L13.322,5A.485.485,0,0,1,12.8,5a.537.537,0,0,1-.314-.4V2.1H2.759c-.209,0-.209.1-.209.1Z"
+ transform="translate(-1.4 -1)"
+ />
</g>
+ </g>
{/* </svg> */}
</SvgIcon>
);
@@ -299,11 +322,11 @@
<defs>
<style>.a{"fill:#005699;"}</style>
</defs> */}
- <path
- class="a"
- d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
- transform="translate(-2.9 -2)"
- />
+ <path
+ className="a"
+ d="M11.258,9.562A3.774,3.774,0,0,0,13.965,5.9,3.79,3.79,0,0,0,10.144,2,3.871,3.871,0,0,0,8.95,9.562,7.806,7.806,0,0,0,2.9,17.443a.557.557,0,1,0,1.114,0c0-3.821,2.786-6.925,6.209-6.925s6.209,3.1,6.209,6.925a.557.557,0,0,0,1.114,0C17.388,13.463,14.681,10.119,11.258,9.562ZM7.278,5.9a2.866,2.866,0,1,1,5.731,0,2.787,2.787,0,0,1-2.866,2.786A2.838,2.838,0,0,1,7.278,5.9Z"
+ transform="translate(-2.9 -2)"
+ />
{/* </svg> */}
</SvgIcon>
);
@@ -316,17 +339,17 @@
<defs>
<style>.a{"fill:#005699;"}</style>
</defs> */}
- <g transform="translate(-2 -2.3)">
- <path
- class="a"
- d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
- transform="translate(-1.96 -1.84)"
- />
- <path
- class="a"
- d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
- />
- </g>
+ <g transform="translate(-2 -2.3)">
+ <path
+ className="a"
+ d="M15.88,11.5a4.08,4.08,0,1,0,4.08,4.08A4.1,4.1,0,0,0,15.88,11.5Zm0,.96a3.282,3.282,0,0,1,1.76.56l-4.48,4a3.309,3.309,0,0,1-.4-1.52A3.22,3.22,0,0,1,15.88,12.46Zm0,6.24a3.091,3.091,0,0,1-2.16-.88l4.56-4.08a2.852,2.852,0,0,1,.64,1.84A3.007,3.007,0,0,1,15.88,18.7Z"
+ transform="translate(-1.96 -1.84)"
+ />
+ <path
+ className="a"
+ d="M12,10.94l.56-.32A6.445,6.445,0,0,0,9.92,9.5a3.626,3.626,0,0,0,2.56-3.52A3.555,3.555,0,0,0,8.88,2.3,3.735,3.735,0,0,0,7.76,9.58,7.327,7.327,0,0,0,2,17.02a.547.547,0,0,0,.56.56.547.547,0,0,0,.56-.56c0-3.6,2.64-6.56,5.92-6.56a5.3,5.3,0,0,1,2.88.88A.971.971,0,0,1,12,10.94ZM8.88,8.7A2.68,2.68,0,1,1,11.6,6.06,2.631,2.631,0,0,1,8.88,8.7Z"
+ />
+ </g>
{/* </svg> */}
</SvgIcon>
);
@@ -344,39 +367,45 @@
<defs>
<style>.a{"fill:#005699;"}</style>
</defs> */}
- <g transform="translate(-2 -2)">
- <g transform="translate(2 2)">
- <path
- class="a"
- d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
- />
- </g>
+ <g transform="translate(-2 -2)">
+ <g transform="translate(2 2)">
+ <path
+ className="a"
+ d="M8,0a8,8,0,1,0,8,8A8.024,8.024,0,0,0,8,0ZM8,1.04a6.5,6.5,0,0,1,4.48,1.68L2.72,12.48A6.9,6.9,0,0,1,1.68,5.12,7.081,7.081,0,0,1,8,1.04ZM8,14.96a7.274,7.274,0,0,1-4.56-1.68l9.84-9.76a6.9,6.9,0,0,1,1.04,7.36A7.032,7.032,0,0,1,8,14.96Z"
+ />
</g>
+ </g>
{/* </svg> */}
</SvgIcon>
);
};
export const RoundSaltireIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 16 16">
- <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z"/>
- <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 16">
+ <path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 .888A7.112 7.112 0 1 0 15.112 8 7.12 7.12 0 0 0 8 .888Z" />
+ <path d="M10.837 5.167a.444.444 0 0 0-.628 0l-2.2 2.2-2.214-2.2a.44406306.44406306 0 0 0-.628.628l2.2 2.2-2.2 2.2a.44904009.44904009 0 0 0 .628.642l2.2-2.2 2.2 2.2a.4507918.4507918 0 1 0 .642-.633l-2.2-2.2 2.2-2.209a.445.445 0 0 0 0-.628Z" />
+ </SvgIcon>
+ );
+};
export const TrashBinIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 15.44 16">
- <path d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z" transform="translate(-2.4 -2)"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 15.44 16">
+ <path
+ d="M17.2 4.08h-4.72v-.32A1.776 1.776 0 0 0 10.72 2H9.44a1.776 1.776 0 0 0-1.76 1.76V4H2.96a.56.56 0 1 0 0 1.12h1.12l.56 11.04A1.879 1.879 0 0 0 6.56 18h7.12a1.879 1.879 0 0 0 1.92-1.84l.56-11.04h1.12a.547.547 0 0 0 .56-.56c0-.32-.32-.48-.64-.48Zm-8.48 0v-.32a.631.631 0 0 1 .64-.64h1.28a.631.631 0 0 1 .64.64V4H8.72Zm6.24 1.04-.56 10.96a.8.8 0 0 1-.8.8H6.56a.756.756 0 0 1-.8-.8L5.12 5.12Z"
+ transform="translate(-2.4 -2)"
+ />
+ </SvgIcon>
+ );
+};
export const TwoSheetsIcon = (props) => {
- return (
- <SvgIcon {...props} viewBox="0 0 16 15.68">
- <path d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z" transform="translate(-2 -2.2)"/>
- </SvgIcon>
- )
-}
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 15.68">
+ <path
+ d="M16.72 2.2H7.2a1.264 1.264 0 0 0-1.28 1.28V5.8H3.28A1.264 1.264 0 0 0 2 7.08v9.52a1.264 1.264 0 0 0 1.28 1.28h9.52a1.264 1.264 0 0 0 1.28-1.28v-2.32h2.64A1.264 1.264 0 0 0 18 13V3.48a1.264 1.264 0 0 0-1.28-1.28Zm-3.68 14.4a.212.212 0 0 1-.24.24H3.28a.212.212 0 0 1-.24-.24V7.08a.255.255 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24Zm3.92-3.6a.212.212 0 0 1-.24.24h-2.64V7.08A1.264 1.264 0 0 0 12.8 5.8H6.96V3.48a.212.212 0 0 1 .24-.24h9.52a.212.212 0 0 1 .24.24V13Z"
+ transform="translate(-2 -2.2)"
+ />
+ </SvgIcon>
+ );
+};
diff --git a/client/src/components/welcome.js b/client/src/components/welcome.js
index 24a217a..7960820 100644
--- a/client/src/components/welcome.js
+++ b/client/src/components/welcome.js
@@ -1,41 +1,57 @@
import { Button, Container } from '@mui/material';
import { AnimatePresence, motion } from 'framer-motion';
-import { useState } from 'react'
-import JamiLogo from '../../public/jami-logo-icon.svg'
+import { useState } from 'react';
+import JamiLogo from '../../public/jami-logo-icon.svg';
const list = {
- hidden: { opacity: 0 },
- visible: {opacity: 1,
- transition: {
- when: "beforeChildren",
- staggerChildren: 0.3,
- },
- }
-}
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ when: 'beforeChildren',
+ staggerChildren: 0.3,
+ },
+ },
+};
const item = {
- visible: { opacity: 1, x: 0 },
- hidden: { opacity: 0, x: 0 },
-}
+ visible: { opacity: 1, x: 0 },
+ hidden: { opacity: 0, x: 0 },
+};
export default function WelcomeAnimation(props) {
- const [visible, setVisible] = useState(true)
+ const [visible, setVisible] = useState(true);
- return <Container style={{ textAlign: "center", display:"flex", flexDirection:"column", alignItems:"center" }}>
- <AnimatePresence>
- {visible && <motion.div initial="hidden" animate="visible" exit="hidden" variants={list} onAnimationComplete={a => {
- if (a === "hidden") {
- props.onComplete()
- } else if (!props.showSetup) {
- setVisible(false)
- }
- }}>
- <motion.div variants={item}><JamiLogo size="32px" /></motion.div>
- <motion.h1 variants={item}>Welcome to Jami</motion.h1>
- {props.showSetup &&
+ return (
+ <Container style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+ <AnimatePresence>
+ {visible && (
+ <motion.div
+ initial="hidden"
+ animate="visible"
+ exit="hidden"
+ variants={list}
+ onAnimationComplete={(a) => {
+ if (a === 'hidden') {
+ props.onComplete();
+ } else if (!props.showSetup) {
+ setVisible(false);
+ }
+ }}
+ >
<motion.div variants={item}>
- <Button variant="outlined" onClick={() => setVisible(false)}>Start setup</Button>
- </motion.div>}
- </motion.div>}
- </AnimatePresence>
+ <JamiLogo size="32px" />
+ </motion.div>
+ <motion.h1 variants={item}>Welcome to Jami</motion.h1>
+ {props.showSetup && (
+ <motion.div variants={item}>
+ <Button variant="outlined" onClick={() => setVisible(false)}>
+ Start setup
+ </Button>
+ </motion.div>
+ )}
+ </motion.div>
+ )}
+ </AnimatePresence>
</Container>
-}
\ No newline at end of file
+ );
+}
diff --git a/client/src/contexts/socket.js b/client/src/contexts/socket.js
index ad3b507..1143296 100644
--- a/client/src/contexts/socket.js
+++ b/client/src/contexts/socket.js
@@ -1,9 +1,6 @@
-
-import { createContext } from "react";
+import { createContext } from 'react';
export const SocketContext = createContext();
-export const SocketProvider = ({socket, children}) => (
- <SocketContext.Provider value={socket}>
- {children}
- </SocketContext.Provider>
-)
\ No newline at end of file
+export const SocketProvider = ({ socket, children }) => (
+ <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
+);
diff --git a/client/src/i18n.js b/client/src/i18n.js
index 80d13a8..b9cdf11 100644
--- a/client/src/i18n.js
+++ b/client/src/i18n.js
@@ -1,13 +1,11 @@
-import i18n from "i18next"
-import { initReactI18next } from "react-i18next"
-import translationEn from "../public/locale/en/translation.json"
-import translationFr from "../public/locale/fr/translation.json"
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import translationEn from '../public/locale/en/translation.json';
+import translationFr from '../public/locale/fr/translation.json';
-i18n
-.use(initReactI18next)
-.init({
- debug: process.env.NODE_ENV == "development",
- lng: "en",
+i18n.use(initReactI18next).init({
+ debug: process.env.NODE_ENV == 'development',
+ lng: 'en',
interpolation: {
escapeValue: false,
},
@@ -19,6 +17,6 @@
translation: translationFr,
},
},
-})
+});
-export default i18n
+export default i18n;
diff --git a/client/src/index.js b/client/src/index.js
index fb7917e..a8b2eba 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,16 +1,14 @@
-'use strict'
-import './index.scss'
-import { StrictMode } from 'react'
+'use strict';
+import './index.scss';
+import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
-import App from './App.js'
-import { store } from "../redux/store";
-import { Provider } from "react-redux";
-import { BrowserRouter as Router } from "react-router-dom";
+import App from './App.js';
+import { store } from '../redux/store';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
import './i18n';
// import config from "../sentry-client.config.json"
-import * as Sentry from "@sentry/react";
-import { BrowserTracing } from "@sentry/tracing";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import socketio from 'socket.io-client';
import { SocketProvider } from './contexts/socket.js';
@@ -21,11 +19,11 @@
cacheTime: Infinity, // websocket is responsible to tell when data needs to be updated
},
},
-})
+});
-const socket = socketio()
+const socket = socketio();
-const container = document.getElementById("root");
+const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<Provider store={store}>
@@ -33,7 +31,7 @@
<QueryClientProvider client={queryClient}>
<SocketProvider socket={socket}>
<Router>
- <App/>
+ <App />
</Router>
</SocketProvider>
</QueryClientProvider>
@@ -42,7 +40,7 @@
);
if (import.meta.webpackHot)
- import.meta.webpackHot.accept("./App", () => {
+ import.meta.webpackHot.accept('./App', () => {
try {
render(App);
} catch (e) {
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>
+ );
}
diff --git a/client/src/services/conversation.js b/client/src/services/conversation.js
index 4a68077..1caa40e 100644
--- a/client/src/services/conversation.js
+++ b/client/src/services/conversation.js
@@ -1,46 +1,30 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import axios from "axios"
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
export const useConversationQuery = (accountId, conversationId) => {
- return useQuery(
- ["conversation", accountId, conversationId],
- () => fetchConversation(accountId, conversationId),
- {
- "enabled": !!(accountId && conversationId),
- }
- )
-}
+ return useQuery(['conversation', accountId, conversationId], () => fetchConversation(accountId, conversationId), {
+ enabled: !!(accountId && conversationId),
+ });
+};
export const useMessagesQuery = (accountId, conversationId) => {
- return useQuery(
- ["messages", accountId, conversationId],
- () => fetchMessages(accountId, conversationId),
- {
- "enabled": !!(accountId && conversationId),
- }
- )
-}
+ return useQuery(['messages', accountId, conversationId], () => fetchMessages(accountId, conversationId), {
+ enabled: !!(accountId && conversationId),
+ });
+};
export const useSendMessageMutation = (accountId, conversationId) => {
- const queryClient = useQueryClient();
- return useMutation(
- (message) => (
- axios.post(`/api/accounts/${accountId}/conversations/${conversationId}`, {message})
- ),
- {
- "onSuccess": () => queryClient.invalidateQueries(["messages", accountId, conversationId]),
- }
- )
-}
+ const queryClient = useQueryClient();
+ return useMutation(
+ (message) => axios.post(`/api/accounts/${accountId}/conversations/${conversationId}`, { message }),
+ {
+ onSuccess: () => queryClient.invalidateQueries(['messages', accountId, conversationId]),
+ }
+ );
+};
-const fetchConversation = (accountId, conversationId) => (
- axios
- .get(`/api/accounts/${accountId}/conversations/${conversationId}`)
- .then((result) => result.data)
-)
+const fetchConversation = (accountId, conversationId) =>
+ axios.get(`/api/accounts/${accountId}/conversations/${conversationId}`).then((result) => result.data);
-const fetchMessages = (accountId, conversationId) => (
- axios
- .get(`/api/accounts/${accountId}/conversations/${conversationId}/messages`)
- .then((result) => result.data)
-)
\ No newline at end of file
+const fetchMessages = (accountId, conversationId) =>
+ axios.get(`/api/accounts/${accountId}/conversations/${conversationId}/messages`).then((result) => result.data);
diff --git a/client/src/themes/ThemeDemonstrator.js b/client/src/themes/ThemeDemonstrator.js
index 968a2a5..6f12209 100644
--- a/client/src/themes/ThemeDemonstrator.js
+++ b/client/src/themes/ThemeDemonstrator.js
@@ -1,60 +1,65 @@
-import { Button, Stack, Switch, ThemeProvider, Typography } from "@mui/material"
-import { CancelPictureButton, EditPictureButton, UploadPictureButton, TakePictureButton, InfoButton, TipButton, BackButton, CloseButton } from "../components/buttons"
-import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from "../components/inputs"
-import defaultTheme from './default'
+import { Button, Stack, Switch, ThemeProvider, Typography } from '@mui/material';
+import {
+ CancelPictureButton,
+ EditPictureButton,
+ UploadPictureButton,
+ TakePictureButton,
+ InfoButton,
+ TipButton,
+ BackButton,
+ CloseButton,
+} from '../components/buttons';
+import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from '../components/inputs';
+import defaultTheme from './default';
export const ThemeDemonstrator = () => {
- return (
- <ThemeProvider theme={defaultTheme}>
- <Stack spacing="5px">
- <Stack>
- <Typography variant="h1">Exemple de titre H1</Typography>
- <Typography variant="h2">Exemple de titre H2</Typography>
- <Typography variant="h3">Exemple de titre H3</Typography>
- <Typography variant="h4">Exemple de titre H4</Typography>
- <Typography variant="h5">Exemple de titre H5</Typography>
- <Typography variant="body1">Texte courant principal</Typography>
- <Typography variant="body2">Texte courant secondaire</Typography>
- <Typography variant="caption">Légendes et annotations</Typography>
- </Stack>
- <Stack spacing="5px" padding="5px" width="300px" >
- <Button variant="contained">Bouton primaire</Button>
- <Button variant="outlined">Bouton secondaire</Button>
- <Button variant="text">Bouton tertiaire</Button>
- <Button variant="contained" size="small">Bouton liste préférences</Button>
- </Stack>
- <Stack direction="row" spacing="5px">
- <CancelPictureButton/>
- <EditPictureButton/>
- <UploadPictureButton/>
- <TakePictureButton/>
- </Stack>
- <Stack direction="row" spacing="5px">
- <InfoButton/>
- <TipButton/>
- </Stack>
- <Stack direction="row" spacing="5px">
- <BackButton/>
- <CloseButton/>
- </Stack>
- <Stack>
- <Switch/>
- </Stack>
- <Stack padding="5px" width="300px" >
- <UsernameInput/>
- <UsernameInput
- error
- defaultValue="Cyrille"
- />
- <PasswordInput/>
- <PasswordInput
- error
- defaultValue="SavoirFaireLinux"
- />
- <NickNameInput/>
- <RegularInput/>
- </Stack>
- </Stack>
- </ThemeProvider>
- )
-}
\ No newline at end of file
+ return (
+ <ThemeProvider theme={defaultTheme}>
+ <Stack spacing="5px">
+ <Stack>
+ <Typography variant="h1">Exemple de titre H1</Typography>
+ <Typography variant="h2">Exemple de titre H2</Typography>
+ <Typography variant="h3">Exemple de titre H3</Typography>
+ <Typography variant="h4">Exemple de titre H4</Typography>
+ <Typography variant="h5">Exemple de titre H5</Typography>
+ <Typography variant="body1">Texte courant principal</Typography>
+ <Typography variant="body2">Texte courant secondaire</Typography>
+ <Typography variant="caption">Légendes et annotations</Typography>
+ </Stack>
+ <Stack spacing="5px" padding="5px" width="300px">
+ <Button variant="contained">Bouton primaire</Button>
+ <Button variant="outlined">Bouton secondaire</Button>
+ <Button variant="text">Bouton tertiaire</Button>
+ <Button variant="contained" size="small">
+ Bouton liste préférences
+ </Button>
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <CancelPictureButton />
+ <EditPictureButton />
+ <UploadPictureButton />
+ <TakePictureButton />
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <InfoButton />
+ <TipButton />
+ </Stack>
+ <Stack direction="row" spacing="5px">
+ <BackButton />
+ <CloseButton />
+ </Stack>
+ <Stack>
+ <Switch />
+ </Stack>
+ <Stack padding="5px" width="300px">
+ <UsernameInput />
+ <UsernameInput error defaultValue="Cyrille" />
+ <PasswordInput />
+ <PasswordInput error defaultValue="SavoirFaireLinux" />
+ <NickNameInput />
+ <RegularInput />
+ </Stack>
+ </Stack>
+ </ThemeProvider>
+ );
+};
diff --git a/client/src/themes/default.js b/client/src/themes/default.js
index db10bde..d8b6147 100644
--- a/client/src/themes/default.js
+++ b/client/src/themes/default.js
@@ -1,63 +1,63 @@
-import { createTheme } from "@mui/material";
+import { createTheme } from '@mui/material';
const theme = createTheme({
palette: {
primary: {
- light: "#E5EEF5", // same as "#0056991A"
- main: "#0071C9",
- dark: "#005699",
+ light: '#E5EEF5', // same as "#0056991A"
+ main: '#0071C9',
+ dark: '#005699',
},
error: {
- main: "#CC0022",
+ main: '#CC0022',
},
success: {
- main: "#009980",
+ main: '#009980',
},
},
typography: {
- fontFamily: "Ubuntu",
+ fontFamily: 'Ubuntu',
allVariants: {
- color: "black"
+ color: 'black',
},
h1: {
fontWeight: 400,
- fontSize: "26px",
- lineHeight: "36px",
+ fontSize: '26px',
+ lineHeight: '36px',
},
h2: {
fontWeight: 400,
- fontSize: "22px",
- lineHeight: "30px",
+ fontSize: '22px',
+ lineHeight: '30px',
},
h3: {
fontWeight: 400,
- fontSize: "18px",
- lineHeight: "26px",
+ fontSize: '18px',
+ lineHeight: '26px',
},
h4: {
fontWeight: 500,
- fontSize: "15px",
- lineHeight: "22px",
+ fontSize: '15px',
+ lineHeight: '22px',
},
h5: {
fontWeight: 500,
- fontSize: "13px",
- lineHeight: "19px",
+ fontSize: '13px',
+ lineHeight: '19px',
},
body1: {
fontWeight: 400,
- fontSize: "15px",
- lineHeight: "22px"
+ fontSize: '15px',
+ lineHeight: '22px',
},
body2: {
fontWeight: 400,
- fontSize: "13px",
- lineHeight: "19px",
+ fontSize: '13px',
+ lineHeight: '19px',
},
caption: {
fontWeight: 400,
- fontSize: "12px",
- lineHeight: "16px",
+ fontSize: '12px',
+ lineHeight: '16px',
},
},
components: {
@@ -119,43 +119,43 @@
}
`,
},
- }
-})
+ },
+});
export default createTheme(theme, {
components: {
MuiButton: {
styleOverrides: {
root: {
- height: "46px",
+ height: '46px',
fontWeight: 700,
- fontSize: "15px",
- lineHeight: "17px",
- textTransform: "none",
- borderRadius: "5px",
+ fontSize: '15px',
+ lineHeight: '17px',
+ textTransform: 'none',
+ borderRadius: '5px',
},
sizeSmall: {
- height: "36px",
+ height: '36px',
},
contained: {
background: theme.palette.primary.dark,
- "&:hover": {
+ '&:hover': {
background: theme.palette.primary.main,
},
},
outlined: {
- background: "#FFF",
- borderColor: "#0056995C",
+ background: '#FFF',
+ borderColor: '#0056995C',
color: theme.palette.primary.dark,
- "&:hover": {
+ '&:hover': {
background: theme.palette.primary.light,
borderColor: theme.palette.primary.dark,
},
},
text: {
- background: "#fff",
+ background: '#fff',
color: theme.palette.primary.dark,
- "&:hover": {
+ '&:hover': {
background: theme.palette.primary.light,
},
},
@@ -167,38 +167,38 @@
},
styleOverrides: {
root: {
- width: "60px",
- height: "30px",
+ width: '60px',
+ height: '30px',
padding: 0,
},
switchBase: {
padding: 0,
- "&.Mui-checked": {
+ '&.Mui-checked': {
transform: `translateX(30px)`,
},
},
thumb: {
- width: "28px",
- height: "28px",
+ width: '28px',
+ height: '28px',
border: `1px solid ${theme.palette.primary.dark}`,
- ".Mui-checked.Mui-checked &": {
- width: "30px",
- height: "30px",
- border: "none",
- }
+ '.Mui-checked.Mui-checked &': {
+ width: '30px',
+ height: '30px',
+ border: 'none',
+ },
},
track: {
backgroundColor: theme.palette.primary.light,
- borderRadius: "30px",
+ borderRadius: '30px',
opacity: 1,
- ".Mui-checked.Mui-checked + &": {
+ '.Mui-checked.Mui-checked + &': {
backgroundColor: theme.palette.primary.light,
opacity: 1,
- }
+ },
},
colorPrimary: {
- color: "#fff",
- "&.Mui-checked": {
+ color: '#fff',
+ '&.Mui-checked': {
color: theme.palette.primary.dark,
},
},
@@ -208,7 +208,7 @@
styleOverrides: {
root: {
color: theme.palette.primary.dark,
- "&.Mui-error": {
+ '&.Mui-error': {
color: theme.palette.error.main,
},
},
@@ -217,56 +217,56 @@
Material UI uses "before" for the regular underline.
There is a second underline called "after" placed over "before"
*/
- "&:before": {
+ '&:before': {
borderBottom: `2px solid ${theme.palette.primary.dark}`,
},
- "&:hover:not(.Mui-disabled, .Mui-error):before": {
- borderBottom: "2px solid #03B9E9",
+ '&:hover:not(.Mui-disabled, .Mui-error):before': {
+ borderBottom: '2px solid #03B9E9',
},
- "&:after": {
- borderBottom: "2px solid #03B9E9",
+ '&:after': {
+ borderBottom: '2px solid #03B9E9',
},
- "&:hover:not(.Mui-error):after": {
- borderBottom: "2px solid #03B9E9",
+ '&:hover:not(.Mui-error):after': {
+ borderBottom: '2px solid #03B9E9',
},
},
- }
+ },
},
MuiFormControl: {
styleOverrides: {
root: {
- height: "90px",
+ height: '90px',
},
},
},
MuiFormHelperText: {
styleOverrides: {
root: {
- position: "absolute",
- bottom: "0px",
- fontSize: "15px",
+ position: 'absolute',
+ bottom: '0px',
+ fontSize: '15px',
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
- color: "black",
- fontSize: "15px",
- left: "50%",
- transform: "translate(-50%, 20px)",
- transition: "left .2s, transform .2s",
+ color: 'black',
+ fontSize: '15px',
+ left: '50%',
+ transform: 'translate(-50%, 20px)',
+ transition: 'left .2s, transform .2s',
},
shrink: {
- color: "black",
+ color: 'black',
left: 0,
- transform: "translate(0, 50px) scale(0.75)",
- transition: "left .2s, transform .2s",
- "&.Mui-focused, &.Mui-error": {
- color: "black",
+ transform: 'translate(0, 50px) scale(0.75)',
+ transition: 'left .2s, transform .2s',
+ '&.Mui-focused, &.Mui-error': {
+ color: 'black',
},
},
},
},
},
-})
+});