Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Added enter to submit on forms

Browse source 
no issue

- Adds enter to submit on Signin/Signup/AccountProfile pages when focused on an input field
This commit is contained in:
Rish 2020-10-01 17:54:17 +05:30
parent 15d4a83b1e
commit 884c56f793
6 changed files with 35 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ghost/portal/src/components/common/ActionButton.js
View file

@ -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>
);

5
ghost/portal/src/components/common/InputField.js
View file

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

8
ghost/portal/src/components/common/InputForm.js
View file

@ -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 (
<>

8
ghost/portal/src/components/pages/AccountProfilePage.js
View file

@ -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>

8
ghost/portal/src/components/pages/SigninPage.js
View file

@ -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>

8
ghost/portal/src/components/pages/SignupPage.js
View file

@ -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>