126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
import React, { useState, useEffect, useContext } from 'react';
|
|
import { View, ScrollView, Button, StyleSheet, Image, ActivityIndicator, Alert } from 'react-native';
|
|
import { SettingsContext } from '../SettingsProvider';
|
|
import { useColors } from '../common/colors';
|
|
import ErrorBoundary from 'react-native-error-boundary';
|
|
import { ThemeText, ThemeTextInput } from '../common/ThemeTypes';
|
|
import Credits from '../common/Credits';
|
|
import { AdvancedSettings } from './Settings';
|
|
|
|
const Login = () => {
|
|
const colors = useColors();
|
|
const { settings, updateSettings } = useContext(SettingsContext);
|
|
|
|
const [url, setUrl] = useState('');
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [requireAuth, setRequireAuth] = useState(settings.requireAuth);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (settings) {
|
|
setUrl(settings.url || '');
|
|
setUsername(settings.username || '');
|
|
setPassword(settings.password || '');
|
|
setRequireAuth(settings.requireAuth);
|
|
}
|
|
}, [settings]);
|
|
|
|
const handleSave = async () => {
|
|
if (isSaving) return;
|
|
|
|
try {
|
|
setIsSaving(true);
|
|
await updateSettings({
|
|
...settings,
|
|
url,
|
|
username,
|
|
password,
|
|
requireAuth,
|
|
});
|
|
} catch (error) {
|
|
console.error('Error updating settings:', error);
|
|
Alert.alert('Error', 'Failed to save settings.');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleChange = (setter) => (value) => {
|
|
setter(value);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 20,
|
|
},
|
|
label: {
|
|
fontWeight: 'bold',
|
|
marginTop: 8,
|
|
marginBottom: 6,
|
|
},
|
|
section: {
|
|
marginBottom: 40,
|
|
},
|
|
activityindicator: {
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
logo: {
|
|
width: 100,
|
|
height: 100,
|
|
},
|
|
logoContainer: {
|
|
marginTop: 10,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
},
|
|
});
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<ScrollView style={[styles.container, { backgroundColor: colors.backPrimary }]}>
|
|
<View style={[styles.section, styles.logoContainer]}>
|
|
<Image style={styles.logo} source={require('../assets/favicon.png')} />
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<ThemeText style={styles.label}>Benutzername</ThemeText>
|
|
<ThemeTextInput
|
|
value={username}
|
|
onValueChange={handleChange(setUsername)}
|
|
placeholder="Benutzername"
|
|
disabled={!requireAuth}
|
|
/>
|
|
<ThemeText style={styles.label}>Passwort</ThemeText>
|
|
<ThemeTextInput
|
|
value={password}
|
|
onValueChange={handleChange(setPassword)}
|
|
secureTextEntry
|
|
placeholder="Passwort"
|
|
disabled={!requireAuth}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Button title={isSaving ? "" : "Einloggen"} onPress={handleSave} disabled={isSaving} />
|
|
{isSaving && <ActivityIndicator size="small" color={colors.primary} style={styles.activityindicator} />}
|
|
</View>
|
|
|
|
<AdvancedSettings
|
|
url={url}
|
|
requireAuth={requireAuth}
|
|
onUrlChange={setUrl}
|
|
onRequireAuthChange={setRequireAuth}
|
|
/>
|
|
|
|
<Credits />
|
|
</ScrollView>
|
|
</ErrorBoundary>
|
|
);
|
|
};
|
|
|
|
export default Login;
|