alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-04-20 15:54:42 +01:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor: replace inline password inputs with reusable PasswordInput component

Browse Source 
Consolidates duplicate password input implementations across login and settings screens into a single reusable component.

Improves code maintainability by eliminating redundant password visibility toggle logic and standardizing password input behavior throughout the application.

Adds consistent accessibility support and test identifiers across all password input instances.
This commit is contained in:
Uruk
2025-09-01 15:48:55 +02:00
parent 87eff6f80c
commit 3919bb346f
3 changed files with 148 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
app/login.tsx
View File

@@ -20,6 +20,7 @@ import { Button } from "@/components/Button";
import { Input } from "@/components/common/Input";
import { Text } from "@/components/common/Text";
import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
import { PasswordInput } from "@/components/PasswordInput";
import { PreviousServersList } from "@/components/PreviousServersList";
import { Colors } from "@/constants/Colors";
import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
@@ -276,33 +277,20 @@ const Login: React.FC = () => {
/>
{/* Password */}
<View className='relative mb-4'>
<Input
placeholder={t("login.password_placeholder")}
onChangeText={(text: string) =>
setCredentials({ ...credentials, password: text })
}
value={credentials.password}
secureTextEntry={!showPassword}
keyboardType='default'
returnKeyType='done'
autoCapitalize='none'
textContentType='password'
clearButtonMode='while-editing'
maxLength={500}
className='pr-12'
/>
<TouchableOpacity
onPress={() => setShowPassword(!showPassword)}
className='absolute right-3 top-4 p-1'
>
<Ionicons
name={showPassword ? "eye-off" : "eye"}
size={24}
color='white'
/>
</TouchableOpacity>
</View>
<PasswordInput
value={credentials.password}
onChangeText={(text: string) =>
setCredentials({ ...credentials, password: text })
}
onSubmitEditing={handleLogin}
placeholder={t("login.password_placeholder")}
className='mb-4'
showPassword={showPassword}
onShowPasswordChange={setShowPassword}
topPosition='4'
testID='tv-password-input'
accessibilityLabel={t("login.password_placeholder")}
/>
<View className='mt-4'>
<Button onPress={handleLogin}>{t("login.login_button")}</Button>
@@ -417,33 +405,18 @@ const Login: React.FC = () => {
maxLength={500}
/>
<View className='relative'>
<Input
placeholder={t("login.password_placeholder")}
onChangeText={(text) =>
setCredentials({ ...credentials, password: text })
}
value={credentials.password}
secureTextEntry={!showPassword}
keyboardType='default'
returnKeyType='done'
autoCapitalize='none'
textContentType='password'
clearButtonMode='while-editing'
maxLength={500}
className='pr-12'
/>
<TouchableOpacity
onPress={() => setShowPassword(!showPassword)}
className='absolute right-3 top-3.5 p-1'
>
<Ionicons
name={showPassword ? "eye-off" : "eye"}
size={24}
color='white'
/>
</TouchableOpacity>
</View>
<PasswordInput
value={credentials.password}
onChangeText={(text) =>
setCredentials({ ...credentials, password: text })
}
placeholder={t("login.password_placeholder")}
showPassword={showPassword}
onShowPasswordChange={setShowPassword}
topPosition='3.5'
testID='mobile-password-input'
accessibilityLabel={t("login.password_placeholder")}
/>
<View className='flex flex-row items-center justify-between'>
<Button
onPress={handleLogin}