From 15d0de806b909b1c080a0f79b42035d0e329311a Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Mon, 1 Sep 2025 15:05:40 +0200
Subject: [PATCH] feat: add password visibility toggle to login forms

Improves user experience by allowing users to show/hide password text in both main login form and Jellyseerr settings.

Adds eye icon button that toggles between masked and visible password input, making it easier for users to verify their password entries.
---
 app/login.tsx                      | 84 +++++++++++++++++++-----------
 components/settings/Jellyseerr.tsx | 54 ++++++++++++-------
 2 files changed, 91 insertions(+), 47 deletions(-)

diff --git a/app/login.tsx b/app/login.tsx
index d64516b6..a236b8b3 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -52,6 +52,7 @@ const Login: React.FC = () => {
     username: _username,
     password: _password,
   });
+  const [showPassword, setShowPassword] = useState<boolean>(false);
 
   /**
    * A way to auto login based on a link
@@ -275,21 +276,33 @@ const Login: React.FC = () => {
               />
 
               {/* Password */}
-              <Input
-                placeholder={t("login.password_placeholder")}
-                onChangeText={(text: string) =>
-                  setCredentials({ ...credentials, password: text })
-                }
-                value={credentials.password}
-                secureTextEntry
-                keyboardType='default'
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='password'
-                clearButtonMode='while-editing'
-                maxLength={500}
-                extraClassName='mb-4'
-              />
+              <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-3.5 p-1'
+                >
+                  <Ionicons
+                    name={showPassword ? "eye-off" : "eye"}
+                    size={24}
+                    color='white'
+                  />
+                </TouchableOpacity>
+              </View>
 
               <View className='mt-4'>
                 <Button onPress={handleLogin}>{t("login.login_button")}</Button>
@@ -404,20 +417,33 @@ const Login: React.FC = () => {
                   maxLength={500}
                 />
 
-                <Input
-                  placeholder={t("login.password_placeholder")}
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, password: text })
-                  }
-                  value={credentials.password}
-                  secureTextEntry
-                  keyboardType='default'
-                  returnKeyType='done'
-                  autoCapitalize='none'
-                  textContentType='password'
-                  clearButtonMode='while-editing'
-                  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>
                 <View className='flex flex-row items-center justify-between'>
                   <Button
                     onPress={handleLogin}
diff --git a/components/settings/Jellyseerr.tsx b/components/settings/Jellyseerr.tsx
index 87a99964..47918f5c 100644
--- a/components/settings/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -1,8 +1,9 @@
+import { Ionicons } from "@expo/vector-icons";
 import { useMutation } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { toast } from "sonner-native";
 import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
 import { userAtom } from "@/providers/JellyfinProvider";
@@ -30,6 +31,9 @@ export const JellyseerrSettings = () => {
     string | undefined
   >(settings?.jellyseerrServerUrl || undefined);
 
+  const [showJellyseerrPassword, setShowJellyseerrPassword] =
+    useState<boolean>(false);
+
   const loginToJellyseerrMutation = useMutation({
     mutationFn: async () => {
       if (!jellyseerrServerUrl && !settings?.jellyseerrServerUrl)
@@ -146,23 +150,37 @@ export const JellyseerrSettings = () => {
               <Text className='font-bold mb-2'>
                 {t("home.settings.plugins.jellyseerr.password")}
               </Text>
-              <Input
-                className='border border-neutral-800'
-                autoFocus={true}
-                focusable={true}
-                placeholder={t(
-                  "home.settings.plugins.jellyseerr.password_placeholder",
-                  { username: user?.Name },
-                )}
-                value={jellyseerrPassword}
-                keyboardType='default'
-                secureTextEntry={true}
-                returnKeyType='done'
-                autoCapitalize='none'
-                textContentType='password'
-                onChangeText={setJellyseerrPassword}
-                editable={!loginToJellyseerrMutation.isPending}
-              />
+              <View className='relative'>
+                <Input
+                  className='border border-neutral-800 pr-12'
+                  autoFocus={true}
+                  focusable={true}
+                  placeholder={t(
+                    "home.settings.plugins.jellyseerr.password_placeholder",
+                    { username: user?.Name },
+                  )}
+                  value={jellyseerrPassword}
+                  keyboardType='default'
+                  secureTextEntry={!showJellyseerrPassword}
+                  returnKeyType='done'
+                  autoCapitalize='none'
+                  textContentType='password'
+                  onChangeText={setJellyseerrPassword}
+                  editable={!loginToJellyseerrMutation.isPending}
+                />
+                <TouchableOpacity
+                  onPress={() =>
+                    setShowJellyseerrPassword(!showJellyseerrPassword)
+                  }
+                  className='absolute right-3 top-3.5 p-1'
+                >
+                  <Ionicons
+                    name={showJellyseerrPassword ? "eye-off" : "eye"}
+                    size={24}
+                    color='white'
+                  />
+                </TouchableOpacity>
+              </View>
               <Button
                 loading={loginToJellyseerrMutation.isPending}
                 disabled={loginToJellyseerrMutation.isPending}