change design change email and add welcome page (1)

app.json

 {
   "expo": {
-    "name": "Excelso_update v1. siang.14.05.2020",
+    "name": "Excelso_update 11.30 / 14.05.2020",
     "slug": "excelso-pro",
     "privacy": "public",
     "sdkVersion": "36.0.0",

view/Account.js

@@ -174,7 +174,7 @@ class Account extends React.Component {
                     <View style={styles.profil}>
                         <Image
                             style={{ height: 70, width: 70, top: 15, }}
-                            source={require('../assets/images/user.png')}
+                            source={require('../assets/images/people-actv.png')}
                         />
                         <Text style={styles.txtNama}>
                             {this.props.username}

view/Auth.js

@@ -50,6 +50,7 @@ import RewardDetail from './RewardDetail';
 import RewardSelect from './RewardSelect';
 import Outlets from './Outlets';
 import RewardHistory from './RewardHistory';
+import WelcomeReg from './WelcomeReg';
 
 enableScreens();
 
@@ -117,15 +118,21 @@ class Auth extends React.Component {
               <Stack.Screen name="Change Profil" component={ChangeProfile} />
               <Stack.Screen name="Register" component={Register} />
               {/* <Stack.Screen name="Change language" component={ChangeLanguage} /> */}
-              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} options={{headerStyle: { backgroundColor: '#CFB368' },
-                      headerTitleContainerStyle: { alignContent: 'center' },
-                      headerTitleAlign:'center',
-                      headerTitleStyle: {
-                        alignSelf: 'center',
-                        fontFamily: 'Gotham-Black',
-                        color: 'white',
-                        textAlign: 'center'
-                      },title:'EMAIL CONFIRMATION'}} />
+              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} options={{
+                headerStyle: { backgroundColor: '#CFB368' },
+                headerTitleContainerStyle: { alignContent: 'center' },
+                headerTitleAlign: 'center',
+                headerTintColor: '#fff',
+                headerTitleStyle: {
+                  alignSelf: 'center',
+                  fontFamily: 'Gotham-Black',
+                  color: 'white',
+                  textAlign: 'center'
+                }, title: 'EMAIL CONFIRMATION'
+              }} />
+              <Stack.Screen name="Welcomes" component={WelcomeReg} options={{
+                headerShown: false ,
+              }} />
             </>
           ) : this.props.pageEmailConfirmation === true ? (
             <>
@@ -172,6 +179,7 @@ class Auth extends React.Component {
                   <Stack.Screen name="Shopping Cart" component={ShoppingCart} />
                   <Stack.Screen name="Order History" component={OrderHistory} />
                   <Stack.Screen name="Reward History" component={RewardHistory} />
+
                   <Stack.Screen name="Order Detail" component={OrderDetail} options={({ navigation, route }) => ({
                     headerLeft: props => <HeaderBackButton  {...props} onPress={() => navigation.navigate('Home', { screen: 'ORDER' })} />,
 
@@ -183,26 +191,26 @@ class Auth extends React.Component {
 
         }
 
-        <Stack.Screen name="New Password" component={NewPassword}  options={{
-            headerStyle: { backgroundColor: "#ccb46c" },
-            headerBackTitleStyle: { color: 'white' },
-            headerTitleAlign:'center',
-            headerTintColor: '#fff',
-            headerTitleStyle: {
-              textAlign: 'center',
-              fontSize: 15,
-              fontFamily: 'Gotham-Black',
-              color: 'white'
-            },
-            headerTitle: 'New'
+        <Stack.Screen name="New Password" component={NewPassword} options={{
+          headerStyle: { backgroundColor: "#ccb46c" },
+          headerBackTitleStyle: { color: 'white' },
+          headerTitleAlign: 'center',
+          headerTintColor: '#fff',
+          headerTitleStyle: {
+            textAlign: 'center',
+            fontSize: 15,
+            fontFamily: 'Gotham-Black',
+            color: 'white'
+          },
+          headerTitle: 'New Password'
 
-          }} />
+        }} />
         {/* <Stack.Screen name="Login" component={Login} /> */}
         <Stack.Screen name="Reset Password" component={ResetPassword}
           options={{
             headerStyle: { backgroundColor: "#ccb46c" },
             headerBackTitleStyle: { color: 'white' },
-            headerTitleAlign:'center',
+            headerTitleAlign: 'center',
             headerTintColor: '#fff',
             headerTitleStyle: {
               textAlign: 'center',
@@ -215,7 +223,20 @@ class Auth extends React.Component {
           }} />
 
         <Stack.Screen name="Verify Email" component={VerifyEmail} />
-        <Stack.Screen name="Change Email" component={ChangeEmail} />
+        <Stack.Screen name="Change Email" component={ChangeEmail} options={{
+          headerStyle: { backgroundColor: "#ccb46c" },
+          headerBackTitleStyle: { color: 'white' },
+          headerTitleAlign: 'center',
+          headerTintColor: '#fff',
+          headerTitleStyle: {
+            textAlign: 'center',
+            fontSize: 15,
+            fontFamily: 'Gotham-Black',
+            color: 'white'
+          },
+          headerTitle: 'CHANGE EMAIL'
+
+        }} />
         {/* <Stack.Screen name="Card Activation" component={CardActivation} /> */}
         <Stack.Screen name="Confirm Mobile" component={ConfirmMobile} />
         <Stack.Screen name="Balance" component={Balance} />
@@ -232,12 +253,12 @@ class Auth extends React.Component {
             headerStyle: { backgroundColor: "#ccb46c" },
             headerBackTitleStyle: { color: 'white' },
             headerTintColor: '#fff',
-            headerTitleAlign:'center',
+            headerTitleAlign: 'center',
             headerTitleStyle: {
               fontFamily: 'Gotham-Black',
               color: 'white',
               fontSize: 20,
-            }, 
+            },
             title: 'REGISTER'
           }} />
         <Stack.Screen name="TopUpInfo" component={TopUpInfo} />

view/ChangeEmail.js

 import React from 'react';
-import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+import { View, Text, TextInput, StyleSheet, Button, Alert, TouchableOpacity, Image } from 'react-native';
 import { connect } from 'react-redux';
 import Axios from 'axios';
 import ActionType from '../redux/globalActionType';
+import Spinner from 'react-native-loading-spinner-overlay';
 
 class ChangeEmail extends React.Component {
 
@@ -47,27 +48,43 @@ class ChangeEmail extends React.Component {
     render() {
         return (
             <View style={styles.container}>
-                <View style={styles.header}>
-                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Change Email</Text>
-                </View>
-                <View style={styles.form}>
-                    <View style={styles.field_email}>
-                        <View style={{ width: 55, justifyContent: 'center' }}>
-                            <Text>Email</Text>
+            <Spinner
+                visible={this.state.spinner}
+                textContent={'Loading...'}
+                textStyle={styles.spinnerTextStyle}
+            />
+            <View style={{ flex: 3 }}>
+                <View style={{ flex: 1, marginRight: 30, marginLeft: 30, top: 50 }}>
+                    <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3 }}>New Email</Text>
+                    <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10, borderRadius: 10, borderColor: 'grey', fontFamily: 'Gotham-Black', textAlign: 'center', color: 'grey', fontWeight: 'bold', fontSize: 20 }}
+                        onChangeText={(email) => this.setState({ email })}
+                        value={this.state.email}
+                        autoCapitalize="none"
+                        value={this.state.email}
+                        keyboardType='email-address' />
+                    <TouchableOpacity style={{ height: 100 }} onPress={() => this.changeEmail()}>
+                        <View style={{ backgroundColor: '#CFB368', height: 45, top: 20, borderRadius: 10, marginRight: 50, marginLeft: 50 }}>
+                            <Text style={{ alignSelf: 'center', top: 10, color: 'white', fontFamily: 'Gotham-Black', fontSize: 20 }}>SUBMIT</Text>
                         </View>
-                        <View style={{ flex: 1 }}>
-                            <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
-                                onChangeText={(email) => this.setState({ email })}
-                                value={this.state.email}
-                            />
+                    </TouchableOpacity>
+                </View>
+            </View>
+            <View style={{ flex: 1, flexDirection: 'row' }}>
 
-                        </View>
+                <View style={styles.v_logo}>
+                    <View style={{ flex: 1, alignSelf: 'flex-start' }}>
+                        <Image resizeMode="contain" source={require('../assets/images/daun.png')} style={styles.logo}></Image>
                     </View>
-                    <View style={styles.button}>
-                        <Button title="Submit" onPress={() => this.changeEmail()}></Button>
+                    <View style={{ flex: 1 }}>
+
                     </View>
                 </View>
+
+                <View style={{ flex: 0.5 }}>
+
+                </View>
             </View>
+        </View>
         )
     }
 }
@@ -86,6 +103,7 @@ const styles = StyleSheet.create({
 
     form: {
         flex: 3,
+        top: 40,
         margin: 10,
         marginTop: 0,
     },
@@ -95,9 +113,22 @@ const styles = StyleSheet.create({
     },
 
     button: {
-        height: 50,
+        height: 40,
         margin: 10,
 
+    },
+    logo: {
+        alignSelf: 'flex-start',
+        marginTop: 50,
+        width: 290,
+        height: 290,
+        bottom: 145,
+
+    },
+    v_logo: {
+        flex: 2,
+        flexDirection: 'column-reverse',
+        alignContent: 'flex-start',
     }
 
 })
@@ -126,4 +157,27 @@ const mapStateToProps = (state) => {
     }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ChangeEmail);
+export default connect(mapStateToProps, mapDispatchToProps)(ChangeEmail);
\ No newline at end of file
+
+
+
+{/* <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Change Email</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Email</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                onChangeText={(email) => this.setState({ email })}
+                                value={this.state.email}
+                            />
+
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Submit" onPress={() => this.changeEmail()}></Button>
+                    </View>
+                </View> */}
\ No newline at end of file

view/EmailConfirmation.js

@@ -97,7 +97,7 @@ class EmailConfirmation extends React.Component {
                         index: 0,
                         routes: [
                           {
-                            name: 'Login',
+                            name: 'Welcomes',
                           },
                         ],
                       })

view/ResetPassword.js

@@ -4,7 +4,6 @@ import Axios from 'axios';
 import { BASE_URL_RESET_PASSWORD } from '../model/Base_Model';
 import ActionType from '../redux/globalActionType';
 import { connect } from 'react-redux';
-
 import i18n from 'i18n-js';
 import Spinner from 'react-native-loading-spinner-overlay';
 

view/WelcomeReg.js

+import * as React from 'react';
+import { Button, View, Text, TextInput, StyleSheet, Alert, Platform, Image, TouchableOpacity, StatusBar, ImageBackground, ScrollView } from 'react-native';
+import Axios from 'axios';
+import Constants from 'expo-constants';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+import { BASE_URL_LOGIN } from '../model/Base_Model';
+import { Notifications } from 'expo';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+export default class Welcome extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = ({
+            spinner: ''
+        })
+    }
+
+    componentDidMount() {
+        // console.log(this.props.language)
+    }
+
+
+    render() {
+
+        return (
+            <View style={styles.container}>
+                <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <StatusBar
+                    hidden={true} />
+
+                <ImageBackground source={require('../assets/images/after-log.jpg')} style={{ width: '100%', height: '100%' }}>
+                    <View style={styles.v_form}>
+                        <View style={{ flex: 1, marginRight: 30, marginLeft: 30, justifyContent: 'center' }}>
+                        </View>
+                        <View style={{ flex: 1, height: 50, marginRight: 30, marginLeft: 30, justifyContent: 'center' }}>
+                        </View>
+                        <View style={{ flex: 1, height: 50, marginRight: 70, marginLeft: 70, justifyContent: 'center' }}>
+                        </View>
+                    </View>
+                    <View style={styles.v_policy}>
+                    <View style={{ flex: 1, height: 50, marginRight: 70, marginLeft: 70, justifyContent: 'center' }}>
+                    <TouchableOpacity onPress={()=> this.props.navigation.navigate('Login')}>
+                                <View style={{ height: 50, borderRadius: 20, backgroundColor: '#CFB368' }}>
+                                    <Text style={{ fontFamily: 'Gotham-Black', color: 'black', fontSize: 20, textAlign: 'center', margin: 15 }}>NEXT</Text>
+                                </View>
+                    </TouchableOpacity>
+                    </View>
+                    </View>
+                </ImageBackground>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#151515',
+    },
+    logo: {
+        flex: 2.5,
+        height: 50
+    },
+    imageslogo: {
+        height: 170,
+        margin: 10,
+        width: 150,
+        justifyContent: 'center',
+        alignSelf: 'center',
+        top: 50
+    },
+    v_form: {
+        flex: 3,
+
+    },
+    v_policy: {
+        flex: 2,
+    }
+})