diff --git a/environment.local.js b/environment.local.js index 09b21004..c60639af 100644 --- a/environment.local.js +++ b/environment.local.js @@ -2,22 +2,22 @@ window.env = { VITE_SECURE_TRANSPORT_ENABLED: false, // Reconmap API's URL including protocol and port but not trailing slash - VITE_DEFAULT_API_URL: 'http://localhost:5510', + VITE_DEFAULT_API_URL: "http://localhost:5510", // hostname:port for the Reconmap's notifications service - VITE_NOTIFICATIONS_SERVICE_HOST_PORT: 'localhost:5520', + VITE_NOTIFICATIONS_SERVICE_HOST_PORT: "localhost:5520", // hostname:port for the Reconmap's agent service - VITE_AGENT_SERVICE_HOST_PORT: 'localhost:5520', + VITE_AGENT_SERVICE_HOST_PORT: "localhost:5520", - VITE_LOGO_URL: 'logo-name.png', + VITE_LOGO_URL: "/logo-name.png", // Web application context path e.g. / (for http://localhost:5500) or /reconmap (for http://localhost:5500/reconmap) // VITE_CONTEXT_PATH: '/reconmap' VITE_KEYCLOAK_CONFIG: { - url: 'http://localhost:8080', - realm: 'reconmap', - clientId: 'web-client' - } + url: "http://localhost:8080", + realm: "reconmap", + clientId: "web-client", + }, }; diff --git a/index.html b/index.html index 919071d2..fc180357 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - +
diff --git a/src/Configuration.ts b/src/Configuration.ts index 231ec481..bf44d1d4 100644 --- a/src/Configuration.ts +++ b/src/Configuration.ts @@ -1,7 +1,6 @@ import { KeycloakConfig } from "keycloak-js"; const Configuration = { - isSecureTransportEnabled: (): string => window.env.VITE_SECURE_TRANSPORT_ENABLED, getDefaultApiUrl: (): string => window.env.VITE_DEFAULT_API_URL, @@ -10,15 +9,16 @@ const Configuration = { getAgentServiceHostPort: (): number => window.env.VITE_AGENT_SERVICE_HOST_PORT, - getContextPath: (): string => window.env.VITE_CONTEXT_PATH || '/', + getContextPath: (): string => window.env.VITE_CONTEXT_PATH || "/", - getLogoUrl: (): string => window.env.VITE_LOGO_URL || '/logo-name.png', + getLogoUrl: (): string => window.env.VITE_LOGO_URL || "/logo-name.png", - getKeycloakConfig: (): KeycloakConfig => window.env.VITE_KEYCLOAK_CONFIG || { - url: 'http://localhost:8080', - realm: 'reconmap', - clientId: 'web-client' - } + getKeycloakConfig: (): KeycloakConfig => + window.env.VITE_KEYCLOAK_CONFIG || { + url: "http://localhost:8080", + realm: "reconmap", + clientId: "web-client", + }, }; export default Configuration; diff --git a/src/components/attachments/Dropzone.jsx b/src/components/attachments/Dropzone.jsx index 93690306..0b536574 100644 --- a/src/components/attachments/Dropzone.jsx +++ b/src/components/attachments/Dropzone.jsx @@ -13,25 +13,16 @@ const baseStyle = { padding: "20px", borderWidth: "var(--borderWidth)", borderRadius: "var(--borderRadius)", - borderColor: "var(--color-gray)", borderStyle: "dashed", - backgroundColor: "var(--black)", - color: "var(--text-color)", outline: "none", transition: "border .24s ease-in-out", }; -const activeStyle = { - borderColor: "var(--yellow)", -}; +const activeStyle = {}; -const acceptStyle = { - borderColor: "var(--green)", -}; +const acceptStyle = {}; -const rejectStyle = { - borderColor: "var(--red)", -}; +const rejectStyle = {}; const AttachmentsDropzone = ({ parentType, parentId, onUploadFinished = null, attachmentId = null }) => { const onFileDrop = (newFiles) => { diff --git a/src/components/attachments/ImageDropzone.jsx b/src/components/attachments/ImageDropzone.jsx index 852495a3..4cb8375d 100644 --- a/src/components/attachments/ImageDropzone.jsx +++ b/src/components/attachments/ImageDropzone.jsx @@ -1,77 +1,78 @@ -import PrimaryButton from 'components/ui/buttons/Primary'; -import { useMemo, useState } from 'react'; -import { useDropzone } from 'react-dropzone'; -import secureApiFetch from 'services/api'; +import PrimaryButton from "components/ui/buttons/Primary"; +import { useMemo, useState } from "react"; +import { useDropzone } from "react-dropzone"; +import secureApiFetch from "services/api"; const baseStyle = { flex: 1, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: '20px', - borderWidth: 'var(--borderWidth)', - borderRadius: 'var(--borderRadius)', - borderColor: 'var(--color-gray)', - borderStyle: 'dashed', - backgroundColor: 'var(--black)', - color: 'var(--text-color)', - outline: 'none', - transition: 'border .24s ease-in-out' + display: "flex", + flexDirection: "column", + alignItems: "center", + padding: "20px", + borderWidth: "var(--borderWidth)", + borderRadius: "var(--borderRadius)", + borderStyle: "dashed", + outline: "none", + transition: "border .24s ease-in-out", }; const activeStyle = { - borderColor: 'var(--yellow)', + borderColor: "var(--yellow)", }; const acceptStyle = { - borderColor: 'var(--green)' + borderColor: "var(--green)", }; const rejectStyle = { - borderColor: 'var(--red)' + borderColor: "var(--red)", }; -const AttachmentsImageDropzone = ({ parentType, parentId, onUploadFinished = null, uploadFinishedParameter = null, attachmentId = null, maxFileCount = Infinity }) => { +const AttachmentsImageDropzone = ({ + parentType, + parentId, + onUploadFinished = null, + uploadFinishedParameter = null, + attachmentId = null, + maxFileCount = Infinity, +}) => { const onFileDrop = (newFiles) => { setAcceptedFiles(newFiles); }; - const { - getRootProps, getInputProps, - isDragActive, isDragAccept, isDragReject - } = useDropzone({ + const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({ onDrop: onFileDrop, - accept: 'image/jpeg,image/png' + accept: "image/jpeg,image/png", }); const [acceptedFiles, setAcceptedFiles] = useState([]); - const files = acceptedFiles.map(file => ( + const files = acceptedFiles.map((file) => (
  • {file.path} - {file.size} bytes
    • )); - const onUploadButtonClick = ev => { + const onUploadButtonClick = (ev) => { const formData = new FormData(); - formData.append('parentType', parentType); - formData.append('parentId', parentId); - acceptedFiles.forEach(file => { - formData.append('attachment[]', file); - }) + formData.append("parentType", parentType); + formData.append("parentId", parentId); + acceptedFiles.forEach((file) => { + formData.append("attachment[]", file); + }); - let uri = '/attachments'; + let uri = "/attachments"; if (attachmentId) { - formData.append('attachmentId', attachmentId); + formData.append("attachmentId", attachmentId); uri = `/attachments/${attachmentId}`; } secureApiFetch(uri, { - method: 'POST', - body: formData + method: "POST", + body: formData, }) - .then(response => response.json()) - .then(json => { + .then((response) => response.json()) + .then((json) => { setAcceptedFiles([]); if (onUploadFinished) { if (!attachmentId && maxFileCount === 1) { @@ -82,36 +83,38 @@ const AttachmentsImageDropzone = ({ parentType, parentId, onUploadFinished = nul } } }) - .catch(err => console.error(err)); - } + .catch((err) => console.error(err)); + }; - const style = useMemo(() => ({ - ...baseStyle, - ...(isDragActive ? activeStyle : {}), - ...(isDragAccept ? acceptStyle : {}), - ...(isDragReject ? rejectStyle : {}), - ...{ maxSize: maxFileCount }, - }), [ - isDragActive, - isDragAccept, - isDragReject, - maxFileCount - ]); + const style = useMemo( + () => ({ + ...baseStyle, + ...(isDragActive ? activeStyle : {}), + ...(isDragAccept ? acceptStyle : {}), + ...(isDragReject ? rejectStyle : {}), + ...{ maxSize: maxFileCount }, + }), + [isDragActive, isDragAccept, isDragReject, maxFileCount], + ); - return
    -
    - -

    Drag and drop some image(s) here, or click to select images

    - (Only *.jpeg and *.png images will be accepted) + return ( +
    +
    + +

    Drag and drop some image(s) here, or click to select images

    + (Only *.jpeg and *.png images will be accepted) +
    + +
    + + Upload +
    - -
    - Upload -
    -} + ); +}; export default AttachmentsImageDropzone; diff --git a/src/components/badges/UserAvatar.jsx b/src/components/badges/UserAvatar.jsx index e8916836..9644d62b 100644 --- a/src/components/badges/UserAvatar.jsx +++ b/src/components/badges/UserAvatar.jsx @@ -1,25 +1,7 @@ +import VectorImage from "./UserAvatar.svg?react"; + const UserAvatar = ({ email, size = "sm", onClick }) => { - return ( - - - - - - - - - - - - ); + return ; }; export default UserAvatar; diff --git a/src/components/badges/UserAvatar.svg b/src/components/badges/UserAvatar.svg new file mode 100644 index 00000000..64fa1775 --- /dev/null +++ b/src/components/badges/UserAvatar.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/badges/UserRoleBadge.jsx b/src/components/badges/UserRoleBadge.jsx index 50bd446e..0ed480f4 100644 --- a/src/components/badges/UserRoleBadge.jsx +++ b/src/components/badges/UserRoleBadge.jsx @@ -1,25 +1,21 @@ const UserRoleBadge = ({ role }) => { - const roles = { - 'administrator': 'red', - 'superuser': 'blue', - 'user': 'green', - 'client': 'yellow', - } + administrator: "red", + superuser: "blue", + user: "green", + client: "yellow", + }; - const color = roles.hasOwnProperty(role) ? roles[role] : 'yellow'; + const color = roles.hasOwnProperty(role) ? roles[role] : "yellow"; const styles = { - color: `var(--${color},white)`, - backgroundColor: `var(--${color}Dark)`, padding: `var(--paddingBox, .3rem .8rem)`, - borderRadius: 'var(--borderRadius, 3px)', + borderRadius: "var(--borderRadius, 3px)", border: `var(--borderWidth,2px) solid transparent`, fontSize: `var(--fontSizeXsmall)`, - fontWeight: 'var(--fontBold)', - } + }; - return {role} -} + return {role}; +}; export default UserRoleBadge; diff --git a/src/components/badges/VulnerabilityBadge.jsx b/src/components/badges/VulnerabilityBadge.jsx index 9a288b5a..fe5431cb 100644 --- a/src/components/badges/VulnerabilityBadge.jsx +++ b/src/components/badges/VulnerabilityBadge.jsx @@ -1,21 +1,19 @@ -import {Link} from 'react-router-dom' -import {IconShieldExclamation} from '../ui/Icons' +import { Link } from "react-router-dom"; +import { IconShieldExclamation } from "../ui/Icons"; -export default function VulnerabilityBadge({vulnerability}) { +export default function VulnerabilityBadge({ vulnerability }) { const styles = { badge: { - color: `var(--primary-color)`, - alignItems: 'center', + alignItems: "center", display: `inline-flex`, - borderRadius: 'var(--borderRadius, 3px)', - fontWeight: 'var(--fontBold)', + borderRadius: "var(--borderRadius, 3px)", + }, + }; - } - } - - return ( - + return ( + + {vulnerability.summary} - ) + ); } diff --git a/src/components/clients/Details.jsx b/src/components/clients/Details.jsx index 8c776230..92cbc56e 100644 --- a/src/components/clients/Details.jsx +++ b/src/components/clients/Details.jsx @@ -127,12 +127,12 @@ const ClientDetails = () => { }); }; + useDocumentTitle(client ? `${client.name} client` : null); + if (!client) { return ; } - useDocumentTitle(`${client.name} client`); - return (
    @@ -274,9 +274,9 @@ const ClientDetails = () => { {0 === contacts.length && } - {contacts.map((contact) => ( + {contacts.map((contact, index) => ( <> - + {contact.kind} {contact.name} {contact.role} diff --git a/src/components/clients/Link.jsx b/src/components/clients/Link.jsx index 4cf5d895..959a6a99 100644 --- a/src/components/clients/Link.jsx +++ b/src/components/clients/Link.jsx @@ -2,28 +2,26 @@ import { Link } from "react-router-dom"; import { IconBriefcase } from "../ui/Icons"; const ClientLink = ({ clientId, children }) => { - if(!clientId) { - return '(not set)'; + if (!clientId) { + return "(not set)"; } const styles = { badge: { - alignItems: 'center', + alignItems: "center", display: `inline-flex`, - borderRadius: 'var(--borderRadius)', - fontWeight: 'var(--fontBold)', - fontSize: 'var(--fontSizeSmall)', - backgroundColor: 'var(--black)', - padding: 'var(--paddingBadge)', - } - } + borderRadius: "var(--borderRadius)", + fontSize: "var(--fontSizeSmall)", + padding: "var(--paddingBadge)", + }, + }; - return - - {children} - -} + return ( + + + {children} + + ); +}; export default ClientLink; diff --git a/src/components/clients/List.jsx b/src/components/clients/List.jsx index e465907a..e95dd33b 100644 --- a/src/components/clients/List.jsx +++ b/src/components/clients/List.jsx @@ -63,7 +63,7 @@ const ClientsList = () => { {client.url ? {client.url} : "-"} {client.num_contacts} - + Edit destroy(client.id)} /> diff --git a/src/components/commands/Badge.jsx b/src/components/commands/Badge.jsx index 0be85a29..4699b693 100644 --- a/src/components/commands/Badge.jsx +++ b/src/components/commands/Badge.jsx @@ -1,23 +1,21 @@ -import { Link } from 'react-router-dom' -import { IconTerminal } from '../ui/Icons' +import { Link } from "react-router-dom"; +import { IconTerminal } from "../ui/Icons"; const CommandBadge = ({ command }) => { const styles = { badge: { - color: `var(--green)`, - alignItems: 'center', + alignItems: "center", display: `inline-flex`, - borderRadius: 'var(--borderRadius, 3px)', - fontWeight: 'var(--fontBold)', - } - } + borderRadius: "var(--borderRadius, 3px)", + }, + }; return ( {command.name} - ) -} + ); +}; export default CommandBadge; diff --git a/src/components/commands/Outputs.jsx b/src/components/commands/Outputs.jsx index 93bf82d5..9235a3c3 100644 --- a/src/components/commands/Outputs.jsx +++ b/src/components/commands/Outputs.jsx @@ -120,7 +120,7 @@ const CommandOutputs = ({ command }) => { {commandOutput.submitter_name} - + onViewClick(ev, commandOutput.id)}> View diff --git a/src/components/commands/Table.jsx b/src/components/commands/Table.jsx index 14f058be..92fc51f1 100644 --- a/src/components/commands/Table.jsx +++ b/src/components/commands/Table.jsx @@ -32,7 +32,7 @@ const CommandsTable = ({ commands, onDeleteCallback = null }) => { {command.output_parser ?? "-"} - + Edit {onDeleteCallback && onDeleteCallback(command.id)} />} diff --git a/src/components/documents/Badge.jsx b/src/components/documents/Badge.jsx index 1cb2dce2..4c14b5dd 100644 --- a/src/components/documents/Badge.jsx +++ b/src/components/documents/Badge.jsx @@ -1,21 +1,21 @@ -import { Link } from 'react-router-dom' -import { IconDocument } from '../ui/Icons' +import { Link } from "react-router-dom"; +import { IconDocument } from "../ui/Icons"; const DocumentBadge = ({ document }) => { const styles = { badge: { - color: `var(--text-color)`, - alignItems: 'center', + alignItems: "center", display: `inline-flex`, - borderRadius: 'var(--borderRadius, 3px)', - fontWeight: 'var(--fontBold)', - } - } + borderRadius: "var(--borderRadius, 3px)", + }, + }; - return - - {document.title} - -} + return ( + + + {document.title} + + ); +}; export default DocumentBadge; diff --git a/src/components/form/NativeButton.tsx b/src/components/form/NativeButton.tsx index b894ecff..ad38f82d 100644 --- a/src/components/form/NativeButton.tsx +++ b/src/components/form/NativeButton.tsx @@ -1,7 +1,7 @@ import styles from './NativeButton.module.css'; const NativeButton = ({ children, ...props }: any) => { - return + return } export default NativeButton; diff --git a/src/components/form/NativeTabs.tsx b/src/components/form/NativeTabs.tsx index 3e06bce4..a4e30308 100644 --- a/src/components/form/NativeTabs.tsx +++ b/src/components/form/NativeTabs.tsx @@ -10,7 +10,7 @@ const NativeTabs: React.FC = ({ labels, tabIndex, tabIndexSette return (
      - {labels.map((label, index) => ( + {labels.filter((value) => value).map((label, index) => (
    • { e.preventDefault(); diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx index 59648fc2..f3811aff 100644 --- a/src/components/layout/Header.jsx +++ b/src/components/layout/Header.jsx @@ -17,9 +17,9 @@ const LINKS = [ const Header = () => { const { isAuth, user } = useContext(AuthContext); return ( -