From bd365a0f096e88705b31740e2fb12f3d8ff6951e Mon Sep 17 00:00:00 2001
From: Anujeet Chatterjee <anujeet99@gmail.com>
Date: Sat, 3 Oct 2020 21:57:49 +0530
Subject: [PATCH] Added Enter Submit functionality (#2170)

* Added Enter Submit functionalit

Signed-off-by: GitHub <noreply@github.com>

* Added Enter Submit functionalit

Signed-off-by: Anujeet Chatterjee <anujeet99@gmail.com>

Author:    Anujeet Chatterjee <anujeet99@gmail.com>
Date:      Thu Oct 1 19:48:27 2020 +0000

* welcomemodel -> welcomModal

Signed-off-by: GitHub <noreply@github.com>

Co-authored-by: Arkajyoti Mukherjee <32966391+arkajyotiMukherjee@users.noreply.github.com>
---
 .../public/locales/en/translation.yaml        |  2 +-
 .../src/components/InputField/index.tsx       | 12 +++++
 .../src/components/WelcomeModal/Modalpage.tsx |  2 +-
 .../src/components/WelcomeModal/Stepper.tsx   | 48 +++++++++++++------
 4 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/litmus-portal/frontend/public/locales/en/translation.yaml b/litmus-portal/frontend/public/locales/en/translation.yaml
index cc04aa514..393d4289a 100644
--- a/litmus-portal/frontend/public/locales/en/translation.yaml
+++ b/litmus-portal/frontend/public/locales/en/translation.yaml
@@ -1,4 +1,4 @@
-welcomeModel:
+welcomeModal:
   title: Welcome to Litmus Portal,
   info: What do you want to name your project?
   button:
diff --git a/litmus-portal/frontend/src/components/InputField/index.tsx b/litmus-portal/frontend/src/components/InputField/index.tsx
index b660a55a4..6d1a89d8c 100644
--- a/litmus-portal/frontend/src/components/InputField/index.tsx
+++ b/litmus-portal/frontend/src/components/InputField/index.tsx
@@ -19,6 +19,7 @@ interface InputFieldProps {
   iconType?: string | undefined;
   styles?: Object;
   handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyPress?: (event: React.KeyboardEvent) => void;
 }
 
 const InputField: React.FC<InputFieldProps> = ({
@@ -33,6 +34,7 @@ const InputField: React.FC<InputFieldProps> = ({
   required,
   iconType,
   handleChange,
+  onKeyPress,
 }) => {
   const LitmusTextFieldStylesExternal = useStyles();
 
@@ -63,6 +65,7 @@ const InputField: React.FC<InputFieldProps> = ({
         onChange={handleChange}
         variant="filled"
         style={styles}
+        onKeyPress={onKeyPress}
         InputProps={
           {
             classes,
@@ -86,6 +89,7 @@ const InputField: React.FC<InputFieldProps> = ({
   if (type === 'password' && validationError === true) {
     return (
       <TextField
+        onKeyPress={onKeyPress}
         className={LitmusTextFieldStylesExternal.inputArea}
         error
         label={label}
@@ -121,6 +125,7 @@ const InputField: React.FC<InputFieldProps> = ({
     if (iconType === 'iconLeft' && validationError === false) {
       return (
         <TextField
+          onKeyPress={onKeyPress}
           className={LitmusTextFieldStylesExternal.inputArea}
           label={label}
           helperText={helperText}
@@ -147,6 +152,7 @@ const InputField: React.FC<InputFieldProps> = ({
     if (iconType === 'iconLeft' && validationError === true) {
       return (
         <TextField
+          onKeyPress={onKeyPress}
           className={LitmusTextFieldStylesExternal.inputArea}
           error
           label={label}
@@ -174,6 +180,7 @@ const InputField: React.FC<InputFieldProps> = ({
     if (iconType === 'iconRight' && validationError === false) {
       return (
         <TextField
+          onKeyPress={onKeyPress}
           className={LitmusTextFieldStylesExternal.inputArea}
           label={label}
           helperText={helperText}
@@ -204,6 +211,7 @@ const InputField: React.FC<InputFieldProps> = ({
     ) {
       return (
         <TextField
+          onKeyPress={onKeyPress}
           className={LitmusTextFieldStylesExternal.inputArea}
           label={label}
           helperText={helperText}
@@ -230,6 +238,7 @@ const InputField: React.FC<InputFieldProps> = ({
     if (iconType === 'iconRight' && validationError === true) {
       return (
         <TextField
+          onKeyPress={onKeyPress}
           className={LitmusTextFieldStylesExternal.inputArea}
           error
           label={label}
@@ -257,6 +266,7 @@ const InputField: React.FC<InputFieldProps> = ({
     if (iconType === 'iconLeftRight' && validationError === false) {
       return (
         <TextField
+          onKeyPress={onKeyPress}
           className={LitmusTextFieldStylesExternal.inputArea}
           label={label}
           helperText={helperText}
@@ -288,6 +298,7 @@ const InputField: React.FC<InputFieldProps> = ({
     if (iconType === 'iconLeftRight' && validationError === true) {
       return (
         <TextField
+          onKeyPress={onKeyPress}
           className={LitmusTextFieldStylesExternal.inputArea}
           error
           label={label}
@@ -321,6 +332,7 @@ const InputField: React.FC<InputFieldProps> = ({
 
   return (
     <TextField
+      onKeyPress={onKeyPress}
       className={LitmusTextFieldStylesExternal.inputArea}
       error={validationError}
       disabled={disabled}
diff --git a/litmus-portal/frontend/src/components/WelcomeModal/Modalpage.tsx b/litmus-portal/frontend/src/components/WelcomeModal/Modalpage.tsx
index d0ff593e9..ebf6e56cd 100644
--- a/litmus-portal/frontend/src/components/WelcomeModal/Modalpage.tsx
+++ b/litmus-portal/frontend/src/components/WelcomeModal/Modalpage.tsx
@@ -27,7 +27,7 @@ const ModalPage: React.FC<ModalDataProps> = ({
     <div className={classes.insideModal}>
       <Icon />
       <div className={classes.heading}>
-        {t('welcomeModel.title')}
+        {t('welcomeModal.title')}
         <br />
         <strong> {setName} </strong>
       </div>
diff --git a/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx b/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
index 29e13caec..3cd056099 100644
--- a/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
+++ b/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
@@ -195,7 +195,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
             isDisabled={isError.current}
             handleClick={handleNext}
           >
-            <div>{t('welcomeModel.button.continue')}</div>
+            <div>{t('welcomeModal.button.continue')}</div>
           </ButtonFilled>
         </div>
       );
@@ -205,7 +205,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
         <div className={classes.buttonDiv}>
           <div data-cy="backButton">
             <ButtonOutline isDisabled={false} handleClick={handleBack}>
-              <>{t('welcomeModel.button.back')}</>
+              <>{t('welcomeModal.button.back')}</>
             </ButtonOutline>
           </div>
           <div data-cy="startButton">
@@ -215,7 +215,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
               handleClick={handleSubmit}
               data-cy="Start"
             >
-              <div>{t('welcomeModel.button.letsStart')}</div>
+              <div>{t('welcomeModal.button.letsStart')}</div>
             </ButtonFilled>
           </div>
         </div>
@@ -229,7 +229,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
             handleClick={handleBack}
             data-cy="Back"
           >
-            <>{t('welcomeModel.button.back')}</>
+            <>{t('welcomeModal.button.back')}</>
           </ButtonOutline>
         </div>
         <div data-cy="startButton">
@@ -239,13 +239,28 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
             handleClick={handleNext}
             data-cy="Continue"
           >
-            <div>{t('welcomeModel.button.continue')}</div>
+            <div>{t('welcomeModal.button.continue')}</div>
           </ButtonFilled>
         </div>
       </div>
     );
   };
 
+  // Submit on Enter Key-press
+  const keyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      if (activeStep === 0) {
+        handleNext();
+        return;
+      }
+      if (activeStep === 3) {
+        handleSubmit();
+        return;
+      }
+      handleNext();
+    }
+  };
+
   // Content of the steps based on active step count
   const getStepContent = (step: number) => {
     switch (step) {
@@ -256,7 +271,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
               <div>
                 <div className={classes.inputArea} data-cy="InputProjectName">
                   <InputField
-                    label={t('welcomeModel.case-0.label')}
+                    label={t('welcomeModal.case-0.label')}
                     value={info.project_name}
                     required
                     helperText={
@@ -271,6 +286,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
                     handleChange={(event) => {
                       setData('project_name', event.target.value);
                     }}
+                    onKeyPress={keyPress}
                   />
                 </div>
                 {selectiveButtons()}
@@ -281,7 +297,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
                 ? 'Administrator'
                 : userData.username
             }
-            setText={t('welcomeModel.case-0.info')}
+            setText={t('welcomeModal.case-0.info')}
           />
         );
       case 1:
@@ -291,7 +307,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
               <div>
                 <div className={classes.inputArea} data-cy="InputName">
                   <InputField
-                    label={t('welcomeModel.case-1.label')}
+                    label={t('welcomeModal.case-1.label')}
                     value={info.name}
                     required
                     helperText={
@@ -303,13 +319,14 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
                     handleChange={(event) => {
                       setData('name', event.target.value);
                     }}
+                    onKeyPress={keyPress}
                   />
                 </div>
                 {selectiveButtons()}
               </div>
             }
             setName={info.name}
-            setText={t('welcomeModel.case-1.info')}
+            setText={t('welcomeModal.case-1.info')}
           />
         );
       case 2:
@@ -322,7 +339,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
               >
                 <div className={classes.passwordArea}>
                   <InputField
-                    label={t('welcomeModel.case-2.label')}
+                    label={t('welcomeModal.case-2.label')}
                     type="password"
                     required
                     validationError={false}
@@ -334,11 +351,12 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
                         confirmPassword: values.confirmPassword,
                       })
                     }
+                    onKeyPress={keyPress}
                   />
                 </div>
                 <div className={classes.passwordArea}>
                   <InputField
-                    label={t('welcomeModel.case-2.cnfLabel')}
+                    label={t('welcomeModal.case-2.cnfLabel')}
                     type="password"
                     required
                     value={values.confirmPassword}
@@ -364,13 +382,14 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
                         confirmPassword: event.target.value,
                       })
                     }
+                    onKeyPress={keyPress}
                   />
                 </div>
                 {selectiveButtons()}
               </div>
             }
             setName={info.name}
-            setText={t('welcomeModel.case-2.info')}
+            setText={t('welcomeModal.case-2.info')}
           />
         );
       case 3:
@@ -380,7 +399,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
               <div className={classes.passwordSetterDiv}>
                 <div className={classes.inputArea} data-cy="InputEmail">
                   <InputField
-                    label={t('welcomeModel.case-3.label')}
+                    label={t('welcomeModal.case-3.label')}
                     required
                     value={info.email}
                     helperText={
@@ -390,6 +409,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
                     handleChange={(event) => {
                       setData('email', event.target.value);
                     }}
+                    onKeyPress={keyPress}
                   />
                 </div>
                 {selectiveButtons()}
@@ -397,7 +417,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
             }
             // pass here corresponding name of user
             setName={info.name}
-            setText={t('welcomeModel.case-3.info')}
+            setText={t('welcomeModal.case-3.info')}
           />
         );