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