Gilmour109/calchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use CustomTextInput in login and register screens

Browse Source 
- 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
This commit is contained in:
Linus Waldowsky
2026-02-09 19:15:41 +01:00
parent 868e1ba68d
commit aabce1a5b0
6 changed files with 37 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/app/(tabs)/settings.tsx
View File

@@ -44,7 +44,7 @@ const CaldavTextInput = ({
<View className="flex flex-row items-center py-1">
<Text className="ml-4 w-24">{title}:</Text>
<CustomTextInput
className="flex-1 mr-4"
className="flex-1 mr-4 px-3 py-2"
text={value}
onValueChange={onValueChange}
/>

2
apps/client/src/app/editEvent.tsx
View File

@@ -43,7 +43,7 @@ const EditEventTextField = (props: EditEventTextFieldProps) => {
{props.titel}
</Text>
<CustomTextInput
className="flex-1"
className="flex-1 px-3 py-2"
text={props.text}
multiline={props.multiline}
onValueChange={props.onValueChange}

27
apps/client/src/app/login.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from "react";
import { View, Text, TextInput, Pressable } from "react-native";
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 { CaldavConfigService } from "../services/CaldavConfigService";
import { preloadAppData } from "../components/AuthGuard";
@@ -59,34 +60,22 @@ const LoginScreen = () => {
</Text>
)}
<TextInput
<CustomTextInput
placeholder="E-Mail oder Benutzername"
placeholderTextColor={theme.textMuted}
value={identifier}
onChangeText={setIdentifier}
text={identifier}
onValueChange={setIdentifier}
autoCapitalize="none"
className="w-full rounded-lg p-4 mb-4"
style={{
backgroundColor: theme.secondaryBg,
color: theme.textPrimary,
borderWidth: 1,
borderColor: theme.borderPrimary,
}}
/>
<TextInput
<CustomTextInput
placeholder="Passwort"
placeholderTextColor={theme.textMuted}
value={password}
onChangeText={setPassword}
text={password}
onValueChange={setPassword}
secureTextEntry
className="w-full rounded-lg p-4 mb-6"
style={{
backgroundColor: theme.secondaryBg,
color: theme.textPrimary,
borderWidth: 1,
borderColor: theme.borderPrimary,
}}
/>
<AuthButton

39
apps/client/src/app/register.tsx
View File

@@ -1,8 +1,9 @@
import { useState } from "react";
import { View, Text, TextInput, Pressable } from "react-native";
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";
@@ -59,50 +60,32 @@ const RegisterScreen = () => {
</Text>
)}
<TextInput
<CustomTextInput
placeholder="E-Mail"
placeholderTextColor={theme.textMuted}
value={email}
onChangeText={setEmail}
text={email}
onValueChange={setEmail}
autoCapitalize="none"
keyboardType="email-address"
className="w-full rounded-lg p-4 mb-4"
style={{
backgroundColor: theme.secondaryBg,
color: theme.textPrimary,
borderWidth: 1,
borderColor: theme.borderPrimary,
}}
/>
<TextInput
<CustomTextInput
placeholder="Benutzername"
placeholderTextColor={theme.textMuted}
value={userName}
onChangeText={setUserName}
text={userName}
onValueChange={setUserName}
autoCapitalize="none"
className="w-full rounded-lg p-4 mb-4"
style={{
backgroundColor: theme.secondaryBg,
color: theme.textPrimary,
borderWidth: 1,
borderColor: theme.borderPrimary,
}}
/>
<TextInput
<CustomTextInput
placeholder="Passwort"
placeholderTextColor={theme.textMuted}
value={password}
onChangeText={setPassword}
text={password}
onValueChange={setPassword}
secureTextEntry
className="w-full rounded-lg p-4 mb-6"
style={{
backgroundColor: theme.secondaryBg,
color: theme.textPrimary,
borderWidth: 1,
borderColor: theme.borderPrimary,
}}
/>
<AuthButton

14
apps/client/src/components/CustomTextInput.tsx
View File

@@ -1,4 +1,4 @@
import { TextInput } from "react-native";
import { TextInput, TextInputProps } from "react-native";
import { useThemeStore } from "../stores/ThemeStore";
import { useState } from "react";
@@ -8,6 +8,11 @@ export type CustomTextInputProps = {
className?: string;
multiline?: boolean;
onValueChange?: (text: string) => void;
placeholder?: string;
placeholderTextColor?: string;
secureTextEntry?: boolean;
autoCapitalize?: TextInputProps["autoCapitalize"];
keyboardType?: TextInputProps["keyboardType"];
};
const CustomTextInput = (props: CustomTextInputProps) => {
@@ -16,10 +21,15 @@ const CustomTextInput = (props: CustomTextInputProps) => {
return (
<TextInput
className={`border border-solid rounded-2xl px-3 py-2 h-11/12 ${props.className}`}
className={`border border-solid rounded-2xl ${props.className}`}
onChangeText={props.onValueChange}
value={props.text}
multiline={props.multiline}
placeholder={props.placeholder}
placeholderTextColor={props.placeholderTextColor}
secureTextEntry={props.secureTextEntry}
autoCapitalize={props.autoCapitalize}
keyboardType={props.keyboardType}
style={{
backgroundColor: theme.messageBorderBg,
color: theme.textPrimary,