Simplified FormDescription and moved it into the header. Cleaned up Settings. Remembered some REACT -- it's been a while
This commit is contained in:
Cole
parent
ed32dd6508
commit
a37be4472d
|
|
@ -12,30 +12,6 @@ function FormDescription({prefix, form}) {
|
|||
<span className="code">/{form.hashid}</span>
|
||||
) : (
|
||||
<span className="code">/{form.email}</span>
|
||||
)}{' '}
|
||||
{form.host ? (
|
||||
<>
|
||||
at <span className="code">{form.host}</span>
|
||||
{form.sitewide ? ' and all its subpaths.' : null}
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{form.hash ? (
|
||||
<>
|
||||
<br />
|
||||
<small>
|
||||
you can now replace the email in the URL with{' '}
|
||||
<span className="code">{`/${form.hashid}`}</span>
|
||||
</small>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<br />
|
||||
<small>
|
||||
targeting <span className="code">{form.email}</span>
|
||||
</small>
|
||||
</>
|
||||
)}
|
||||
</h2>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const toastr = window.toastr
|
|||
const fetch = window.fetch
|
||||
const React = require('react')
|
||||
|
||||
const FormDescription = require('./FormDescription')
|
||||
const SettingsSwitch = require('./SettingsSwitch')
|
||||
|
||||
module.exports = class FormSettings extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -26,154 +26,104 @@ module.exports = class FormSettings extends React.Component {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="col-1-1" id="settings">
|
||||
<FormDescription prefix="Settings for" form={form} />
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-5-6">
|
||||
<h4>Form Enabled</h4>
|
||||
<p className="description">
|
||||
You can disable this form to cause it to stop receiving new
|
||||
submissions temporarily or permanently.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-1-6 switch-row">
|
||||
<label className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={this.update}
|
||||
checked={'disabled' in tmp ? !tmp.disabled : !form.disabled}
|
||||
name="disabled"
|
||||
/>
|
||||
<span className="slider" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-5-6">
|
||||
<div>
|
||||
<h4>reCAPTCHA</h4>
|
||||
</div>
|
||||
<p className="description">
|
||||
reCAPTCHA provides vital spam protection, but you can turn it
|
||||
off if you need.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-1-6 switch-row">
|
||||
<div>
|
||||
<label className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={this.update}
|
||||
checked={
|
||||
'captcha_disabled' in tmp
|
||||
? !tmp.captcha_disabled
|
||||
: !form.captcha_disabled
|
||||
}
|
||||
name="captcha_disabled"
|
||||
/>
|
||||
<span className="slider" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-5-6">
|
||||
<h4>Email Notifications</h4>
|
||||
<p className="description">
|
||||
You can disable the emails Formspree sends if you just want to
|
||||
download the submissions from the dashboard.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-1-6 switch-row">
|
||||
<label className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={this.update}
|
||||
checked={
|
||||
'disable_email' in tmp
|
||||
? !tmp.disable_email
|
||||
: !form.disable_email
|
||||
}
|
||||
name="disable_email"
|
||||
/>
|
||||
<span className="slider" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-5-6">
|
||||
<h4>Submission Archive</h4>
|
||||
<p className="description">
|
||||
You can disable the submission archive if you don't want
|
||||
Formspree to store your submissions.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-1-6 switch-row">
|
||||
<label className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={this.update}
|
||||
checked={
|
||||
'disable_storage' in tmp
|
||||
? !tmp.disable_storage
|
||||
: !form.disable_storage
|
||||
}
|
||||
name="disable_storage"
|
||||
/>
|
||||
<span className="slider" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className={this.state.deleting ? 'col-1-2' : 'col-5-6'}>
|
||||
<h4>
|
||||
{this.state.deleting
|
||||
? 'Are you sure you want to delete?'
|
||||
: 'Delete Form'}
|
||||
</h4>
|
||||
<p className="description">
|
||||
{this.state.deleting ? (
|
||||
<span>
|
||||
This will delete the form on <b>{form.host}</b> targeting{' '}
|
||||
<b>{form.email}</b> and all its submissions? This action{' '}
|
||||
<b>cannot</b> be undone.
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
Deleting the form will erase all traces of this form on
|
||||
our databases, including all the submissions.
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
(this.state.deleting ? 'col-1-2' : 'col-1-6') + ' switch-row'
|
||||
}
|
||||
>
|
||||
<div className="container" id="settings">
|
||||
<SettingsSwitch
|
||||
title="Form Enabled"
|
||||
fieldName="disabled"
|
||||
description="You can disable this form to cause it to stop receiving new
|
||||
submissions temporarily or permanently."
|
||||
onChangeFn={() => this.update}
|
||||
checkedFn={() =>
|
||||
'disabled' in tmp
|
||||
? !tmp.disabled
|
||||
: !form.disabled
|
||||
}
|
||||
></SettingsSwitch>
|
||||
<SettingsSwitch
|
||||
title="reCAPTCHA"
|
||||
fieldName="captcha_disabled"
|
||||
description="reCAPTCHA provides vital spam protection, but you can turn it
|
||||
off if you need."
|
||||
onChangeFn={() => this.update}
|
||||
checkedFn={() =>
|
||||
'captcha_disabled' in tmp
|
||||
? !tmp.captcha_disabled
|
||||
: !form.captcha_disabled
|
||||
}
|
||||
></SettingsSwitch>
|
||||
<SettingsSwitch
|
||||
title="Email Notifications"
|
||||
fieldName="disable_email"
|
||||
description="You can disable the emails Formspree sends if you just want to
|
||||
download the submissions from the dashboard."
|
||||
onChangeFn={() => this.update}
|
||||
checkedFn={() =>
|
||||
'disable_email' in tmp
|
||||
? !tmp.disable_email
|
||||
: !form.disable_email
|
||||
}
|
||||
></SettingsSwitch>
|
||||
<SettingsSwitch
|
||||
title="Submission Archive"
|
||||
fieldName="disable_storage"
|
||||
description="You can disable the submission archive if you don't want
|
||||
Formspree to store your submissions."
|
||||
onChangeFn={() => this.update}
|
||||
checkedFn={() =>
|
||||
'disable_storage' in tmp
|
||||
? !tmp.disable_storage
|
||||
: !form.disable_storage
|
||||
}
|
||||
></SettingsSwitch>
|
||||
|
||||
<div className="row">
|
||||
<div className={this.state.deleting ? 'col-1-2' : 'col-5-6'}>
|
||||
<h4>
|
||||
{this.state.deleting
|
||||
? 'Are you sure you want to delete?'
|
||||
: 'Delete Form'}
|
||||
</h4>
|
||||
<p className="description">
|
||||
{this.state.deleting ? (
|
||||
<>
|
||||
<button
|
||||
onClick={this.deleteForm}
|
||||
className="no-uppercase destructive"
|
||||
>
|
||||
Sure, erase everything
|
||||
</button>
|
||||
<button
|
||||
onClick={this.cancelDelete}
|
||||
className="no-uppercase"
|
||||
style={{marginRight: '5px'}}
|
||||
>
|
||||
No, don't delete!
|
||||
</button>
|
||||
</>
|
||||
<span>
|
||||
This will delete the form on <b>{form.host}</b> targeting{' '}
|
||||
<b>{form.email}</b> and all its submissions? This action{' '}
|
||||
<b>cannot</b> be undone.
|
||||
</span>
|
||||
) : (
|
||||
<a onClick={this.deleteForm} href="#">
|
||||
<i className="fa fa-trash-o delete" />
|
||||
</a>
|
||||
<span>
|
||||
Deleting the form will erase all traces of this form on
|
||||
our databases, including all the submissions.
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
(this.state.deleting ? 'col-1-2' : 'col-1-6') + ' switch-row'
|
||||
}
|
||||
>
|
||||
{this.state.deleting ? (
|
||||
<>
|
||||
<button
|
||||
onClick={this.deleteForm}
|
||||
className="no-uppercase destructive"
|
||||
>
|
||||
Sure, erase everything
|
||||
</button>
|
||||
<button
|
||||
onClick={this.cancelDelete}
|
||||
className="no-uppercase"
|
||||
style={{marginRight: '5px'}}
|
||||
>
|
||||
No, don't delete!
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<a onClick={this.deleteForm} href="#">
|
||||
<i className="fa fa-trash-o delete" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
/** @format */
|
||||
|
||||
const React = require('react') // eslint-disable-line no-unused-vars
|
||||
|
||||
module.exports = SettingsSwitch
|
||||
|
||||
function SettingsSwitch({title, fieldName, description, checkedFn, onChangeFn}) {
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-1-1">
|
||||
<h4>{title}</h4>
|
||||
</div>
|
||||
<div className="switch-row">
|
||||
<label className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={onChangeFn()}
|
||||
checked={checkedFn()}
|
||||
name={fieldName}
|
||||
/>
|
||||
<span className="slider" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-1-1">
|
||||
<p className="description">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -4,8 +4,6 @@ const toastr = window.toastr
|
|||
const fetch = window.fetch
|
||||
const React = require('react')
|
||||
|
||||
const FormDescription = require('./FormDescription')
|
||||
|
||||
module.exports = class FormSubmissions extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
|
@ -23,7 +21,6 @@ module.exports = class FormSubmissions extends React.Component {
|
|||
|
||||
return (
|
||||
<div className="col-1-1 submissions-col">
|
||||
<FormDescription prefix="Submissions for" form={form} />
|
||||
{form.submissions.length ? (
|
||||
<>
|
||||
<table className="submissions responsive">
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@ const Modal = require('react-modal')
|
|||
require('codemirror/mode/xml/xml')
|
||||
require('codemirror/mode/css/css')
|
||||
|
||||
const FormDescription = require('./FormDescription')
|
||||
|
||||
const MODAL_REVERT = 'revert'
|
||||
const MODAL_PREVIEW = 'preview'
|
||||
const MODAL_SYNTAX = 'syntax'
|
||||
|
|
@ -108,7 +106,6 @@ module.exports = class FormSettings extends React.Component {
|
|||
return (
|
||||
<>
|
||||
<div className="col-1-1" id="whitelabel">
|
||||
<FormDescription prefix="Whitelabel settings for" form={form} />
|
||||
<div className="container">
|
||||
<div className="col-1-6">
|
||||
<label htmlFor="from_name">From</label>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ const Integration = require('./Integration')
|
|||
const Submissions = require('./Submissions')
|
||||
const Settings = require('./Settings')
|
||||
const Whitelabel = require('./Whitelabel')
|
||||
const FormDescription = require('./FormDescription')
|
||||
|
||||
module.exports = class FormPage extends React.Component {
|
||||
constructor(props) {
|
||||
|
|
@ -36,6 +37,9 @@ module.exports = class FormPage extends React.Component {
|
|||
</Portal>
|
||||
<Portal to="#header .center">
|
||||
<h1>Form Details</h1>
|
||||
{this.state.form &&
|
||||
<FormDescription prefix="For " form={this.state.form} />
|
||||
}
|
||||
</Portal>
|
||||
<Route
|
||||
exact
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@
|
|||
|
||||
.form-description {
|
||||
font-size: 20px;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
||||
.code-tabs {
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ body#card {
|
|||
border-bottom: 1px solid #ddd;
|
||||
&#header {
|
||||
border-color: $green;
|
||||
padding: 4em 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,9 @@
|
|||
}
|
||||
|
||||
.switch-row {
|
||||
margin: auto;
|
||||
// margin: auto;
|
||||
// carefully placed to work within formspree grid
|
||||
margin: 14px 0 0 -20px;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
.switch {
|
||||
|
|
|
|||
Loading…
Reference in New Issue