klatab/screens/Login.tsx

import React, { useState, useEffect, useContext, useRef } from 'react';
import { View, Text, ScrollView, Button, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, Animated, Image } 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 Credits from '../common/Credits';
import FontAwesome5 from '@expo/vector-icons/FontAwesome5';

const Login = () => {
    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);
    const [rotateAnim] = useState(new Animated.Value(0)); // Animation state for the arrow
    const [advancedHeightAnim] = useState(new Animated.Value(0)); // Animation state for the advanced settings height

    const advancedSectionRef = useRef(null);

    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,
            });
        } 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 toggleAdvancedSettings = () => {
        setShowAdvanced(!showAdvanced);

        // Rotate the arrow
        Animated.timing(rotateAnim, {
            toValue: showAdvanced ? 0 : 1,
            duration: 200,
            useNativeDriver: true,
        }).start();

        // Animate the height of the advanced settings
        const targetHeight = showAdvanced ? 0 : 150; // You can adjust this height
        Animated.timing(advancedHeightAnim, {
            toValue: targetHeight,
            duration: 300,
            useNativeDriver: false,
        }).start();
    };

    const arrowRotation = rotateAnim.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '90deg'],
    });

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            padding: 20,
        },
        label: {
            fontWeight: 'bold',
            marginTop: 8,
            marginBottom: 6,
        },
        section: {
            marginBottom: 40,
        },
        switchContainer: {
            marginTop: 15,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
        },
        activityindicator: {
            position: 'absolute',
            width: '100%',
            height: '100%',
        },
        arrowContainer: {
            display: 'flex',
            justifyContent: 'center',
            marginTop: 20,
            flexDirection: 'row',
            alignItems: 'center',
        },
        advancedButtonText: {
            marginLeft: 8,
            fontSize: 16,
            color: colors.text,
        },
        advancedSection: {
            overflow: 'hidden',
        },
        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>

                <TouchableOpacity style={styles.arrowContainer} onPress={toggleAdvancedSettings}>
                    <Animated.View style={{ transform: [{ rotate: arrowRotation }] }}>
                        <FontAwesome5 name="angle-right" size={24} color={colors.textAccent} />
                    </Animated.View>
                    <Text style={styles.advancedButtonText}>
                        {showAdvanced ? 'Erweiterte Einstellungen verbergen' : 'Erweiterte Einstellungen anzeigen'}
                    </Text>
                </TouchableOpacity>

                {/* Animated section for advanced settings */}
                <Animated.View style={[styles.advancedSection, { height: advancedHeightAnim }]}>
                    <View ref={advancedSectionRef}>
                        <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>
                </Animated.View>
                <Credits />
            </ScrollView>
        </ErrorBoundary>
    );
};

export default Login;