Merge pull request #3983 from RedisInsight/fe/bugfix/RI-6225-social-button-fix

RI-6225 social button fix

Author: mariasergeenko

redisinsight/ui/src/components/oauth/shared/oauth-form/OAuthForm.tsx

@@ -25,13 +25,16 @@ const OAuthForm = ({
   const dispatch = useDispatch()
 
   const [authStrategy, setAuthStrategy] = useState('')
+  const [disabled, setDisabled] = useState(false)
 
   const initOAuthProcess = (strategy: OAuthStrategy, action: string, data?: {}) => {
     dispatch(signIn())
     ipcAuth(strategy, action, data)
   }
 
   const onSocialButtonClick = (authStrategy: OAuthStrategy) => {
+    setDisabled(true)
+    setTimeout(() => { setDisabled(false) }, 1000)
     dispatch(enableUserAnalyticsAction())
     setAuthStrategy(authStrategy)
     onClick?.(authStrategy)
@@ -83,6 +86,7 @@ const OAuthForm = ({
       <OAuthSocialButtons
         onClick={onSocialButtonClick}
         {...rest}
+        disabled={disabled}
       />
     )
   )

redisinsight/ui/src/components/oauth/shared/oauth-social-buttons/OAuthSocialButtons.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { EuiButtonEmpty, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
 import { useSelector } from 'react-redux'
@@ -15,10 +15,11 @@ export interface Props {
   onClick: (authStrategy: OAuthStrategy) => void
   className?: string
   inline?: boolean
+  disabled?: boolean
 }
 
 const OAuthSocialButtons = (props: Props) => {
-  const { onClick, className, inline } = props
+  const { onClick, className, inline, disabled } = props
 
   const agreement = useSelector(oauthCloudPAgreementSelector)
 
@@ -58,7 +59,7 @@ const OAuthSocialButtons = (props: Props) => {
         >
           <>
             <EuiButtonEmpty
-              disabled={!agreement}
+              disabled={!agreement || disabled}
               className={cx(styles.button, className, { [styles.inline]: inline })}
               onClick={() => {
                 onClick(strategy)