feat: fix phone validation bug in signup page (#1693)

* fix: saml long button crush

* fix: sue svg

* Update Setting.js

* Update LoginButton.js

* Update ProviderButton.js

---------

Co-authored-by: hsluoyz <hsluoyz@qq.com>

object/token.go

@@ -51,7 +51,7 @@ type Token struct {
 	Organization string `xorm:"varchar(100)" json:"organization"`
 	User         string `xorm:"varchar(100)" json:"user"`
 
-	Code          string `xorm:"varchar(100)" json:"code"`
+	Code          string `xorm:"varchar(100) index" json:"code"`
 	AccessToken   string `xorm:"mediumtext" json:"accessToken"`
 	RefreshToken  string `xorm:"mediumtext" json:"refreshToken"`
 	ExpiresIn     int    `json:"expiresIn"`
@@ -362,7 +362,8 @@ func GetOAuthToken(grantType string, clientId string, clientSecret string, code
 	}
 
 	token.CodeIsUsed = true
-	updateUsedByCode(token)
+	go updateUsedByCode(token)
+
 	tokenWrapper := &TokenWrapper{
 		AccessToken:  token.AccessToken,
 		IdToken:      token.AccessToken,

web/src/auth/LoginButton.js

@@ -14,11 +14,10 @@
 
 import i18next from "i18next";
 import {createButton} from "react-social-login-buttons";
-import {StaticBaseUrl} from "../Setting";
 
-function LoginButton({type, align = "center", style = {background: "#ffffff", color: "#000000"}, activeStyle = {background: "#ededee"}}) {
+function LoginButton({type, logoUrl, align = "center", style = {background: "#ffffff", color: "#000000"}, activeStyle = {background: "#ededee"}}) {
   function Icon({width = 24, height = 24, color}) {
-    return <img src={`${StaticBaseUrl}/buttons/${type.toLowerCase()}.svg`} alt={`Sign in with ${type}`} style={{width: width, height: height}} />;
+    return <img src={logoUrl} alt={`Sign in with ${type}`} style={{width: width, height: height}} />;
   }
   const config = {
     text: `Sign in with ${type}`,

web/src/auth/ProviderButton.js

@@ -44,62 +44,62 @@ import * as AuthBackend from "./AuthBackend";
 import {getEvent} from "./Util";
 import {Modal} from "antd";
 
-function getSigninButton(type) {
-  const text = i18next.t("login:Sign in with {type}").replace("{type}", type);
-  if (type === "GitHub") {
+function getSigninButton(provider) {
+  const text = i18next.t("login:Sign in with {type}").replace("{type}", provider.type);
+  if (provider.type === "GitHub") {
     return <GithubLoginButton text={text} align={"center"} />;
-  } else if (type === "Google") {
+  } else if (provider.type === "Google") {
     return <GoogleLoginButton text={text} align={"center"} />;
-  } else if (type === "QQ") {
+  } else if (provider.type === "QQ") {
     return <QqLoginButton text={text} align={"center"} />;
-  } else if (type === "Facebook") {
+  } else if (provider.type === "Facebook") {
     return <FacebookLoginButton text={text} align={"center"} />;
-  } else if (type === "Weibo") {
+  } else if (provider.type === "Weibo") {
     return <WeiboLoginButton text={text} align={"center"} />;
-  } else if (type === "Gitee") {
+  } else if (provider.type === "Gitee") {
     return <GiteeLoginButton text={text} align={"center"} />;
-  } else if (type === "WeChat") {
+  } else if (provider.type === "WeChat") {
     return <WechatLoginButton text={text} align={"center"} />;
-  } else if (type === "DingTalk") {
+  } else if (provider.type === "DingTalk") {
     return <DingTalkLoginButton text={text} align={"center"} />;
-  } else if (type === "LinkedIn") {
+  } else if (provider.type === "LinkedIn") {
     return <LinkedInLoginButton text={text} align={"center"} />;
-  } else if (type === "WeCom") {
+  } else if (provider.type === "WeCom") {
     return <WeComLoginButton text={text} align={"center"} />;
-  } else if (type === "Lark") {
+  } else if (provider.type === "Lark") {
     return <LarkLoginButton text={text} align={"center"} />;
-  } else if (type === "GitLab") {
+  } else if (provider.type === "GitLab") {
     return <GitLabLoginButton text={text} align={"center"} />;
-  } else if (type === "Adfs") {
+  } else if (provider.type === "Adfs") {
     return <AdfsLoginButton text={text} align={"center"} />;
-  } else if (type === "Casdoor") {
+  } else if (provider.type === "Casdoor") {
     return <CasdoorLoginButton text={text} align={"center"} />;
-  } else if (type === "Baidu") {
+  } else if (provider.type === "Baidu") {
     return <BaiduLoginButton text={text} align={"center"} />;
-  } else if (type === "Alipay") {
+  } else if (provider.type === "Alipay") {
     return <AlipayLoginButton text={text} align={"center"} />;
-  } else if (type === "Infoflow") {
+  } else if (provider.type === "Infoflow") {
     return <InfoflowLoginButton text={text} align={"center"} />;
-  } else if (type === "Apple") {
+  } else if (provider.type === "Apple") {
     return <AppleLoginButton text={text} align={"center"} />;
-  } else if (type === "AzureAD") {
+  } else if (provider.type === "AzureAD") {
     return <AzureADLoginButton text={text} align={"center"} />;
-  } else if (type === "Slack") {
+  } else if (provider.type === "Slack") {
     return <SlackLoginButton text={text} align={"center"} />;
-  } else if (type === "Steam") {
+  } else if (provider.type === "Steam") {
     return <SteamLoginButton text={text} align={"center"} />;
-  } else if (type === "Bilibili") {
+  } else if (provider.type === "Bilibili") {
     return <BilibiliLoginButton text={text} align={"center"} />;
-  } else if (type === "Okta") {
+  } else if (provider.type === "Okta") {
     return <OktaLoginButton text={text} align={"center"} />;
-  } else if (type === "Douyin") {
+  } else if (provider.type === "Douyin") {
     return <DouyinLoginButton text={text} align={"center"} />;
   } else {
-    return <LoginButton key={type} type={type} />;
+    return <LoginButton key={provider.type} type={provider.type} logoUrl={getProviderLogoURL(provider)} />;
   }
 }
 
-function getSamlUrl(provider, location) {
+function goToSamlUrl(provider, location) {
   const params = new URLSearchParams(location.search);
   const clientId = params.get("client_id") ?? "";
   const state = params.get("state");
@@ -149,12 +149,11 @@ export function renderProviderLogo(provider, application, width, margin, size, l
       }
     } else if (provider.category === "SAML") {
       return (
-        <a key={provider.displayName} onClick={() => getSamlUrl(provider, location)}>
+        <a key={provider.displayName} onClick={() => goToSamlUrl(provider, location)}>
           <img width={width} height={width} src={getProviderLogoURL(provider)} alt={provider.displayName} style={{margin: margin}} />
         </a>
       );
     }
-
   } else if (provider.type === "Custom") {
     // style definition
     const text = i18next.t("login:Sign in with {type}").replace("{type}", provider.displayName);
@@ -173,7 +172,7 @@ export function renderProviderLogo(provider, application, width, margin, size, l
       );
     } else if (provider.category === "SAML") {
       return (
-        <a key={provider.displayName} onClick={() => getSamlUrl(provider, location)} style={customAStyle}>
+        <a key={provider.displayName} onClick={() => goToSamlUrl(provider, location)} style={customAStyle}>
           <button style={customButtonStyle}>
             <img width={26} src={getProviderLogoURL(provider)} alt={provider.displayName} style={customImgStyle} />
             <span style={customSpanStyle}>{text}</span>
@@ -182,14 +181,27 @@ export function renderProviderLogo(provider, application, width, margin, size, l
       );
     }
   } else {
-    return (
-      <div key={provider.displayName} style={{marginBottom: "10px"}}>
-        <a href={Provider.getAuthUrl(application, provider, "signup")}>
-          {
-            getSigninButton(provider.type)
-          }
-        </a>
-      </div>
-    );
+    // big button, for disable password signin
+    if (provider.category === "SAML") {
+      return (
+        <div key={provider.displayName} style={{marginBottom: "10px"}}>
+          <a onClick={() => goToSamlUrl(provider, location)}>
+            {
+              getSigninButton(provider)
+            }
+          </a>
+        </div>
+      );
+    } else {
+      return (
+        <div key={provider.displayName} style={{marginBottom: "10px"}}>
+          <a href={Provider.getAuthUrl(application, provider, "signup")}>
+            {
+              getSigninButton(provider)
+            }
+          </a>
+        </div>
+      );
+    }
   }
 }

web/src/auth/SignupPage.js

@@ -386,11 +386,11 @@ class SignupPage extends React.Component {
                   },
                   ({getFieldValue}) => ({
                     validator: (_, value) => {
-                      if (!required && value === "") {
+                      if (!required && !value) {
                         return Promise.resolve();
                       }
 
-                      if (value !== "" && !Setting.isValidPhone(value, getFieldValue("countryCode"))) {
+                      if (value && !Setting.isValidPhone(value, getFieldValue("countryCode"))) {
                         this.setState({validPhone: false});
                         return Promise.reject(i18next.t("signup:The input is not valid Phone!"));
                       }