From 5a737ce38d4ba76206cc5360385a013ed57c7e71 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 23 May 2019 22:11:52 +0100 Subject: [PATCH] wait for user to complete email verification (#548) * wait for user to complete email verification on first run * add password strength meter. fix auth bugs in first run. --- app/package-lock.json | 21 +++- app/package.json | 3 +- app/src/component/rewardCard/view.js | 21 ++-- app/src/constants.js | 1 + app/src/index.js | 1 + app/src/page/firstRun/index.js | 14 ++- .../firstRun/internal/email-collect-page.js | 28 +++-- .../firstRun/internal/email-verify-page.js | 50 +++++++++ app/src/page/firstRun/internal/wallet-page.js | 96 +++++++++++++----- app/src/page/firstRun/view.js | 83 +++++++++++---- .../internal/email-verify-page.js | 38 ++++++- .../internal/manual-verify-page.js | 7 ++ .../internal/phone-verify-page.js | 5 +- app/src/page/verification/view.js | 14 ++- app/src/styles/firstRun.js | 23 +++++ app/src/styles/reward.js | 6 +- .../lbry/build/templates/colors.tmpl.xml | 3 +- .../lbry/build/templates/themes.tmpl.xml | 1 + ...dstrengthmeter_src_images_eyeinvisible.png | Bin 0 -> 640 bytes ...ordstrengthmeter_src_images_eyevisible.png | Bin 0 -> 611 bytes ...vespeedometer_images_speedometerneedle.png | Bin 0 -> 12879 bytes 21 files changed, 333 insertions(+), 82 deletions(-) create mode 100644 app/src/page/firstRun/internal/email-verify-page.js create mode 100644 src/main/res/drawable-mdpi/node_modules_reactnativepasswordstrengthmeter_src_images_eyeinvisible.png create mode 100644 src/main/res/drawable-mdpi/node_modules_reactnativepasswordstrengthmeter_src_images_eyevisible.png create mode 100644 src/main/res/drawable-mdpi/node_modules_reactnativespeedometer_images_speedometerneedle.png diff --git a/app/package-lock.json b/app/package-lock.json index 1a8c2474..1704b4a0 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -4832,8 +4832,8 @@ } }, "lbryinc": { - "version": "github:lbryio/lbryinc#a8fd592c46abb65410785fd0242e91904c158fd7", - "from": "github:lbryio/lbryinc", + "version": "github:lbryio/lbryinc#54ef55d430db13ecd77699d23974cf871445ebd7", + "from": "github:lbryio/lbryinc#check-sync", "requires": { "reselect": "^3.0.0" } @@ -6316,6 +6316,15 @@ "react-native-image-pan-zoom": "^2.1.9" } }, + "react-native-password-strength-meter": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/react-native-password-strength-meter/-/react-native-password-strength-meter-0.0.2.tgz", + "integrity": "sha512-jONkwnbznl2xJnJK3/eGa/EL87darI6n+/FtVFXRdyGqypWy6lFJALn/C6m9FyodVArrrpXJ60Ke8nWaGmPALw==", + "requires": { + "prop-types": "^15.6.2", + "react-native-speedometer": "^1.0.0" + } + }, "react-native-phone-input": { "version": "github:lbryio/react-native-phone-input#60fdef484e8bf27328c7fb6a203baab9eb9cd4a1", "from": "github:lbryio/react-native-phone-input", @@ -6338,6 +6347,14 @@ "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz", "integrity": "sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA==" }, + "react-native-speedometer": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-native-speedometer/-/react-native-speedometer-1.0.3.tgz", + "integrity": "sha512-34Ne/ptaWv97jbSOq87b+gKHvGKeZ4AjYXZvovbEnQMnYNzCBWZbQNJqWWzOxyFZXbzeDsfiQ6d4xpq2pc1Tfw==", + "requires": { + "prop-types": "^15.6.2" + } + }, "react-native-tab-view": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.3.4.tgz", diff --git a/app/package.json b/app/package.json index 38d4c091..538c83ec 100644 --- a/app/package.json +++ b/app/package.json @@ -9,7 +9,7 @@ "base-64": "^0.1.0", "@expo/vector-icons": "^8.1.0", "lbry-redux": "lbryio/lbry-redux", - "lbryinc": "lbryio/lbryinc", + "lbryinc": "lbryio/lbryinc#check-sync", "lodash": ">=4.17.11", "merge": ">=1.2.1", "moment": "^2.22.1", @@ -21,6 +21,7 @@ "react-native-fast-image": "^5.0.3", "react-native-gesture-handler": "^1.1.0", "react-native-image-zoom-viewer": "^2.2.5", + "react-native-password-strength-meter": "^0.0.2", "react-native-phone-input": "lbryio/react-native-phone-input", "react-native-vector-icons": "^6.4.2", "react-native-video": "lbryio/react-native-video#exoplayer-lbry-android", diff --git a/app/src/component/rewardCard/view.js b/app/src/component/rewardCard/view.js index 10c14e00..511ea0ab 100644 --- a/app/src/component/rewardCard/view.js +++ b/app/src/component/rewardCard/view.js @@ -72,7 +72,16 @@ class RewardCard extends React.PureComponent { } }}> - + {!isPending && { + if (!claimed) { + this.onClaimPress(); + } + }}> + {claimed && } + } + {isPending && } {reward.reward_title} @@ -83,16 +92,6 @@ class RewardCard extends React.PureComponent { error={'The transaction URL could not be opened'} />} - {!isPending && { - if (!claimed) { - this.onClaimPress(); - } - }}> - - } - {isPending && } {reward.reward_amount} LBC diff --git a/app/src/constants.js b/app/src/constants.js index d50fdfc7..e4277059 100644 --- a/app/src/constants.js +++ b/app/src/constants.js @@ -1,6 +1,7 @@ const Constants = { FIRST_RUN_PAGE_WELCOME: "welcome", FIRST_RUN_PAGE_EMAIL_COLLECT: "email-collect", + FIRST_RUN_PAGE_EMAIL_VERIFY:"email-verify", FIRST_RUN_PAGE_WALLET: "wallet", FIRST_RUN_PAGE_SKIP_ACCOUNT: "skip-account", diff --git a/app/src/index.js b/app/src/index.js index 6c5892a5..3eb4cb33 100644 --- a/app/src/index.js +++ b/app/src/index.js @@ -44,6 +44,7 @@ import thunk from 'redux-thunk'; const globalExceptionHandler = (error, isFatal) => { if (error && NativeModules.Firebase) { + console.log(error); NativeModules.Firebase.logException(isFatal, error.message ? error.message : "No message", error); } }; diff --git a/app/src/page/firstRun/index.js b/app/src/page/firstRun/index.js index 699d0142..a134bd44 100644 --- a/app/src/page/firstRun/index.js +++ b/app/src/page/firstRun/index.js @@ -2,12 +2,17 @@ import { connect } from 'react-redux'; import { doToast } from 'lbry-redux'; import { doAuthenticate, + doCheckSync, doUserEmailNew, + doUserResendVerificationEmail, selectAuthToken, selectEmailNewErrorMessage, selectEmailNewIsPending, selectEmailToVerify, - selectAuthenticationIsPending + selectAuthenticationIsPending, + selectHasSyncedWallet, + selectIsRetrievingSync, + selectUser, } from 'lbryinc'; import FirstRun from './view'; @@ -17,12 +22,17 @@ const select = (state) => ({ emailToVerify: selectEmailToVerify(state), emailNewErrorMessage: selectEmailNewErrorMessage(state), emailNewPending: selectEmailNewIsPending(state), + hasSyncedWallet: selectHasSyncedWallet(state), + isRetrievingSync: selectIsRetrievingSync(state), + user: selectUser(state), }); const perform = dispatch => ({ addUserEmail: email => dispatch(doUserEmailNew(email)), authenticate: (appVersion, os) => dispatch(doAuthenticate(appVersion, os)), - notify: data => dispatch(doToast(data)) + checkSync: () => dispatch(doCheckSync()), + notify: data => dispatch(doToast(data)), + resendVerificationEmail: email => dispatch(doUserResendVerificationEmail(email)) }); export default connect(select, perform)(FirstRun); diff --git a/app/src/page/firstRun/internal/email-collect-page.js b/app/src/page/firstRun/internal/email-collect-page.js index 39c3b625..73ceecf9 100644 --- a/app/src/page/firstRun/internal/email-collect-page.js +++ b/app/src/page/firstRun/internal/email-collect-page.js @@ -22,29 +22,35 @@ class EmailCollectPage extends React.PureComponent { authenticationStarted: false, authenticationFailed: false, placeholder: 'you@example.com', - statusTries: 0 + statusTries: 0, + verifying: true }; componentWillReceiveProps(nextProps) { - const { authenticating, authToken } = this.props; + const { authenticating, authToken, showNextPage } = this.props; + const { user } = nextProps; if (this.state.authenticationStarted && !authenticating && authToken === null) { this.setState({ authenticationFailed: true, authenticationStarted: false }); } + + if (this.state.verifying) { + if (user && user.primary_email && user.has_verified_email) { + if (showNextPage) { + showNextPage(); + } + } else { + this.setState({ verifying: false }); + } + } } componentDidMount() { // call user/new const { generateAuthToken, authenticating, authToken } = this.props; - if (!authToken && !authenticating) { + if (!authenticating) { this.startAuthenticating(); } - - AsyncStorage.getItem('firstRunEmail').then(email => { - if (email) { - this.setState({ email }); - } - }); } startAuthenticating = () => { @@ -88,7 +94,7 @@ class EmailCollectPage extends React.PureComponent { The LBRY servers were unreachable at this time. Please check your Internet connection and then restart the app to try again. ); - } else if (!authToken || authenticating) { + } else if (!authToken || authenticating || this.state.verifying) { content = ( @@ -115,7 +121,7 @@ class EmailCollectPage extends React.PureComponent { } }} /> - An account will allow you to earn rewards and keep your content and settings synced. + An account will allow you to earn rewards and keep your account and settings synced. This information is disclosed only to LBRY, Inc. and not to the LBRY network. ); diff --git a/app/src/page/firstRun/internal/email-verify-page.js b/app/src/page/firstRun/internal/email-verify-page.js new file mode 100644 index 00000000..bf0a4539 --- /dev/null +++ b/app/src/page/firstRun/internal/email-verify-page.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { Lbry } from 'lbry-redux'; +import { + ActivityIndicator, + Linking, + NativeModules, + Platform, + Switch, + Text, + TextInput, + View +} from 'react-native'; +import AsyncStorage from '@react-native-community/async-storage'; +import Button from 'component/button'; +import Colors from 'styles/colors'; +import Constants from 'constants'; +import Icon from 'react-native-vector-icons/FontAwesome5'; +import firstRunStyle from 'styles/firstRun'; + +class EmailVerifyPage extends React.PureComponent { + onResendPressed = () => { + const { email, notify, resendVerificationEmail } = this.props; + resendVerificationEmail(email); + AsyncStorage.setItem(Constants.KEY_EMAIL_VERIFY_PENDING, 'true'); + notify({ message: 'Please follow the instructions in the email sent to your address to continue.' }); + } + + render() { + const { onEmailViewLayout, email } = this.props; + + const content = ( + + Verify Email + An email has been sent to {email}. Please follow the instructions in the message to verify your email address. + + +