klatab/screens/Login.tsx

import React, { useState, useEffect, useContext } from 'react';
import { View, Text, ScrollView, Button, StyleSheet, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
import { SettingsContext } from '../SettingsProvider';
import { useColors } from '../common/colors';
import ErrorBoundary from 'react-native-error-boundary';
import { ThemeSwitch, ThemeText, ThemeTextInput } from '../common/ThemeTypes'
import { ToastType, useToast } from '../common/ToastProvider';
import Credits from '../common/Credits';

const Login = () => {
    const { showToast, hideToast } = useToast();
    const colors = useColors();
    const { settings, updateSettings } = useContext(SettingsContext);

    const [url, setUrl] = useState('');
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [isSystemTheme, setIsSystemTheme] = useState(settings.systemTheme);
    const [isDarkMode, setIsDarkMode] = useState(settings.darkTheme);
    const [requireAuth, setRequireAuth] = useState(settings.requireAuth);
    const [isSaving, setIsSaving] = useState(false);
    const [showAdvanced, setShowAdvanced] = useState(false);

    useEffect(() => {
        if (settings) {
            setUrl(settings.url || '');
            setUsername(settings.username || '');
            setPassword(settings.password || '');
            setIsSystemTheme(settings.systemTheme);
            setIsDarkMode(settings.darkTheme);
            setRequireAuth(settings.requireAuth);
        }
    }, [settings]);

    const handleSave = async () => {
        if (isSaving) return;

        try {
            setIsSaving(true);
            await updateSettings({
                url,
                username,
                password,
                systemTheme: isSystemTheme,
                darkTheme: isDarkMode,
                requireAuth,
            });
            hideToast();
        } catch (error) {
            console.error('Error updating settings:', error);
            Alert.alert('Error', 'Failed to save settings.');
        } finally {
            setIsSaving(false);
        }
    };

    const handleChange = (setter) => (value) => {
        setter(value);
        showToast(ToastType.Warn, 'Ungespeicherte Änderungen');
    };

    const toggleAdvancedSettings = () => {
        setShowAdvanced(!showAdvanced);
    };

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            padding: 20,
        },
        label: {
            fontWeight: 'bold',
            marginTop: 8,
            marginBottom: 6,
        },
        title: {
            fontWeight: 'bold',
            marginBottom: 3,
            fontSize: 32,
        },
        section: {
            marginBottom: 40,
        },
        switchContainer: {
            marginTop: 15,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
        },
        activityindicator: {
            position: 'absolute',
            width: '100%',
            height: '100%',
        },
        advancedButton: {
            marginTop: 20,
            padding: 10,
            backgroundColor: colors.primary,
            borderRadius: 5,
        },
        advancedButtonText: {
            color: 'white',
            textAlign: 'center',
        }
    });

    return (
        <ErrorBoundary>
            <ScrollView style={[styles.container, { backgroundColor: colors.backPrimary }]}>
                <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>

                <TouchableOpacity style={styles.advancedButton} onPress={toggleAdvancedSettings}>
                    <Text style={styles.advancedButtonText}>
                        {showAdvanced ? 'Erweiterte Einstellungen verbergen' : 'Erweiterte Einstellungen anzeigen'}
                    </Text>
                </TouchableOpacity>

                {showAdvanced && (
                    <View style={styles.section}>
                        <ThemeText style={styles.label}>URL</ThemeText>
                        <ThemeTextInput
                            value={url}
                            onValueChange={handleChange(setUrl)}
                            placeholder="URL"
                        />
                        <View style={styles.switchContainer}>
                            <ThemeText>Authentifizierung</ThemeText>
                            <ThemeSwitch
                                value={requireAuth}
                                onValueChange={handleChange(setRequireAuth)}
                            />
                        </View>
                    </View>
                )}

                <Credits />
            </ScrollView>
        </ErrorBoundary>
    );
};

export default Login;