Add code sign in UI.

object/application.go

@@ -24,16 +24,17 @@ type Application struct {
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
 	CreatedTime string `xorm:"varchar(100)" json:"createdTime"`
 
-	DisplayName     string          `xorm:"varchar(100)" json:"displayName"`
+	DisplayName      string          `xorm:"varchar(100)" json:"displayName"`
-	Logo            string          `xorm:"varchar(100)" json:"logo"`
+	Logo             string          `xorm:"varchar(100)" json:"logo"`
-	HomepageUrl     string          `xorm:"varchar(100)" json:"homepageUrl"`
+	HomepageUrl      string          `xorm:"varchar(100)" json:"homepageUrl"`
-	Description     string          `xorm:"varchar(100)" json:"description"`
+	Description      string          `xorm:"varchar(100)" json:"description"`
-	Organization    string          `xorm:"varchar(100)" json:"organization"`
+	Organization     string          `xorm:"varchar(100)" json:"organization"`
-	EnablePassword  bool            `json:"enablePassword"`
+	EnablePassword   bool            `json:"enablePassword"`
-	EnableSignUp    bool            `json:"enableSignUp"`
+	EnableSignUp     bool            `json:"enableSignUp"`
-	Providers       []*ProviderItem `xorm:"varchar(10000)" json:"providers"`
+	EnableCodeSignin bool            `json:"enableCodeSignin"`
-	SignupItems     []*SignupItem   `xorm:"varchar(1000)" json:"signupItems"`
+	Providers        []*ProviderItem `xorm:"varchar(10000)" json:"providers"`
-	OrganizationObj *Organization   `xorm:"-" json:"organizationObj"`
+	SignupItems      []*SignupItem   `xorm:"varchar(1000)" json:"signupItems"`
+	OrganizationObj  *Organization   `xorm:"-" json:"organizationObj"`
 
 	ClientId       string   `xorm:"varchar(100)" json:"clientId"`
 	ClientSecret   string   `xorm:"varchar(100)" json:"clientSecret"`

web/src/ApplicationEditPage.js

@@ -267,6 +267,16 @@ class ApplicationEditPage extends React.Component {
             }} />
           </Col>
         </Row>
+        <Row style={{marginTop: '20px'}} >
+          <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("application:Enable Code Signin"), i18next.t("application:Enable Code Signin - Tooltip"))} :
+          </Col>
+          <Col span={1} >
+            <Switch checked={this.state.application.enableCodeSignin} onChange={checked => {
+              this.updateApplicationField('enableCodeSignin', checked);
+            }} />
+          </Col>
+        </Row>
         <Row style={{marginTop: '20px'}} >
           <Col style={{marginTop: '5px'}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("general:Signup URL"), i18next.t("general:Signup URL - Tooltip"))} :

web/src/ApplicationListPage.js

@@ -57,6 +57,7 @@ class ApplicationListPage extends React.Component {
       logo: "https://cdn.casbin.com/logo/logo_1024x256.png",
       enablePassword: true,
       enableSignUp: true,
+      EnableCodeSignin: false,
       providers: [],
       signupItems: [
         {name: "ID", visible: false, required: true, rule: "Random"},

web/src/auth/LoginPage.js

@@ -35,6 +35,7 @@ import WeComLoginButton from "./WeComLoginButton";
 import LarkLoginButton from "./LarkLoginButton";
 import GitLabLoginButton from "./GitLabLoginButton";
 import CustomGithubCorner from "../CustomGithubCorner";
+import {CountDownInput} from "../component/CountDownInput";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -45,7 +46,9 @@ class LoginPage extends React.Component {
       applicationName: props.applicationName !== undefined ? props.applicationName : (props.match === undefined ? null : props.match.params.applicationName),
       application: null,
       mode: props.mode !== undefined ? props.mode : (props.match === undefined ? null : props.match.params.mode), // "signup" or "signin"
+      isCodeSignin: false,
       msg: null,
+      username: null,
     };
   }
 
@@ -243,7 +246,7 @@ class LoginPage extends React.Component {
             autoSignin: true,
           }}
           onFinish={(values) => {this.onFinish(values)}}
-          style={{width: "250px"}}
+          style={{width: "300px"}}
           size="large"
         >
           <Form.Item
@@ -276,19 +279,38 @@ class LoginPage extends React.Component {
               prefix={<UserOutlined className="site-form-item-icon" />}
               placeholder={i18next.t("login:username, Email or phone")}
               disabled={!application.enablePassword}
+              onChange={e => {
+                this.setState({
+                  username: e.target.value,
+                });
+              }}
             />
           </Form.Item>
-          <Form.Item
+          {
-            name="password"
+            this.state.isCodeSignin ? (
-            rules={[{ required: true, message: i18next.t("login:Please input your password!") }]}
+              <Form.Item
-          >
+                name="code"
-            <Input
+                rules={[{ required: true, message: i18next.t("login:Please input your code!") }]}
-              prefix={<LockOutlined className="site-form-item-icon" />}
+              >
-              type="password"
+                <CountDownInput
-              placeholder={i18next.t("login:Password")}
+                  disabled={this.state.username?.length === 0}
-              disabled={!application.enablePassword}
+                  onButtonClickArgs={[this.state.email, "email", Setting.getApplicationOrgName(application)]}
-            />
+                />
-          </Form.Item>
+              </Form.Item>
+            ) : (
+              <Form.Item
+                name="password"
+                rules={[{ required: true, message: i18next.t("login:Please input your password!") }]}
+              >
+                <Input
+                  prefix={<LockOutlined className="site-form-item-icon" />}
+                  type="password"
+                  placeholder={i18next.t("login:Password")}
+                  disabled={!application.enablePassword}
+                />
+              </Form.Item>
+            )
+          }
           <Form.Item>
             <Form.Item name="autoSignin" valuePropName="checked" noStyle>
               <Checkbox style={{float: "left"}} disabled={!application.enablePassword}>
@@ -370,14 +392,25 @@ class LoginPage extends React.Component {
       )
     } else {
       return (
-        <div style={{float: "right"}}>
+        <React.Fragment>
-          {i18next.t("login:No account yet?")}&nbsp;
+          <span style={{float: "left"}}>
-          <a onClick={() => {
+            <a onClick={() => {
-            Setting.goToSignup(this, application);
+              this.setState({
-          }}>
+                isCodeSignin: !this.state.isCodeSignin,
-            {i18next.t("login:sign up now")}
+              });
-          </a>
+            }}>
-        </div>
+              {this.state.isCodeSignin ? i18next.t("login:Sign in with password") : i18next.t("login:Sign in with code")}
+            </a>
+          </span>
+          <span style={{float: "right"}}>
+            {i18next.t("login:No account?")}&nbsp;
+            <a onClick={() => {
+              Setting.goToSignup(this, application);
+            }}>
+              {i18next.t("login:sign up now")}
+            </a>
+          </span>
+        </React.Fragment>
       )
     }
   }

web/src/locales/de/data.json

@@ -8,6 +8,8 @@
   },
   "application": {
     "Edit Application": "Edit Application",
+    "Enable Code Signin": "Enable Code Signin",
+    "Enable Code Signin - Tooltip": "Enable Code Signin - Tooltip",
     "Enable signup": "Enable signup",
     "Enable signup - Tooltip": "Whether to allow users to sign up",
     "File uploaded successfully": "File uploaded successfully",
@@ -32,8 +34,7 @@
     "Please input your phone verification code!": "Please input your phone verification code!",
     "Please input your verification code!": "Please input your verification code!",
     "Send Code": "Send Code",
-    "Submit and complete": "Submit and complete",
+    "Submit and complete": "Submit and complete"
-    "Verify code": "Verify code"
   },
   "forget": {
     "Account": "Account",
@@ -169,13 +170,16 @@
     "Auto sign in": "Auto sign in",
     "Continue with": "Continue with",
     "Forgot password?": "Forgot password?",
-    "No account yet?": "No account yet?",
+    "No account?": "No account?",
     "Or sign in with another account": "Or sign in with another account",
     "Password": "Password",
     "Password - Tooltip": "Password - Tooltip",
+    "Please input your code!": "Please input your code!",
     "Please input your password!": "Please input your password!",
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
+    "Sign in with code": "Sign in with code",
+    "Sign in with password": "Sign in with password",
     "Sign in with {type}": "Sign in with {type}",
     "Signing in...": "Signing in...",
     "To access": "To access",
@@ -324,7 +328,9 @@
     "Location": "Location",
     "Location - Tooltip": "Location - Tooltip",
     "Modify password...": "Modify password...",
+    "New Email": "New Email",
     "New Password": "New Password",
+    "New phone": "New phone",
     "OK": "OK",
     "Old Password": "Old Password",
     "Password": "Password",

web/src/locales/en/data.json

@@ -8,6 +8,8 @@
   },
   "application": {
     "Edit Application": "Edit Application",
+    "Enable Code Signin": "Enable Code Signin",
+    "Enable Code Signin - Tooltip": "Enable Code Signin - Tooltip",
     "Enable signup": "Enable signup",
     "Enable signup - Tooltip": "Enable signup - Tooltip",
     "File uploaded successfully": "File uploaded successfully",
@@ -32,8 +34,7 @@
     "Please input your phone verification code!": "Please input your phone verification code!",
     "Please input your verification code!": "Please input your verification code!",
     "Send Code": "Send Code",
-    "Submit and complete": "Submit and complete",
+    "Submit and complete": "Submit and complete"
-    "Verify code": "Verify code"
   },
   "forget": {
     "Account": "Account",
@@ -169,13 +170,16 @@
     "Auto sign in": "Auto sign in",
     "Continue with": "Continue with",
     "Forgot password?": "Forgot password?",
-    "No account yet?": "No account yet?",
+    "No account?": "No account?",
     "Or sign in with another account": "Or sign in with another account",
     "Password": "Password",
     "Password - Tooltip": "Password - Tooltip",
+    "Please input your code!": "Please input your code!",
     "Please input your password!": "Please input your password!",
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
+    "Sign in with code": "Sign in with code",
+    "Sign in with password": "Sign in with password",
     "Sign in with {type}": "Sign in with {type}",
     "Signing in...": "Signing in...",
     "To access": "To access",
@@ -324,7 +328,9 @@
     "Location": "Location",
     "Location - Tooltip": "Location - Tooltip",
     "Modify password...": "Modify password...",
+    "New Email": "New Email",
     "New Password": "New Password",
+    "New phone": "New phone",
     "OK": "OK",
     "Old Password": "Old Password",
     "Password": "Password",

web/src/locales/fr/data.json

@@ -8,6 +8,8 @@
   },
   "application": {
     "Edit Application": "Edit Application",
+    "Enable Code Signin": "Enable Code Signin",
+    "Enable Code Signin - Tooltip": "Enable Code Signin - Tooltip",
     "Enable signup": "Enable signup",
     "Enable signup - Tooltip": "Whether to allow users to sign up",
     "File uploaded successfully": "File uploaded successfully",
@@ -32,8 +34,7 @@
     "Please input your phone verification code!": "Please input your phone verification code!",
     "Please input your verification code!": "Please input your verification code!",
     "Send Code": "Send Code",
-    "Submit and complete": "Submit and complete",
+    "Submit and complete": "Submit and complete"
-    "Verify code": "Verify code"
   },
   "forget": {
     "Account": "Account",
@@ -169,13 +170,16 @@
     "Auto sign in": "Auto sign in",
     "Continue with": "Continue with",
     "Forgot password?": "Forgot password?",
-    "No account yet?": "No account yet?",
+    "No account?": "No account?",
     "Or sign in with another account": "Or sign in with another account",
     "Password": "Password",
     "Password - Tooltip": "Password - Tooltip",
+    "Please input your code!": "Please input your code!",
     "Please input your password!": "Please input your password!",
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
+    "Sign in with code": "Sign in with code",
+    "Sign in with password": "Sign in with password",
     "Sign in with {type}": "Sign in with {type}",
     "Signing in...": "Signing in...",
     "To access": "To access",
@@ -324,7 +328,9 @@
     "Location": "Location",
     "Location - Tooltip": "Location - Tooltip",
     "Modify password...": "Modify password...",
+    "New Email": "New Email",
     "New Password": "New Password",
+    "New phone": "New phone",
     "OK": "OK",
     "Old Password": "Old Password",
     "Password": "Password",

web/src/locales/ja/data.json

@@ -8,6 +8,8 @@
   },
   "application": {
     "Edit Application": "Edit Application",
+    "Enable Code Signin": "Enable Code Signin",
+    "Enable Code Signin - Tooltip": "Enable Code Signin - Tooltip",
     "Enable signup": "Enable signup",
     "Enable signup - Tooltip": "Whether to allow users to sign up",
     "File uploaded successfully": "File uploaded successfully",
@@ -32,8 +34,7 @@
     "Please input your phone verification code!": "Please input your phone verification code!",
     "Please input your verification code!": "Please input your verification code!",
     "Send Code": "Send Code",
-    "Submit and complete": "Submit and complete",
+    "Submit and complete": "Submit and complete"
-    "Verify code": "Verify code"
   },
   "forget": {
     "Account": "Account",
@@ -169,13 +170,16 @@
     "Auto sign in": "Auto sign in",
     "Continue with": "Continue with",
     "Forgot password?": "Forgot password?",
-    "No account yet?": "No account yet?",
+    "No account?": "No account?",
     "Or sign in with another account": "Or sign in with another account",
     "Password": "Password",
     "Password - Tooltip": "Password - Tooltip",
+    "Please input your code!": "Please input your code!",
     "Please input your password!": "Please input your password!",
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
+    "Sign in with code": "Sign in with code",
+    "Sign in with password": "Sign in with password",
     "Sign in with {type}": "Sign in with {type}",
     "Signing in...": "Signing in...",
     "To access": "To access",
@@ -324,7 +328,9 @@
     "Location": "Location",
     "Location - Tooltip": "Location - Tooltip",
     "Modify password...": "Modify password...",
+    "New Email": "New Email",
     "New Password": "New Password",
+    "New phone": "New phone",
     "OK": "OK",
     "Old Password": "Old Password",
     "Password": "Password",

web/src/locales/ko/data.json

@@ -8,6 +8,8 @@
   },
   "application": {
     "Edit Application": "Edit Application",
+    "Enable Code Signin": "Enable Code Signin",
+    "Enable Code Signin - Tooltip": "Enable Code Signin - Tooltip",
     "Enable signup": "Enable signup",
     "Enable signup - Tooltip": "Whether to allow users to sign up",
     "File uploaded successfully": "File uploaded successfully",
@@ -32,8 +34,7 @@
     "Please input your phone verification code!": "Please input your phone verification code!",
     "Please input your verification code!": "Please input your verification code!",
     "Send Code": "Send Code",
-    "Submit and complete": "Submit and complete",
+    "Submit and complete": "Submit and complete"
-    "Verify code": "Verify code"
   },
   "forget": {
     "Account": "Account",
@@ -169,13 +170,16 @@
     "Auto sign in": "Auto sign in",
     "Continue with": "Continue with",
     "Forgot password?": "Forgot password?",
-    "No account yet?": "No account yet?",
+    "No account?": "No account?",
     "Or sign in with another account": "Or sign in with another account",
     "Password": "Password",
     "Password - Tooltip": "Password - Tooltip",
+    "Please input your code!": "Please input your code!",
     "Please input your password!": "Please input your password!",
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
+    "Sign in with code": "Sign in with code",
+    "Sign in with password": "Sign in with password",
     "Sign in with {type}": "Sign in with {type}",
     "Signing in...": "Signing in...",
     "To access": "To access",
@@ -324,7 +328,9 @@
     "Location": "Location",
     "Location - Tooltip": "Location - Tooltip",
     "Modify password...": "Modify password...",
+    "New Email": "New Email",
     "New Password": "New Password",
+    "New phone": "New phone",
     "OK": "OK",
     "Old Password": "Old Password",
     "Password": "Password",

web/src/locales/ru/data.json

@@ -8,6 +8,8 @@
   },
   "application": {
     "Edit Application": "Edit Application",
+    "Enable Code Signin": "Enable Code Signin",
+    "Enable Code Signin - Tooltip": "Enable Code Signin - Tooltip",
     "Enable signup": "Enable signup",
     "Enable signup - Tooltip": "Whether to allow users to sign up",
     "File uploaded successfully": "File uploaded successfully",
@@ -32,8 +34,7 @@
     "Please input your phone verification code!": "Please input your phone verification code!",
     "Please input your verification code!": "Please input your verification code!",
     "Send Code": "Send Code",
-    "Submit and complete": "Submit and complete",
+    "Submit and complete": "Submit and complete"
-    "Verify code": "Verify code"
   },
   "forget": {
     "Account": "Account",
@@ -169,13 +170,16 @@
     "Auto sign in": "Auto sign in",
     "Continue with": "Continue with",
     "Forgot password?": "Forgot password?",
-    "No account yet?": "No account yet?",
+    "No account?": "No account?",
     "Or sign in with another account": "Or sign in with another account",
     "Password": "Password",
     "Password - Tooltip": "Password - Tooltip",
+    "Please input your code!": "Please input your code!",
     "Please input your password!": "Please input your password!",
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
+    "Sign in with code": "Sign in with code",
+    "Sign in with password": "Sign in with password",
     "Sign in with {type}": "Sign in with {type}",
     "Signing in...": "Signing in...",
     "To access": "To access",
@@ -324,7 +328,9 @@
     "Location": "Location",
     "Location - Tooltip": "Location - Tooltip",
     "Modify password...": "Modify password...",
+    "New Email": "New Email",
     "New Password": "New Password",
+    "New phone": "New phone",
     "OK": "OK",
     "Old Password": "Old Password",
     "Password": "Password",

web/src/locales/zh/data.json

@@ -8,6 +8,8 @@
   },
   "application": {
     "Edit Application": "修改应用",
+    "Enable Code Signin": "启用验证码登录",
+    "Enable Code Signin - Tooltip": "是否允许用手机或邮箱验证码登录",
     "Enable signup": "启用注册",
     "Enable signup - Tooltip": "是否允许用户注册",
     "File uploaded successfully": "文件上传成功",
@@ -32,8 +34,7 @@
     "Please input your phone verification code!": "请输入您的手机验证码！",
     "Please input your verification code!": "请输入您的验证码！",
     "Send Code": "发送验证码",
-    "Submit and complete": "完成提交",
+    "Submit and complete": "完成提交"
-    "Verify code": "验证码"
   },
   "forget": {
     "Account": "账号",
@@ -169,13 +170,16 @@
     "Auto sign in": "下次自动登录",
     "Continue with": "使用以下账号继续",
     "Forgot password?": "忘记密码？",
-    "No account yet?": "没有账号？",
+    "No account?": "没有账号？",
     "Or sign in with another account": "或者，登录其他账号",
     "Password": "密码",
     "Password - Tooltip": "密码",
+    "Please input your code!": "请输入您的验证码！",
     "Please input your password!": "请输入您的密码！",
     "Please input your username, Email or phone!": "请输入您的用户名、Email或手机号！",
     "Sign In": "登录",
+    "Sign in with code": "验证码登录",
+    "Sign in with password": "密码登录",
     "Sign in with {type}": "{type}登录",
     "Signing in...": "正在登录...",
     "To access": "访问",
@@ -324,7 +328,9 @@
     "Location": "城市",
     "Location - Tooltip": "居住地址所在的城市",
     "Modify password...": "修改密码...",
+    "New Email": "新邮箱",
     "New Password": "新密码",
+    "New phone": "新手机号",
     "OK": "确定",
     "Old Password": "旧密码",
     "Password": "密码",