Skip to content

N
new_excelso
Commit a9f6004b authored by Wahyu Adjie Prasetyo's avatar Wahyu Adjie Prasetyo
Browse files
Options

change design email confirmation , new password, reset password (1)

parent 9716706f
Show whitespace changes
Inline Side-by-side
Showing with 232 additions and 89 deletions
view/Auth.js
View file @ a9f6004b
...@@ -110,13 +110,22 @@ class Auth extends React.Component { ...@@ -110,13 +110,22 @@ class Auth extends React.Component {
{ {
this.props.session_id === '' ? ( this.props.session_id === '' ? (
<> <>
{/* <Stack.Screen name="Change language" component={ChangeLanguage} /> */}
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} /> <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Home" component={Home} /> <Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={ProfilePage} /> <Stack.Screen name="Profile" component={ProfilePage} />
<Stack.Screen name="Change Profil" component={ChangeProfile} /> <Stack.Screen name="Change Profil" component={ChangeProfile} />
<Stack.Screen name="Register" component={Register} /> <Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> {/* <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'}} />
</> </>
) : this.props.pageEmailConfirmation === true ? ( ) : this.props.pageEmailConfirmation === true ? (
<> <>
...@@ -174,7 +183,20 @@ class Auth extends React.Component { ...@@ -174,7 +183,20 @@ class Auth extends React.Component {
} }
<Stack.Screen name="New Password" component={NewPassword} /> <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="Login" component={Login} /> */} {/* <Stack.Screen name="Login" component={Login} /> */}
<Stack.Screen name="Reset Password" component={ResetPassword} <Stack.Screen name="Reset Password" component={ResetPassword}
options={{ options={{
...@@ -210,10 +232,11 @@ class Auth extends React.Component { ...@@ -210,10 +232,11 @@ class Auth extends React.Component {
headerStyle: { backgroundColor: "#ccb46c" }, headerStyle: { backgroundColor: "#ccb46c" },
headerBackTitleStyle: { color: 'white' }, headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff', headerTintColor: '#fff',
headerTitleAlign:'center',
headerTitleStyle: { headerTitleStyle: {
fontFamily: 'Gotham-Black', fontFamily: 'Gotham-Black',
color: 'white', color: 'white',
fontSize: 30, fontSize: 20,
}, },
title: 'REGISTER' title: 'REGISTER'
}} /> }} />
......
view/EmailConfirmation.js
View file @ a9f6004b
import * as React from 'react'; import * as React from 'react';
import { Button, View, Text, StyleSheet, TextInput, Alert } from 'react-native'; import { Button, View, Text, StyleSheet, TextInput, Alert, Image } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler'; import { TouchableOpacity } from 'react-native-gesture-handler';
import Axios from 'axios'; import Axios from 'axios';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
...@@ -161,28 +161,45 @@ class EmailConfirmation extends React.Component { ...@@ -161,28 +161,45 @@ class EmailConfirmation extends React.Component {
textContent={'Loading...'} textContent={'Loading...'}
textStyle={styles.spinnerTextStyle} textStyle={styles.spinnerTextStyle}
/> />
<View style={{ margin: 10, top: 10 }}> <View style={{ flex: 3 }}>
<TextInput <View style={{ flex: 1, marginRight: 30, marginLeft: 30, top: 60 }}>
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }} <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3 }}>Token</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={(confirmation_number) => this.setState({ confirmation_number })} onChangeText={(confirmation_number) => this.setState({ confirmation_number })}
value={this.state.confirmation_number} value={this.state.confirmation_number}
/> autoCapitalize="none"
value={this.state.email}
keyboardType='email-address' />
<TouchableOpacity style={{ height: 100 }} onPress={() => this.handleSubmit()}>
<View style={{ backgroundColor: '#CFB368', height: 45, top: 10, borderRadius: 10, marginRight: 50, marginLeft: 50 }}>
<Text style={{ alignSelf: 'center', top: 10, color: 'white', fontFamily: 'Gotham-Black', fontSize: 20 }}>SUBMIT</Text>
</View> </View>
<View style={{ margin: 10 }}>
<Button title="Submit" onPress={() => this.handleSubmit()} />
</View>
<View style={{ margin: 10 }}>
<Button title="Cancel" onPress={() => this.handleCancel()} />
</View>
<View>
<TouchableOpacity onPress={() => this.handleResend()}>
<Text style={{ color: 'red', textAlign: 'center' }}>Resend email token</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{ height: 100 }} onPress={() => this.handleCancel()}>
<View style={{ backgroundColor: '#CFB368', height: 45, top: 10, borderRadius: 10, marginRight: 50, marginLeft: 50 }}>
<Text style={{ alignSelf: 'center', top: 10, color: 'white', fontFamily: 'Gotham-Black', fontSize: 20 }}>CANCEL</Text>
</View> </View>
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Change Email')}>
<Text style={{ color: 'red', textAlign: 'center' }}> Change email</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{ height: 60}} onPress={() => this.handleResend()}>
<Text style={{ alignSelf: 'center', color: '#CFB368', fontFamily: 'Gotham-Black', fontSize: 20 ,top:10}}>RESEND EMAIL TOKEN</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 60}} onPress={() => this.props.navigation.navigate('Change Email')}>
<Text style={{ alignSelf: 'center', color: '#CFB368', fontFamily: 'Gotham-Black', fontSize: 20, }}>CHANGE EMAIL</Text>
</TouchableOpacity>
</View>
</View>
<View style={{ flex: 1, flexDirection: 'row' }}>
<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={{ flex: 1 }}>
</View>
</View>
<View style={{ flex: 0.5 }}>
</View>
</View> </View>
</View> </View>
) )
...@@ -191,9 +208,45 @@ class EmailConfirmation extends React.Component { ...@@ -191,9 +208,45 @@ class EmailConfirmation extends React.Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: 'white' backgroundColor: '#ffff'
},
header: {
flex: 0.5,
margin: 10,
},
form: {
flex: 3,
top: 40,
margin: 10,
marginTop: 0,
},
field_email: {
flexDirection: 'row'
},
button: {
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',
} }
}) })
...@@ -249,3 +302,33 @@ const mapDispatchToProps = (dispacth) => { ...@@ -249,3 +302,33 @@ const mapDispatchToProps = (dispacth) => {
export default connect(mapStateToProps,mapDispatchToProps)(EmailConfirmation); export default connect(mapStateToProps,mapDispatchToProps)(EmailConfirmation);
{/* <Spinner
visible={this.state.spinner}
textContent={'Loading...'}
textStyle={styles.spinnerTextStyle}
/>
<View style={{ margin: 10, top: 10 }}>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
onChangeText={(confirmation_number) => this.setState({ confirmation_number })}
value={this.state.confirmation_number}
/>
</View>
<View style={{ margin: 10 }}>
<Button title="Submit" onPress={() => this.handleSubmit()} />
</View>
<View style={{ margin: 10 }}>
<Button title="Cancel" onPress={() => this.handleCancel()} />
</View>
<View>
<TouchableOpacity onPress={() => this.handleResend()}>
<Text style={{ color: 'red', textAlign: 'center' }}>Resend email token</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Change Email')}>
<Text style={{ color: 'red', textAlign: 'center' }}> Change email</Text>
</TouchableOpacity>
</View> */}
\ No newline at end of file
view/NewPassword.js
View file @ a9f6004b
import React from 'react'; 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 { connect } from 'react-redux';
import Axios from 'axios'; import Axios from 'axios';
import { BASE_URL_NEW_PASSWORD } from '../model/Base_Model' import { BASE_URL_NEW_PASSWORD } from '../model/Base_Model'
...@@ -17,11 +17,11 @@ class NewPassword extends React.Component { ...@@ -17,11 +17,11 @@ class NewPassword extends React.Component {
} }
} }
componentDidMount(){ componentDidMount() {
// console.log(this.props) // console.log(this.props)
} }
validation(){ validation() {
this.setState({ this.setState({
spinner: true, spinner: true,
}) })
...@@ -35,7 +35,7 @@ class NewPassword extends React.Component { ...@@ -35,7 +35,7 @@ class NewPassword extends React.Component {
, ,
) )
}else{ } else {
this.handleResetPassword(); this.handleResetPassword();
} }
} }
...@@ -51,7 +51,7 @@ class NewPassword extends React.Component { ...@@ -51,7 +51,7 @@ class NewPassword extends React.Component {
'password_confirmation': this.state.password_confirmation 'password_confirmation': this.state.password_confirmation
} }
// console.log(params); // console.log(params);
Axios.post(BASE_URL_NEW_PASSWORD,params).then(res => { Axios.post(BASE_URL_NEW_PASSWORD, params).then(res => {
this.setState({ this.setState({
spinner: false, spinner: false,
}) })
...@@ -73,43 +73,40 @@ class NewPassword extends React.Component { ...@@ -73,43 +73,40 @@ class NewPassword extends React.Component {
textContent={'Loading...'} textContent={'Loading...'}
textStyle={styles.spinnerTextStyle} textStyle={styles.spinnerTextStyle}
/> />
<View style={styles.header}> <View style={{ flex: 3}}>
<View style={{ flex: 1, marginRight: 30, marginLeft: 30, top: 50 }}>
</View> <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3 }}>Token</Text>
<View style={styles.form}> <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 }}
<View style={styles.field_token}>
<View style={{ width: 55, justifyContent: 'center' }}>
<Text>Token</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
onChangeText={(confirmation_number) => this.setState({ confirmation_number })} onChangeText={(confirmation_number) => this.setState({ confirmation_number })}
value={this.state.confirmation_number} /> value={this.state.confirmation_number} />
</View> <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3 }}>New Password</Text>
</View> <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 }}
<View style={styles.field_new_password}>
<View style={{ width: 55, justifyContent: 'center' }}>
</View>
<View style={{ flex: 1 }}>
<TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
onChangeText={(password) => this.setState({ password })} onChangeText={(password) => this.setState({ password })}
value={this.state.password} value={this.state.password}
secureTextEntry={true}/> secureTextEntry={true} />
<Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3 }}>Repeat Password</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={(password_confirmation) => this.setState({ password_confirmation })}
value={this.state.password_confirmation}
secureTextEntry={true} />
<TouchableOpacity style={{ height: 100 }} onPress={() => this.handleResetPassword()}>
<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>
</TouchableOpacity>
</View> </View>
<View style={styles.field_repeat_password}> </View>
<View style={{ width: 55, justifyContent: 'center' }}> <View style={{ flex: 1, flexDirection: 'row' }}>
<Text>Repeat Password</Text> <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>
<View style={{ flex: 1 }}> <View style={{ flex: 1 }}>
<TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
onChangeText={(password_confirmation) => this.setState({ password_confirmation })}
value={this.state.password_confirmation}
secureTextEntry={true}/>
</View> </View>
</View> </View>
<View style={styles.button}>
<Button title="Submit" onPress={() => this.validation()}></Button> <View style={{ flex: 0.5 }}>
</View> </View>
</View> </View>
</View> </View>
...@@ -124,41 +121,82 @@ const styles = StyleSheet.create({ ...@@ -124,41 +121,82 @@ const styles = StyleSheet.create({
backgroundColor: '#ffff' backgroundColor: '#ffff'
}, },
header: {
flex: 0.5,
margin: 10,
},
form: { form: {
flex: 3, flex: 3,
margin: 10, margin: 10,
marginTop: 0, marginTop: 0,
}, },
field_token: {
flexDirection: 'row'
},
field_new_password: { v_logo: {
flexDirection: 'row' flex: 2,
flexDirection: 'column-reverse',
alignContent: 'flex-start',
}, },
logo: {
alignSelf: 'flex-start',
marginTop: 50,
width: 290,
height: 290,
bottom: 150,
field_repeat_password: {
flexDirection: 'row'
}, },
button: {
height: 50,
margin: 10,
}
}) })
const mapStateToProps = (state) => { console.log(JSON.stringify(state)) const mapStateToProps = (state) => {
console.log(JSON.stringify(state))
return { return {
email: state.email email: state.email
} }
} }
export default connect(mapStateToProps)(NewPassword); export default connect(mapStateToProps)(NewPassword);
{/* <Spinner
visible={this.state.spinner}
textContent={'Loading...'}
textStyle={styles.spinnerTextStyle}
/>
<View style={styles.header}>
<Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>New Password</Text>
</View>
<View style={styles.form}>
<View style={styles.field_token}>
<View style={{ width: 55, justifyContent: 'center' }}>
<Text>Token</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
onChangeText={(confirmation_number) => this.setState({ confirmation_number })}
value={this.state.confirmation_number} />
</View>
</View>
<View style={styles.field_new_password}>
<View style={{ width: 55, justifyContent: 'center' }}>
<Text>New Password</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}/>
</View>
</View>
<View style={styles.field_repeat_password}>
<View style={{ width: 55, justifyContent: 'center' }}>
<Text>Repeat Password</Text>
</View>
<View style={{ flex: 1 }}>
<TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
onChangeText={(password_confirmation) => this.setState({ password_confirmation })}
value={this.state.password_confirmation}
secureTextEntry={true}/>
</View>
</View>
<View style={styles.button}>
<Button title="Submit" onPress={() => this.validation()}></Button>
</View>
</View> */}
\ No newline at end of file
view/ResetPassword.js
View file @ a9f6004b
import React from 'react'; import React from 'react';
import { View, Text, TextInput, StyleSheet, Button, Alert, Image } from 'react-native'; import { View, Text, TextInput, StyleSheet, Button, Alert, Image, TouchableOpacity } from 'react-native';
import Axios from 'axios'; import Axios from 'axios';
import { BASE_URL_RESET_PASSWORD } from '../model/Base_Model'; import { BASE_URL_RESET_PASSWORD } from '../model/Base_Model';
import ActionType from '../redux/globalActionType'; import ActionType from '../redux/globalActionType';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { TouchableOpacity } from 'react-native-gesture-handler';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import Spinner from 'react-native-loading-spinner-overlay'; import Spinner from 'react-native-loading-spinner-overlay';
...@@ -78,7 +78,6 @@ class ResetPassword extends React.Component { ...@@ -78,7 +78,6 @@ class ResetPassword extends React.Component {
<Text style={{ alignSelf: 'center', color: '#CFB368', fontFamily: 'Gotham-Black', fontSize: 20 }}>ENTER TOKEN</Text> <Text style={{ alignSelf: 'center', color: '#CFB368', fontFamily: 'Gotham-Black', fontSize: 20 }}>ENTER TOKEN</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={{ flex: 1, flexDirection: 'row' }}> <View style={{ flex: 1, flexDirection: 'row' }}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment