Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(Intro): add cancel button to facebook modal

Browse source
This commit is contained in:
Tim 2024-10-03 16:25:30 +02:00
parent 53174981a9
commit 6305743c1a
3 changed files with 44 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
@ -18,8 +19,9 @@ const LOGIN_FORM = 'login';
const Intro = ({ queryParams }) => {
const { core } = useServices();
const { t } = useTranslation();
const routeFocused = useRouteFocused();
const startFacebookLogin = useFacebookLogin();
const [startFacebookLogin, stopFacebookLogin] = useFacebookLogin();
const emailRef = React.useRef(null);
const passwordRef = React.useRef(null);
const confirmPasswordRef = React.useRef(null);
@ -100,6 +102,10 @@ const Intro = ({ queryParams }) => {
dispatch({ type: 'error', error: error.message });
});
}, []);
const cancelLoginWithFacebook = React.useCallback(() => {
stopFacebookLogin();
closeLoaderModal();
}, []);
const loginWithEmail = React.useCallback(() => {
if (typeof state.email !== 'string' || state.email.length === 0 || !emailRef.current.validity.valid) {
dispatch({ type: 'error', error: 'Invalid email' });
@ -385,6 +391,9 @@ const Intro = ({ queryParams }) => {
<div className={styles['loader-container']}>
<Icon className={styles['icon']} name={'person'} />
<div className={styles['label']}>Authenticating...</div>
<Button className={styles['button']} onClick={cancelLoginWithFacebook}>
{t('BUTTON_CANCEL')}
</Button>
</div>
</Modal>
:

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

@ -200,7 +200,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
gap: 1rem;
padding: 2.5rem;
border-radius: var(--border-radius);
background-color: var(--modal-background-color);
@ -218,7 +219,6 @@
flex: none;
width: 5rem;
height: 5rem;
margin-bottom: 1rem;
color: var(--primary-foreground-color);
animation: 1s linear infinite alternate flash;
}
@ -228,6 +228,27 @@
color: var(--primary-foreground-color);
animation: 1s linear infinite alternate flash;
}
.button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 3.5rem;
width: 100%;
border-radius: 3.5rem;
padding: 0 1rem;
margin-top: 2rem;
font-size: 1.1rem;
font-weight: 700;
color: var(--primary-foreground-color);
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
&:hover {
color: var(--secondary-foreground-color);
background-color: var(--primary-foreground-color);
}
}
}
}

17
src/routes/Intro/useFacebookLogin.ts
View file

@ -26,7 +26,7 @@ const useFacebookLogin = () => {
const platform = usePlatform();
const timeout = useRef<NodeJS.Timeout | null>(null);
const startFacebookLogin = useCallback(() => {
const start = useCallback(() => {
return new Promise((resolve, reject) => {
const state = hat(128);
let tries = 0;
@ -51,13 +51,18 @@ const useFacebookLogin = () => {
});
}, []);
useEffect(() => {
return () => {
timeout.current && clearTimeout(timeout.current);
};
const stop = useCallback(() => {
timeout.current && clearTimeout(timeout.current);
}, []);
return startFacebookLogin;
useEffect(() => {
return () => stop();
}, []);
return [
start,
stop,
];
};
module.exports = useFacebookLogin;