feat: fix bug that SelfLoginButton will re-render when username field updates (#4091)

web/src/auth/LoginPage.js

@@ -1179,11 +1179,13 @@ class LoginPage extends React.Component {
           {i18next.t("login:Continue with")} :
         </div>
         <br />
-        <SelfLoginButton account={this.props.account} onClick={() => {
+        <div onClick={() => {
           const values = {};
           values["application"] = application.name;
           this.login(values);
-        }} />
+        }}>
+          <SelfLoginButton account={this.props.account} />
+        </div>
         <br />
         <br />
         <div style={{fontSize: 16, textAlign: "left"}}>

web/src/auth/SelfLoginButton.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from "react";
+import React, {memo} from "react";
 import {createButton} from "react-social-login-buttons";
 
 class SelfLoginButton extends React.Component {
@@ -44,4 +44,4 @@ class SelfLoginButton extends React.Component {
   }
 }
 
-export default SelfLoginButton;
+export default memo(SelfLoginButton);