diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js index 7f6b6836c..97e19ef3a 100644 --- a/src/routes/Intro/Intro.js +++ b/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 }) => { :
- +
} { @@ -347,6 +349,12 @@ const Intro = ({ queryParams }) => {
{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}
+ { + passwordRestModalOpen ? + + : + null + } ); }; diff --git a/src/routes/Intro/PasswordResetModal/PasswordResetModal.js b/src/routes/Intro/PasswordResetModal/PasswordResetModal.js new file mode 100644 index 000000000..7877492bb --- /dev/null +++ b/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 ( + + + { + error.length > 0 ? +
{error}
+ : + null + } +
+ ); +}; + +PasswordResetModal.propTypes = { + email: PropTypes.string, + onCloseRequest: PropTypes.func +}; + +module.exports = PasswordResetModal; diff --git a/src/routes/Intro/PasswordResetModal/index.js b/src/routes/Intro/PasswordResetModal/index.js new file mode 100644 index 000000000..128292036 --- /dev/null +++ b/src/routes/Intro/PasswordResetModal/index.js @@ -0,0 +1,3 @@ +const PasswordResetModal = require('./PasswordResetModal'); + +module.exports = PasswordResetModal; diff --git a/src/routes/Intro/PasswordResetModal/styles.less b/src/routes/Intro/PasswordResetModal/styles.less new file mode 100644 index 000000000..4b537dad7 --- /dev/null +++ b/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); + } +} \ No newline at end of file