fix ui bug

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/customInput/CustomInput.tsx

@@ -48,11 +48,12 @@ const handleOnChange = (param: IChangeParam) => {
     event,
     key,
     param: { cb, checkValid, validations },
+    type,
   } = param;
   let input = event.target.value;
 
   // fix for number input
-  if (!isNaN(input) && input.trim() !== '') {
+  if (!isNaN(input) && input.trim() !== '' && type === 'number') {
     input = parseFloat(input);
   }
 
@@ -121,6 +122,7 @@ const getAdornmentInput = (
               ...param,
               cb: onInputChange || (() => {}),
             },
+            type: config.type || 'text',
           });
         }}
         endAdornment={
@@ -246,6 +248,7 @@ const getTextfield = (
           event,
           key,
           param: { ...param, cb: onChange || (() => {}) },
+          type: others.type || 'text',
         });
       }}
     />

client/src/components/customInput/Types.ts

@@ -32,7 +32,9 @@ export interface IBlurParam {
   };
 }
 
-export interface IChangeParam extends IBlurParam {}
+export interface IChangeParam extends IBlurParam {
+  type: 'text' | 'number' | 'password';
+}
 
 export interface ICustomInputProps {
   type?: InputType;
@@ -75,7 +77,7 @@ export interface ITextfieldConfig {
   validations?: IValidation[];
   fullWidth?: boolean;
   className?: string;
-  type?: string;
+  type?: 'text' | 'number' | 'password';
   onBlur?: (event: any) => void;
   onChange?: (event: any) => void;
   onKeyDown?: (event: any) => void;
@@ -94,6 +96,7 @@ export interface IAdornmentConfig {
   onInputBlur?: (event: any) => void;
   onInputChange?: (event: any) => void;
   onKeyDown?: (event: any) => void;
+  type?: 'text' | 'number' | 'password';
 }
 
 export type SearchType = {

client/src/pages/connect/AuthForm.tsx

@@ -19,7 +19,7 @@ type Connection = AuthReq & {
   time: string;
 };
 
-export const AuthForm = (props: any) => {
+export const AuthForm = () => {
   // styles
   const classes = useStyles();
 
@@ -39,7 +39,7 @@ export const AuthForm = (props: any) => {
   const navigate = useNavigate();
 
   // UI states
-  const [withPass, setWithPass] = useState(authReq.username.length > 0);
+  const [withPass, setWithPass] = useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [connections, setConnections] = useState<Connection[]>([]);
   const [isConnecting, setIsConnecting] = useState(false);
@@ -48,7 +48,8 @@ export const AuthForm = (props: any) => {
   const checkedForm = useMemo(() => {
     return formatForm(authReq);
   }, [authReq]);
-  const { validation, checkIsValid } = useFormValidation(checkedForm);
+  const { validation, checkIsValid, resetValidation } =
+    useFormValidation(checkedForm);
 
   // UI handlers
   // handle input change
@@ -110,6 +111,8 @@ export const AuthForm = (props: any) => {
           address: authReq.address,
           database: authReq.database,
           username: authReq.username,
+          password: authReq.password,
+          token: authReq.token,
           time: Date.now(),
         },
       ];
@@ -135,7 +138,9 @@ export const AuthForm = (props: any) => {
   // connect history clicked
   const onConnectHistoryClicked = (connection: any) => {
     console.log('connection', connection);
+    // set auth request
     setAuthReq(connection);
+    // close menu
     handleMenuClose();
   };
 
@@ -157,6 +162,21 @@ export const AuthForm = (props: any) => {
     setConnections(connections);
   }, []);
 
+  // UI effect
+  useEffect(() => {
+    // if address contains zilliz, or username or password is not empty
+    //  set withpass to true
+    if (
+      (authReq.address.length > 0 && authReq.address.includes('zilliz')) ||
+      authReq.username.length > 0 ||
+      authReq.password.length > 0
+    ) {
+      setWithPass(true);
+    }
+    // reset form
+    resetValidation(formatForm(authReq));
+  }, [authReq.address, authReq.username, authReq.password]);
+
   return (
     <form onSubmit={handleConnect}>
       <section className={classes.wrapper}>
@@ -175,7 +195,7 @@ export const AuthForm = (props: any) => {
           textConfig={{
             label: attuTrans.address,
             key: 'address',
-            onChange: (val: string) => handleInputChange('address', val),
+            onChange: (val: string) => handleInputChange('address', String(val)),
             variant: 'filled',
             className: classes.input,
             placeholder: attuTrans.address,