Add verificationCode to login method

controllers/webauthn.go

@@ -16,6 +16,7 @@ package controllers
 
 import (
 	"bytes"
+	"fmt"
 	"io"
 
 	"github.com/casdoor/casdoor/object"
@@ -100,7 +101,7 @@ func (c *ApiController) WebAuthnSigninBegin() {
 	userName := c.Input().Get("name")
 	user := object.GetUserByFields(userOwner, userName)
 	if user == nil {
-		c.ResponseError("Please Giveout Owner and Username.")
+		c.ResponseError(fmt.Sprintf("The user: %s/%s doesn't exist", userOwner, userName))
 		return
 	}
 	options, sessionData, err := webauthnObj.BeginLogin(user)

web/craco.config.js

@@ -43,7 +43,7 @@ module.exports = {
       options: {
         lessLoaderOptions: {
           lessOptions: {
-            modifyVars: {"@primary-color": "rgb(45,120,213)"},
+            modifyVars: {"@primary-color": "rgb(45,120,213)", "@border-radius-base": "5px"},
             javascriptEnabled: true,
           },
         },

web/src/auth/LoginPage.js

@@ -41,7 +41,6 @@ class LoginPage extends React.Component {
       owner: props.owner !== undefined ? props.owner : (props.match === undefined ? null : props.match.params.owner),
       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,
       validEmailOrPhone: false,
@@ -349,7 +348,7 @@ class LoginPage extends React.Component {
                   },
                   {
                     validator: (_, value) => {
-                      if (this.state.isCodeSignin) {
+                      if (this.state.loginMethod === "verificationCode") {
                         if (this.state.email !== "" && !Setting.isValidEmail(this.state.username) && !Setting.isValidPhone(this.state.username)) {
                           this.setState({validEmailOrPhone: false});
                           return Promise.reject(i18next.t("login:The input is not valid Email or Phone!"));
@@ -372,7 +371,7 @@ class LoginPage extends React.Component {
                 <Input
                   id = "input"
                   prefix={<UserOutlined className="site-form-item-icon" />}
-                  placeholder={this.state.isCodeSignin ? i18next.t("login:Email or phone") : i18next.t("login:username, Email or phone")}
+                  placeholder={(this.state.loginMethod === "verificationCode") ? i18next.t("login:Email or phone") : i18next.t("login:username, Email or phone")}
                   disabled={!application.enablePassword}
                   onChange={e => {
                     this.setState({
@@ -399,29 +398,17 @@ class LoginPage extends React.Component {
             </a>
           </Form.Item>
           <Form.Item>
-            {
-              this.state.loginMethod === "password" ?
-                (
-                  <Button
-                    type="primary"
-                    htmlType="submit"
-                    style={{width: "100%", marginBottom: "5px"}}
-                    disabled={!application.enablePassword}
-                  >
-                    {i18next.t("login:Sign In")}
-                  </Button>
-                ) :
-                (
-                  <Button
-                    type="primary"
-                    htmlType="submit"
-                    style={{width: "100%", marginBottom: "5px"}}
-                    disabled={!application.enablePassword}
-                  >
-                    {i18next.t("login:Sign in with WebAuthn")}
-                  </Button>
-                )
-            }
+            <Button
+              type="primary"
+              htmlType="submit"
+              style={{width: "100%", marginBottom: "5px"}}
+              disabled={!application.enablePassword}
+            >
+              {
+                this.state.loginMethod === "webAuthn" ? i18next.t("login:Sign in with WebAuthn") :
+                  i18next.t("login:Sign In")
+              }
+            </Button>
             {
               this.renderFooter(application)
             }
@@ -479,19 +466,6 @@ class LoginPage extends React.Component {
     } else {
       return (
         <React.Fragment>
-          <span style={{float: "left"}}>
-            {
-              !application.enableCodeSignin ? null : (
-                <a onClick={() => {
-                  this.setState({
-                    isCodeSignin: !this.state.isCodeSignin,
-                  });
-                }}>
-                  {this.state.isCodeSignin ? i18next.t("login:Sign in with password") : i18next.t("login:Sign in with code")}
-                </a>
-              )
-            }
-          </span>
           <span style={{float: "right"}}>
             {
               !application.enableSignUp ? null : (
@@ -639,7 +613,23 @@ class LoginPage extends React.Component {
   renderPasswordOrCodeInput() {
     const application = this.getApplicationObj();
     if (this.state.loginMethod === "password") {
-      return this.state.isCodeSignin ? (
+      return (
+        <Col span={24}>
+          <Form.Item
+            name="password"
+            rules={[{required: true, message: i18next.t("login:Please input your password!")}]}
+          >
+            <Input.Password
+              prefix={<LockOutlined className="site-form-item-icon" />}
+              type="password"
+              placeholder={i18next.t("login:Password")}
+              disabled={!application.enablePassword}
+            />
+          </Form.Item>
+        </Col>
+      );
+    } else if (this.state.loginMethod === "verificationCode") {
+      return (
         <Col span={24}>
           <Form.Item
             name="code"
@@ -652,32 +642,29 @@ class LoginPage extends React.Component {
             />
           </Form.Item>
         </Col>
-      ) : (
-        <Col span={24}>
-          <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>
-        </Col>
       );
+    } else {
+      return null;
     }
   }
 
   renderMethodChoiceBox() {
     const application = this.getApplicationObj();
-    if (application.enableWebAuthn) {
+    if (application.enableCodeSignin || application.enableWebAuthn) {
       return (
         <div>
-          <Tabs defaultActiveKey="password" onChange={(key) => {this.setState({loginMethod: key});}} centered>
+          <Tabs size={"small"} defaultActiveKey="password" onChange={(key) => {this.setState({loginMethod: key});}} centered>
             <TabPane tab={i18next.t("login:Password")} key="password" />
-            <TabPane tab={"WebAuthn"} key="webAuthn" />
+            {
+              !application.enableCodeSignin ? null : (
+                <TabPane tab={i18next.t("login:Verification Code")} key="verificationCode" />
+              )
+            }
+            {
+              !application.enableWebAuthn ? null : (
+                <TabPane tab={i18next.t("login:WebAuthn")} key="webAuthn" />
+              )
+            }
           </Tabs>
         </div>
       );

web/src/locales/de/data.json

@@ -277,12 +277,12 @@
     "Please input your username, Email or phone!": "Bitte geben Sie Ihren Benutzernamen, E-Mail oder Telefon ein!",
     "Sign In": "Anmelden",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "Mit Code anmelden",
-    "Sign in with password": "Mit Passwort anmelden",
     "Sign in with {type}": "Mit {type} anmelden",
     "Signing in...": "Anmelden...",
     "The input is not valid Email or Phone!": "Die Eingabe ist keine gültige E-Mail oder Telefon!",
     "To access": "Zu Zugriff",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "jetzt anmelden",
     "username, Email or phone": "Benutzername, E-Mail oder Telefon"
   },

web/src/locales/en/data.json

@@ -277,12 +277,12 @@
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "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...",
     "The input is not valid Email or Phone!": "The input is not valid Email or Phone!",
     "To access": "To access",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "sign up now",
     "username, Email or phone": "username, Email or phone"
   },

web/src/locales/fr/data.json

@@ -277,12 +277,12 @@
     "Please input your username, Email or phone!": "Veuillez entrer votre nom d'utilisateur, votre e-mail ou votre téléphone!",
     "Sign In": "Se connecter",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "Se connecter avec le code",
-    "Sign in with password": "Se connecter avec le mot de passe",
     "Sign in with {type}": "Se connecter avec {type}",
     "Signing in...": "Connexion en cours...",
     "The input is not valid Email or Phone!": "L'entrée n'est pas valide Email ou Téléphone !",
     "To access": "Pour accéder à",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "inscrivez-vous maintenant",
     "username, Email or phone": "nom d'utilisateur, e-mail ou téléphone"
   },

web/src/locales/ja/data.json

@@ -277,12 +277,12 @@
     "Please input your username, Email or phone!": "ユーザー名、メールアドレスまたは電話番号を入力してください。",
     "Sign In": "サインイン",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "コードでサインイン",
-    "Sign in with password": "パスワードでサインイン",
     "Sign in with {type}": "{type} でサインイン",
     "Signing in...": "サインイン中...",
     "The input is not valid Email or Phone!": "入力されたメールアドレスまたは電話番号が正しくありません。",
     "To access": "アクセスするには",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "今すぐサインアップ",
     "username, Email or phone": "ユーザー名、メールアドレスまたは電話番号"
   },

web/src/locales/ko/data.json

@@ -277,12 +277,12 @@
     "Please input your username, Email or phone!": "Please input your username, Email or phone!",
     "Sign In": "Sign In",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "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...",
     "The input is not valid Email or Phone!": "The input is not valid Email or Phone!",
     "To access": "To access",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "sign up now",
     "username, Email or phone": "username, Email or phone"
   },

web/src/locales/ru/data.json

@@ -277,12 +277,12 @@
     "Please input your username, Email or phone!": "Пожалуйста, введите ваше имя пользователя, адрес электронной почты или телефон!",
     "Sign In": "Войти",
     "Sign in with WebAuthn": "Sign in with WebAuthn",
-    "Sign in with code": "Войти с помощью кода",
-    "Sign in with password": "Войти с помощью пароля",
     "Sign in with {type}": "Войти с помощью {type}",
     "Signing in...": "Вход...",
     "The input is not valid Email or Phone!": "Введен неверный адрес электронной почты или телефон!",
     "To access": "На доступ",
+    "Verification Code": "Verification Code",
+    "WebAuthn": "WebAuthn",
     "sign up now": "зарегистрироваться",
     "username, Email or phone": "имя пользователя, адрес электронной почты или телефон"
   },

web/src/locales/zh/data.json

@@ -277,12 +277,12 @@
     "Please input your username, Email or phone!": "请输入您的用户名、Email或手机号！",
     "Sign In": "登录",
     "Sign in with WebAuthn": "WebAuthn登录",
-    "Sign in with code": "验证码登录",
-    "Sign in with password": "密码登录",
     "Sign in with {type}": "{type}登录",
     "Signing in...": "正在登录...",
     "The input is not valid Email or Phone!": "您输入的电子邮箱格式或手机号有误！",
     "To access": "访问",
+    "Verification Code": "验证码",
+    "WebAuthn": "Web身份验证",
     "sign up now": "立即注册",
     "username, Email or phone": "用户名、Email或手机号"
   },