diff --git a/FrontEnd/package.json b/FrontEnd/package.json index 9f813c66a..4c08fc418 100644 --- a/FrontEnd/package.json +++ b/FrontEnd/package.json @@ -25,7 +25,7 @@ "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-redux": "^8.0.5", - "react-router-dom": "^5.2.0", + "react-router-dom": "^6.11.2", "react-scripts": "^5.0.1", "react-select": "^5.7.3", "react-spinners": "^0.13.8", diff --git a/FrontEnd/src/App.js b/FrontEnd/src/App.js index ddc87ccab..c84c25ff9 100644 --- a/FrontEnd/src/App.js +++ b/FrontEnd/src/App.js @@ -1,7 +1,7 @@ import React from 'react' import { useSelector, useDispatch } from 'react-redux' -import { BrowserRouter } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { QueryClient, QueryClientProvider, @@ -12,6 +12,7 @@ import { ToastContainer } from 'react-toastify' import Authentication from './components/Authentication' import MainRoot from './components/Main/MainRoot' import ConfirmGlobal from './components/CommonComponents/ConfirmGlobal' +import ErrorBoundary from './ErrorBoundary'; import { login, logout } from './actions/login' @@ -27,7 +28,6 @@ import 'react-datepicker/dist/react-datepicker.css' import 'react-calendar/dist/Calendar.css'; //Custom CSS import './assets/styles/orthancToolsJs.scss' -import ErrorBoundary from './ErrorBoundary'; @@ -35,6 +35,7 @@ import ErrorBoundary from './ErrorBoundary'; const App = () => { const dispatch = useDispatch() + const navigate = useNavigate() const username = useSelector((state) => state.OrthancTools.username) const roles = useSelector((state) => state.OrthancTools.roles) @@ -51,9 +52,9 @@ const App = () => { const queryClient = new QueryClient(); return ( - - - + navigate('/')}> + +
{ closeOnClick >
+ {username ? : } - - - - +
+ + + ); } diff --git a/FrontEnd/src/ErrorBoundary.js b/FrontEnd/src/ErrorBoundary.js index 63be35af8..c078a2696 100644 --- a/FrontEnd/src/ErrorBoundary.js +++ b/FrontEnd/src/ErrorBoundary.js @@ -1,6 +1,5 @@ import React from 'react' import { Button, Container, Row } from 'react-bootstrap'; -import { withRouter } from 'react-router-dom'; class ErrorBoundary extends React.Component { state = { hasError: false } @@ -11,8 +10,8 @@ class ErrorBoundary extends React.Component { } handleClick = () => { - this.props.history.push('/') this.setState({ hasError: false }) + this.props.onClickGoMainPage() } render() { @@ -34,4 +33,4 @@ class ErrorBoundary extends React.Component { } } -export default withRouter(ErrorBoundary) \ No newline at end of file +export default ErrorBoundary \ No newline at end of file diff --git a/FrontEnd/src/assets/styles/orthancToolsJs.scss b/FrontEnd/src/assets/styles/orthancToolsJs.scss index 358bbafa4..1dd5409a3 100644 --- a/FrontEnd/src/assets/styles/orthancToolsJs.scss +++ b/FrontEnd/src/assets/styles/orthancToolsJs.scss @@ -37,25 +37,22 @@ body { color: #636A6E; } -.alert-enter { +.main-enter { opacity: 0; - transform: scale(0.9); } -.alert-enter-active { - opacity: 1; - transform: translateX(0); - transition: opacity 300ms, transform 300ms; +.main-enter-active { + opacity: 0.5; + transition: opacity 1000ms } -.alert-exit { +.main-exit { opacity: 1; } -.alert-exit-active { +.main-exit-active { opacity: 0; - transform: scale(0.9); - transition: opacity 300ms, transform 300ms; + transition: opacity 1500ms } .bg-green { @@ -75,19 +72,7 @@ body { } .bg-navbar { - position: fixed; background-color: $color-navbar; - height: 100%; - width: 15%; - top: 0; - margin-left: -12px; - box-shadow: 2px 2px 3px $color-shadow; - z-index: -1; - transition: 1s; - - &-close { - width: 7%; - } } .otjs-navbar { @@ -142,16 +127,11 @@ body { .navbar-image { position: fixed; - left: 4.5rem; top: 1rem; z-index: 1041; - width: 5%; + width: 6%; transition: 1s; - &-close { - left: 1rem; - } - } @@ -232,12 +212,9 @@ body { } .main { - margin-top: 7%; - margin-left: auto; border: 2px solid white; background-color: white; padding: 3rem; - width: 75%; border-radius: 8px; box-shadow: 4px 4px 4px $color-shadow; transition: 1s; @@ -554,7 +531,7 @@ ul { } -.authentification { +.bg-authentification { background-image: url(./../images/wallpaperAuth.jpg); /* Background image is centered vertically and horizontally at all times */ background-position: center center; @@ -683,16 +660,6 @@ code { width: 0%; } -.vertical-center { - min-height: 100%; - /* Fallback for browsers do NOT support vh unit */ - min-height: 100vh; - /* These two lines are counted as one :-) */ - display: flex; - align-items: center; - justify-content: center; -} - .react-toggle { touch-action: pan-x; diff --git a/FrontEnd/src/components/Authentication.js b/FrontEnd/src/components/Authentication.js index 60a9f6b78..be6d90c5a 100644 --- a/FrontEnd/src/components/Authentication.js +++ b/FrontEnd/src/components/Authentication.js @@ -5,7 +5,7 @@ import apis from '../services/apis' import { CSSTransition } from "react-transition-group"; import HelpIcon from '@mui/icons-material/Info'; -import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap'; +import { Button, Col, Container, Form, FormGroup, OverlayTrigger, Row, Tooltip } from 'react-bootstrap'; import { errorMessage } from '../tools/toastify'; export default ({ onLogin }) => { @@ -66,48 +66,43 @@ export default ({ onLogin }) => { return ( -
-
-
{state.errorMessage}
-
-
-
-
-
- Orthanc-Tools-JS -
-
- - - -
-
-
-
-
-
+
+
+ {state.errorMessage} +
+ + + + Orthanc-Tools-JS + + + + + + + + -
+ -
+ -
+ -
+ -
- -
-
-
+ + + +
- + ) } diff --git a/FrontEnd/src/components/Import/ImportDicom/Import.js b/FrontEnd/src/components/Import/ImportDicom/Import.js index 4fb29d8e7..b10d98423 100644 --- a/FrontEnd/src/components/Import/ImportDicom/Import.js +++ b/FrontEnd/src/components/Import/ImportDicom/Import.js @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import { useDispatch } from "react-redux" -import { Prompt } from 'react-router-dom' +import { unstable_usePrompt as Prompt } from 'react-router-dom' import { Modal, Row, Col, ProgressBar } from 'react-bootstrap' import MyDropzone from '../../CommonComponents/MyDropzone' @@ -228,11 +228,11 @@ export default () => { - addFile(acceptedFiles)} message={inProgress ? "Uploading" : "Drop Dicom Folder or ZIP"} - /> + /> { -
+
diff --git a/FrontEnd/src/components/Main/MainRoot.js b/FrontEnd/src/components/Main/MainRoot.js index f60b7ee61..a8c73e9da 100644 --- a/FrontEnd/src/components/Main/MainRoot.js +++ b/FrontEnd/src/components/Main/MainRoot.js @@ -1,8 +1,8 @@ import React from 'react' -import { Row, Container } from 'react-bootstrap'; +import { Row, Container, Col } from 'react-bootstrap'; import { CSSTransition, TransitionGroup } from "react-transition-group"; -import { Route, Switch, withRouter } from 'react-router-dom' +import { Route, Routes, useLocation } from 'react-router-dom' import AdminRootPanel from '../Admin/AdminRootPanel' import AnonRoot from '../Anonymize/AnonRoot' @@ -24,44 +24,53 @@ import MyDicomRoot from '../MyDicom/MyDicomRoot'; const MainRoot = ({ onLogout, username, roles }) => { return ( - <> - - - - - - - - - -