Linus Waldowsky
aabce1a5b0
- Replace raw TextInput with CustomTextInput in login and register for consistent focus border effect across the app - Add placeholder, secureTextEntry, autoCapitalize, keyboardType props to CustomTextInput - Remove hardcoded default padding (px-3 py-2) and h-11/12 from CustomTextInput, callers now set padding via className - Add explicit px-3 py-2 to existing callers (settings, editEvent) - Update CLAUDE.md with new CustomTextInput usage and props
110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
import { useState } from "react";
|
|
import { View, Text, Pressable } from "react-native";
|
|
import { Link, router } from "expo-router";
|
|
import BaseBackground from "../components/BaseBackground";
|
|
import AuthButton from "../components/AuthButton";
|
|
import CustomTextInput from "../components/CustomTextInput";
|
|
import { AuthService } from "../services";
|
|
import { useThemeStore } from "../stores/ThemeStore";
|
|
|
|
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
const RegisterScreen = () => {
|
|
const { theme } = useThemeStore();
|
|
const [email, setEmail] = useState("");
|
|
const [userName, setUserName] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleRegister = async () => {
|
|
setError(null);
|
|
|
|
if (!email || !userName || !password) {
|
|
setError("Bitte alle Felder ausfüllen");
|
|
return;
|
|
}
|
|
|
|
if (!EMAIL_REGEX.test(email)) {
|
|
setError("Bitte eine gültige E-Mail-Adresse eingeben");
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
await AuthService.register({ email, userName, password });
|
|
router.replace("/(tabs)/chat");
|
|
} catch {
|
|
setError("Registrierung fehlgeschlagen. E-Mail bereits vergeben?");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<BaseBackground>
|
|
<View className="flex-1 justify-center items-center p-8">
|
|
<Text
|
|
className="text-3xl font-bold mb-8"
|
|
style={{ color: theme.textPrimary }}
|
|
>
|
|
Registrieren
|
|
</Text>
|
|
|
|
{error && (
|
|
<Text
|
|
className="mb-4 text-center"
|
|
style={{ color: theme.rejectButton }}
|
|
>
|
|
{error}
|
|
</Text>
|
|
)}
|
|
|
|
<CustomTextInput
|
|
placeholder="E-Mail"
|
|
placeholderTextColor={theme.textMuted}
|
|
text={email}
|
|
onValueChange={setEmail}
|
|
autoCapitalize="none"
|
|
keyboardType="email-address"
|
|
className="w-full rounded-lg p-4 mb-4"
|
|
/>
|
|
|
|
<CustomTextInput
|
|
placeholder="Benutzername"
|
|
placeholderTextColor={theme.textMuted}
|
|
text={userName}
|
|
onValueChange={setUserName}
|
|
autoCapitalize="none"
|
|
className="w-full rounded-lg p-4 mb-4"
|
|
/>
|
|
|
|
<CustomTextInput
|
|
placeholder="Passwort"
|
|
placeholderTextColor={theme.textMuted}
|
|
text={password}
|
|
onValueChange={setPassword}
|
|
secureTextEntry
|
|
className="w-full rounded-lg p-4 mb-6"
|
|
/>
|
|
|
|
<AuthButton
|
|
title="Registrieren"
|
|
onPress={handleRegister}
|
|
isLoading={isLoading}
|
|
/>
|
|
|
|
<Link href="/login" asChild>
|
|
<Pressable>
|
|
<Text style={{ color: theme.chatBot }}>
|
|
Bereits ein Konto? Anmelden
|
|
</Text>
|
|
</Pressable>
|
|
</Link>
|
|
</View>
|
|
</BaseBackground>
|
|
);
|
|
};
|
|
|
|
export default RegisterScreen;
|