diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js index 97e19ef3a..87d3b47b4 100644 --- a/src/routes/Intro/Intro.js +++ b/src/routes/Intro/Intro.js @@ -2,7 +2,7 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); -const { useRouteFocused } = require('stremio-router'); +const { Modal, useRouteFocused } = require('stremio-router'); const { Button, useBinaryState, useCoreEvent } = require('stremio/common'); const { useServices } = require('stremio/services'); const CredentialsTextInput = require('./CredentialsTextInput'); @@ -24,6 +24,7 @@ const Intro = ({ queryParams }) => { const marketingRef = React.useRef(); const errorRef = React.useRef(); const [passwordRestModalOpen, openPasswordRestModal, closePasswordResetModal] = useBinaryState(false); + const [loaderModalOpen, openLoaderModal, closeLoaderModal] = useBinaryState(false); const [state, dispatch] = React.useReducer( (state, action) => { switch (action.type) { @@ -132,6 +133,8 @@ const Intro = ({ queryParams }) => { dispatch({ type: 'error', error: 'Invalid password' }); return; } + dispatch({ type: 'error', error: '' }); + openLoaderModal(); core.dispatch({ action: 'Ctx', args: { @@ -178,6 +181,7 @@ const Intro = ({ queryParams }) => { dispatch({ type: 'error', error: 'You must accept the Privacy Policy' }); return; } + openLoaderModal(); core.dispatch({ action: 'Ctx', args: { @@ -252,6 +256,7 @@ const Intro = ({ queryParams }) => { }, [queryParams]); React.useEffect(() => { if (typeof state.error === 'string' && state.error.length > 0) { + closeLoaderModal(); errorRef.current.scrollIntoView(); } }, [state.error]); @@ -355,6 +360,15 @@ const Intro = ({ queryParams }) => { : null } + { + loaderModalOpen ? + +
Authenticating...
+ +
+ : + null + } ); }; diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less index 872512687..a093f8663 100644 --- a/src/routes/Intro/styles.less +++ b/src/routes/Intro/styles.less @@ -149,4 +149,37 @@ } } } +} + +.modal-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: var(--color-background80); + + .label { + margin-bottom: 1rem; + font-size: 2rem; + color: var(--color-surfacelighter); + animation: 1s linear infinite alternate flash; + } + + .icon { + flex: none; + width: 5rem; + height: 5rem; + fill: var(--color-surfacelighter); + animation: 1s linear infinite alternate flash; + } + + @keyframes flash { + 0% { + opacity: 0.4; + } + + 100% { + opacity: 1.0; + } + } } \ No newline at end of file