Merge pull request #129 from Stremio/forgotten-password

Forgotten password modal

src/routes/Intro/Intro.js

@@ -3,10 +3,11 @@ 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, useBinaryState, useCoreEvent } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const CredentialsTextInput = require('./CredentialsTextInput');
 const ConsentCheckbox = require('./ConsentCheckbox');
+const PasswordResetModal = require('./PasswordResetModal');
 const styles = require('./styles');
 
 const SIGNUP_FORM = 'signup';
@@ -22,6 +23,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) {
@@ -323,7 +325,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']} onClick={openPasswordRestModal}>Forgot password?</Button>
                         </div>
                 }
                 {
@@ -347,6 +349,12 @@ 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>
     );
 };

src/routes/Intro/PasswordResetModal/PasswordResetModal.js

@@ -0,0 +1,75 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const { useRouteFocused } = require('stremio-router');
+const { ModalDialog } = require('stremio/common');
+const CredentialsTextInput = require('../CredentialsTextInput');
+const styles = require('./styles');
+
+const PasswordResetModal = ({ email, onCloseRequest }) => {
+    const routeFocused = useRouteFocused();
+    const [error, setError] = React.useState('');
+    const еmailRef = React.useRef(null);
+    const goToPasswordReset = React.useCallback(() => {
+        еmailRef.current.value.length > 0 && еmailRef.current.validity.valid ?
+            window.open('https://www.strem.io/reset-password/' + еmailRef.current.value, '_blank')
+            :
+            setError('Invalid email');
+    }, []);
+    const passwordResetOnClick = React.useCallback(() => {
+        goToPasswordReset();
+    }, []);
+    const passwordResetModalButtons = React.useMemo(() => {
+        return [
+            {
+                className: styles['cancel-button'],
+                label: 'Cancel',
+                props: {
+                    onClick: onCloseRequest
+                }
+            },
+            {
+                label: 'Send',
+                props: {
+                    onClick: passwordResetOnClick
+                }
+            }
+        ];
+    }, [onCloseRequest, passwordResetOnClick]);
+    const emailOnChange = React.useCallback(() => {
+        setError('');
+    }, []);
+    const emailOnSubmit = React.useCallback(() => {
+        goToPasswordReset();
+    }, []);
+    React.useEffect(() => {
+        if (routeFocused) {
+            еmailRef.current.focus();
+        }
+    }, [routeFocused]);
+    return (
+        <ModalDialog className={styles['password-reset-modal-container']} title={'Password reset'} buttons={passwordResetModalButtons} onCloseRequest={onCloseRequest}>
+            <CredentialsTextInput
+                ref={еmailRef}
+                className={styles['credentials-text-input']}
+                type={'email'}
+                placeholder={'Email'}
+                defaultValue={typeof email === 'string' ? email : ''}
+                onChange={emailOnChange}
+                onSubmit={emailOnSubmit}
+            />
+            {
+                error.length > 0 ?
+                    <div className={styles['error-message']}>{error}</div>
+                    :
+                    null
+            }
+        </ModalDialog>
+    );
+};
+
+PasswordResetModal.propTypes = {
+    email: PropTypes.string,
+    onCloseRequest: PropTypes.func
+};
+
+module.exports = PasswordResetModal;

src/routes/Intro/PasswordResetModal/index.js

@@ -0,0 +1,3 @@
+const PasswordResetModal = require('./PasswordResetModal');
+
+module.exports = PasswordResetModal;

src/routes/Intro/PasswordResetModal/styles.less

@@ -0,0 +1,17 @@
+.password-reset-modal-container {
+    .credentials-text-input {
+        width: 20rem;
+        padding: 0.5rem;
+        border: thin solid var(--color-surfacedark);
+    }
+
+    .error-message {
+        margin: 1rem 0;
+        text-align: center;
+        color: var(--color-signal2);
+    }
+
+    .cancel-button {
+        background-color: var(--color-surfacedark);
+    }
+}