109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Pressable,
|
|
ScrollView,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
} from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import styles from './styles';
|
|
import useLogin from './useLogin';
|
|
|
|
const LoginScreen = () => {
|
|
const {
|
|
email, setEmail,
|
|
password, setPassword,
|
|
showPassword, toggleShowPassword,
|
|
loading, onLogin, goToRegister,
|
|
} = useLogin();
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
|
|
<ScrollView
|
|
contentContainerStyle={styles.content}
|
|
keyboardShouldPersistTaps="handled">
|
|
|
|
<View style={{ alignItems: 'center' }}>
|
|
<View style={styles.logoBox}>
|
|
<Icon name="leaf" size={32} color="#1d9e75" />
|
|
</View>
|
|
<Text style={styles.logoTitle}>EdaSmart</Text>
|
|
<Text style={styles.logoSub}>Sistem Manajemen Edamame</Text>
|
|
</View>
|
|
|
|
<View style={styles.card}>
|
|
<View>
|
|
<Text style={styles.cardTitle}>Selamat datang</Text>
|
|
<Text style={styles.cardSub}>Masuk ke akun kamu.</Text>
|
|
</View>
|
|
|
|
<View>
|
|
<Text style={styles.label}>Email</Text>
|
|
<TextInput
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
placeholder="contoh@email.com"
|
|
placeholderTextColor="#4b5563"
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
style={styles.input}
|
|
/>
|
|
</View>
|
|
|
|
<View>
|
|
<Text style={styles.label}>Password</Text>
|
|
<View style={styles.passwordRow}>
|
|
<TextInput
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
placeholder="••••••••"
|
|
placeholderTextColor="#4b5563"
|
|
secureTextEntry={!showPassword}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
style={styles.passwordInput}
|
|
/>
|
|
<Pressable onPress={toggleShowPassword}>
|
|
<Text style={styles.toggleText}>
|
|
{showPassword ? 'Hide' : 'Show'}
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
|
|
<Pressable
|
|
style={[styles.button, loading && styles.buttonDisabled]}
|
|
onPress={onLogin}
|
|
disabled={loading}>
|
|
{loading
|
|
? <ActivityIndicator color="#fff" />
|
|
: <Text style={styles.buttonText}>Login</Text>}
|
|
</Pressable>
|
|
|
|
<View style={styles.dividerRow}>
|
|
<View style={styles.dividerLine} />
|
|
<Text style={styles.dividerText}>atau</Text>
|
|
<View style={styles.dividerLine} />
|
|
</View>
|
|
|
|
<View style={styles.footerRow}>
|
|
<Text style={styles.footerText}>Belum punya akun?</Text>
|
|
<Pressable onPress={goToRegister}>
|
|
<Text style={styles.footerLink}>Register</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
};
|
|
|
|
export default LoginScreen; |