diff --git a/package.json b/package.json index 6715a4dbf..7ec972756 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@storybook/react": "^5.3.18", "@testing-library/jest-dom": "^5.10.0", "@testing-library/react": "^10.2.1", + "@types/js-yaml": "^3.12.5", "clean-webpack-plugin": "^3.0.0", "coveralls": "^3.1.0", "prettier": "^2.0.5", @@ -39,6 +40,7 @@ "file-saver": "^2.0.2", "filereader-stream": "^2.0.0", "generate-password": "^1.5.1", + "js-yaml": "^3.14.0", "jsoneditor": "^9.0.0", "jsoneditor-react": "^3.0.0", "jwt-decode": "^2.2.0", @@ -51,6 +53,7 @@ "re-resizable": "^6.3.2", "react": "^16.13.1", "react-animated-slider": "^2.0.0", + "react-async-hook": "^3.6.2", "react-dom": "^16.13.1", "react-git-info": "^2.0.0", "react-leaflet": "^2.7.0", diff --git a/public/accueil.json b/public/accueil.json deleted file mode 100644 index fe780e429..000000000 --- a/public/accueil.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "bienvenue": { - "titre": "Bienvenue sur Onyxia", - "image": { "url": "/images/spyrales.jpg", "titleColor": "gold" }, - "contenu": "Enjoy :)", - "boutonQuestion": "Poser une question" - }, - "cartes": [ - { - "titre": "Essayer", - "icone": "assignment_turned_in", - "contenu": "En quelques clics, venez tester des applications simples ou complexes, sans autres pré-requis que votre seule imagination ! Ni téléchargement, ni installation, choisissez et démarrez vos essais !" - }, - { - "titre": "Collaborer", - "icone": "share", - "contenu": "Messagerie instantanée, éditeurs collaboratifs de tableurs et de documents texte, forge logicielle, service d'échange de fichiers... Autant d'outils pour travailler à plusieurs mains." - }, - { - "titre": "Proposer", - "icone": "highlight", - "contenu": "Sur la plateforme innovation, le changement c'est vous ! Vos idées, vos envies pour co-construire les services et décider ensemble de l'avenir de ce grand bac-à-sable." - } - ], - "precautions": { - "titre": "Précautions d'usage", - "contenu": "La plateforme est un terrain d'exploration. Le parti pris est d'assumer une prise de risque plus importante pour laisser plus de liberté aux utilisateurs. Les garanties de service sont par conséquent limitées : n'y laissez surtout pas de données sensibles et si pour vous, la disponibilité des données ou la continuité de service est un impératif, alors il vous faut un service dit de production. S'il n'existe pas, donnez-nous les éléments pour motiver l'instruction technique." - }, - "applications": [] -} diff --git a/public/images/bullet-point-1.svg b/public/images/bullet-point-1.svg new file mode 100644 index 000000000..9c18ff954 --- /dev/null +++ b/public/images/bullet-point-1.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/images/bullet-point-2.svg b/public/images/bullet-point-2.svg new file mode 100644 index 000000000..098a93e66 --- /dev/null +++ b/public/images/bullet-point-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/bullet-point-3.svg b/public/images/bullet-point-3.svg new file mode 100644 index 000000000..a27f438a2 --- /dev/null +++ b/public/images/bullet-point-3.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/dots.png b/public/images/dots.png new file mode 100644 index 000000000..492bdf4ff Binary files /dev/null and b/public/images/dots.png differ diff --git a/public/images/dots.svg b/public/images/dots.svg new file mode 100644 index 000000000..f6cd511dc --- /dev/null +++ b/public/images/dots.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/git.svg b/public/images/git.svg new file mode 100644 index 000000000..2e42bc7d4 --- /dev/null +++ b/public/images/git.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/public/images/home.svg b/public/images/home.svg new file mode 100644 index 000000000..fe5d595da --- /dev/null +++ b/public/images/home.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/insee_fr_lab.png b/public/images/insee_fr_lab.png new file mode 100644 index 000000000..1bd1010f0 Binary files /dev/null and b/public/images/insee_fr_lab.png differ diff --git a/public/images/jupyter_logo.svg b/public/images/jupyter_logo.svg new file mode 100644 index 000000000..ab2550874 --- /dev/null +++ b/public/images/jupyter_logo.svg @@ -0,0 +1,90 @@ + +Group.svg +Created using Figma 0.90 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/r.svg b/public/images/r.svg new file mode 100644 index 000000000..097e83e4f --- /dev/null +++ b/public/images/r.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/spyrales.jpg b/public/images/spyrales.jpg deleted file mode 100644 index d921f7a61..000000000 Binary files a/public/images/spyrales.jpg and /dev/null differ diff --git a/public/pages-content/home.yaml b/public/pages-content/home.yaml new file mode 100644 index 000000000..cbbea3fd3 --- /dev/null +++ b/public/pages-content/home.yaml @@ -0,0 +1,64 @@ +--- +hero: + smallerText: Welcome to the Onyxia Datalab ! + image: "/images/dots.svg" + biggerText: | + This homepage can be customized by editing the public/pages-content/home.yaml file or overriding the HOMEPAGE_URL environment variable. + button: + url: "/visite-guidee" + label: Start +papers: +- title: On-demand datascience services + image: "/images/bullet-point-1.svg" + button: + url: "/my-lab/catalogue" + label: Browse catalog + body: | + Analyze data, run distributed calculations and more ! + Use as much computing power as you need. +- title: An opensource project with a growing community + image: "/images/bullet-point-2.svg" + button: + url: "https://github.com/inseefrlab/onyxia-ui" + label: View on github + body: | + Feel free to contribute, report bugs or ask for help ! +- title: Datastorage made easy + image: "/images/bullet-point-3.svg" + button: + url: "/mes-fichiers" + label: Browse my files + body: | + Easily access your data from either Onyxia or programmatically using S3 +project_history: + smallerText: About Onyxia + image: "/images/insee_fr_lab.png" + biggerText: | + Onyxia is a free and open-source project which started at Insee (French National Statistical Institute). + Onyxia can be installed on any Kubernetes cluster. + button: + url: "https://github.com/InseeFrLab" + label: View on github +service_highlight: +- title: RStudio + body: | + RStudio is the reference IDE for R programming. + image: "/images/r.svg" + button: + url: "/my-lab/catalogue/inseefrlab-datascience/rstudio" + label: Discover +- title: Jupyter + body: | + Jupyter notebooks let you code, run and share Python and R code directly from your web browser. + image: "/images/jupyter_logo.svg" + button: + url: "/my-lab/catalogue/inseefrlab-datascience/jupyter" + label: Discover +warning: + title: Disclaimer + message: | + This is a demo instance. + You should not use it for anything other than testing Onyxia and experimenting. + Only open datasets are allowed. + Data and services can be wiped at any moment. + diff --git a/src/js/components/accueil/accueil-async.js b/src/js/components/accueil/accueil-async.js deleted file mode 100644 index 020ff711d..000000000 --- a/src/js/components/accueil/accueil-async.js +++ /dev/null @@ -1,11 +0,0 @@ -import React, { Suspense, lazy } from 'react'; -import Loader from 'js/components/commons/loader'; -const OngletContent = lazy(() => import('./accueil.component')); - -const AsyncAccueil = (props) => ( - }> - - -); - -export default AsyncAccueil; diff --git a/src/js/components/accueil/accueil.component.js b/src/js/components/accueil/accueil.component.js deleted file mode 100644 index bfe62857f..000000000 --- a/src/js/components/accueil/accueil.component.js +++ /dev/null @@ -1,171 +0,0 @@ -import React from 'react'; -import Typography from '@material-ui/core/Typography'; -import { Link } from 'react-router-dom'; -import { Avatar, Card, CardContent, Paper } from '@material-ui/core/'; -import { CardHeader, Grid, Icon } from '@material-ui/core/'; -import Button from '@material-ui/core/Button'; -import D from 'js/i18n'; -import { wrapPromise, axiosURL } from 'js/utils'; -// import Chrismas from "js/components/commons/chrismas"; -import './accueil.scss'; -import conf from './../../configuration'; - -const resource = wrapPromise( - axiosURL( - conf.CONTENT.HOMEPAGE_URL - ? conf.CONTENT.HOMEPAGE_URL - : `${window.location.origin}/accueil.json` - ) -); - -const Accueil = () => { - const { bienvenue, cartes, precautions, applications } = resource.read(); - const imgTitleColor = - (bienvenue.image && bienvenue.image.titleColor) || 'snow'; - return ( - <> - {/* */} -
- - - {cartes.map(({ titre, contenu, icone }, i) => ( - - {contenu} - - ))} - - - {precautions.contenu} - -
- {applications.map( - ({ nom, image, resume, external, internal, avantages }, i) => ( - - - - {resume} - - {avantages.map((av, j) => ( - {av} - ))} - - - - ) - )} -
-
- - ); -}; - -const Carte = ({ icon = 'star', title, children }) => ( - - - - {icon} - - } - title={{title}} - /> - {children} - - -); - -const App = ({ children, paire, color = 'snow' }) => ( -
- {children[paire ? 0 : 1]} - {children[paire ? 1 : 0]} -
-); - -const Image = ({ url, name = 'application' }) => ( -
- {name} -
-); -const Commentaires = ({ title, internal, external, children }) => ( -
- {title} - {children} -
- {internal ? : null} - {external ? : null} -
-
-); - -const InternalLink = ({ url }) => ( - - - -); - -const ExternalLink = ({ url }) => ( - -); - -const Benefit = ({ children }) => ( - - keyboard_arrow_right - {children} - -); - -const Precautions = ({ titre, children }) => ( -
-
- - {titre} - - - {children} - -
-
-
-); - -const Welcome = ({ image, imgTitleColor, titre, contenu }) => ( -
- innovation -
-
-

{titre}

-
-
- -

{contenu}

- - - - -
-); - -export default Accueil; diff --git a/src/js/components/accueil/accueil.scss b/src/js/components/accueil/accueil.scss deleted file mode 100644 index d7d1c7fb4..000000000 --- a/src/js/components/accueil/accueil.scss +++ /dev/null @@ -1,132 +0,0 @@ -.accueil { - background-color: snow; - margin-left: auto; - margin-right: auto; - width: 1024px; - .bienvenue { - position: relative; - height: 450px; - img { - width: 100%; - height: 450px; - } - .message { - position: absolute; - width: 100%; - height: 100%; - background-color: #00000000; - top: 0; - left: 0; - - .title { - margin: 0; - background-color: transparent; - font-family: avenir, helvetica, sans-serif; - position: absolute; - h1 { - padding-left: 0.4em; - margin: 0; - font-size: 3.5em; - font-weight: bold; - } - } - } - .content { - margin-top: 1em; - font-size: 1.2em; - padding: 0.4em; - button { - margin-left: 70%; - border: 0.1em solid black; - font-size: 1.1em; - } - } - } - - .valeurs { - margin-top: 200px; - .carte { - height: 300px; - } - } - - .applications { - margin-top: 5em; - .app { - display: flex; - flex-direction: row; - align-items: center; - height: auto; - .commentaires { - padding: 16px 15px; - height: 100%; - position: relative; - width: 60%; - // background-color: snow; - .bouton { - text-align: center; - background-color: snow; - } - .resume { - margin: 18px 10px; - } - .avantage { - font-size: 18px; - font-weight: bold; - margin: 12px 10px; - .chevron { - color: black; - float: left; - } - } - } - .image { - height: 100%; - width: 50%; - - display: inline-block; - // background-color: lightseagreen; - img { - margin-top: 2em; - margin-bottom: 2em; - width: 100%; - height: 300px; - } - } - } - } - - .precautions { - width: 100%; - height: 230px; - position: relative; - margin-top: 5em; - - .image { - width: 100%; - height: 230px; - background-image: url('/images/dont-fall.jpeg'); - background-repeat: no-repeat; - // background-attachment: fixed; - // background-size: 100%; - } - - .calque { - height: 230px; - width: 100%; - position: absolute; - background-color: #00000070; - - .titre { - color: snow; - margin-bottom: 20px; - } - .contenu { - width: 100%; - background-color: transparent; - color: snow; - } - padding: 20px 60px; - } - } -} diff --git a/src/js/components/accueil/index.js b/src/js/components/accueil/index.js deleted file mode 100644 index d9f528d91..000000000 --- a/src/js/components/accueil/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './accueil-async'; diff --git a/src/js/components/app.js b/src/js/components/app.js index 4449e3e3c..620bdd66f 100644 --- a/src/js/components/app.js +++ b/src/js/components/app.js @@ -14,7 +14,7 @@ import ReactResizeDetector from 'react-resize-detector'; import Alert from 'js/components/commons/alert'; import config from 'js/configuration'; import { invalidIdep } from 'js/utils/idep'; -import Accueil from './accueil'; +import { Home } from './home/Home'; import MyService from 'js/components/my-service'; import MyServices from 'js/components/my-services'; import Services, { ServiceDetails } from 'js/components/services'; @@ -38,9 +38,12 @@ import './app.scss'; import RegionBanner from 'js/components/regionsBanner'; import Cluster from 'js/components/cluster'; import { ToastContainer } from 'react-toastify'; +import { useSelector } from "react-redux"; + +const initialPathname = "/accueil"; const theme = createTheme(); -const routerContext = createRouterContext(Accueil)('/accueil'); +const routerContext = createRouterContext(Home)(initialPathname); const Route = createRouteComponent(routerContext)(NativeRoute); const PrivateRoute = createPrivateRouteComponent(routerContext); @@ -51,8 +54,7 @@ const App = ({ messageIntraining, consumeMessageIntraining, idep, -}) => - requestError ? ( +}) => requestError ? ( ) : ( ( ); -const AppFeelGood = ({ waiting, applicationResize, idep }) => ( - - applicationResize(width)} - /> - {waiting ? : null} - - - - <> -
- - - {invalidIdep(idep) && ( - - )} - {config.APP.WARNING_MESSAGE && ( - - )} -
- - - - - - - - - - +const AppFeelGood = ({ waiting, applicationResize, idep }) => { - + const isAuthenticated = useSelector(state => state.app.authenticated); - + applicationResize(width)} + /> + {waiting ? : null} + + + + <> +
+ + + {invalidIdep(idep) && ( + + )} + {config.APP.WARNING_MESSAGE && ( + + )} +
+ + + + + + + + + + - + - - + - - - - - + - - } /> - -
-
- - -
- - - - - - -); + + + + + + + + + + + } /> + +
+ {/*
*/} + + {isAuthenticated && } +
+ + + + + + + ); +}; export default App; diff --git a/src/js/components/app.scss b/src/js/components/app.scss index 0327f9f20..0066262e5 100644 --- a/src/js/components/app.scss +++ b/src/js/components/app.scss @@ -1,4 +1,4 @@ -$primaryColor: #5c6bc0; +$primaryColor: #5C6DBA; $secondaryColor: #fb8c00; $cardHeader: mediumaquamarine; $font-size-titre: 16px; @@ -212,7 +212,7 @@ a { background-color: lightgray; } - background-color: #f4f4f4; + background-color: #EDEDED; .en-tete { display: block; diff --git a/src/js/components/commons/footer/footer.tsx b/src/js/components/commons/footer/footer.tsx index 901b80d76..9d2cd5158 100644 --- a/src/js/components/commons/footer/footer.tsx +++ b/src/js/components/commons/footer/footer.tsx @@ -38,8 +38,8 @@ const Footer = () => { )}
- contribuer - notre api + Contribuer au projet + API ); diff --git a/src/js/components/commons/nav-bar/nav-bar.js b/src/js/components/commons/nav-bar/nav-bar.js index f30ea6226..56a500fa1 100644 --- a/src/js/components/commons/nav-bar/nav-bar.js +++ b/src/js/components/commons/nav-bar/nav-bar.js @@ -64,7 +64,7 @@ class Navbar extends React.Component { /> - ONYXIA + Onyxia {authenticated ? ( @@ -107,7 +107,7 @@ const LoginButton = ({ handleClick, screenType }) => mini onClick={handleClick} > - power_settings_new_icon + login ) : ( aria-label="login" onClick={handleClick} > - power_settings_new_icon + login login ); diff --git a/src/js/components/commons/nav-bar/nav-bar.scss b/src/js/components/commons/nav-bar/nav-bar.scss index ef7b6bdd9..22bdb5426 100644 --- a/src/js/components/commons/nav-bar/nav-bar.scss +++ b/src/js/components/commons/nav-bar/nav-bar.scss @@ -3,7 +3,7 @@ .root { flex-grow: 1; h1 { - font-size: 24px; + font-size: 3em; font-weight: bolder; } } @@ -55,12 +55,8 @@ .login { margin-right: 5px; - color: forestgreen; } -.login-mini { - color: forestgreen; -} .logout { margin-right: 5px; diff --git a/src/js/components/home/Home.tsx b/src/js/components/home/Home.tsx new file mode 100644 index 000000000..aa0b9a428 --- /dev/null +++ b/src/js/components/home/Home.tsx @@ -0,0 +1,153 @@ +import React from 'react'; +import Loader from 'js/components/commons/loader'; +import { Link } from 'react-router-dom'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import { axiosURL } from 'js/utils'; +import './style.scss'; +import conf from '../../configuration'; +import createTheme from 'js/components/material-ui-theme'; +import { useAsync } from 'react-async-hook'; +import { safeLoad as parseYaml } from 'js-yaml'; +import { useSelector } from 'react-redux'; +import { SMALL_POINT, LARGE_POINT, MEDIUM_POINT } from 'js/redux/reducers'; +const theme = createTheme(); + +const fetchContent = (): Promise => + (axiosURL as any)( + conf.CONTENT.HOMEPAGE_URL || '/pages-content/home.yaml' + ).then(parseYaml); + +declare namespace Content { + export interface Root { + hero: Hero; + papers: Paper[]; + project_history: Hero; + service_highlight: Paper[]; + warning: Warning; + } + + export interface Hero { + smallerText: string; + image: string; + biggerText: string; + button: Button; + } + + export interface Button { + url: string; + label: string; + } + + export interface Paper { + title: string; + image: string; + button: Button; + body: string; + } + + export interface Warning { + title: string; + message: string; + } +} + +export const Home: React.FC = () => { + const screenType: + | typeof SMALL_POINT + | typeof MEDIUM_POINT + | typeof LARGE_POINT + | null = useSelector((state) => state.app.screenType); + + const { result: contentRoot } = useAsync(fetchContent, []); + + return !contentRoot || !screenType ? ( + + ) : ( +
+
+ {screenType > SMALL_POINT && ( + {contentRoot.hero.smallerText} + )} + {contentRoot.hero.biggerText} + + +
+
+ {contentRoot.papers.map((paper) => ( +
+
+
+ logo +
+

{paper.title}

+
+

{paper.body}

+ +
+ ))} +
+
+
+ + {contentRoot.project_history.smallerText} + +

{contentRoot.project_history.biggerText}

+ +
+ {screenType === LARGE_POINT && ( +
+ Logo INSEEFrLab +
+ )} +
+
+ {contentRoot.service_highlight.map((o) => ( +
+ {o.title} +

{o.title}

+

{o.body}

+ +
+ ))} +
+
+
+

{contentRoot.warning.title}

+

{contentRoot.warning.message}

+
+
+
+ ); +}; + +const ButtonLinked: React.FC<{ label: string; target: string }> = ({ + label, + target, +}) => + target?.startsWith('http') ? ( + + + + ) : ( + + + + ); diff --git a/src/js/components/home/style.scss b/src/js/components/home/style.scss new file mode 100644 index 000000000..2cdc70c78 --- /dev/null +++ b/src/js/components/home/style.scss @@ -0,0 +1,364 @@ + + + +.hero a, .papers a, .project_history a, .service_highlight a { + + display: inline-block; + + > button { + + width: 100%; + + border-radius: 37.5px; + border: 2px solid black; + text-transform: initial; + font-size: 24px; + line-height: 24px; + + span { + white-space: nowrap; + } + + } + + +} + +.hero { + + background-position: right; + background-repeat: no-repeat; + + background-size: 50%; + + padding-top: 50px; + + $paddingSide: 8.7%; + + padding-left: $paddingSide; + padding-bottom: 65px; + + border-bottom: 1px black solid; + + > h1 { + + font-weight: 500; + font-size: 37px; + + line-height: 42px; + position: relative; + display: inline-block; + + &::after { + display: block; + position: absolute; + content: ''; + bottom: -45%; + width: 82%; + border-bottom: 1px solid black; + } + + margin-bottom: 67px; + + } + + + > h2 { + + font-style: normal; + font-weight: normal; + font-size: 49px; + line-height: 56px; + padding-right: $paddingSide; + + @media (min-width: 960px) { + max-width: 40%; + padding-right: 0; + } + + + } + + > a { + + margin-top: 33px; + min-width: 300px; + + } + +} + + + +.papers { + + display: flex; + flex-wrap: wrap; + + > div { + + flex: 200px; + margin: 2%; + + + background-color: #F5F5F5; + + display: flex; + flex-direction: column; + + + $padding: 25px; + + padding: $padding; + + + > section { + display: flex; + + + > h1 { + margin: 0; + padding-left: $padding; + font-weight: 500; + font-size: 28px; + line-height: 33px; + } + } + + > p { + + flex:1; + + font-style: normal; + font-weight: normal; + font-size: 20px; + line-height: 26px; + opacity: 0.6; + + } + + > a { + margin-top: 30px; + + @media (min-width: 1600px) { + width: 73%; + } + + } + + box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.25); + border-radius: 10px; + box-sizing: border-box; + + } + + border-bottom: 1px solid black; + + + +} + + + +.project_history { + + + + padding-top: 50px; + + $paddingSide: 8.7%; + + padding-left: $paddingSide; + padding-bottom: 65px; + + border-bottom: 1px black solid; + + display: flex; + + > section { + + flex: 1; + //display: flex; + //flex-direction: column; + + > h1 { + + font-weight: 500; + font-size: 37px; + line-height: 42px; + position: relative; + display: inline-block; + + &::after { + display: block; + position: absolute; + content: ''; + bottom: -45%; + width: 82%; + border-bottom: 1px solid black; + } + + margin-bottom: 67px; + + } + + + > p { + + //flex: 1; + font-size: 24px; + line-height: 35px; + opacity: 0.6; + padding-right: $paddingSide; + + } + + + > a { + + margin-top: 33px; + width: 300px; + + } + + } + + .imageContainer { + + margin: 0 10%; + + > img { + + box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.25); + object-fit: scale-down; + + } + + } + + +} + +.service_highlight { + + display: flex; + flex-wrap: wrap; + + + + > div { + + display: flex; + flex-direction: column; + + flex: 200px; + margin: 2%; + + background-color: #F5F5F5; + box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.25); + border-radius: 10px; + box-sizing: border-box; + + padding: 25px; + + > img { + height: 200px; + margin: 30px; + } + + > h1 { + + font-weight: 500; + font-size: 36px; + line-height: 42px; + + } + + > p { + + font-size: 20px; + line-height: 26px; + color: #000000; + opacity: 0.6; + + flex: 1; + + } + + > a { + margin-top: 30px; + + @media (min-width: 1600px) { + width: 65%; + } + + } + + + + } + + border-bottom: 1px solid black; + +} + +.warning { + + margin: 50px; + + > div { + + //padding: 10%; + + text-align: center;; + + > h1, > p { + color: white; + } + + > h1 { + + position: relative; + display: inline-block; + + &::after { + + display: block; + position: absolute; + content: ''; + bottom: -45%; + width: 100%; + border-bottom: 1px solid white; + + + } + + } + + > p { + + font-size: 24px; + line-height: 28px; + + } + + box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.25); + + padding: 30px; + + @media (min-width: 960px) { + $paddingSide: 25%; + padding-left: $paddingSide; + padding-right: $paddingSide; + } + + } + +} + + + + + + + diff --git a/src/js/components/material-ui-theme.js b/src/js/components/material-ui-theme.js index aa59c476c..5222065fc 100644 --- a/src/js/components/material-ui-theme.js +++ b/src/js/components/material-ui-theme.js @@ -9,7 +9,7 @@ export default () => palette: { primary: { light: '#8d98f2', - main: '#5c6bc0', + main: '#5C6DBA', dark: '#23408e', contrastText: '#fff', }, diff --git a/src/js/i18n/dictionary/accueil.ts b/src/js/i18n/dictionary/accueil.ts index 93b51416d..c4e2fe63c 100644 --- a/src/js/i18n/dictionary/accueil.ts +++ b/src/js/i18n/dictionary/accueil.ts @@ -1,7 +1,7 @@ const dictionary = { startVisit: { - fr: 'Démarrez la Visite !', - en: 'Start visit!', + fr: 'Commencer', + en: 'Start', }, }; diff --git a/src/js/vault-client/vault-api.ts b/src/js/vault-client/vault-api.ts index adde13978..9921e962b 100644 --- a/src/js/vault-client/vault-api.ts +++ b/src/js/vault-client/vault-api.ts @@ -62,6 +62,7 @@ export const getVaultToken = async () => getLocalToken() ? Promise.resolve(getLocalToken()) : fetchVaultToken(); const fetchVaultToken = async () => { + try{ const { auth: { client_token: token }, } = await axiosURL.post(`${VAULT_BASE_URI}/v1/auth/jwt/login`, { @@ -70,6 +71,9 @@ const fetchVaultToken = async () => { }); store.dispatch(newVaultToken(token)); return token; + }catch{ + return ""; + } }; const buildDefaultPwd = () => diff --git a/yarn.lock b/yarn.lock index 5fe072bc6..db2df94d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2380,6 +2380,11 @@ jest-diff "^25.2.1" pretty-format "^25.2.1" +"@types/js-yaml@^3.12.5": + version "3.12.5" + resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.5.tgz#136d5e6a57a931e1cce6f9d8126aa98a9c92a6bb" + integrity sha512-JCcp6J0GV66Y4ZMDAQCXot4xprYB+Zfd3meK9+INSJeVZwJmHAW30BBEEkPzXswMXuiyReUGOP3GxrADc9wPww== + "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4": version "7.0.5" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd" @@ -8863,7 +8868,7 @@ js-tokens@^3.0.2: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= -js-yaml@^3.13.1: +js-yaml@^3.13.1, js-yaml@^3.14.0: version "3.14.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482" integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A== @@ -12148,6 +12153,11 @@ react-app-polyfill@^1.0.6: regenerator-runtime "^0.13.3" whatwg-fetch "^3.0.0" +react-async-hook@^3.6.2: + version "3.6.2" + resolved "https://registry.yarnpkg.com/react-async-hook/-/react-async-hook-3.6.2.tgz#360018e5cd6ecc8841152a79875841b9e49dbdba" + integrity sha512-RkwHCJ8V7I6umKZLHneapuTRWf+eO4LOj0qUwUDsSn27jrAOcW6ClbV3x22Z4hVxH9bA0zb7y+ozDJDJ8PnZoA== + react-clientside-effect@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"