disable button while connecting

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

client/src/i18n/cn/button.ts

@@ -8,6 +8,7 @@ const btnTrans = {
   searchMulti: `搜索{{number}}`,
   confirm: '确认',
   connect: '连接',
+  connecting: '连接中...',
   import: '导入',
   delete: '删除',
   drop: 'drop',

client/src/i18n/en/button.ts

@@ -8,6 +8,7 @@ const btnTrans = {
   searchMulti: `Search{{number}}`,
   confirm: 'Confirm',
   connect: 'Connect',
+  connecting: 'Connecting...',
   import: 'Import',
   delete: 'Delete',
   drop: 'Drop',

client/src/pages/connect/AuthForm.tsx

@@ -42,6 +42,7 @@ export const AuthForm = (props: any) => {
   const [withPass, setWithPass] = useState(authReq.username.length > 0);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [connections, setConnections] = useState<Connection[]>([]);
+  const [isConnecting, setIsConnecting] = useState(false);
 
   // form validation
   const checkedForm = useMemo(() => {
@@ -80,6 +81,9 @@ export const AuthForm = (props: any) => {
   const handleConnect = async (event: React.FormEvent) => {
     event.preventDefault();
 
+    // set connecting
+    setIsConnecting(true);
+
     try {
       // login
       const result = await login(authReq);
@@ -123,6 +127,8 @@ export const AuthForm = (props: any) => {
       if (error.response.data.message.includes('UNAUTHENTICATED')) {
         handleEnableAuth(true);
       }
+    } finally {
+      setIsConnecting(false);
     }
   };
 
@@ -134,9 +140,7 @@ export const AuthForm = (props: any) => {
   };
 
   // is button should be disabled
-  const btnDisabled = useMemo(() => {
-    return authReq.address.trim().length === 0;
-  }, [authReq.address]);
+  const btnDisabled = authReq.address.trim().length === 0 || isConnecting;
 
   // load connection from local storage
   useEffect(() => {
@@ -178,7 +182,10 @@ export const AuthForm = (props: any) => {
             fullWidth: true,
             InputProps: {
               endAdornment: (
-                <CustomIconButton onClick={handleMenuClick}>
+                <CustomIconButton
+                  className={classes.menuBtn}
+                  onClick={handleMenuClick}
+                >
                   <Icons.link />
                 </CustomIconButton>
               ),
@@ -287,7 +294,7 @@ export const AuthForm = (props: any) => {
         )}
 
         <CustomButton type="submit" variant="contained" disabled={btnDisabled}>
-          {btnTrans('connect')}
+          {btnTrans(isConnecting ? 'connecting' : 'connect')}
         </CustomButton>
       </section>
 

client/src/pages/connect/style.ts

@@ -18,6 +18,9 @@ export const useStyles = makeStyles((theme: Theme) => ({
   },
   input: {
     margin: theme.spacing(0.5, 0, 0),
+    '& .MuiFilledInput-adornedEnd': {
+      paddingRight: 0,
+    },
   },
   toggle: {
     display: 'flex',
@@ -45,6 +48,13 @@ export const useStyles = makeStyles((theme: Theme) => ({
       fontWeight: 'bold',
     },
   },
+  menuBtn: {
+    display: 'flex',
+    width: 36,
+    paddingLeft: 8,
+    paddingRight: 8,
+    fontSize: 14,
+  },
   menu: {
     '& ul': {
       padding: '0',