175 lines
4.0 KiB
TypeScript
175 lines
4.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
Alert,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { useAuth } from '../src/context/AuthContext';
|
|
import { useRouter } from 'expo-router';
|
|
|
|
export default function LoginScreen() {
|
|
const router = useRouter();
|
|
const [identity, setIdentity] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [isSuperuser, setIsSuperuser] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const { login } = useAuth();
|
|
|
|
const handleLogin = async () => {
|
|
if (!identity || !password) {
|
|
Alert.alert('Error', 'Please enter both identity and password');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
await login(identity, password, isSuperuser);
|
|
router.replace('/');
|
|
} catch (error: any) {
|
|
Alert.alert('Login Failed', error.message || 'An error occurred');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<ScrollView contentContainerStyle={styles.scrollContent}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>UpSnap</Text>
|
|
<Text style={styles.subtitle}>Wake on LAN Mobile</Text>
|
|
</View>
|
|
|
|
<View style={styles.form}>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Username or Email"
|
|
value={identity}
|
|
onChangeText={setIdentity}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Password"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry
|
|
autoCapitalize="none"
|
|
/>
|
|
|
|
<TouchableOpacity
|
|
style={styles.checkboxContainer}
|
|
onPress={() => setIsSuperuser(!isSuperuser)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={[styles.checkbox, isSuperuser && styles.checkboxChecked]}>
|
|
{isSuperuser && <Text style={styles.checkmark}>✓</Text>}
|
|
</View>
|
|
<Text style={styles.checkboxLabel}>Login as Admin</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.button, isLoading && styles.buttonDisabled]}
|
|
onPress={handleLogin}
|
|
disabled={isLoading}
|
|
>
|
|
<Text style={styles.buttonText}>
|
|
{isLoading ? 'Logging in...' : 'Login'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
scrollContent: {
|
|
flexGrow: 1,
|
|
justifyContent: 'center',
|
|
padding: 20,
|
|
},
|
|
header: {
|
|
alignItems: 'center',
|
|
marginBottom: 40,
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
fontWeight: 'bold',
|
|
color: '#333',
|
|
marginBottom: 8,
|
|
},
|
|
subtitle: {
|
|
fontSize: 16,
|
|
color: '#666',
|
|
},
|
|
form: {
|
|
width: '100%',
|
|
},
|
|
input: {
|
|
backgroundColor: '#fff',
|
|
borderWidth: 1,
|
|
borderColor: '#ddd',
|
|
borderRadius: 8,
|
|
padding: 15,
|
|
fontSize: 16,
|
|
marginBottom: 15,
|
|
},
|
|
checkboxContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 20,
|
|
},
|
|
checkbox: {
|
|
width: 24,
|
|
height: 24,
|
|
borderWidth: 2,
|
|
borderColor: '#007AFF',
|
|
borderRadius: 4,
|
|
marginRight: 10,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
checkboxChecked: {
|
|
backgroundColor: '#007AFF',
|
|
},
|
|
checkmark: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
checkboxLabel: {
|
|
fontSize: 16,
|
|
color: '#333',
|
|
},
|
|
button: {
|
|
backgroundColor: '#007AFF',
|
|
borderRadius: 8,
|
|
padding: 15,
|
|
alignItems: 'center',
|
|
},
|
|
buttonDisabled: {
|
|
backgroundColor: '#ccc',
|
|
},
|
|
buttonText: {
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|