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

controllers/verification.go

@@ -435,9 +435,15 @@ func (c *ApiController) ResetEmailOrPhone() {
 
 	switch destType {
 	case object.VerifyTypeEmail:
+		id := user.GetId()
 		user.Email = dest
 		user.EmailVerified = true
-		_, err = object.UpdateUser(user.GetId(), user, []string{"email", "email_verified"}, false)
+		columns := []string{"email", "email_verified"}
+		if organization.UseEmailAsUsername {
+			user.Name = user.Email
+			columns = append(columns, "name")
+		}
+		_, err = object.UpdateUser(id, user, columns, false)
 	case object.VerifyTypePhone:
 		user.Phone = dest
 		_, err = object.SetUserField(user, "phone", user.Phone)
@@ -449,6 +455,9 @@ func (c *ApiController) ResetEmailOrPhone() {
 		c.ResponseError(err.Error())
 		return
 	}
+	if organization.UseEmailAsUsername {
+		c.SetSessionUsername(user.GetId())
+	}
 
 	err = object.DisableVerificationCode(checkDest)
 	if err != nil {

web/src/BaseListPage.js

@@ -42,10 +42,11 @@ class BaseListPage extends React.Component {
   handleOrganizationChange = () => {
     this.setState({
       organizationName: this.props.match?.params.organizationName || Setting.getRequestOrganization(this.props.account),
+    },
+    () => {
+      const {pagination} = this.state;
+      this.fetch({pagination});
     });
-
-    const {pagination} = this.state;
-    this.fetch({pagination});
   };
 
   handleTourChange = () => {

web/src/Setting.js

@@ -157,7 +157,7 @@ export const OtherProviderInfo = {
       url: "https://control.msg91.com/app/",
     },
     "OSON SMS": {
-      logo: "https://osonsms.com/images/osonsms-logo.svg",
+      logo: `${StaticBaseUrl}/img/social_osonsms.svg`,
       url: "https://osonsms.com/",
     },
     "Custom HTTP SMS": {

web/src/UserEditPage.js

@@ -326,7 +326,7 @@ class UserEditPage extends React.Component {
           </Col>
           <Col span={22} >
             <Select virtual={false} mode="multiple" style={{width: "100%"}} disabled={disabled} value={this.state.user.groups ?? []} onChange={(value => {
-              if (this.state.groups?.filter(group => value.includes(group.name))
+              if (this.state.groups?.filter(group => value.includes(`${group.owner}/${group.name}`))
                 .filter(group => group.type === "Physical").length > 1) {
                 Setting.showMessage("error", i18next.t("general:You can only select one physical group"));
                 return;

web/src/auth/LoginPage.js

@@ -39,6 +39,7 @@ import {GoogleOneTapLoginVirtualButton} from "./GoogleLoginButton";
 import * as ProviderButton from "./ProviderButton";
 import {createFormAndSubmit, goToLink} from "../Setting";
 import WeChatLoginPanel from "./WeChatLoginPanel";
+import {CountryCodeSelect} from "../common/select/CountryCodeSelect";
 const FaceRecognitionCommonModal = lazy(() => import("../common/modal/FaceRecognitionCommonModal"));
 const FaceRecognitionModal = lazy(() => import("../common/modal/FaceRecognitionModal"));
 
@@ -677,6 +678,62 @@ class LoginPage extends React.Component {
       if (this.state.loginMethod === "wechat") {
         return (<WeChatLoginPanel application={application} loginMethod={this.state.loginMethod} />);
       }
+
+      if (this.state.loginMethod === "verificationCodePhone") {
+        return <Form.Item className="signin-phone" required={true}>
+          <Input.Group compact>
+            <Form.Item
+              name="countryCode"
+              noStyle
+              rules={[
+                {
+                  required: true,
+                  message: i18next.t("signup:Please select your country code!"),
+                },
+              ]}
+            >
+              <CountryCodeSelect
+                style={{width: "35%"}}
+                countryCodes={this.getApplicationObj().organizationObj.countryCodes}
+              />
+            </Form.Item>
+            <Form.Item
+              name="username"
+              dependencies={["countryCode"]}
+              noStyle
+              rules={[
+                {
+                  required: true,
+                  message: i18next.t("signup:Please input your phone number!"),
+                },
+                ({getFieldValue}) => ({
+                  validator: (_, value) => {
+                    if (!value) {
+                      return Promise.resolve();
+                    }
+
+                    if (value && !Setting.isValidPhone(value, getFieldValue("countryCode"))) {
+                      this.setState({validEmailOrPhone: false});
+                      return Promise.reject(i18next.t("signup:The input is not valid Phone!"));
+                    }
+
+                    this.setState({validEmailOrPhone: true});
+                    return Promise.resolve();
+                  },
+                }),
+              ]}
+            >
+              <Input
+                className="signup-phone-input"
+                placeholder={signinItem.placeholder}
+                style={{width: "65%", textAlign: "left"}}
+                onChange={e => this.setState({username: e.target.value})}
+              />
+            </Form.Item>
+          </Input.Group>
+        </Form.Item>;
+      }
+
       return (
         <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
@@ -1122,11 +1179,13 @@ class LoginPage extends React.Component {
           {i18next.t("login:Continue with")}&nbsp;:
         </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);