React Settings for Wordpress

App view loaded via iframe

app/views/apps/settings.html.haml

Get html from

echo '<div id="appSettings"> </div>';
echo "
<div class=\"form section\" data-label=\"form\">
<div 
    id=\"powr-form-builder-content\" 
    class=\"powrreact-component-js\"  
    powr-react=\"PowrSection\">
</div>
</div>";
echo '<div id="appView"><iframe></div></div>';

echo '<script 
    src="../wp-content/plugins/powr-form-builder/jquery-1.11.1.min.js">
</script>';
echo '<script 
    src="../wp-content/plugins/powr-form-builder/apps-settings-9570a8fa5b51bf32f344.js">
</script>';
echo '<script 
    src="../wp-content/plugins/powr-form-builder/formBuilder-d529032748fff65b625b.js">
</script>';

Compile the assets (example focused on js), but need styles too using ENV=prod and then copy to powr-app-name folder

Plan

1. Get auth token

2. Make ajax request to get all info - settings.json

3. Use same request to update

4. Devise will handle session and current_user

Things to worry about:


window.CURRENT_USER = #{current_user.to_json};
window.HOST = "#{@host}";
window.IS_EU = JSON.parse("#{is_eu?}");
window.CONTENT=#{safe_json(@content)};
window.BACKUP_CONTENT=#{safe_json(@backup_content)};
window.META=#{safe_json(@meta)};
window.GLOBALS=#{safe_json(@globals)};
window.IS_EU = #{is_eu?};
window.INPAGE = true;
APP_MODEL.attributes.passwords = #{safe_json(@content['passwords'])}

To get these, we need to figure out a way to

1. auth the WP user on POWr side

2. create a token

3. then make an ajax request