Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 18:02:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #132 from Stremio/intro-loader

Browse source 
Intro loader
This commit is contained in:
Nikola Hristov 2020-02-17 15:47:09 +02:00 committed by GitHub
commit 590297c82e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/routes/Intro/Intro.js
View file

@ -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) {
@ -76,12 +77,14 @@ const Intro = ({ queryParams }) => {
useCoreEvent(React.useCallback(({ event, args }) => {
switch (event) {
case 'UserAuthenticated': {
closeLoaderModal();
window.location.replace('#/');
break;
}
case 'Error': {
if (args.source.event === 'UserAuthenticated') {
// TODO use error.code to match translated message;
closeLoaderModal();
dispatch({ type: 'error', error: args.error.message });
}
break;
@ -132,6 +135,7 @@ const Intro = ({ queryParams }) => {
dispatch({ type: 'error', error: 'Invalid password' });
return;
}
openLoaderModal();
core.dispatch({
action: 'Ctx',
args: {
@ -178,6 +182,7 @@ const Intro = ({ queryParams }) => {
dispatch({ type: 'error', error: 'You must accept the Privacy Policy' });
return;
}
openLoaderModal();
core.dispatch({
action: 'Ctx',
args: {
@ -355,6 +360,15 @@ const Intro = ({ queryParams }) => {
:
null
}
{
loaderModalOpen ?
<Modal className={styles['modal-container']}>
<div className={styles['label']}>Authenticating...</div>
<Icon className={styles['icon']} icon={'ic_user'} />
</Modal>
:
null
}
</div>
);
};

33
src/routes/Intro/styles.less
View file

@ -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;
}
}
}