From c4cf4d7ec7b23039c5488ea86f692c0f878f7bcf Mon Sep 17 00:00:00 2001
From: K-itKat20 <LaurelKatie@tutanota.com>
Date: Tue, 20 Oct 2020 16:30:39 +0100
Subject: [PATCH] Version updates and submit form using Enter key

---
 ui/.env                                       |  6 +-
 ui/package.json                               | 62 ++++++++---------
 ui/src/components/login/login-form.tsx        | 59 +++++++++++-----
 .../login/temp-password-login-form.tsx        | 69 ++++++++++++-------
 .../login/temp-password-login-form.test.tsx   | 17 +++++
 5 files changed, 137 insertions(+), 76 deletions(-)

diff --git a/ui/.env b/ui/.env
index a8f402f..985d247 100644
--- a/ui/.env
+++ b/ui/.env
@@ -1,4 +1,4 @@
-REACT_APP_KAI_REST_API_HOST=https://my-example-api-gateway.amazonaws.com
-REACT_APP_COGNITO_USERPOOLID=eu-west-2_example123
-REACT_APP_COGNITO_CLIENTID=abc123
+REACT_APP_KAI_REST_API_HOST=https://i5bzoqfie3.execute-api.eu-west-2.amazonaws.com/prod/
+REACT_APP_COGNITO_USERPOOLID=eu-west-2_wNBiiwy3n
+REACT_APP_COGNITO_CLIENTID=6ljh0p8o2kf69a64fq4vvoeiav
 SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/ui/package.json b/ui/package.json
index f5d6f85..d0c9d53 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -19,65 +19,65 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/styles": "^4.10.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/node": "^12.12.62",
-    "@types/react": "^16.9.49",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/user-event": "^12.1.8",
+    "@types/node": "^14.14.0",
+    "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
-    "amazon-cognito-identity-js": "^4.4.0",
-    "axios": "^0.19.2",
+    "amazon-cognito-identity-js": "^4.5.0",
+    "axios": "^0.20.0",
     "body-parser": "^1.19.0",
     "express": "^4.17.1",
-    "json": "^9.0.6",
-    "material-table": "^1.69.0",
+    "json": "^10.0.0",
+    "material-table": "^1.69.1",
     "material-ui-dropzone": "^3.5.0",
-    "npm-check-updates": "^7.1.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "npm-check-updates": "^9.1.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-json-view": "^1.19.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
     "react-testing-library": "latest",
-    "react-toastify": "^6.0.0-rc.3"
+    "react-toastify": "^6.0.9"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@testing-library/react": "^9.5.0",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.1",
+    "@testing-library/react": "^11.1.0",
     "@types/body-parser": "^1.19.0",
-    "@types/enzyme": "^3.10.6",
+    "@types/enzyme": "^3.10.7",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/express": "^4.17.8",
-    "@types/jest": "26.0.5",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/jest": "26.0.15",
+    "@types/react-router-dom": "^5.1.6",
     "@types/webpack": "^4.41.22",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
     "axios-mock-adapter": "^1.18.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.4",
-    "enzyme-to-json": "^3.5.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^7.11.0",
+    "eslint-config-prettier": "^6.13.0",
     "eslint-config-react-app": "^5.2.1",
-    "eslint-plugin-flowtype": "^4.7.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.1.2",
     "fetch-mock": "^9.10.7",
-    "jest": "^24.9.0",
+    "jest": "^26.6.0",
     "node-sass": "^4.14.1",
     "prettier": "^2.1.2",
-    "ts-jest": "26.1.3",
-    "ts-node": "^8.10.2",
+    "ts-jest": "26.4.1",
+    "ts-node": "^9.0.0",
     "tslint": "^6.1.3",
-    "typescript": "^3.9.5"
+    "typescript": "^4.0.3"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/ui/src/components/login/login-form.tsx b/ui/src/components/login/login-form.tsx
index 0b13c53..d344106 100644
--- a/ui/src/components/login/login-form.tsx
+++ b/ui/src/components/login/login-form.tsx
@@ -34,9 +34,27 @@ export default class LoginForm extends React.Component<IProps, IState> {
         return !username || !password;
     }
 
+    private logIn() {
+        const userLogin = new LoginRepo();
+        const { username, password } = this.state;
+        const onSuccess = () => {
+            this.setState({
+                outcome: AlertType.SUCCESS,
+                outcomeMessage: `Login successful: Hi ${username}`,
+            });
+        };
+        const onError = (errorMessage: string) => {
+            this.setState({
+                outcome: AlertType.FAILED,
+                outcomeMessage: `Login failed: ${errorMessage}`,
+            });
+        };
+        userLogin.login(username, password, onSuccess, onError);
+    }
+
     public render() {
         return (
-            <main id='login-form'>
+            <main id="login-form">
                 <Container component="main" maxWidth="xs">
                     {this.state.outcome && (
                         <NotificationAlert alertType={this.state.outcome} message={this.state.outcomeMessage} />
@@ -76,6 +94,13 @@ export default class LoginForm extends React.Component<IProps, IState> {
                                             username: event.target.value,
                                         });
                                     }}
+                                    onKeyPress={(ev) => {
+                                        if (ev.key === 'Enter') {
+                                            this.logIn();
+
+                                            ev.preventDefault();
+                                        }
+                                    }}
                                 />
                                 <TextField
                                     variant="outlined"
@@ -93,6 +118,13 @@ export default class LoginForm extends React.Component<IProps, IState> {
                                             password: event.target.value,
                                         });
                                     }}
+                                    onKeyPress={(ev) => {
+                                        if (ev.key === 'Enter') {
+                                            this.logIn();
+
+                                            ev.preventDefault();
+                                        }
+                                    }}
                                 />
                                 <Button
                                     fullWidth
@@ -102,21 +134,7 @@ export default class LoginForm extends React.Component<IProps, IState> {
                                     style={{ marginTop: '20px' }}
                                     disabled={this.disableSignInButton()}
                                     onClick={() => {
-                                        const userLogin = new LoginRepo();
-                                        const { username, password } = this.state;
-                                        const onSuccess = () => {
-                                            this.setState({
-                                                outcome: AlertType.SUCCESS,
-                                                outcomeMessage: `Login successful: Hi ${username}`,
-                                            });
-                                        };
-                                        const onError = (errorMessage: string) => {
-                                            this.setState({
-                                                outcome: AlertType.FAILED,
-                                                outcomeMessage: `Login failed: ${errorMessage}`,
-                                            });
-                                        };
-                                        userLogin.login(username, password, onSuccess, onError);
+                                        this.logIn();
                                     }}
                                 >
                                     Sign In
@@ -125,8 +143,13 @@ export default class LoginForm extends React.Component<IProps, IState> {
                             <Typography style={{ marginTop: 20 }}>
                                 First time user ? <br />
                                 Please click{' '}
-                                <Link id='temp-password-form-link' onClick={() => this.props.onChangeForm(FormType.TEMP_PASSWORD_LOGIN)}>Here</Link> to
-                                update new Password
+                                <Link
+                                    id="temp-password-form-link"
+                                    onClick={() => this.props.onChangeForm(FormType.TEMP_PASSWORD_LOGIN)}
+                                >
+                                    Here
+                                </Link>{' '}
+                                to update new Password
                             </Typography>
                         </Grid>
                     </div>
diff --git a/ui/src/components/login/temp-password-login-form.tsx b/ui/src/components/login/temp-password-login-form.tsx
index 861cac5..4d281d2 100644
--- a/ui/src/components/login/temp-password-login-form.tsx
+++ b/ui/src/components/login/temp-password-login-form.tsx
@@ -36,10 +36,27 @@ export default class TempPasswordLoginForm extends React.Component<IProps, IStat
         const newPassword = this.state.newPassword;
         return !username || !tempPassword || !newPassword;
     }
+    private resetPassword() {
+        const resetPassword = new ResetTempPasswordRepo();
+        const { username, tempPassword, newPassword } = this.state;
+        const onSuccess = () => {
+            this.setState({
+                outcome: AlertType.SUCCESS,
+                outcomeMessage: `Login successful: Hi ${username}`,
+            });
+        };
+        const onError = (errorMessage: string) => {
+            this.setState({
+                outcome: AlertType.FAILED,
+                outcomeMessage: `Login failed: ${errorMessage}`,
+            });
+        };
+        resetPassword.setNewPassword(username, tempPassword, newPassword, onSuccess, onError);
+    }
 
     public render() {
         return (
-            <main id='temp-password-login-form'>
+            <main id="temp-password-login-form">
                 <Container component="main" maxWidth="xs">
                     {this.state.outcome && (
                         <NotificationAlert alertType={this.state.outcome} message={this.state.outcomeMessage} />
@@ -79,6 +96,12 @@ export default class TempPasswordLoginForm extends React.Component<IProps, IStat
                                             username: event.target.value,
                                         });
                                     }}
+                                    onKeyPress={(ev) => {
+                                        if (ev.key === 'Enter') {
+                                            this.resetPassword();
+                                            ev.preventDefault();
+                                        }
+                                    }}
                                 />
                                 <TextField
                                     variant="outlined"
@@ -96,6 +119,12 @@ export default class TempPasswordLoginForm extends React.Component<IProps, IStat
                                             tempPassword: event.target.value,
                                         });
                                     }}
+                                    onKeyPress={(ev) => {
+                                        if (ev.key === 'Enter') {
+                                            this.resetPassword();
+                                            ev.preventDefault();
+                                        }
+                                    }}
                                 />
                                 <TextField
                                     variant="outlined"
@@ -113,6 +142,13 @@ export default class TempPasswordLoginForm extends React.Component<IProps, IStat
                                             newPassword: event.target.value,
                                         });
                                     }}
+                                    onKeyPress={(ev) => {
+                                        if (ev.key === 'Enter') {
+                                            this.resetPassword();
+
+                                            ev.preventDefault();
+                                        }
+                                    }}
                                 />
                                 <Button
                                     fullWidth
@@ -122,27 +158,7 @@ export default class TempPasswordLoginForm extends React.Component<IProps, IStat
                                     style={{ marginTop: '20px' }}
                                     disabled={this.disableUpdateButton()}
                                     onClick={() => {
-                                        const resetPassword = new ResetTempPasswordRepo();
-                                        const { username, tempPassword, newPassword } = this.state;
-                                        const onSuccess = () => {
-                                            this.setState({
-                                                outcome: AlertType.SUCCESS,
-                                                outcomeMessage: `Login successful: Hi ${username}`,
-                                            });
-                                        };
-                                        const onError = (errorMessage: string) => {
-                                            this.setState({
-                                                outcome: AlertType.FAILED,
-                                                outcomeMessage: `Login failed: ${errorMessage}`,
-                                            });
-                                        };
-                                        resetPassword.setNewPassword(
-                                            username,
-                                            tempPassword,
-                                            newPassword,
-                                            onSuccess,
-                                            onError
-                                        );
+                                        this.resetPassword();
                                     }}
                                 >
                                     Set Password And Sign In
@@ -151,8 +167,13 @@ export default class TempPasswordLoginForm extends React.Component<IProps, IStat
                             <Typography style={{ marginTop: 20 }}>
                                 Existing User? <br />
                                 Please click{' '}
-                                <Link id='login-form-link' onClick={() => this.props.onChangeForm(FormType.EXISTING_USER_LOGIN)}>Here</Link> to
-                                Sign in
+                                <Link
+                                    id="login-form-link"
+                                    onClick={() => this.props.onChangeForm(FormType.EXISTING_USER_LOGIN)}
+                                >
+                                    Here
+                                </Link>{' '}
+                                to Sign in
                             </Typography>
                         </Grid>
                     </div>
diff --git a/ui/test/components/login/temp-password-login-form.test.tsx b/ui/test/components/login/temp-password-login-form.test.tsx
index 7eb3b9a..0403c74 100644
--- a/ui/test/components/login/temp-password-login-form.test.tsx
+++ b/ui/test/components/login/temp-password-login-form.test.tsx
@@ -1,7 +1,10 @@
 import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
 import TempPasswordLoginForm from '../../../src/components/login/temp-password-login-form';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import ReactTestUtils from 'react-dom/test-utils';
 
+var ReactTestUtils = require('react-dom/test-utils');
 let component: ReactWrapper;
 
 beforeEach(() => (component = mount(<TempPasswordLoginForm onChangeForm={() => {}} />)));
@@ -23,6 +26,20 @@ describe('On Render', () => {
     it('should render Update Password button', () => {
         expect(component.find('button#update-button')).toHaveLength(1);
     });
+    it('should submit the form when all three fields have text and the Enter key is pressed', () => {
+        //given I have entered details in the 3 textfields
+        //when I press the enter key
+        //then it should submit the form
+        inputUsername('testUsername');
+        inputTempPassword('testTempPassword');
+        inputNewPassword('testNewPassword');
+
+        const textField = component.find('input#username');
+        ReactTestUtils.Simulate.keyDown(textField, {key: "Enter", keyCode: 13, which: 13});
+        // component.find('input#username').simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 });
+        // expect(component.find('input#username').props().onKeyPress).toBeTruthy();
+        expect(component.find('div#notification-alert').text()).toBe('Login failed: User does not exist.');
+    });
 });
 
 describe('Disable Form', () => {