fix api calls for contacts CRUD and start adding styles for dropdown in conversation list
Change-Id: I7874ddef22e95a26b4ab99b3ae974b204e678c59
diff --git a/JamiDaemon.js b/JamiDaemon.js
index 7f92f38..bf4ed7d 100755
--- a/JamiDaemon.js
+++ b/JamiDaemon.js
@@ -331,9 +331,9 @@
return account.getConversation(conversationId)
return null
}
- /*getAccountDetails(accountId) {
- return this.mapToJs(this.dring.getAccountDetails(accountId))
- }*/
+ getAccountDetails(accountId) {
+ return JamiDaemon.mapToJs(this.dring.getAccountDetails(accountId))
+ }
setAccountDetails(accountId, details) {
this.dring.setAccountDetails(accountId, this.mapToNative(details))
}
diff --git a/client/src/App.js b/client/src/App.js
index b10d303..77bf4ea 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -19,13 +19,7 @@
import WelcomeAnimation from './components/welcome'
import defaultTheme from './themes/default'
import ContactList from './components/ContactList';
-
-const theme = createTheme();
-const useStyles = makeStyles((theme) => {
- root: {
- // some CSS that access to theme
- }
-})
+import { ThemeDemonstrator } from './themes/ThemeDemonstrator';
// import { useSelector, useDispatch } from 'react-redux'
// import { useAppSelector, useAppDispatch } from '../redux/hooks'
@@ -88,6 +82,7 @@
<Route path="jami" element={<JamiAccountDialog />} />
</Route>
<Route path="/Contacts" element={<ContactList />} />
+ <Route path="/Theme" element={<ThemeDemonstrator />} />
<Route path="/setup" element={<ServerSetup />} />
<Route path="/" index element={<Home />} />
<Route path="*" element={<NotFoundPage />} />
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index b15238f..ec04cef 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -28,6 +28,7 @@
const [modalIsOpen, setIsOpen] = useState(false);
const [modalDetailsIsOpen, setModalDetailsIsOpen] = useState(false);
const [modalDeleteIsOpen, setModalDeleteIsOpen] = useState(false);
+ const [blockOrRemove, setBlockOrRemove] = useState(true);
const openModal = () => setIsOpen(true);
const openModalDetails = () => setModalDetailsIsOpen(true);
@@ -41,34 +42,47 @@
const getContactDetails = () => {
const controller = new AbortController();
authManager
- .fetch(`/api/accounts/${accountId}/contacts/${currentContact.id}`, {
+ .fetch(`/api/accounts/${accountId}/contacts/details/${currentContact.id}`, {
signal: controller.signal,
})
.then((res) => res.json())
.then((result) => {
- // setContacts(result);
console.log("CONTACT LIST - DETAILS: ", result);
})
- .catch((e) => console.log("ERROR 2", e));
+ .catch((e) => console.log("ERROR GET CONTACT DETAILS: ", e));
};
- const removeContact = () => {};
-
- const blockContact = () => {};
-
+ const removeOrBlock = (typeOfRemove) => {
+ console.log("REMOVE");
+ setBlockOrRemove(false);
+ const controller = new AbortController();
+ authManager
+ .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));
+ closeModalDelete();
+ };
useEffect(() => {
const controller = new AbortController();
authManager
- .fetch(`/api/accounts/${accountId}/conversations`, {
+ .fetch(`/api/accounts/${accountId}/contacts`, {
signal: controller.signal,
})
.then((res) => res.json())
.then((result) => {
+ console.log("CONTACTS: ", result)
setContacts(result);
});
return () => controller.abort();
- }, []);
+ }, [blockOrRemove]);
return (
<div className="rooms-list">
@@ -95,6 +109,7 @@
<div
onClick={() => {
console.log("open dialog Supprimer: ");
+ setBlockOrRemove(false);
closeModal();
openModalDelete();
}}
@@ -106,6 +121,7 @@
<div
onClick={() => {
console.log("open dialog BLOCK: ");
+ setBlockOrRemove(true);
closeModal();
openModalDelete();
}}
@@ -132,16 +148,23 @@
style={customStyles}
contentLabel="Merci de confirmer"
>
- Voulez vous vraiment supprimer ce contact?
- <button onClick={closeModalDelete}>Bloquer</button>
+ Voulez vous vraiment {blockOrRemove ? "bloquer" : "supprimer"} ce
+ contact?
+ <br />
+ {blockOrRemove ? (
+ <button onClick={() => removeOrBlock("block")}>Bloquer</button>
+ ) : (
+ <button onClick={() => removeOrBlock("remove")}>Supprimer</button>
+ )}
<button onClick={closeModalDelete}>Annuler</button>
</Modal>
<List>
- {contacts.map((contact) => (
+ {contacts?.map((contact) => (
<ListItem
button
alignItems="flex-start"
+ key={contact.id}
// selected={isSelected}
onClick={() => {
setCurrentContact(contact);
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index 4805307..6806781 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -7,6 +7,7 @@
import Typography from '@mui/material/Typography';
export default function ConversationList(props) {
+ console.log(props)
return (
<div className="rooms-list">
<List>
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index b45f562..140ede2 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,25 +1,55 @@
-import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
-import React, { useState } from "react";
-import Conversation from '../../../model/Conversation'
-import { useNavigate, useParams } from "react-router-dom"
-import ConversationAvatar from './ConversationAvatar'
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
-import { Person } from "@mui/icons-material";
import authManager from '../AuthManager'
+import ConversationAvatar from './ConversationAvatar'
+import Conversation from '../../../model/Conversation'
+import React, { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom"
+import { Person } from "@mui/icons-material";
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
+import { Button, Stack, Switch, ThemeProvider, Typography } from "@mui/material"
+import { CloseButton } from './buttons';
+import { AudioCallIcon, BlockContactIcon, ContactDetailsIcon, CrossIcon, MessageIcon, RemoveContactIcon, VideoCallIcon } from './svgIcons';
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%)",
+ // borderRadius: "5px 20px 20px 5px",
+ // boxShadow; ""
+ // fontSize: "12px",
+ // padding: "16px"
+
+ // top: "1364px",
+ left: "94px",
+ width: "164px",
+ 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/36px Ubuntu",
+ letterSpacing: "0px",
+ color: "#000000",
},
};
+const stackStyles = {
+ flexDirection: "row",
+ marginBottom: "5px",
+ // spacing: "10px",
+ flex: 1,
+ alignItems: "center",
+ // justifyContent: "space-around"
+};
+
export default function ConversationListItem(props) {
const { conversationId, contactId } = useParams();
const conversation = props.conversation;
@@ -101,50 +131,72 @@
contentLabel="Example Modal"
>
{/* <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2> */}
- <button onClick={closeModal}>close</button>
-
- <div>
- <Person /> Démarrer appel vidéo
- </div>
- <br />
-
- <div>
- <Person /> Démarrer appel audio
- </div>
- <br />
-
- <div
+ {/* <button onClick={closeModal}>close</button> */}
+ <Stack
onClick={() => {
- console.log("open dialog Supprimer: ");
+ navigate(`/account/${conversation.getAccountId()}/${uri}`);
closeModal();
- openModalDelete();
}}
+ {...stackStyles}
>
- <Person /> Supprimer contact
- </div>
- <br />
+ <div
+ style={{
+ marginTop: "24px",
+ }}
+ >
+ <MessageIcon />
+ </div>
+ <div>Message</div>
+ </Stack>
+ <Stack {...stackStyles}>
+ <AudioCallIcon />
+ <div>
+ Démarrer appel audio
- <div
- onClick={() => {
- console.log("open dialog BLOCK: ");
- closeModal();
- openModalDelete();
- }}
- >
- <Person /> Bloquer le contact
- </div>
- <br />
+ </div>
+ </Stack>
- <div
+ <Stack {...stackStyles}>
+ <VideoCallIcon /> Démarrer appel vidéo
+ </Stack>
+
+ <Stack {...stackStyles}>
+ <CrossIcon /> Fermer la conversation
+ </Stack>
+
+ <Stack
onClick={() => {
console.log("open details contact for: ");
closeModal();
openModalDetails();
getAccountDetails(conversation.getAccountId());
}}
+ {...stackStyles}
>
- <Person /> Détails de la conversation
- </div>
+ <ContactDetailsIcon /> Détails de la conversation
+ </Stack>
+
+ <Stack
+ onClick={() => {
+ console.log("open dialog BLOCK: ");
+ closeModal();
+ openModalDelete();
+ }}
+ {...stackStyles}
+ >
+ <BlockContactIcon /> Bloquer le contact
+ </Stack>
+
+ <Stack
+ onClick={() => {
+ console.log("open dialog Supprimer: ");
+ closeModal();
+ openModalDelete();
+ }}
+ {...stackStyles}
+ >
+ <RemoveContactIcon /> Supprimer contact
+ </Stack>
</Modal>
<Modal
@@ -190,9 +242,9 @@
button
alignItems="flex-start"
selected={isSelected}
- onClick={() =>
- navigate(`/account/${conversation.getAccountId()}/${uri}`)
- }
+ // onClick={() =>
+ // navigate(`/account/${conversation.getAccountId()}/${uri}`)
+ // }
>
<ListItemAvatar>
<ConversationAvatar
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index 5f5dc35..839a6d1 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -146,7 +146,7 @@
export const PaperClipIcon = (props) => {
return(
<SvgIcon {...props} viewBox="0 0 12.208 25.75">
- <path
+ <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"
/>
@@ -173,10 +173,162 @@
}
export const RoundCrossIcon = (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 MessageIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 14.554">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="14.554"
+ viewBox="0 0 16 14.554"
+ >
+ <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>
+ </g>
+ </svg>
+ </SvgIcon>
+ );
+};
+
+export const AudioCallIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 15.338 16">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="15.338"
+ height="16"
+ viewBox="0 0 15.338 16"
+ >
+ <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>
+ </g>
+ </svg>
+ </SvgIcon>
+ );
+};
+
+export const VideoCallIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 12">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="12"
+ viewBox="0 0 16 12"
+ >
+ <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>
+ </svg>
+ </SvgIcon>
+ );
+};
+
+export const ContactDetailsIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 14.647 16">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="14.647"
+ height="16"
+ viewBox="0 0 14.647 16"
+ >
+ <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)"
+ />
+ </svg>
+ </SvgIcon>
+ );
+};
+
+export const BlockContactIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 15.52">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52">
+ <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>
+ </svg>
+ </SvgIcon>
+ );
+};
+
+export const RemoveContactIcon = (props) => {
+ return (
+ <SvgIcon {...props} viewBox="0 0 16 16">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ >
+ <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>
+ </svg>
+ </SvgIcon>
+ );
+};
diff --git a/client/src/themes/icons/Block_Black_24dp.svg b/client/src/themes/icons/Block_Black_24dp.svg
new file mode 100644
index 0000000..0518586
--- /dev/null
+++ b/client/src/themes/icons/Block_Black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.52" viewBox="0 0 16 15.52"><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></svg>
\ No newline at end of file
diff --git a/client/src/themes/icons/CameraOff_Black_24dp.svg b/client/src/themes/icons/CameraOff_Black_24dp.svg
new file mode 100644
index 0000000..daf0afb
--- /dev/null
+++ b/client/src/themes/icons/CameraOff_Black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12"><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></svg>
\ No newline at end of file
diff --git "a/client/src/themes/icons/Icones_Outline\0501\051.svg" "b/client/src/themes/icons/Icones_Outline\0501\051.svg"
new file mode 100644
index 0000000..d53d60f
--- /dev/null
+++ "b/client/src/themes/icons/Icones_Outline\0501\051.svg"
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.338" height="16" viewBox="0 0 15.338 16"><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></g></svg>
\ No newline at end of file
diff --git "a/client/src/themes/icons/Icones_Outline\0502\051.svg" "b/client/src/themes/icons/Icones_Outline\0502\051.svg"
new file mode 100644
index 0000000..4617895
--- /dev/null
+++ "b/client/src/themes/icons/Icones_Outline\0502\051.svg"
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><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></svg>
\ No newline at end of file
diff --git a/client/src/themes/icons/Icones_Outline.svg b/client/src/themes/icons/Icones_Outline.svg
new file mode 100644
index 0000000..b9c69ca
--- /dev/null
+++ b/client/src/themes/icons/Icones_Outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14.554" viewBox="0 0 16 14.554"><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></g></svg>
\ No newline at end of file
diff --git a/client/src/themes/icons/Profil_Black_24dp.svg b/client/src/themes/icons/Profil_Black_24dp.svg
new file mode 100644
index 0000000..49b9807
--- /dev/null
+++ b/client/src/themes/icons/Profil_Black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.647" height="16" viewBox="0 0 14.647 16"><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)"/></svg>
\ No newline at end of file
diff --git a/client/src/themes/icons/noun-plus-2310784.svg b/client/src/themes/icons/noun-plus-2310784.svg
new file mode 100644
index 0000000..73f9260
--- /dev/null
+++ b/client/src/themes/icons/noun-plus-2310784.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.335" height="23.335" viewBox="0 0 23.335 23.335"><defs><style>.a{fill:#005699;stroke:#fff;stroke-width:0.5px;}</style></defs><g transform="translate(685.089 -711.252) rotate(45)"><path class="a" d="M35,979.362a1.044,1.044,0,0,0-1.043,1.044v5.913H28.043a1.044,1.044,0,0,0,0,2.087h5.913v5.913a1.043,1.043,0,0,0,2.087,0v-5.913h5.913a1.044,1.044,0,0,0,0-2.087H36.043v-5.913A1.044,1.044,0,0,0,35,979.362Z"/></g></svg>
\ No newline at end of file
diff --git a/routes/jami.js b/routes/jami.js
index cbe3286..6340ddb 100644
--- a/routes/jami.js
+++ b/routes/jami.js
@@ -94,8 +94,47 @@
} else res.status(404).end();
});
+ accountRouter.get("/contacts/details/:contactId", (req, res) => {
+ console.log(
+ `Get contact ${req.params.contactId} details for ${req.params.accountId}`
+ );
+ const account = this.jami.getAccount(req.params.accountId);
+ if (account) {
+ let rep = this.jami.getContactDetails(
+ req.params.accountId,
+ req.params.contactId
+ );
+ console.log(rep);
+ res.json(rep);
+ } else res.status(404).end();
+ });
+ accountRouter.delete("/contacts/remove/:contactId", async (req, res) => {
+ console.log("REMOVED CONTACT: ", req.params.contactId);
+ const account = this.jami.getAccount(req.params.accountId);
+ if (account) {
+ let rep = this.jami.removeContact(
+ req.params.accountId,
+ req.params.contactId
+ );
+ res.json(rep);
+ } else res.status(404).end();
+ res.status(200).end();
+ });
+
+ accountRouter.delete("/contacts/block/:contactId/", async (req, res) => {
+ console.log("REMOVED AND BLOCKED CONTACT: ", req.params.contactId);
+ const account = this.jami.getAccount(req.params.accountId);
+ if (account) {
+ let rep = this.jami.blockContact(
+ req.params.accountId,
+ req.params.contactId
+ );
+ res.json(rep);
+ } else res.status(404).end();
+ res.status(200).end();
+ });
// Default modertors
