feat: add password visibility toggle to login forms (#1019)

components/settings/GestureControls.tsx

@@ -36,6 +36,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.horizontal_swipe_skip_description",
           )}
           disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
+          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
         >
           <Switch
             value={settings.enableHorizontalSwipeSkip}
@@ -52,6 +53,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.left_side_brightness_description",
           )}
           disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
+          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
         >
           <Switch
             value={settings.enableLeftSideBrightnessSwipe}
@@ -68,6 +70,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.right_side_volume_description",
           )}
           disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
+          style={{ minHeight: 72, paddingTop: 12, paddingBottom: 12 }}
         >
           <Switch
             value={settings.enableRightSideVolumeSwipe}

components/settings/Jellyseerr.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { toast } from "sonner-native";
+import { PasswordInput } from "@/components/PasswordInput";
 import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
 import { userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -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)
@@ -127,7 +131,7 @@ export const JellyseerrSettings = () => {
               </Text>
             </View>
             <Input
-              className='border border-neutral-800 mb-2'
+              extraClassName='border border-neutral-800 mb-2'
               placeholder={t(
                 "home.settings.plugins.jellyseerr.server_url_placeholder",
               )}
@@ -146,23 +150,20 @@ 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'>
+                <PasswordInput
+                  value={jellyseerrPassword}
+                  onChangeText={setJellyseerrPassword}
+                  placeholder={t(
+                    "home.settings.plugins.jellyseerr.password_placeholder",
+                    { username: user?.Name },
+                  )}
+                  showPassword={showJellyseerrPassword}
+                  onShowPasswordChange={setShowJellyseerrPassword}
+                  layout='mobile'
+                  topOffset={11}
+                />
+              </View>
               <Button
                 loading={loginToJellyseerrMutation.isPending}
                 disabled={loginToJellyseerrMutation.isPending}