[apisix-dashboard] branch master updated: feat: Press Enter key can trigger the Login button (#1472)

[juzhiyuan]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git


The following commit(s) were added to refs/heads/master by this push:
     new adda38b  feat: Press Enter key can trigger the Login button (#1472)
adda38b is described below

commit adda38bc1bd83335c995bb9428f080f285d878f0
Author: guoqqqi <72343596+guoq...@users.noreply.github.com>
AuthorDate: Thu Feb 18 16:27:39 2021 +0800

    feat: Press Enter key can trigger the Login button (#1472)
---
 web/cypress/fixtures/selector.json         |  6 +++++-
 web/cypress/integration/user/login.spec.js | 30 +++++++++++++++++++-----------
 web/src/pages/User/Login.tsx               |  8 +++++++-
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/web/cypress/fixtures/selector.json 
b/web/cypress/fixtures/selector.json
index 59ededb..8e21de7 100644
--- a/web/cypress/fixtures/selector.json
+++ b/web/cypress/fixtures/selector.json
@@ -56,5 +56,9 @@
   "grafanaURL": "#grafanaURL",
   "explain": ".ant-form-item-explain",
 
-  "upstreamType": ".ant-select-item-option-content"
+  "upstreamType": ".ant-select-item-option-content",
+
+  "errorExplain": ".ant-form-item-explain",
+  "usernameInput": "#control-ref_username",
+  "passwordInput": "#control-ref_password"
 }
diff --git a/web/cypress/integration/user/login.spec.js 
b/web/cypress/integration/user/login.spec.js
index 60adad7..f3b01c4 100644
--- a/web/cypress/integration/user/login.spec.js
+++ b/web/cypress/integration/user/login.spec.js
@@ -20,28 +20,36 @@ context('Login Test', () => {
   beforeEach(() => {
     // set default language
     localStorage.setItem('umi_locale', 'en-US');
+    cy.fixture('selector.json').as('domSelector');
   });
 
-  it('login failed with empty username and password', () => {
+  it('login failed with empty username and password', function () {
     cy.visit('/user/Login');
     cy.contains('Login').click();
-    cy.get('.ant-form-item-explain').should('contain', 'Please input 
username');
-    cy.get('.ant-form-item-explain').should('contain', 'Please input 
password');
+    cy.get(this.domSelector.errorExplain).should('contain', 'Please input 
username');
+    cy.get(this.domSelector.errorExplain).should('contain', 'Please input 
password');
   });
 
-  it('login with invalid credentials', () => {
+  it('login with invalid credentials', function () {
     cy.visit('/user/Login');
-    cy.get('#control-ref_username').type('user');
-    cy.get('#control-ref_password').type('invalidPassword');
+    cy.get(this.domSelector.usernameInput).type('user');
+    cy.get(this.domSelector.passwordInput).type('invalidPassword');
     cy.contains('Login').click();
-    cy.get('.ant-notification-notice-message').should('contain', 'Request 
Error Code: 10000');
+    cy.get(this.domSelector.notification).should('contain', 'Request Error 
Code: 10000');
   });
 
-  it('login success', () => {
+  it('login success', function () {
     cy.visit('/user/Login');
-    cy.get('#control-ref_username').type('user');
-    cy.get('#control-ref_password').type('user');
+    cy.get(this.domSelector.usernameInput).type('user');
+    cy.get(this.domSelector.passwordInput).type('user');
     cy.contains('Login').click();
-    cy.get('.ant-notification-notice-message').should('contain', 
'Successfully');
+    cy.get(this.domSelector.notification).should('contain', 'Successfully');
+  });
+
+  it('should press Enter to login successfully', function () {
+    cy.visit('/user/Login');
+    cy.get(this.domSelector.usernameInput).type('user');
+    cy.get(this.domSelector.passwordInput).type('user{enter}');
+    cy.get(this.domSelector.notification).should('contain', 'Successfully');
   });
 });
diff --git a/web/src/pages/User/Login.tsx b/web/src/pages/User/Login.tsx
index 07c406a..dc29b1b 100644
--- a/web/src/pages/User/Login.tsx
+++ b/web/src/pages/User/Login.tsx
@@ -73,6 +73,12 @@ const Page: React.FC = () => {
     });
   };
 
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      onSubmit();
+    }
+  }
+
   if (localStorage.getItem('token')) {
     history.replace('/');
     return null;
@@ -99,7 +105,7 @@ const Page: React.FC = () => {
           </div>
         </div>
         <div className={styles.main}>
-          <Tabs activeKey={loginMethod.id} onChange={onTabChange}>
+          <Tabs activeKey={loginMethod.id} onChange={onTabChange} 
onKeyDown={onKeyDown}>
             {loginMethods.map((item) => (
               <Tab key={item.id} tab={item.name}>
                 {item.render()}