Isomorphic React app - 当JS关闭时如何处理表单提交

Question

I have an isomorphic app that renders a sign in form using redux-form and allows a user to enter a user name and password.

This all works fine client-side but if I turn off JS I can't seem to get the values from the form to process via an API.

NB: When form is GET, the values show in the url as query params but obviously don't want to show sensitive data.

class SignIn extends Component {

    static propTypes = {
        errorMessage: PropTypes.string,
        handleSubmit: PropTypes.func,
        signinUser: PropTypes.func
    }

    statics = {
        fields: [
            {
                name: 'email',
                label: 'Email'
            },
            {
                name: 'password',
                label: 'Password',
                type: 'password'
            }
        ]
    }

    handleFormSubmit({ email, password }) {
        this.props.signinUser({ email, password });
    }

    // renders an alert if field has an error
    renderAlert() {
        if (this.props.errorMessage) {
            return (
                <div className='alert alert-danger'>
                    <strong>Oops!</strong> {this.props.errorMessage}
                </div>
            );
        }

        return false;
    }

    // render the field
    renderField = ({ input, label, name, type, meta: { touched, error }, ...rest }) => (
        <div>
            <label htmlFor={name}>{label}</label>
            <div>
                <input {...input} {...rest} id={name} placeholder={label} type={type} />
                {touched && error && <span className='error'>{error}</span>}
            </div>
        </div>
    );

    render() {
        const { handleSubmit } = this.props;

        return (
            <form method='post' onSubmit={handleSubmit((data) => this.handleFormSubmit(data))}>
                {
                    this.statics.fields.map((field, index) =>
                        <fieldset className='form-group' key={index}>
                            <Field
                                className='form-control'
                                component={this.renderField}
                                label={field.label}
                                name={field.name}
                                type={field.type || 'text'}
                            />
                        </fieldset>
                    )
                }
                {this.renderAlert()}
                <button action='submit' className='btn btn-primary'>Sign in</button>
            </form>
        );
    }
}

and the routes:

<Route path='/' component={App}>
    <IndexRoute component={Welcome} />
    <Route path='/feature' onEnter={requireAuth} component={Feature} />
    <Route path='/signin' component={Signin} />
    <Route path='/signout' component={Signout} />
    <Route path='/signup' component={Signup} />
</Route>

Answer 1

This is what https is for :)

the page containing the form should be on https and it should be POSTing to a https end-point.

If you have well-written universal code and the page renders the form on the server (and all the JS is doing is enhancing the page) then the POSTing the form over https should be fine.