140 lines
4.9 KiB
TypeScript
140 lines
4.9 KiB
TypeScript
import React, { useState, useEffect, useContext } from 'react';
|
|
import { View, Text, ScrollView, TextInput, Button, StyleSheet, Alert, Linking, TouchableOpacity, Platform, ActivityIndicator, 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 { 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);
|
|
|
|
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 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%',
|
|
},
|
|
});
|
|
|
|
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>
|
|
|
|
|
|
<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;
|