Merge pull request #204 from LiskHQ/175-implement-the-registration-su…

…ccess-page

Implement the registration success page - Closes #175

src/components/register/index.js

@@ -15,6 +15,9 @@ const NavButton = props =>
 const ActiveTitle = props => <Small style={styles.activeGroupTitle} {...props} />;
 
 class Register extends React.Component {
+  state = {
+    showNav: true,
+  };
   static navigationOptions = ({ navigation }) => {
     const { params = {} } = navigation.state;
     return {
@@ -30,22 +33,22 @@ class Register extends React.Component {
         }}
         style={styles.backButton}
         color={colors.primary9}/> :
-        <IconButton
-          icon='back'
-          title=''
-          onPress={() => navigation.pop()}
-          style={styles.backButton}
-          iconButtonTitle={styles.backTitle}
-          color={colors.primary9} />,
+        null,
     };
   };
+  hideNav = () => {
+    this.setState({
+      showNav: false,
+    });
+  }
   render() {
     const { navigation } = this.props;
+    const noNavStyle = this.state.showNav ? {} : { paddingBottom: 0 };
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, noNavStyle]}>
         <MultiStep
           ref={(el) => { this.nav = el; }}
-          showNav={true}
+          showNav={this.state.showNav}
           navStyles={styles}
           hideSteps={true}
           groupButton={NavButton}
@@ -54,7 +57,9 @@ class Register extends React.Component {
           <Intro title='create' group='1. Creating your account' navigation={navigation}></Intro>
           <SafeKeeping title='safekeeping' group='2. Saving your passphrase' navigation={navigation}></SafeKeeping>
           <Confirm title='verify' group='3. Verifying your passphrase' navigation={navigation}></Confirm>
-          <Success title='success' group='3. Verifying your passphrase' navigation={navigation}></Success>
+          <Success title='success' group='3. Verifying your passphrase'
+            hideNav={this.hideNav}
+            navigation={navigation}></Success>
         </MultiStep>
       </View>
     );

src/components/register/intro/index.js

@@ -18,7 +18,7 @@ class Intro extends React.Component {
     this.setState({
       passphrase,
     });
-    this.props.navigation.setParams({ action: false });
+    this.props.navigation.setParams({ action: this.props.navigation.pop });
   }
   confirm = (status) => {
     this.setState({

src/components/register/safeKeeping/styles.js

@@ -60,4 +60,3 @@ const styles = {
 };
 
 export default StyleSheet.create(styles);
-// box-shadow: 0 0 20px 0 ;

src/components/register/success/index.js

@@ -1,6 +1,44 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import SvgUri from 'react-native-svg-uri';
+import { View } from 'react-native';
+import styles from './styles';
+import { H1, P } from '../../toolBox/typography';
+import { SecondaryButton } from '../../toolBox/button';
+import image from '../../../assets/images/success.svg';
 
-const Success = () => <View><Text>Success</Text></View>;
+class Success extends React.Component {
+  componentDidMount() {
+    this.props.hideNav();
+    this.props.navigation.setParams({ action: false });
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <View>
+          <View style={styles.titleContainer}>
+            <H1 style={styles.header}>Perfect! You’re all set.</H1>
+            <P style={styles.subtitle}>
+              All the steps needed for creating an ID are{'\n'}
+              complete. You can now start sending and{'\n'}
+              receiving LSK tokens.
+            </P>
+          </View>
+          <View style={styles.image} >
+            <SvgUri
+              width="198"
+              height="198"
+              source={image}
+            />
+          </View>
+        </View>
+        <View>
+          <SecondaryButton
+            style={styles.button}
+            onClick={() => this.props.navigation.navigate('Login')}
+            title='Sign in now' />
+        </View>
+      </View>);
+  }
+}
 
 export default Success;

src/components/register/success/styles.js

@@ -0,0 +1,33 @@
+import { StyleSheet, DeviceInfo } from 'react-native';
+import { colors } from '../../../constants/styleGuide';
+
+const styles = {
+  container: {
+    flexDirection: 'column',
+    marginRight: 20,
+    marginLeft: 20,
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  header: {
+    marginTop: 8,
+    paddingBottom: 12,
+  },
+  subTitle: {
+    color: colors.grayScale2,
+  },
+  subHeader: {
+    marginTop: 14,
+    marginBottom: 25,
+    color: colors.grayScale1,
+  },
+  image: {
+    marginTop: 52,
+    alignItems: 'center',
+  },
+  button: {
+    marginBottom: DeviceInfo.isIPhoneX_deprecated ? 35 : 25,
+  },
+};
+
+export default StyleSheet.create(styles);