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';
import { ServerSettings } 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 [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>
                <ServerSettings />
                <Credits />
            </ScrollView>
        </ErrorBoundary>
    );
};

export default Login;