Skip to content

S
safetcut-app
Commit aee5175f by Prachpawee
Options

add resetPassword & sendEmail

parent caa73f16
Showing with 154 additions and 0 deletions
src/components/layout/CardWithThumbnail.js 0 → 100644
import React from 'react';
import { View, Card, CardItem, Thumbnail } from 'native-base';
import { StyleSheet } from 'react-native';
const CardWithThumbnail = props => {
return (
<View style={styles.container}>
<Card style={styles.cardContainer}>
<CardItem>
<Thumbnail
style={styles.avatarImg}
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
/>
</CardItem>
{props.children}
</Card>
</View>
);
};
const styles = StyleSheet.create({
container: {
top: '20%',
alignItems: 'center',
},
cardContainer: {
alignItems: 'center',
justifyContent: 'center',
width: '90%',
paddingHorizontal: 30,
paddingVertical: 40,
borderRadius: 10,
},
avatarImg: {
width: 140,
height: 140,
borderRadius: 100,
},
});
export default CardWithThumbnail;
src/components/layout/ResetPassBG.js 0 → 100644
import React from 'react';
import { View, Body, Title } from 'native-base';
import { StyleSheet } from 'react-native';
const resetPassBg = props => {
return (
<View style={{height: '100%'}}>
<View style={styles.TopBg}>
<Body>
<Title style={styles.title}>{props.title}</Title>
</Body>
</View>
{props.children}
<View style={styles.BotBg} />
</View>
);
};
const styles = StyleSheet.create({
TopBg: {
backgroundColor: '#b72929',
height: 250,
width: '100%',
position: 'absolute',
top: 0,
},
title: {
top: '25%',
fontSize: 36,
},
BotBg: {
position: 'absolute',
bottom: 0,
backgroundColor: '#b72929',
height: 50,
width: '100%',
},
});
export default resetPassBg;
src/screens/public/resetPassword.js 0 → 100644
import React, { Component } from 'react';
import { Container, CardItem, Button, Text, View, Input } from 'native-base';
import ResetPassBg from '../../components/layout/ResetPassBG';
import CardWithThumbnail from '../../components/layout/CardWithThumbnail';
class resetPassword extends Component {
render() {
return (
<Container>
<ResetPassBg title={'Reset you password'}>
<CardWithThumbnail>
<CardItem>
<Input
placeholder="Your email"
underlineColorAndroid="#d8d8d8"
placeholderTextColor="#cacaca"
/>
</CardItem>
<Button rounded full danger style={{ borderRadius: 50 }}>
<Text>Send</Text>
</Button>
</CardWithThumbnail>
</ResetPassBg>
</Container>
);
}
}
export default resetPassword;
src/screens/public/sendEmail.js 0 → 100644
import React, { Component } from 'react';
import { Container, Text, View, H3 } from 'native-base';
import { StyleSheet } from 'react-native';
import ResetPassBg from '../../components/layout/ResetPassBG';
import CardWithThumbnail from '../../components/layout/CardWithThumbnail';
const styles = StyleSheet.create({
titleText: {
textAlign: 'center',
color: '#86929d',
},
normalText: {
textAlign: 'center',
color: '#4a4a4a',
},
});
export default class sendEmail extends Component {
render() {
return (
<Container>
<ResetPassBg title={'Login'}>
<CardWithThumbnail>
<View style={{ marginTop: 20 }}>
<H3 style={styles.titleText}>Reset your password</H3>
</View>
<View style={{ marginTop: 20 }}>
<Text style={styles.normalText}>
We have sent a reset password email to _________@gmail.com
</Text>
<Text style={styles.normalText}>
Please click the reset password link to set your new password.
</Text>
</View>
<View style={{ marginTop: 20 }}>
<Text style={styles.normalText}>Didn't receive email yet?</Text>
<Text style={styles.normalText}>
Please check your spam folder, or{' '}
<Text style={{ color: '#4a90e2' }} onPress={() => console.log('resend click!')}>
resend
</Text>{' '}
the email.
</Text>
</View>
</CardWithThumbnail>
</ResetPassBg>
</Container>
);
}
}
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