Merge pull request #807 from salimkanoun/Salim

Salim
salimkanoun · May 18, 2023 · e7b465a · e7b465a
2 parents e718bab + 98bbd42
commit e7b465a
Show file tree

Hide file tree

Showing 16 changed files with 181 additions and 270 deletions.
diff --git 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
@@ -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,14 +28,14 @@ import 'react-datepicker/dist/react-datepicker.css'
 import 'react-calendar/dist/Calendar.css';
 //Custom CSS
 import './assets/styles/orthancToolsJs.scss'
-import ErrorBoundary from './ErrorBoundary';
 
 
 
 // Configuring Toastify params that will be used all over the app
 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 (
-        <BrowserRouter>
-            <ErrorBoundary>
-                <QueryClientProvider client={queryClient}>
+        <ErrorBoundary onClickGoMainPage={() => navigate('/')}>
+            <QueryClientProvider client={queryClient}>
+                <div className='min-vh-100'>
                     <ConfirmGlobal />
                     <div >
                         <ToastContainer
@@ -74,14 +75,15 @@ const App = () => {
                             closeOnClick
                         > </ToastContainer>
                     </div>
+
                     {username ?
                         <MainRoot onLogout={onLogout} username={username} roles={roles} />
                         :
                         <Authentication onLogin={onLogin} />}
-                    <ReactQueryDevtools initialIsOpen={false} />
-                </QueryClientProvider>
-            </ErrorBoundary>
-        </BrowserRouter>
+                </div>
+                <ReactQueryDevtools initialIsOpen={false} />
+            </QueryClientProvider>
+        </ErrorBoundary>
     );
 
 }

diff --git 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)
+export default ErrorBoundary
diff --git 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
@@ -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 (
     <CSSTransition in={state.show} timeout={1500} classNames='auth'>
-      <div className='vertical-center authentification'>
-        <div className='text-center' id='login'>
-          <div className='alert alert-danger' id='error' style={{ display: state.errorMessage === undefined ? 'none' : '' }}>{state.errorMessage}</div>
-          <div className='shadow block-title block block-400'>
-            <div className='row'>
-              <div className='col-2'>
-              </div>
-              <div className='col'>
-                Orthanc-Tools-JS
-              </div>
-              <div className='col-2'>
-                <OverlayTrigger
-                  placement="right"
-                  delay={{ show: 250, hide: 400 }}
-                  overlay={renderTooltip}
-                >
-                  <HelpIcon className="mb-1" data-tip data-for='info1' fontSize="small" />
-                </OverlayTrigger>
-              </div>
-            </div>
-          </div>
-          <div className='block-content block block-400'>
-            <form id='login-form' onKeyPress={handleKeyDown}>
-              <fieldset>
+      <div className='min-vh-100 bg-authentification d-flex align-items-center'>
+        <div className='alert alert-danger' style={{ display: state.errorMessage === undefined ? 'none' : '' }}>
+          {state.errorMessage}
+        </div>
+        <Container fluid>
+          <Row className="shadow block-title block block-400">
+            <Col >
+              Orthanc-Tools-JS
+              <OverlayTrigger
+                placement="right"
+                delay={{ show: 250, hide: 400 }}
+                overlay={renderTooltip}
+              >
+                <HelpIcon className="mb-1" data-tip data-for='info1' fontSize="small" />
+              </OverlayTrigger>
+            </Col>
+          </Row>
+          <Row className='block-content block block-400'>
+            <Form onKeyPress={handleKeyDown}>
+              <FormGroup>
                 <label>Username*</label>
                 <input className='form-control' type='text' placeholder='username' name='username' value={state.username.value} onChange={handleChange} required />
-              </fieldset>
+              </FormGroup>
 
-              <fieldset>
+              <FormGroup>
                 <label>Password*</label>
                 <input className='form-control' type='password' placeholder='password' name='password' value={state.password.value} onChange={handleChange} required />
-              </fieldset>
+              </FormGroup>
 
-              <fieldset className='text-right'>
+              <FormGroup className='d-flex justify-content-center mt-3'>
                 <Button name='connexion' className='btn btn-dark' onClick={handleClick}> Connect </Button>
-              </fieldset>
-
-            </form>
-          </div>
-        </div>
+              </FormGroup>
+            </Form>
+          </Row>
+        </Container>
       </div>
-    </CSSTransition>
+    </CSSTransition >
   )
 }
 

diff --git 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 () => {
             </Modal>
             <Row className="mt-5">
                 <Col>
-                    <MyDropzone 
+                    <MyDropzone
                         disabled={inProgress}
                         onDrop={acceptedFiles => addFile(acceptedFiles)}
                         message={inProgress ? "Uploading" : "Drop Dicom Folder or ZIP"}
-                        />
+                    />
                     <ProgressBar
                         variant='info'
                         now={processedFiles}

diff --git a/FrontEnd/src/components/Main/Footer.js b/FrontEnd/src/components/Main/Footer.js
@@ -23,7 +23,7 @@ export default () => {
           </pre>
         </Modal.Body>
       </Modal>
-      <div className="footer text-center mb-3">
+      <div className='d-flex justify-content-center'>
         <Button className='link-button ms-3 footer-text' onClick={() => setShow(show => !show)}>
           <span className="me-3">Orthanc Tools JS: {packageInfo.version}</span>About
         </Button>