add support for unsafe inline scripts

1 files changed, 34 insertions, 1 deletions

diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
index 5b25f13..3f43dd0 100644
--- a/frontend/app/views/page/components/tile.form.js
+++ b/frontend/app/views/page/components/tile.form.js
@@ -15,7 +15,7 @@ import { preloadImage } from 'app/utils'
 import * as tileActions from '../../tile/tile.actions'
 
 const SELECT_TYPES = [
-  "image", "text", "link"
+  "image", "text", "link", "script",
 ].map(s => ({ name: s, label: s }))
 
 const ALIGNMENTS = [
@@ -33,6 +33,7 @@ const REQUIRED_KEYS = {
   image: ['url'],
   text: ['content'],
   link: [],
+  script: [],
 }
 
 const IMAGE_TILE_STYLES = [
@@ -109,6 +110,14 @@ const newLink = (data) => ({
   ...data,
 })
 
+const newScript = (data) => ({
+  settings: {
+    ...newPosition({ width: 100, height: 100, }),
+  },
+  type: 'script',
+  ...data,
+})
+
 const newPosition = (data) => ({
   x: 0, y: 0,
   width: 0, height: 0,
@@ -122,6 +131,7 @@ const TYPE_CONSTRUCTORS = {
   image: newImage,
   text: newText,
   link: newLink,
+  script: newScript,
 }
 
 class TileForm extends Component {
@@ -356,6 +366,8 @@ class TileForm extends Component {
             ? this.renderTextForm()
           : temporaryTile.type === 'link'
             ? this.renderLinkForm()
+          : temporaryTile.type === 'script'
+            ? this.renderScriptForm()
           : ""}
 
           {this.renderHyperlinkForm()}
@@ -555,6 +567,27 @@ class TileForm extends Component {
     )
   }
 
+  renderScriptForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <TextArea
+          title=""
+          name="content"
+          required
+          data={temporaryTile.settings}
+          error={errorFields.has('content')}
+          onChange={this.handleSettingsChange.bind(this)}
+          autoComplete="off"
+        />
+        <div>
+          Scripts will be run on the live site when this page loads.
+        </div>
+      </div>
+    )
+  }
+
   renderHyperlinkForm() {
     const { temporaryTile } = this.props
     const { pageList } = this.state