fix: Update ch connection form to use password field (#929)

Fixes: HDX-1877

Author: teeohhem

packages/app/src/components/ConnectionForm.tsx

@@ -5,7 +5,10 @@ import { Box, Button, Flex, Group, Stack, Text, Tooltip } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
 import api from '@/api';
-import { InputControlled } from '@/components/InputControlled';
+import {
+  InputControlled,
+  PasswordInputControlled,
+} from '@/components/InputControlled';
 import { IS_LOCAL_MODE } from '@/config';
 import {
   Connection,
@@ -252,7 +255,7 @@ export function ConnectionForm({
           )}
           {(showUpdatePassword || isNew) && (
             <Flex align="center" gap="sm">
-              <InputControlled
+              <PasswordInputControlled
                 style={{ flexGrow: 1 }}
                 name="password"
                 control={control}

packages/app/src/components/InputControlled.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { Control, Controller, FieldValues, Path } from 'react-hook-form';
-import { Input, InputProps } from '@mantine/core';
+import {
+  Input,
+  InputProps,
+  PasswordInput,
+  PasswordInputProps,
+} from '@mantine/core';
 
 interface InputControlledProps<T extends FieldValues>
   extends Omit<InputProps, 'name' | 'style'>,
@@ -10,6 +15,14 @@ interface InputControlledProps<T extends FieldValues>
   rules?: Parameters<Control<T>['register']>[1];
 }
 
+interface PasswordInputControlledProps<T extends FieldValues>
+  extends Omit<PasswordInputProps, 'name' | 'style'>,
+    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'size'> {
+  name: Path<T>;
+  control: Control<T>;
+  rules?: Parameters<Control<T>['register']>[1];
+}
+
 export function InputControlled<T extends FieldValues>({
   name,
   control,
@@ -27,3 +40,21 @@ export function InputControlled<T extends FieldValues>({
     />
   );
 }
+
+export function PasswordInputControlled<T extends FieldValues>({
+  name,
+  control,
+  rules,
+  ...props
+}: PasswordInputControlledProps<T>) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field, fieldState: { error } }) => (
+        <PasswordInput {...props} {...field} error={error?.message} />
+      )}
+    />
+  );
+}

packages/app/src/components/__tests__/InputControlled.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import { InputControlled, PasswordInputControlled } from '../InputControlled';
+
+// Test wrapper component that provides form context
+function TestForm({ children }: { children: React.ReactNode }) {
+  const { control } = useForm({
+    defaultValues: {
+      testInput: '',
+      testPassword: '',
+    },
+  });
+
+  return (
+    <form>
+      {React.cloneElement(children as React.ReactElement, { control })}
+    </form>
+  );
+}
+
+describe('InputControlled', () => {
+  it('renders input with correct props', () => {
+    renderWithMantine(
+      <TestForm>
+        <InputControlled
+          name="testInput"
+          placeholder="Test input"
+          control={{} as any}
+        />
+      </TestForm>,
+    );
+
+    const input = screen.getByPlaceholderText('Test input');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('handles input changes', async () => {
+    const { container } = renderWithMantine(
+      <TestForm>
+        <InputControlled
+          name="testInput"
+          placeholder="Test input"
+          control={{} as any}
+        />
+      </TestForm>,
+    );
+
+    const input = screen.getByPlaceholderText('Test input');
+    fireEvent.change(input, { target: { value: 'test value' } });
+
+    await waitFor(() => {
+      expect(input).toHaveValue('test value');
+    });
+  });
+});
+
+describe('PasswordInputControlled', () => {
+  it('renders password input with correct props', () => {
+    renderWithMantine(
+      <TestForm>
+        <PasswordInputControlled
+          name="testPassword"
+          placeholder="Enter password"
+          control={{} as any}
+        />
+      </TestForm>,
+    );
+
+    const input = screen.getByPlaceholderText('Enter password');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'password');
+  });
+
+  it('handles password input changes', async () => {
+    const { container } = renderWithMantine(
+      <TestForm>
+        <PasswordInputControlled
+          name="testPassword"
+          placeholder="Enter password"
+          control={{} as any}
+        />
+      </TestForm>,
+    );
+
+    const input = screen.getByPlaceholderText('Enter password');
+    fireEvent.change(input, { target: { value: 'testpassword123' } });
+
+    await waitFor(() => {
+      expect(input).toHaveValue('testpassword123');
+    });
+  });
+});