Merge pull request #1665 from esteemapp/feature/register

Added register screen

src/components/popoverWrapper/popoverWrapperView.js

@@ -17,7 +17,7 @@ const PopoverWrapper = ({ children, text }) => {
             contentStyle={styles.popoverDetails}
             arrowStyle={styles.arrow}
             visible={popoverVisible}
-            onClose={() => closePopover()}
+            onClose={closePopover}
             fromRect={popoverAnchorRect}
             placement="top"
             supportedOrientations={['portrait', 'landscape']}

src/components/postDropdown/container/postDropdownContainer.js

@@ -157,7 +157,6 @@ class PostDropdownContainer extends PureComponent {
           );
         })
         .catch((error) => {
-          console.log(error);
           if (String(get(error, 'jse_shortmsg', '')).indexOf('has already reblogged') > -1) {
             dispatch(
               toastNotification(

src/config/locales/en-US.json

@@ -222,6 +222,16 @@
     "steemconnect_description": "If you don't want to keep your password encrypted and saved on your device, you can use Hivesigner.",
     "steemconnect_fee_description": "info"
   },
+  "register": {
+    "button": "Sign Up",
+    "title": "Sign up",
+    "username": "Pick a username",
+    "mail": "Enter your email address",
+    "ref_user": "Referred user (Optional)",
+    "500_error": "Your request could not be processed, signup queue is likely full! Try again in few minutes...",
+    "title_description": "One account to manage everything",
+    "form_description": "After registeration, you will receive an email with further instructions"
+  },
   "home": {
     "feed": "Feed",
     "popular": "Popular",

src/constants/routeNames.js

@@ -19,6 +19,7 @@ export default {
     PROFILE: `Profile${SCREEN_SUFFIX}`,
     REBLOGS: `Reblogs${SCREEN_SUFFIX}`,
     REDEEM: `Redeem${SCREEN_SUFFIX}`,
+    REGISTER: `Register${SCREEN_SUFFIX}`,
     SEARCH_RESULT: `SearchResult${SCREEN_SUFFIX}`,
     SETTINGS: `Settings${SCREEN_SUFFIX}`,
     STEEM_CONNECT: `SteemConnect${SCREEN_SUFFIX}`,

src/containers/profileContainer.js

@@ -182,7 +182,6 @@ class ProfileContainer extends Component {
     this.setState({
       isProfileLoading: false,
     });
-    console.log(error);
     if (error) {
       if (error.jse_shortmsg && error.jse_shortmsg.includes('wait to transact')) {
         //when RC is not enough, offer boosting account

src/containers/transferContainer.js

@@ -99,7 +99,7 @@ class TransferContainer extends Component {
         balance = account[0].balance.replace(fundType, '');
       }
       if (transferType === 'address_view' && fundType === 'BTC') {
-        //TOD implement transfer of custom tokens
+        //TODO implement transfer of custom tokens
         console.log(tokenAddress);
       }
 

src/navigation/routes.js

@@ -27,6 +27,7 @@ import {
   ProfileEdit,
   Reblogs,
   Redeem,
+  Register,
   SearchResult,
   Settings,
   SpinGame,
@@ -137,5 +138,6 @@ const stackNavigator = createStackNavigator(
 
 export default createSwitchNavigator({
   stackNavigator,
+  [ROUTES.SCREENS.REGISTER]: { screen: Register },
   [ROUTES.SCREENS.LOGIN]: { screen: Login },
 });

src/providers/esteem/esteem.js

@@ -401,3 +401,6 @@ export const getPostReblogs = (data) =>
     .get(`/post-reblogs/${data.author}/${data.permlink}`)
     .then((resp) => resp.data)
     .catch((error) => bugsnag.notify(error));
+
+export const register = (data) =>
+  api.post('/signup/account-create', data).then((resp) => resp.data);

src/screens/application/container/applicationContainer.js

@@ -491,7 +491,6 @@ class ApplicationContainer extends Component {
         this._connectNotificationServer(accountData.name);
       })
       .catch((err) => {
-        console.log(err);
         Alert.alert(
           `${intl.formatMessage({ id: 'alert.fetch_error' })} \n${err.message.substr(0, 20)}`,
         );
@@ -590,7 +589,6 @@ class ApplicationContainer extends Component {
         dispatch(logoutDone());
       })
       .catch((err) => {
-        console.log('remove', err);
         Alert.alert(
           `${intl.formatMessage({ id: 'alert.fetch_error' })} \n${err.message.substr(0, 20)}`,
         );

src/screens/index.js

@@ -21,6 +21,7 @@ import SteemConnect from './steem-connect/steemConnect';
 import Transfer from './transfer';
 import Voters from './voters';
 import AccountBoost from './accountBoost/screen/accountBoostScreen';
+import Register from './register/registerScreen';
 
 export {
   Bookmarks,
@@ -39,6 +40,7 @@ export {
   AccountBoost,
   Reblogs,
   Redeem,
+  Register,
   SearchResult,
   Settings,
   SpinGame,

src/screens/login/container/loginContainer.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Alert, Linking, Platform } from 'react-native';
+import { Alert, Platform } from 'react-native';
 import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
 import AppCenter from 'appcenter';
@@ -142,11 +142,11 @@ class LoginContainer extends PureComponent {
   };
 
   _handleSignUp = () => {
-    const { intl } = this.props;
+    const { navigation } = this.props;
 
-    Linking.openURL('https://esteem.app/signup').catch((err) =>
-      Alert.alert(intl.formatMessage({ id: 'alert.error' }), err.message),
-    );
+    navigation.navigate({
+      routeName: ROUTES.SCREENS.REGISTER,
+    });
   };
 
   render() {

src/screens/register/registerContainer.js

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { Alert } from 'react-native';
+import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { withNavigation } from 'react-navigation';
+import get from 'lodash/get';
+
+import { lookupAccounts } from '../../providers/steem/dsteem';
+import { register } from '../../providers/esteem/esteem';
+import ROUTES from '../../constants/routeNames';
+
+const RegisterContainer = ({ children, navigation }) => {
+  const intl = useIntl();
+  const isConnected = useSelector((state) => state.application.isConnected);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const _getAccountsWithUsername = async (username) => {
+    if (!isConnected) {
+      return null;
+    }
+
+    try {
+      const validUsers = await lookupAccounts(username);
+
+      return validUsers;
+    } catch (error) {
+      Alert.alert(
+        intl.formatMessage({ id: 'alert.error' }),
+        intl.formatMessage({ id: 'alert.unknow_error' }),
+      );
+    }
+  };
+
+  const _handleOnPressRegister = ({ username, email, refUsername }) => {
+    const data = {
+      username,
+      email,
+      referral: refUsername,
+    };
+    setIsLoading(true);
+
+    register(data)
+      .then((result) => {
+        if (result) {
+          navigation.navigate({
+            routeName: ROUTES.DRAWER.MAIN,
+          });
+          Alert.alert(
+            'Success',
+            'Hurrah, you did it! Expect email from us with further instructions.',
+          );
+        }
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        if (get(err, 'response.status', false)) {
+          Alert.alert('Error', intl.formatMessage({ id: 'register.500_error' }));
+        } else {
+          Alert.alert('Error', intl.formatMessage({ id: 'alert.unknow_error' }));
+        }
+        setIsLoading(false);
+      });
+  };
+
+  return (
+    children &&
+    children({
+      getAccountsWithUsername: _getAccountsWithUsername,
+      handleOnPressRegister: _handleOnPressRegister,
+      isLoading,
+    })
+  );
+};
+
+export default withNavigation(RegisterContainer);

src/screens/register/registerScreen.js

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { View, StatusBar, Platform, Image, Text, SafeAreaView } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { useIntl } from 'react-intl';
+import { withNavigation } from 'react-navigation';
+
+import RegisterContainer from './registerContainer';
+
+// Internal Components
+import { FormInput, InformationArea, MainButton, TextButton } from '../../components';
+
+// Constants
+import ROUTES from '../../constants/routeNames';
+
+// Styles
+import styles from './registerStyles';
+
+import ESTEEM_LOGO from '../../assets/esteem-logo.png';
+import ESTEEM_SMALL_LOGO from '../../assets/esteem_logo_transparent.png';
+
+const RegisterScreen = ({ navigation }) => {
+  const intl = useIntl();
+  const [keyboardIsOpen, setKeyboardIsOpen] = useState(false);
+  const [username, setUsername] = useState('');
+  const [isUsernameValid, setIsUsernameValid] = useState(false);
+  const [email, setEmail] = useState('');
+  const [isEmailValid, setIsEmailValid] = useState(false);
+  const [refUsername, setRefUsername] = useState('');
+  const [isRefUsernameValid, setIsRefUsernameValid] = useState(true);
+
+  const _handleEmailChange = (value) => {
+    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    setIsEmailValid(re.test(value));
+    setEmail(value);
+  };
+
+  const _handleUsernameChange = ({ value, getAccountsWithUsername }) => {
+    setUsername(value);
+    if (!value || value.length <= 2) {
+      setIsUsernameValid(false);
+      return;
+    }
+    getAccountsWithUsername(value).then((res) => {
+      const isValid = !res.includes(value);
+      setIsUsernameValid(isValid);
+    });
+  };
+
+  const _handleRefUsernameChange = ({ value, getAccountsWithUsername }) => {
+    setRefUsername(value);
+    if (!value) {
+      setIsRefUsernameValid(true);
+      return;
+    }
+    getAccountsWithUsername(value).then((res) => {
+      const isValid = res.includes(value);
+      setIsRefUsernameValid(isValid);
+    });
+  };
+
+  return (
+    <RegisterContainer>
+      {({ getAccountsWithUsername, isLoading, handleOnPressRegister }) => (
+        <SafeAreaView style={styles.container}>
+          <StatusBar hidden translucent />
+          <View style={styles.headerRow}>
+            <Image style={styles.logo} source={ESTEEM_SMALL_LOGO} />
+            <View style={styles.headerButton}>
+              <TextButton
+                onPress={() => {
+                  navigation.navigate({
+                    routeName: ROUTES.SCREENS.LOGIN,
+                  });
+                }}
+                text="LOGIN"
+                textStyle={{ color: '#357ce6' }}
+              />
+            </View>
+          </View>
+          {!keyboardIsOpen && (
+            <View style={styles.header}>
+              <View style={styles.titleText}>
+                <Text style={styles.title}>{intl.formatMessage({ id: 'register.title' })}</Text>
+                <Text style={styles.description}>
+                  {intl.formatMessage({ id: 'register.title_description' })}
+                </Text>
+              </View>
+              <Image style={styles.mascot} source={ESTEEM_LOGO} />
+            </View>
+          )}
+          <View style={styles.body}>
+            <KeyboardAwareScrollView
+              onKeyboardWillShow={() => setKeyboardIsOpen(true)}
+              onKeyboardWillHide={() => setKeyboardIsOpen(false)}
+              enableAutoAutomaticScroll={Platform.OS === 'ios'}
+              contentContainerStyle={styles.formWrapper}
+              enableOnAndroid={true}
+            >
+              <FormInput
+                rightIconName="at"
+                leftIconName="close"
+                iconType="MaterialCommunityIcons"
+                isValid={isUsernameValid}
+                onChange={(value) => _handleUsernameChange({ value, getAccountsWithUsername })}
+                placeholder={intl.formatMessage({
+                  id: 'register.username',
+                })}
+                isEditable
+                type="username"
+                isFirstImage
+                value={username}
+                inputStyle={styles.input}
+              />
+              <FormInput
+                rightIconName="mail"
+                leftIconName="close"
+                isValid={isEmailValid}
+                onChange={_handleEmailChange}
+                placeholder={intl.formatMessage({
+                  id: 'register.mail',
+                })}
+                isEditable
+                type="emailAddress"
+                value={email}
+                inputStyle={styles.input}
+              />
+              <FormInput
+                rightIconName="person"
+                leftIconName="close"
+                isValid={isRefUsernameValid}
+                onChange={(value) => _handleRefUsernameChange({ value, getAccountsWithUsername })}
+                placeholder={intl.formatMessage({
+                  id: 'register.ref_user',
+                })}
+                isEditable
+                type="username"
+                isFirstImage
+                value={refUsername}
+                inputStyle={styles.input}
+              />
+              <InformationArea
+                description={intl.formatMessage({ id: 'register.form_description' })}
+                iconName="ios-information-circle-outline"
+              />
+            </KeyboardAwareScrollView>
+
+            <View style={styles.footerButtons}>
+              <TextButton
+                style={styles.cancelButton}
+                onPress={() => {
+                  navigation.navigate({
+                    routeName: ROUTES.DRAWER.MAIN,
+                  });
+                }}
+                text={intl.formatMessage({
+                  id: 'login.cancel',
+                })}
+              />
+              <MainButton
+                onPress={() => handleOnPressRegister({ username, email, refUsername })}
+                iconName="person"
+                iconColor="white"
+                text={intl.formatMessage({
+                  id: 'register.button',
+                })}
+                isDisable={!isUsernameValid || !isRefUsernameValid || !isEmailValid}
+                isLoading={isLoading}
+                style={styles.mainButton}
+              />
+            </View>
+          </View>
+        </SafeAreaView>
+      )}
+    </RegisterContainer>
+  );
+};
+
+export default withNavigation(RegisterScreen);

src/screens/register/registerStyles.js

@@ -0,0 +1,69 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  body: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  footerButtons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    marginRight: 10,
+    bottom: 24,
+    right: 24,
+  },
+  cancelButton: {
+    marginRight: 10,
+  },
+  formWrapper: {
+    marginHorizontal: 30,
+    marginVertical: 10,
+  },
+  input: {
+    color: '$primaryDarkText',
+  },
+  header: {
+    flexDirection: 'row',
+    backgroundColor: '$primaryBackgroundColor',
+    justifyContent: 'space-between',
+  },
+  description: {
+    textAlignVertical: 'center',
+    color: '$primaryDarkGray',
+    fontSize: 14,
+    fontWeight: '400',
+  },
+  title: {
+    textAlignVertical: 'center',
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '$primaryDarkGray',
+    marginBottom: 16,
+  },
+  mascot: {
+    width: 160,
+    height: 227,
+  },
+  titleText: {
+    alignSelf: 'center',
+    marginTop: 20,
+    marginLeft: 32,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  headerButton: {
+    marginRight: 19,
+    alignSelf: 'center',
+  },
+  mainButton: {
+    paddingRight: 20,
+  },
+});

src/screens/steem-connect/steemConnect.js

@@ -63,7 +63,6 @@ class SteemConnect extends PureComponent {
             }
           })
           .catch((error) => {
-            console.log(error);
             Alert.alert(
               'Error',
               //intl.formatMessage({ id: