mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-24 05:42:33 +03:00
Added register screen
This commit is contained in:
parent
9da8a3dfa4
commit
d887b68503
Binary file not shown.
BIN
src/assets/esteem-logo.png
Normal file
BIN
src/assets/esteem-logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
@ -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']}
|
||||
|
@ -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(
|
||||
|
@ -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",
|
||||
|
@ -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}`,
|
||||
|
@ -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
|
||||
|
@ -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 },
|
||||
});
|
||||
|
@ -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);
|
||||
|
@ -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)}`,
|
||||
);
|
||||
|
@ -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,
|
||||
|
@ -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() {
|
||||
|
72
src/screens/register/registerContainer.js
Normal file
72
src/screens/register/registerContainer.js
Normal 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);
|
178
src/screens/register/registerScreen.js
Normal file
178
src/screens/register/registerScreen.js
Normal 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);
|
69
src/screens/register/registerStyles.js
Normal file
69
src/screens/register/registerStyles.js
Normal 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,
|
||||
},
|
||||
});
|
@ -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
Loading…
Reference in New Issue
Block a user