From e491b17c535a14ac74fbb8e480a5bb28b384f0f0 Mon Sep 17 00:00:00 2001
From: Mike iLL Kilmer <mike@mzoo.org>
Date: Wed, 2 Aug 2017 03:52:21 -0500
Subject: [PATCH] Add helpful poopup to clarify which key plugin needs.

---
 app/admin/wp-steem-settings-handler.php | 21 ++++++++++++++-
 public/assets/js/modal.js               | 34 +++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/js/modal.js

diff --git a/app/admin/wp-steem-settings-handler.php b/app/admin/wp-steem-settings-handler.php
index c8c799e..eedbddd 100644
--- a/app/admin/wp-steem-settings-handler.php
+++ b/app/admin/wp-steem-settings-handler.php
@@ -12,6 +12,7 @@ public static function init() {
 
 		add_action('admin_menu', array($instance, 'register_pages'));
 		add_action('admin_init', array($instance, 'register_page_settings'));
+		add_action('admin_enqueue_scripts', array($instance, 'enqueue_settings_scripts_styles'));
 	}
 
 	public static function display_notices() { 
@@ -181,12 +182,30 @@ public static function display_posting_key_field() {
 			sprintf(
 				__("Please only provide the %s.", 'wp-steem'),
 				sprintf(
-					'<strong style="color: red;">"%s"</strong>',
+					'<a style="cursor:pointer" id="posting-key-link">%s</a>',
 					__('PRIVATE POSTING KEY', 'wp-steem')
 				)
 			)
 		);
+		printf(
+      '<div id="private-key-details" class="hidden" style="max-width:800px"><p>%1$s</p><p>%2$s</p><p>%3$s</p><p>%4$s</p><p>%5$s</p></div>',
+      sprintf( __('Your Steemit PRIVATE POSTING KEY is %1$s NOT %2$s your main Steemit password.', 'wp-steem'), "<strong>", "</strong>"),
+      sprintf( __('Get your PRIVATE POSTING KEY by visiting http://steemit.com/@username/permissions', 'wp-steem')),
+      sprintf( __('Click the button that says "show private key".', 'wp-steem')),
+      sprintf( __('The revealed key is what needs to be placed in this field.', 'wp-steem')),
+      sprintf( '<a href="https://steemit.com/security/@noisy/what-is-the-difference-between-a-password-and-a-private-key-s-on-steemit-how-to-make-your-account-more-secure-by-using-them">%1$s</a> %2$s.',
+            __("Click Here", 'wp-steem'), __("for more info on Steemit Keys", 'wp-steem'))
+      );
 	}
+
+	# Popup
+
+    public static function enqueue_settings_scripts_styles($page) {
+      wp_enqueue_script (  'wp-steem-modal' ,       // handle
+                          WP_STEEM_DIR_URL . 'public/assets/js/modal.js'  ,       // source
+                          array('jquery', 'jquery-ui-core', 'jquery-ui-dialog'), null, true); // dependencies
+      wp_enqueue_style (  'wp-jquery-ui-dialog');
+    }
 }
 
 WP_Steem_Settings_Handler::init();
\ No newline at end of file
diff --git a/public/assets/js/modal.js b/public/assets/js/modal.js
new file mode 100644
index 0000000..743e042
--- /dev/null
+++ b/public/assets/js/modal.js
@@ -0,0 +1,34 @@
+(function($) {
+  console.log( "ready!" );
+  var details = $('#private-key-details'),
+      detailsButton = $('#posting-key-link');
+  // initalise the dialog
+  details.dialog({
+    title: 'Private Hosting Key',
+    dialogClass: 'wp-dialog',
+    autoOpen: false,
+    draggable: false,
+    width: 'auto',
+    modal: true,
+    resizable: false,
+    closeOnEscape: true,
+    position: {
+      my: "center",
+      at: "center",
+      of: window
+    },
+    create: function(){
+      $('.ui-dialog-titlebar-close').addClass('ui-button');
+    },
+    open: function(){
+      $('.ui-widget-overlay').bind('click',function(){
+        details.dialog('close');
+      });
+    }
+  });
+  // bind a button or a link to open the dialog
+  detailsButton.click(function(e) {
+    e.preventDefault();
+    details.dialog('open');
+  });
+})(jQuery);