Added register screen

This commit is contained in:
Mustafa Buyukcelebi 2020-05-02 19:35:08 +03:00
parent 9da8a3dfa4
commit d887b68503
17 changed files with 344 additions and 21 deletions

BIN
src/assets/esteem-logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -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']}

View File

@ -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(

View File

@ -222,6 +222,17 @@
"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": {
"register": "Register",
"signup": "Sign Up",
"username": "Pick a username",
"mail": "Enter your email address",
"ref_user": "Referred user (Optional)",
// TODO: Change messages
"500_error": "xxxxxxxxxx",
"title_description": "xxxxxxxxxx",
"form_description": "xxxxxxxxxx"
},
"home": {
"feed": "Feed",
"popular": "Popular",

View File

@ -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}`,

View File

@ -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

View File

@ -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 },
});

View File

@ -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);

View File

@ -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)}`,
);

View File

@ -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,

View File

@ -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() {

View File

@ -0,0 +1,72 @@
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', 'heeeey');
}
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);

View File

@ -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}>Sign Up</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="mail"
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.register',
})}
isDisable={!isUsernameValid || !isRefUsernameValid || !isEmailValid}
isLoading={isLoading}
style={styles.mainButton}
/>
</View>
</View>
</SafeAreaView>
)}
</RegisterContainer>
);
};
export default withNavigation(RegisterScreen);

View File

@ -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,
},
});

View File

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

File diff suppressed because one or more lines are too long