feat: Press Enter key can trigger the Login button

web/cypress/fixtures/data.json

@@ -27,5 +27,7 @@
   "updateSuccessfully": "Update Configuration Successfully",
   "deleteSSLSuccess": "Remove target SSL successfully",
   "sslErrorAlert": "key and cert don't match",
-  "pluginErrorAlert": "Invalid plugin data"
+  "pluginErrorAlert": "Invalid plugin data",
+  "successfully": "Successfully",
+  "user": "user"
 }

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"
 }

web/cypress/integration/user/login.spec.js

@@ -20,28 +20,37 @@ context('Login Test', () => {
   beforeEach(() => {
     // set default language
     localStorage.setItem('umi_locale', 'en-US');
+    cy.fixture('selector.json').as('domSelector');
+    cy.fixture('data.json').as('data');
   });
 
-  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(this.data.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(this.data.user);
+    cy.get(this.domSelector.passwordInput).type(this.data.user);
     cy.contains('Login').click();
-    cy.get('.ant-notification-notice-message').should('contain', 'Successfully');
+    cy.get(this.domSelector.notification).should('contain', this.data.successfully);
+  });
+
+  it('should press Enter to login successfully', function () {
+    cy.visit('/user/Login');
+    cy.get(this.domSelector.usernameInput).type(this.data.user);
+    cy.get(this.domSelector.passwordInput).type('user{enter}');
+    cy.get(this.domSelector.notification).should('contain', this.data.successfully);
   });
 });

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()}