WordPress VIP Compliance

admin.php

@@ -1,122 +1,132 @@
 <?php
+/**
+ * PHP controller for plugin configuration page. The page itself is rendered in config.php  
+ */
+
+/**
+ * Display admin notices for the plugin.
+ */
+function optimizely_admin_notices() {
+	if ( ! get_option( 'optimizely_token' ) && ! isset( $_POST['submit'] ) ):
+		?>
+		<div id="optimizely-warning" class="updated fade">
+			<p><strong><?php echo sprintf(
+				'%s <a href="https://www.optimizely.com/tokens" target="_blank">%s</a> %s <a href="admin.php?page=optimizely-config#tabs-2">%s</a>.',
+				esc_html__( 'Optimizely is almost ready. You must first add your', 'optimizely' ),
+				esc_html__( 'API Token', 'optimizely' ),
+				esc_html__( 'in the', 'optimizely' ),
+				esc_html__( 'configuration tab', 'optimizely' )
+			);?></strong></p>
+		</div>
+		<?php
+	endif;
+	if ( get_option( 'optimizely_token' ) && ! get_option( 'optimizely_project_id' ) && ! isset( $_POST['submit'] ) ):
+		?>
+		<div id="optimizely-warning" class="updated fade">
+			<p><strong><?php esc_html_e( 'Optimizely is almost ready. You must choose a project', 'optimizely' ) ?>.</strong> 
+			</p>
+		</div>
+		<?php
+	endif;
+}
+add_action( 'admin_notices', 'optimizely_admin_notices' );
 
-// PHP controller for plugin configuration page. The page itself is rendered in config.php
-
+/**
+ * Add Optimizely to the admin menu.
+ */
+function optimizely_admin_menu() {
+	add_menu_page( __( 'Optimizely', 'optimizely' ), __( 'Optimizely', 'optimizely' ), 'manage_options', 'optimizely-config', 'optimizely_conf', plugin_dir_url( __FILE__ ) . 'images/optimizely-icon.png' );
+}
 add_action( 'admin_menu', 'optimizely_admin_menu' );
-
-optimizely_admin_warnings();
-
-function optimizely_nonce_field($action = -1) { return wp_nonce_field($action); }
-$optimizely_nonce = 'optimizely-update-code';
 
+/**
+ * Add action links for Optimizely.
+ * @param array $links
+ * @param string $file
+ * @return array
+ */
 function optimizely_plugin_action_links( $links, $file ) {
-  if ( $file == plugin_basename( dirname(__FILE__).'/optimizely.php' ) ) {
-    $links[] = '<a href="admin.php?page=optimizely-config">'.__('Settings').'</a>';
-  }
-
-  return $links;
+	if ( $file == plugin_basename( dirname( __FILE__ ) . '/optimizely.php' ) ) {
+		$links[] = '<a href="admin.php?page=optimizely-config">' . esc_html__( 'Settings', 'optimizely' ) . '</a>';
+	}
+	
+	return $links;
 }
-
 add_filter( 'plugin_action_links', 'optimizely_plugin_action_links', 10, 2 );
 
+/**
+ * Update the Optimizely configuration.
+ */
 function optimizely_conf() {
-  global $optimizely_nonce, $DEFAULT_VARIATION_TEMPLATE;
-
-
-  if ( isset($_POST['submit']) ) {
-    if ( function_exists('current_user_can') && !current_user_can('manage_options') )
-      die(__('Cheatin&#8217; uh?'));
-
-    check_admin_referer( $optimizely_nonce );
-
-    $token = $_POST['token'];
-    $project_id = $_POST['project_id'];
-    $num_variations = $_POST['num_variations'];
-    $optimizely_post_types = $_POST['optimizely_post_types'];
-    $optimizely_visitor_count = $_POST['optimizely_visitor_count'];
-    $project_name = stripcslashes($_POST['project_name']);
-    $project_code = stripcslashes($_POST['project_code']);
-    $variation_template = stripcslashes($_POST['variation_template']);
-
-    if ( empty($token) ) {
-      delete_option('optimizely_token');
-    } else {
-      update_option('optimizely_token', $token);
-    }
-
-    // if ( empty($optimizely_launch_auto) ) {
-//       delete_option('optimizely_launch_auto');
-//     } else {
-//       update_option('optimizely_launch_auto', $optimizely_launch_auto);
-//     }
-
-    if ( empty($project_id) ) {
-      delete_option('optimizely_project_id');
-    } else {
-      update_option('optimizely_project_id', $project_id);
-    }
-
-    if ( empty($num_variations) ) {
-      delete_option('num_variations');
-    } else {
-      update_option('num_variations', $num_variations);
-    }
-
-    $optimizely_post_types = $_POST['optimizely_post_types'];
-    if(empty($optimizely_post_types)){
-      update_option('optimizely_post_types', '');
-    }else{
-      $post_type_string = '';
-      // die(var_dump($optimizely_post_types));
-      foreach($optimizely_post_types as $post_type){
-        $post_type_string = $post_type_string.$post_type.',';
-      }
-      update_option('optimizely_post_types', rtrim($post_type_string, ","));
-    }
-
-    if ( empty($optimizely_visitor_count) ) {
-      delete_option('optimizely_visitor_count');
-    } else {
-      update_option('optimizely_visitor_count', $optimizely_visitor_count);
-    }
-
-    if ( empty($project_name) ) {
-      delete_option('optimizely_project_name');
-    } else {
-      update_option('optimizely_project_name', $project_name);
-    }
-
-    if ( empty($project_code) ) {
-      delete_option('optimizely_project_code');
-    } else {
-      update_option('optimizely_project_code', $project_code);
-    }
-
-    if ( empty($variation_template) ) {
-      update_option('optimizely_variation_template', $DEFAULT_VARIATION_TEMPLATE);
-    } else {
-      update_option('optimizely_variation_template', $variation_template);
-    }
-
-    echo "<div id='message' class='updated fade'><p><strong>Settings saved.</strong></p></div>";
-
-  }
-
-  include(dirname( __FILE__ ) . '/config.php');
-
-}
-
-function optimizely_admin_warnings() {
-  if ( !get_option('optimizely_project_code') && !isset($_POST['submit']) ) {
-    function optimizely_warning() {
-      echo "
-      <div id='optimizely-warning' class='updated fade'><p><strong>".__('Optimizely is almost ready.')."</strong> ".sprintf(__('You must <a href="%1$s">authenticate and choose a project</a> to begin using Optimizely on your site.'), "admin.php?page=optimizely-config")."</p></div>";
-    }
-    add_action('admin_notices', 'optimizely_warning');
-    return;
-  } 
-}
-
-function optimizely_admin_menu() {
-  add_menu_page( __('Optimizely'), __('Optimizely'), 'manage_options', 'optimizely-config', 'optimizely_conf',plugin_dir_url( __FILE__ ).'images/optimizely-icon.png');
-}
+	if ( isset( $_POST['submit'] ) ) {
+		if ( ! current_user_can( 'manage_options' ) ) {
+			die( __( 'Cheatin&#8217; uh?', 'optimizely' ) );
+		}
+
+		// Check the nonce
+		check_admin_referer( OPTIMIZELY_NONCE );
+
+		// Sanitize values
+		$token = sanitize_text_field( $_POST['token'] );
+		$project_id = sanitize_text_field( $_POST['project_id'] );
+		$num_variations = sanitize_text_field( $_POST['optimizely_num_variations'] );
+		$optimizely_post_types = array_map( 'sanitize_text_field', $_POST['optimizely_post_types'] );
+		$optimizely_visitor_count = sanitize_text_field( $_POST['optimizely_visitor_count'] );
+		$project_name = sanitize_text_field( stripcslashes( $_POST['project_name'] ) );
+		$variation_template = sanitize_text_field( stripcslashes( $_POST['variation_template' ] ) );
+
+		// Either save or delete/set a default if empty for each value
+		if ( empty( $token ) ) {
+			delete_option( 'optimizely_token' );
+		} else {
+			update_option( 'optimizely_token', $token );
+		}
+
+		if ( empty( $project_id ) ) {
+			delete_option( 'optimizely_project_id' );
+		} else {
+			update_option( 'optimizely_project_id', $project_id );
+		}
+
+		if ( empty( $num_variations ) ) {
+			delete_option( 'optimizely_num_variations' );
+		} else {
+			update_option( 'optimizely_num_variations', $num_variations );
+		}
+
+		if ( empty( $optimizely_post_types ) ) {
+			update_option( 'optimizely_post_types', '' );
+		} else {
+			$post_type_string = '';
+			foreach ( $optimizely_post_types as $post_type ) {
+				$post_type_string = $post_type_string . $post_type . ',';
+			}
+			update_option( 'optimizely_post_types', trim( $post_type_string, ',' ) );
+		}
+
+		if ( empty( $optimizely_visitor_count ) ) {
+			delete_option( 'optimizely_visitor_count' );
+		} else {
+			update_option( 'optimizely_visitor_count', $optimizely_visitor_count );
+		}
+
+		if ( empty( $project_name ) ) {
+			delete_option( 'optimizely_project_name' );
+		} else {
+			update_option( 'optimizely_project_name', $project_name );
+		}
+
+		if ( empty( $variation_template ) ) {
+			update_option( 'optimizely_variation_template', OPTIMIZELY_DEFAULT_VARIATION_TEMPLATE );
+		} else {
+			update_option( 'optimizely_variation_template', $variation_template );
+		}
+
+		?>
+		<div id="message" class="updated fade"><p><strong><?php esc_html_e( 'Settings saved', 'optimizely' ) ?>.</strong></p></div>
+		<?php
+	}
+
+	// Display the config form.
+	include( dirname( __FILE__ ) . '/config.php' );
+}

config.js

@@ -1,47 +1,63 @@
-// Javascript for plugin settings page
-
-function optimizelyConfigPage() {
-  var $ = jQuery;
-
-  /*
-
-  AUTHENTICATION W/ OPTIMIZELY
-
-  When the user presses the button, we call the GET projects/ endpoint to list out all the projects in their account. For each project, we show its name in the dropdown and store its ID in the value attribute for submission to a form.
-
-  */
-
-  $("button#connect_optimizely").click(function(event) {
-    event.preventDefault();
-    $("#project_id").html("<option>Loading projects...</option>");
-
-    optly = new OptimizelyAPI($("#token").val());
-
-    optly.get('projects', function(response) {
-      $("#project_id").empty();
-
-      $.each(response, function(key, val) {
-        $("#project_id").append("<option value='" + val.id + "'>" + val.project_name + "</option>"); 
-      });
-
-      $("#project_id").change(); // update project code w/ the default value
-    });
-
-    /*
-
-    CHOOSING A PROJECT
-
-    When the user selects a project from the dropdown, we populate the project code box with the Optimizely snippet for that project ID.
-
-    */
-    $('#project_id').change(function() {
-      var id = $('#project_id').val();
-      var name = $('#project_id option:selected').text();
-      var project_code = '<script src="//cdn.optimizely.com/js/' + id + '.js"></script>';
-      $('#project_code').text(project_code);
-      $('#project_name').val(name);
-    });
-  });
+(function( $ ) {
+
+	// Javascript for plugin settings page
+	function optimizelyConfigPage() {
+
+		/*
+		AUTHENTICATION W/ OPTIMIZELY
+		When the user presses the button, we call the GET projects/ endpoint to list out all the projects in their account. 
+		For each project, we show its name in the dropdown and store its ID in the value attribute for submission to a form.
+		*/
+
+		$( 'button#connect_optimizely' ).click(function( event ) {
+			event.preventDefault();
+			$loading = $( '<option>' ).text( 'Loading projects...' );
+			$( '#project_id' ).html( '' );
+			$( '#project_id' ).append( $loading );
+
+			optly = new OptimizelyAPI( $( '#token' ).val() );
+
+			optly.get( 'projects', function( response ) {
+				$( '#project_id' ).empty();
+				$.each( response, function( key, val ) {
+					$option = $( '<option>' )
+						.val( val.id )
+						.text( val.project_name );
+
+					$( '#project_id' ).append( $option ); 
+				});
+
+				// Update project code w/ the default value
+				$( '#project_id' ).change();
+			});
+
+			/*
+			CHOOSING A PROJECT
+			When the user selects a project from the dropdown, 
+			we populate the project code box with the Optimizely snippet for that project ID.
+			*/
+			$( '#project_id' ).change(function() {
+				var id = $( '#project_id' ).val();
+				var name = $( '#project_id option:selected' ).text();
+
+				// For display purposes only!
+				var project_code = '<script src="//cdn.optimizely.com/js/' + parseInt( id ) + '.js"></script>';
+
+				$( '#project_code' ).text( project_code );
+				$( '#project_name' ).val( name );
+			});
+		});
 
 
-}
+	}
+
+	$( document ).ready(function() {
+		$( '#optimizely-tabs' ).tabs();
+		$( document ).tooltip({
+			track: true
+		});
+
+		optimizelyConfigPage();
+	});
+
+})( jQuery );