98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Image,
|
|
Pressable,
|
|
ScrollView,
|
|
StatusBar,
|
|
Text,
|
|
View,
|
|
} from 'react-native';
|
|
import styles from './styles';
|
|
import {Button} from 'react-native-paper';
|
|
import TextInputComponent from '../../components/TextInput';
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
import {useNavigation} from '@react-navigation/native';
|
|
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
|
|
import {RootStackParamList} from '../../navigation/type';
|
|
import Colors from '../../../assets/styles/Colors';
|
|
|
|
type LoginScreenNavigationProp = NativeStackNavigationProp<
|
|
RootStackParamList,
|
|
'Login'
|
|
>;
|
|
|
|
function LoginScreen() {
|
|
const welcomeImage = require('../../../assets/images/welcomeImage.png');
|
|
const navigation = useNavigation<LoginScreenNavigationProp>();
|
|
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
<StatusBar
|
|
backgroundColor={Colors.secondary60.color}
|
|
barStyle="light-content"
|
|
/>
|
|
<Image source={welcomeImage} style={styles.welcomeImage} />
|
|
<View style={styles.contentContainer}>
|
|
<Text style={styles.welcomeText}>
|
|
Selamat Datang di Aplikasi M-Paspor!
|
|
</Text>
|
|
<View style={styles.textInputContainer}>
|
|
<TextInputComponent title="Email" placeholder="Masukkan Email" />
|
|
<TextInputComponent
|
|
title="Kata Sandi"
|
|
placeholder="Masukkan Kata Sandi"
|
|
isPassword
|
|
/>
|
|
</View>
|
|
<Text style={styles.forgotPasswordText}>Lupa kata sandi?</Text>
|
|
<Button
|
|
style={styles.loginButton}
|
|
mode="contained"
|
|
onPress={() =>
|
|
navigation.reset({
|
|
index: 0,
|
|
routes: [{name: 'NavigationRoute'}],
|
|
})
|
|
}>
|
|
Masuk
|
|
</Button>
|
|
<View style={styles.registerAccountContainer}>
|
|
<Text style={styles.dontHaveAccountText}>Belum memiliki akun?</Text>
|
|
<Pressable onPress={() => navigation.navigate('Register')}>
|
|
<Text style={styles.registerAccountText}>Daftar akun</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
<Pressable
|
|
onPress={() => navigation.navigate('TermsAndConditions')}
|
|
style={({pressed}) => [{transform: [{scale: pressed ? 0.975 : 1}]}]}>
|
|
<View style={styles.termsAndConditionsContainer}>
|
|
<Icon
|
|
name="person"
|
|
size={20}
|
|
color="#000"
|
|
style={styles.personIcon}
|
|
/>
|
|
<View style={styles.termsAndConditionsTextContainer}>
|
|
<Text style={styles.termsAndConditionsTitle}>
|
|
Syarat & Ketentuan
|
|
</Text>
|
|
<Text style={styles.termsAndConditionsDescription}>
|
|
Panduan pendaftaran dan informasi untuk mengajukan permohonan
|
|
paspor
|
|
</Text>
|
|
</View>
|
|
<Icon
|
|
name="arrow-right"
|
|
size={20}
|
|
color="#000"
|
|
style={styles.arrowRightIcon}
|
|
/>
|
|
</View>
|
|
</Pressable>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
export default LoginScreen;
|