From e60c611cd2d32f381ab1e97157dafd770ab9a3ea Mon Sep 17 00:00:00 2001 From: Heiniusw Date: Wed, 18 Sep 2024 12:36:02 +0200 Subject: [PATCH] made login screen --- Interface.tsx | 3 +- SettingsProvider.tsx | 2 +- common/Credits.tsx | 81 +++++++++++++++++++++++++ screens/Login.tsx | 139 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 223 insertions(+), 2 deletions(-) create mode 100644 common/Credits.tsx create mode 100644 screens/Login.tsx diff --git a/Interface.tsx b/Interface.tsx index 556dd9c..4b6b6d7 100644 --- a/Interface.tsx +++ b/Interface.tsx @@ -7,6 +7,7 @@ import { ThemeButton, ThemeText } from './common/ThemeTypes'; import { StyleSheet, Text, View } from 'react-native'; import { useColors } from './common/colors'; import {decode as atob, encode as btoa} from 'base-64' +import Login from './screens/Login'; let errorObject; export const InterfaceContext = createContext(null); @@ -167,7 +168,7 @@ const Interface = ({ children }) => { {errorObject?.message} Neu Versuchen - + ) if (!loading) return (children) diff --git a/SettingsProvider.tsx b/SettingsProvider.tsx index 7649f3b..d4d129c 100644 --- a/SettingsProvider.tsx +++ b/SettingsProvider.tsx @@ -19,7 +19,7 @@ const defaultSettings: SettingsType = { password: '', systemTheme: true, darkTheme: false, - requireAuth: false, + requireAuth: true, }; const SettingsProvider = ({ children }) => { diff --git a/common/Credits.tsx b/common/Credits.tsx new file mode 100644 index 0000000..18b4544 --- /dev/null +++ b/common/Credits.tsx @@ -0,0 +1,81 @@ +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 * as Application from 'expo-application'; +import { ToastType, useToast } from '../common/ToastProvider'; + +const Credits = () => { + const colors = useColors(); + + 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, + }, + endSection: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + switchContainer: { + marginTop: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + activityindicator: { + position: 'absolute', + width: '100%', + height: '100%', + }, + logo: { + width: 100, + height: 100, + resizeMode: 'contain' + } + }); + + return ( + <> + + EDV-Schule Plattling + Linking.openURL('https://www.edvschule-plattling.de/impressum')}> + Impressum + + + + + { /* Wer des löscht werd weggeklagt */} + Heinrich Thaler + Linking.openURL('mailto:Heinrich.Thaler@edvschule-plattling.de')}> + Heinrich.Thaler@edvschule-plattling.de + + Linking.openURL('https://www.it-thaler.de')}> + www.it-thaler.de + + {Platform.OS != 'web' && Version: {Application.nativeApplicationVersion} ({Application.nativeBuildVersion})} + + + + + ); +}; + +export default Credits; diff --git a/screens/Login.tsx b/screens/Login.tsx new file mode 100644 index 0000000..2c6d42e --- /dev/null +++ b/screens/Login.tsx @@ -0,0 +1,139 @@ +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 ( + + + + Benutzername + + Passwort + + + +