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
Hide 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 {
{
this.props.session_id === '' ? (
<>
{/* <Stack.Screen name="Change language" component={ChangeLanguage} /> */}
<Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Profile" component={ProfilePage} />
<Stack.Screen name="Change Profil" component={ChangeProfile} />
<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 ? (
<>
......@@ -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="Reset Password" component={ResetPassword}
options={{
......@@ -210,10 +232,11 @@ class Auth extends React.Component {
headerStyle: { backgroundColor: "#ccb46c" },
headerBackTitleStyle: { color: 'white' },
headerTintColor: '#fff',
headerTitleAlign:'center',
headerTitleStyle: {
fontFamily: 'Gotham-Black',
color: 'white',
fontSize: 30,
fontSize: 20,
},
title: 'REGISTER'
}} />
......
view/EmailConfirmation.js
View file @ a9f6004b
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 Axios from 'axios';
import { connect } from 'react-redux';
......@@ -161,28 +161,45 @@ class EmailConfirmation extends React.Component {
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 style={{ flex: 3 }}>
<View style={{ flex: 1, marginRight: 30, marginLeft: 30, top: 60 }}>
<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 })}
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>
</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>
</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={{ 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 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>
)
......@@ -191,9 +208,45 @@ class EmailConfirmation extends React.Component {
const styles = StyleSheet.create({
container: {
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',
}
})
......@@ -248,4 +301,34 @@ const mapDispatchToProps = (dispacth) => {
}
export default connect(mapStateToProps,mapDispatchToProps)(EmailConfirmation);
\ No newline at end of file
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 { 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 { BASE_URL_NEW_PASSWORD } from '../model/Base_Model'
import { BASE_URL_NEW_PASSWORD } from '../model/Base_Model'
import Spinner from 'react-native-loading-spinner-overlay';
class NewPassword extends React.Component {
......@@ -17,11 +17,11 @@ class NewPassword extends React.Component {
}
}
componentDidMount(){
componentDidMount() {
// console.log(this.props)
}
validation(){
validation() {
this.setState({
spinner: true,
})
......@@ -34,8 +34,8 @@ class NewPassword extends React.Component {
'Password harus sama!'
,
)
}else{
} else {
this.handleResetPassword();
}
}
......@@ -51,11 +51,11 @@ class NewPassword extends React.Component {
'password_confirmation': this.state.password_confirmation
}
// console.log(params);
Axios.post(BASE_URL_NEW_PASSWORD,params).then(res => {
Axios.post(BASE_URL_NEW_PASSWORD, params).then(res => {
this.setState({
spinner: false,
})
this.props.navigation.navigate('Login')
this.props.navigation.navigate('Login')
}).catch(error => {
this.setState({
spinner: false,
......@@ -68,48 +68,45 @@ class NewPassword extends React.Component {
render() {
return (
<View style={styles.container}>
<Spinner
<Spinner
visible={this.state.spinner}
textContent={'Loading...'}
textStyle={styles.spinnerTextStyle}
/>
<View style={styles.header}>
</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 }}
<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 }}>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 })}
value={this.state.confirmation_number} />
</View>
</View>
<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 }}
<Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3 }}>New 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) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}/>
</View>
value={this.state.password}
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>
</TouchableOpacity>
</View>
<View style={styles.field_repeat_password}>
<View style={{ width: 55, justifyContent: 'center' }}>
<Text>Repeat Password</Text>
</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 }}>
<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 style={{ flex: 0.5 }}>
</View>
</View>
</View>
......@@ -124,41 +121,82 @@ const styles = StyleSheet.create({
backgroundColor: '#ffff'
},
header: {
flex: 0.5,
margin: 10,
},
form: {
flex: 3,
margin: 10,
marginTop: 0,
},
field_token: {
flexDirection: 'row'
},
field_new_password: {
flexDirection: 'row'
v_logo: {
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 {
email: state.email
}
}
export default connect(mapStateToProps)(NewPassword);
\ No newline at end of file
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 { 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 { BASE_URL_RESET_PASSWORD } from '../model/Base_Model';
import ActionType from '../redux/globalActionType';
import { connect } from 'react-redux';
import { TouchableOpacity } from 'react-native-gesture-handler';
import i18n from 'i18n-js';
import Spinner from 'react-native-loading-spinner-overlay';
......@@ -78,7 +78,6 @@ class ResetPassword extends React.Component {
<Text style={{ alignSelf: 'center', color: '#CFB368', fontFamily: 'Gotham-Black', fontSize: 20 }}>ENTER TOKEN</Text>
</TouchableOpacity>
</View>
</View>
<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