mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-20 06:32:11 +00:00
forgotten password modal dialog implemented
This commit is contained in:
svetlagasheva
parent
5ee47cf7d2
commit
cda8335777
2 changed files with 117 additions and 16 deletions
|
|
@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
|
|||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { useRouteFocused } = require('stremio-router');
|
||||
const { Button, useCoreEvent } = require('stremio/common');
|
||||
const { Button, ModalDialog, TextInput, useBinaryState, useCoreEvent } = require('stremio/common');
|
||||
const { useServices } = require('stremio/services');
|
||||
const CredentialsTextInput = require('./CredentialsTextInput');
|
||||
const ConsentCheckbox = require('./ConsentCheckbox');
|
||||
|
|
@ -22,6 +22,7 @@ const Intro = ({ queryParams }) => {
|
|||
const privacyPolicyRef = React.useRef();
|
||||
const marketingRef = React.useRef();
|
||||
const errorRef = React.useRef();
|
||||
const [passwordRestModalOpen, openPasswordRestModal, closePasswordResetModal] = useBinaryState(false);
|
||||
const [state, dispatch] = React.useReducer(
|
||||
(state, action) => {
|
||||
switch (action.type) {
|
||||
|
|
@ -89,7 +90,7 @@ const Intro = ({ queryParams }) => {
|
|||
const loginWithFacebook = React.useCallback(() => {
|
||||
FB.login((response) => {
|
||||
if (response.status === 'connected') {
|
||||
fetch('https://www.strem.io/fb-login-with-token/' + encodeURIComponent(response.authResponse.accessToken), { timeout: 10 * 1000 })
|
||||
fetch('https://www.strem.io/fb-login-with-token/' + encodeURIComponent(response.authResponse.accessToken), { timeout: 10 * 60 * 1000 })
|
||||
.then((resp) => {
|
||||
if (resp.status < 200 || resp.status >= 300) {
|
||||
throw new Error('Login failed at getting token from Stremio with status ' + resp.status);
|
||||
|
|
@ -97,22 +98,30 @@ const Intro = ({ queryParams }) => {
|
|||
return resp.json();
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
.then(({ user }) => {
|
||||
if (!user || typeof user.fbLoginToken !== 'string' || typeof user.email !== 'string') {
|
||||
throw new Error('Login failed at getting token from Stremio');
|
||||
}
|
||||
core.dispatch({
|
||||
action: 'UserOp',
|
||||
action: 'Ctx',
|
||||
args: {
|
||||
userOp: 'Login',
|
||||
action: 'Authenticate',
|
||||
args: {
|
||||
email: state.email,
|
||||
password: response.authResponse.accessToken
|
||||
type: 'Login',
|
||||
email: user.email,
|
||||
password: user.fbLoginToken
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => { });
|
||||
.catch((err = {}) => {
|
||||
dispatch({ type: 'error', error: err.message || JSON.stringify(err) });
|
||||
});
|
||||
} else {
|
||||
dispatch({ type: 'error', error: 'Login failed at getting token from Facebook' });
|
||||
}
|
||||
});
|
||||
}, [state.email, state.password]);
|
||||
}, []);
|
||||
const loginWithEmail = React.useCallback(() => {
|
||||
if (typeof state.email !== 'string' || state.email.length === 0) {
|
||||
dispatch({ type: 'error', error: 'Invalid email' });
|
||||
|
|
@ -315,7 +324,7 @@ const Intro = ({ queryParams }) => {
|
|||
</React.Fragment>
|
||||
:
|
||||
<div className={styles['forgot-password-link-container']}>
|
||||
<Button className={styles['forgot-password-link']} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Button>
|
||||
<Button className={styles['forgot-password-link']} target={'_blank'} onClick={openPasswordRestModal}>Forgot password?</Button>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
|
|
@ -339,10 +348,78 @@ const Intro = ({ queryParams }) => {
|
|||
<div className={styles['label']}>{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
{
|
||||
passwordRestModalOpen ?
|
||||
<PasswordResetModal email={state.email} onCloseRequest={closePasswordResetModal} />
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PasswordResetModal = (props) => {
|
||||
const routeFocused = useRouteFocused();
|
||||
const [error, setError] = React.useState('');
|
||||
const [email, setEmail] = React.useState(typeof props.email === 'string' ? props.email : '');
|
||||
const modalEmailRef = React.useRef();
|
||||
const passwordResetClicked = React.useCallback(() => {
|
||||
email.length > 0 && modalEmailRef.current.validity.valid ?
|
||||
window.open('https://www.strem.io/reset-password/' + email, '_blank')
|
||||
:
|
||||
setError('Invalid email');
|
||||
}, [email]);
|
||||
const passwordResetModalButtons = React.useMemo(() => {
|
||||
return [
|
||||
{
|
||||
className: styles['cancel-button'],
|
||||
label: 'Cancel',
|
||||
props: {
|
||||
onClick: props.onCloseRequest
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Send',
|
||||
props: {
|
||||
onClick: passwordResetClicked
|
||||
}
|
||||
}
|
||||
];
|
||||
}, [passwordResetClicked]);
|
||||
const emailOnChange = React.useCallback((event) => {
|
||||
setError('');
|
||||
setEmail(event.currentTarget.value);
|
||||
}, [email]);
|
||||
const emailOnSubmit = React.useCallback(() => {
|
||||
passwordResetClicked();
|
||||
}, [passwordResetClicked]);
|
||||
React.useEffect(() => {
|
||||
if (routeFocused) {
|
||||
modalEmailRef.current.focus();
|
||||
}
|
||||
}, [routeFocused]);
|
||||
return (
|
||||
<ModalDialog className={styles['password-reset-modal-container']} title={'Password reset'} buttons={passwordResetModalButtons} onCloseRequest={props.onCloseRequest}>
|
||||
<div className={styles['message']}>Enter your email</div>
|
||||
<TextInput
|
||||
ref={modalEmailRef}
|
||||
className={styles['text-input']}
|
||||
type={'email'}
|
||||
placeholder={'Email'}
|
||||
value={email}
|
||||
onChange={emailOnChange}
|
||||
onSubmit={emailOnSubmit}
|
||||
/>
|
||||
{
|
||||
error.length > 0 ?
|
||||
<div className={styles['error-message']}>{error}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</ModalDialog>
|
||||
);
|
||||
};
|
||||
|
||||
Intro.propTypes = {
|
||||
queryParams: PropTypes.instanceOf(URLSearchParams)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -110,12 +110,6 @@
|
|||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: 1rem 0;
|
||||
text-align: center;
|
||||
color: var(--color-signal1);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
min-height: 4rem;
|
||||
margin: 1rem 0;
|
||||
|
|
@ -149,4 +143,34 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: 1rem 0;
|
||||
text-align: center;
|
||||
color: var(--color-signal1);
|
||||
}
|
||||
|
||||
.password-reset-modal-container {
|
||||
.message {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
width: 20rem;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--color-surface40);
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surface60);
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: var(--color-signal2);
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background-color: var(--color-surfacedark);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue