Added enter to submit on forms

no issue

- Adds enter to submit on Signin/Signup/AccountProfile pages when focused on an input field

ghost/portal/src/components/common/ActionButton.js

@@ -78,9 +78,9 @@ const Styles = ({brandColor, retry, disabled, style = {}, isPrimary}) => {
     };
 };
 
-function ActionButton({label, onClick, disabled, retry, brandColor, isRunning, isPrimary = true, isDestructive = false, style}) {
+function ActionButton({label, type, onClick, disabled, retry, brandColor, isRunning, isPrimary = true, isDestructive = false, style}) {
     let Style = Styles({disabled, retry, brandColor, style, isPrimary});
-    
+
     let className = 'gh-portal-btn';
     if (isPrimary) {
         className += ' gh-portal-btn-main gh-portal-btn-primary';
@@ -93,7 +93,7 @@ function ActionButton({label, onClick, disabled, retry, brandColor, isRunning, i
     }
     const loaderClassName = isPrimary ? 'gh-portal-loadingicon' : 'gh-portal-loadingicon dark';
     return (
-        <button className={className} style={Style.button} onClick={e => onClick(e)} disabled={disabled}>
+        <button className={className} style={Style.button} onClick={e => onClick(e)} disabled={disabled} type='submit'>
             {isRunning ? <LoaderIcon className={loaderClassName} /> : label}
         </button>
     );

ghost/portal/src/components/common/InputField.js

@@ -6,7 +6,7 @@ export const InputFieldStyles = `
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
-        
+
         display: block;
         box-sizing: border-box;
         font-size: 1.5rem;
@@ -78,7 +78,7 @@ function InputError({message, style}) {
     );
 }
 
-function InputField({name, id, label, hideLabel, type, value, placeholder, disabled, onChange, onBlur, errorMessage, brandColor}) {
+function InputField({name, id, label, hideLabel, type, value, placeholder, disabled, onChange, onBlur, onKeyDown, errorMessage}) {
     id = id || `input-${name}`;
     onBlur = onBlur || function (){};
     const labelClasses = hideLabel ? 'gh-portal-input-label hidden' : 'gh-portal-input-label';
@@ -100,6 +100,7 @@ function InputField({name, id, label, hideLabel, type, value, placeholder, disab
                 value={value}
                 placeholder={placeholder}
                 onChange={e => onChange(e, name)}
+                onKeyDown={e => onKeyDown(e, name)}
                 onBlur={e => onBlur(e, name)}
                 disabled={disabled}
                 aria-label={label}

ghost/portal/src/components/common/InputForm.js

@@ -1,18 +1,20 @@
 import React, {Component} from 'react';
 import InputField from './InputField';
 
-const FormInput = ({field, onChange, onBlur}) => {
+const FormInput = ({field, onChange, onBlur, onKeyDown = () => {}}) => {
     if (!field) {
         return null;
     }
     return (
         <>
             <InputField
+                key={field.name}
                 label = {field.label}
                 type={field.type}
                 name={field.name}
                 placeholder={field.placeholder}
                 value={field.value}
+                onKeyDown={onKeyDown}
                 onChange={e => onChange(e, field)}
                 onBlur={e => onBlur(e, field)}
                 errorMessage={field.errorMessage}
@@ -28,9 +30,9 @@ class InputForm extends Component {
     }
 
     render() {
-        const {fields, onChange, onBlur} = this.props;
+        const {fields, onChange, onBlur, onKeyDown} = this.props;
         const inputFields = fields.map((field) => {
-            return <FormInput field={field} key={field.name} onChange={onChange} onBlur={onBlur} />;
+            return <FormInput field={field} key={field.name} onChange={onChange} onBlur={onBlur} onKeyDown={onKeyDown} />;
         });
         return (
             <>

ghost/portal/src/components/pages/AccountProfilePage.js

@@ -174,12 +174,20 @@ export default class AccountProfilePage extends React.Component {
         return fields;
     }
 
+    onKeyDown(e) {
+        // Handles submit on Enter press
+        if (e.keyCode === 13){
+            this.onProfileSave(e);
+        }
+    }
+
     renderProfileData() {
         return (
             <div className='gh-portal-section'>
                 <InputForm
                     fields={this.getInputFields({state: this.state})}
                     onChange={(e, field) => this.handleInputChange(e, field)}
+                    onKeyDown={(e, field) => this.onKeyDown(e, field)}
                     onBlur={(e, field) => this.handleInputBlur(e, field)}
                 />
             </div>

ghost/portal/src/components/pages/SigninPage.js

@@ -55,6 +55,13 @@ export default class SigninPage extends React.Component {
         });
     }
 
+    onKeyDown(e) {
+        // Handles submit on Enter press
+        if (e.keyCode === 13){
+            this.handleSignin(e);
+        }
+    }
+
     getInputFields({state}) {
         const errors = state.errors || {};
         const fields = [
@@ -112,6 +119,7 @@ export default class SigninPage extends React.Component {
                         fields={this.getInputFields({state: this.state})}
                         onChange={(e, field) => this.handleInputChange(e, field)}
                         onBlur={(e, field) => this.handleInputBlur(e, field)}
+                        onKeyDown={(e, field) => this.onKeyDown(e, field)}
                     />
                 </div>
             </section>

ghost/portal/src/components/pages/SignupPage.js

@@ -211,6 +211,13 @@ class SignupPage extends React.Component {
         }, 5);
     }
 
+    onKeyDown(e) {
+        // Handles submit on Enter press
+        if (e.keyCode === 13){
+            this.handleSignup(e);
+        }
+    }
+
     getDefaultSelectedPlan(plans = [], selectedPlan) {
         if (!plans || plans.length === 0) {
             return 'Free';
@@ -377,6 +384,7 @@ class SignupPage extends React.Component {
                         fields={fields}
                         onChange={(e, field) => this.handleInputChange(e, field)}
                         onBlur={(e, field) => this.handleInputBlur(e, field)}
+                        onKeyDown={(e, field) => this.onKeyDown(e, field)}
                     />
                     {this.renderPlans()}
                 </div>