iframe preview email template.

formspree/forms/api.py

@@ -222,21 +222,6 @@ def custom_template_set(hashid):
     return jsonify({'ok': True})
 
 
-@login_required
-def custom_template_preview_render():
-    if not current_user.has_feature('whitelabel'):
-        return jsonerror(402, {'error': "Please upgrade your account."})
-
-    body, _ = EmailTemplate.make_sample(
-        from_name=request.get_json()['from_name'],
-        subject=request.get_json()['subject'],
-        style=request.get_json()['style'],
-        body=request.get_json()['body'],
-    )
-
-    return body
-
-
 @login_required
 def sitewide_check():
     email = request.get_json().get('email')

formspree/forms/views.py

@@ -4,6 +4,7 @@ import requests
 import datetime
 import io
 from urllib.parse import urljoin
+from lxml.html import rewrite_links
 
 from flask import request, url_for, render_template, redirect, \
                   jsonify, flash, make_response, Response, g, \
@@ -20,7 +21,7 @@ from .helpers import http_form_to_dict, ordered_storage, referrer_to_path, \
                     remove_www, referrer_to_baseurl, sitewide_file_check, \
                     verify_captcha, temp_store_hostname, get_temp_hostname, \
                     HASH, assign_ajax, KEYS_EXCLUDED_FROM_EMAIL
-from .models import Form, Submission
+from .models import Form, Submission, EmailTemplate
 
 
 def thanks():
@@ -490,6 +491,18 @@ def serve_dashboard(hashid=None, s=None):
     return render_template('forms/dashboard.html')
 
 
+@login_required
+def custom_template_preview_render():
+    body, _ = EmailTemplate.make_sample(
+        from_name=request.args.get('from_name'),
+        subject=request.args.get('subject'),
+        style=request.args.get('style'),
+        body=request.args.get('body'),
+    )
+
+    return rewrite_links(body, lambda x: "#" + x)
+
+
 @login_required
 def export_submissions(hashid, format=None):
     if not current_user.has_feature('dashboard'):

formspree/js/forms/FormPage/Whitelabel.js

@@ -3,6 +3,7 @@
 const toastr = window.toastr
 const fetch = window.fetch
 const cs = require('class-set')
+const qs = require('query-string')
 const React = require('react')
 const CodeMirror = require('react-codemirror2')
 const Modal = require('react-modal')
@@ -60,7 +61,6 @@ module.exports = class FormSettings extends React.Component {
     this.state = {
       changes: {},
       modal: null,
-      previewHTML: null,
       activeTab: 'HTML'
     }
   }
@@ -214,9 +214,17 @@ module.exports = class FormSettings extends React.Component {
           overlayClassName="dummy"
         >
           <div id="whitelabel-preview-modal">
-            <div
-              className="container preview"
-              dangerouslySetInnerHTML={{__html: this.state.previewHTML}}
+            <iframe
+              className="preview"
+              src={
+                '/forms/whitelabel/preview?' +
+                qs.stringify({
+                  from_name,
+                  subject,
+                  style,
+                  body
+                })
+              }
             />
             <div className="container right">
               <button onClick={this.closeModal}>OK</button>
@@ -316,34 +324,7 @@ module.exports = class FormSettings extends React.Component {
 
   async preview(e) {
     e.preventDefault()
-
     this.setState({modal: MODAL_PREVIEW})
-
-    let template = {
-      ...this.defaultValues,
-      ...this.props.form.template,
-      ...this.state.changes
-    }
-
-    try {
-      let resp = await fetch('/api-int/forms/whitelabel/preview', {
-        method: 'POST',
-        body: JSON.stringify(template),
-        credentials: 'same-origin',
-        headers: {
-          Accept: 'text/html',
-          'Content-Type': 'application/json'
-        }
-      })
-      let html = await resp.text()
-
-      this.setState({previewHTML: html})
-    } catch (e) {
-      console.error(e)
-      toastr.error(
-        'Failed to see render preview. See the console for more details.'
-      )
-    }
   }
 
   attemptRevert(e) {

formspree/routes.py

@@ -43,6 +43,7 @@ def configure_routes(app):
     app.add_url_rule('/forms/<hashid>', view_func=fv.serve_dashboard, methods=['GET'])
     app.add_url_rule('/forms/<hashid>/<path:s>', view_func=fv.serve_dashboard, methods=['GET'])
     app.add_url_rule('/forms/<hashid>.<format>', view_func=fv.export_submissions, methods=['GET'])
+    app.add_url_rule('/forms/whitelabel/preview', view_func=fv.custom_template_preview_render, methods=['GET'])
     app.add_url_rule('/api-int/forms', view_func=fa.list, methods=['GET'])
     app.add_url_rule('/api-int/forms', view_func=fa.create, methods=['POST'])
     app.add_url_rule('/api-int/forms/<hashid>', view_func=fa.get, methods=['GET'])
@@ -51,7 +52,6 @@ def configure_routes(app):
     app.add_url_rule('/api-int/forms/sitewide-check', view_func=fa.sitewide_check, methods=['POST'])
     app.add_url_rule('/api-int/forms/<hashid>/submissions/<submissionid>', view_func=fa.submission_delete, methods=['DELETE'])
     app.add_url_rule('/api-int/forms/<hashid>/whitelabel', view_func=fa.custom_template_set, methods=['PUT'])
-    app.add_url_rule('/api-int/forms/whitelabel/preview', view_func=fa.custom_template_preview_render, methods=['POST'])
 
     # Webhooks
     app.add_url_rule('/webhooks/stripe', view_func=uv.stripe_webhook, methods=['POST'])

formspree/scss/dashboard.scss

@@ -529,6 +529,8 @@
     padding: 12px;
     margin: 12px;
     border: 5px dotted #444;
+    width: 700px;
+    height: 600px;
   }
 }
 

package.json

@@ -3,6 +3,7 @@
     "class-set": "^0.0.4",
     "codemirror": "^5.39.2",
     "is-valid-email": "0.0.2",
+    "query-string": "^6.1.0",
     "react": "^16.4.2",
     "react-codemirror2": "^5.1.0",
     "react-dom": "^16.4.2",