feat: trim whitespace from password confirmation input

Author: kleysc

apps/router/src/guardian-ui/components/setup/screens/setConfiguration/ConfirmPasswordModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import {
   Alert,
   AlertDescription,
@@ -21,6 +21,7 @@ import {
 } from '@chakra-ui/react';
 import { useTranslation } from '@fedimint/utils';
 import { ReactComponent as WarningIcon } from '../../../../assets/svgs/warning.svg';
+import { useTrimmedInput } from '../../../../../hooks';
 
 interface ConfirmPasswordModalProps {
   password: string;
@@ -38,8 +39,8 @@ export const ConfirmPasswordModal: React.FC<ConfirmPasswordModalProps> = ({
   guardianName,
 }) => {
   const { t } = useTranslation();
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [confirmGuardianName, setConfirmGuardianName] = useState('');
+  const [confirmPassword, setConfirmPassword] = useTrimmedInput('');
+  const [confirmGuardianName, setConfirmGuardianName] = useTrimmedInput('');
 
   const confirmed =
     confirmPassword === password && confirmGuardianName === guardianName;

apps/router/src/hooks/custom/useTrimmedInput.tsx

@@ -2,6 +2,16 @@ import { useState } from 'react';
 
 const cleanInput = (value: string) => value.trim();
 
+export const useTrimmedInput = (initialValue = '') => {
+  const [value, setValue] = useState(initialValue);
+
+  const handleChange = (newValue: string) => {
+    setValue(cleanInput(newValue));
+  };
+
+  return [value, handleChange] as const;
+};
+
 export const useTrimmedInputArray = (initialValues: string[]) => {
   const [values, setValues] = useState<string[]>(initialValues);