Fixing bugs and clearing up initial setup

auth0 · May 25, 2018 · 7ee06d3 · 7ee06d3
1 parent 79625e9
commit 7ee06d3
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 100 deletions.
diff --git a/assets/css/initial-setup.css b/assets/css/initial-setup.css
diff --git a/assets/css/initial-setup/main.styl b/assets/css/initial-setup/main.styl
@@ -6,6 +6,17 @@
   margin: 30px auto;
 }
 
+.modal-open {
+
+  .modal{
+    background: rgba(0,0,0,0.5)
+  }
+
+  .modal-backdrop{
+    display: none
+  }
+}
+
 #wpwrap {
   background-color: bgColor;
 
@@ -418,7 +429,7 @@
       p {
         font-size: 14px;
         margin: 20px 10px;
-        height: 125px;
+        min-height: 6em;
       }
 
       img {

diff --git a/assets/js/admin.js b/assets/js/admin.js
@@ -5,8 +5,9 @@ jQuery(document).ready(function($) {
     $(document).on('click', '#wpa0_choose_icon', function(event) {
         event.preventDefault();
         //If the frame already exists, reopen it
-        if (typeof(media_frame)!=="undefined")
+        if (typeof(media_frame)!=="undefined") {
             media_frame.close();
+        }
 
         var related_control_id = 'wpa0_icon_url';
         if (typeof($(this).attr('related')) != 'undefined' &&
@@ -31,7 +32,6 @@ jQuery(document).ready(function($) {
         media_frame.on('select', function() {
             var attachment = media_frame.state().get('selection').first().toJSON();
             $('#'+related_control_id).val(attachment.url);
-            console.log($('#'+related_control_id));
         });
 
         //Open modal
@@ -61,7 +61,9 @@ jQuery(document).ready(function($) {
     Admin settings tab switching
      */
     var currentTab;
-    if ( localStorageAvailable() && window.localStorage.getItem( 'Auth0WPSettingsTab' ) ) {
+    if ( window.location.hash ) {
+        currentTab = window.location.hash.replace( '#', '' );
+    } else if ( localStorageAvailable() && window.localStorage.getItem( 'Auth0WPSettingsTab' ) ) {
         // Previous tab being used
         currentTab = window.localStorage.getItem( 'Auth0WPSettingsTab' );
     } else {
@@ -78,6 +80,7 @@ jQuery(document).ready(function($) {
 
     // Set the tab showing on the form and persist the tab
     $( '.nav-tabs [role="tab"]' ).click( function () {
+        window.location.hash = '';
         var tabHref = $( this ).attr( 'aria-controls' );
         $settingsForm.attr( 'data-tab-showing', tabHref );
         if ( localStorageAvailable() ) {
@@ -103,6 +106,34 @@ jQuery(document).ready(function($) {
         }, 'json');
     } );
 
+    /*
+    Initial setup
+     */
+    $('.js-a0-setup-input').keydown(function(e){
+        if(13 === e.keyCode) {
+            e.preventDefault();
+            return false;
+        }
+    });
+
+    $('.js-a0-select-setup').click(function (e) {
+        e.preventDefault();
+        $('#profile-type').val($(this).val());
+        $('#connectionSelectedModal').modal();
+    });
+
+    $('#manuallySetToken').click(function (e) {
+        e.preventDefault();
+        $('#enterTokenModal').modal();
+        $('#connectionSelectedModal').modal('hide');
+        return false;
+    });
+
+    $('#automaticSetup').click(function (e) {
+        e.preventDefault();
+        $('#profile-form').submit();
+    });
+
     /**
      * Can we use localStorage?
      *

diff --git a/lib/WP_Auth0_Embed_Widget.php b/lib/WP_Auth0_Embed_Widget.php
@@ -29,7 +29,7 @@ protected function showAsModal() {
 	public function form( $instance ) {
 
 		wp_enqueue_media();
-		wp_enqueue_script( 'wpa0_admin', WPA0_PLUGIN_JS_URL . 'admin.js', array( 'jquery' ) );
+		wp_enqueue_script( 'wpa0_admin', WPA0_PLUGIN_JS_URL . 'admin.js', array( 'jquery' ), WPA0_VERSION );
 		wp_enqueue_style( 'media' );
 		wp_localize_script( 'wpa0_admin', 'wpa0', array(
 				'media_title' => __( 'Choose your icon', 'wp-auth0' ),

diff --git a/lib/admin/WP_Auth0_Admin.php b/lib/admin/WP_Auth0_Admin.php
@@ -219,7 +219,7 @@ public function admin_enqueue() {
 			add_action( 'admin_notices', array( $this, 'create_account_message' ) );
 		}
 
-		if ( 'wpa0' === $wpa0_curr_page ) {
+		if ( in_array( $wpa0_curr_page, array( 'wpa0', 'wpa0-setup' ) ) ) {
 			wp_enqueue_script( 'wpa0_admin', WPA0_PLUGIN_JS_URL . 'admin.js', array( 'jquery' ), WPA0_VERSION );
 			wp_localize_script(
 				'wpa0_admin', 'wpa0', array(

diff --git a/lib/admin/WP_Auth0_Admin_Basic.php b/lib/admin/WP_Auth0_Admin_Basic.php
@@ -240,6 +240,7 @@ public function render_allow_wordpress_login( $args = array() ) {
 		$this->render_switch( $args['label_for'], $args['opt_name'] );
 		$this->render_field_description(
 			__( 'Turn on to enable a link on wp-login.php pointing to the core login form. ', 'wp-auth0' ) .
+			__( 'Logins and signups using the WordPress form will NOT be pushed to Auth0. ', 'wp-auth0' ) .
 			__( 'This is typically only used while testing the plugin initially', 'wp-auth0' )
 		);
 	}

diff --git a/templates/initial-setup/connection_profile.php b/templates/initial-setup/connection_profile.php
@@ -4,30 +4,35 @@
 
   <div class="container-fluid">
     <div class="row">
+        <div class="col-lg-12">
       <h1><?php _e( "Step 1: Choose your account type", "wp-auth0" ); ?></h1>
       <p class="a0-step-text"><?php _e( "Users can log in within their own credentials - social like Google or Facebook, or username and password -  or use their employee credentials through an enterprise connection. Use either or both and you'll increase your WordPress site's security and consolidate identity data.", "wp-auth0" ); ?></p><br>
+        <p><?php _e( 'Once configured, this plugin replaces the standard WordPress login screen (see the "WordPress Login Enabled" setting under the Basic tab to keep the WordPress login form enabled). Auth0 adds many features to make login easier and better for your users but the old system will still be there too.', 'wp-auth0' ); ?></p><br>
         <p><?php
           _e( 'For more information on installation and configuration, including manual steps, please see the' );
           printf(
               ' <strong><a href="https://auth0.com/docs/cms/wordpress" target="_blank">%s</a></strong>',
               __( 'documentation pages here' )
           );
           ?>.</p>
+        </div>
     </div>
     <div class="row">
       <div class="a0-step-text a0-message a0-warning">
 
         <b>Important:</b>
         <?php _e( 'To continue you need an Auth0 account, don\'t have one yet?', 'wp-auth0' ); ?>
 
-        <a class="a0-button default pull-right" target="_blank" href="https://auth0.com/signup" >Sign up for free</a>
+        <a class="a0-button default pull-right" target="_blank" href="https://auth0.com/signup" >
+          <?php _e( 'Sign up for free', 'wp-auth0' ) ?>
+        </a>
 
       </div>
         <div class="a0-step-text a0-message a0-tip">
-            <b><?php echo _e( 'Pro Tip' ); ?>:</b>
-					<?php echo _e( 'Already set up another WordPress instance with Auth0? ' ); ?>
-            <a href="admin.php?page=wpa0-import-settings"><?php echo _e( 'Click here' ); ?></a>
-					<?php echo _e( ' to save time and import that site\'s SSO settings.' ); ?>
+            <b><?php _e( 'Pro Tip' ); ?>:</b>
+          <?php _e( 'Already set up another WordPress instance with Auth0? ' ); ?>
+            <a href="<?php echo admin_url( 'admin.php?page=wpa0-import-settings' ) ?>"><?php _e( 'Click here' ); ?></a>
+          <?php _e( ' to save time and import existing Auth0 settings.' ); ?>
         </div>
     </div>
     <div class="a0-profiles row">
@@ -39,12 +44,12 @@
           <div class="profile">
             <img src="<?php echo WPA0_PLUGIN_URL; ?>/assets/img/initial-setup/simple-end-users-login.svg">
 
-            <h2><?php _e( "Social Login", "wp-auth0" ); ?></h2>
+            <h2><?php _e( "Standard", "wp-auth0" ); ?></h2>
 
-            <p><?php _e( "Let your users login with their social accounts. For example; Google, Facebook, Twitter and many more along with traditional username and password. Don't worry - if you have existing users they will still be able to login.", "wp-auth0" ); ?></p>
+            <p><?php _e( "Allow users to login using social, username and password, or passwordless connections.", "wp-auth0" ); ?></p>
 
             <div class="a0-buttons">
-              <input type="submit" value="Social" name="type" class="a0-button primary"/>
+              <input type="submit" value="Social" name="type" class="a0-button primary js-a0-select-setup"/>
             </div>
           </div>
         </div>
@@ -53,12 +58,12 @@
           <div class="profile">
             <img src="<?php echo WPA0_PLUGIN_URL; ?>/assets/img/initial-setup/effortless-employee-access.svg">
 
-            <h2><?php _e( "Enterprise Login", "wp-auth0" ); ?></h2>
+            <h2><?php _e( "Enterprise", "wp-auth0" ); ?></h2>
 
-            <p><?php _e( "Secure this WordPress instance with your organizations login system so that users can login with their work account information. For example, you can connect to your existing ActiveDirectory infrastructure.", "wp-auth0" ); ?></p>
+            <p><?php _e( "Secure this WordPress instance with your organization's login system, like ActiveDirectory", "wp-auth0" ); ?></p>
 
             <div class="a0-buttons">
-              <input type="submit" value="Enterprise" name="type" class="a0-button primary"/>
+              <input type="submit" value="Enterprise" name="type" class="a0-button primary js-a0-select-setup"/>
             </div>
           </div>
         </div>
@@ -70,23 +75,30 @@
             <div class="modal-content">
               <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="connectionSelectedModalLabel">Important</h4>
+                <h4 class="modal-title" id="connectionSelectedModalLabel"><?php _e( 'Important', 'wp-auth0' ) ?></h4>
               </div>
               <div class="modal-body no-padding-bottom">
-                <p><?php _e( 'This wizard gets you started with the Auth0 for WordPress plug-in. You\'ll be transferred to Auth0 and can login or sign-up. Then you\'ll authorize the plug-in and configure identity providers, whether social or enterprise connections.', 'wp-auth0' ); ?></p>
-                <p><b><?php _e( 'This plug-in replaces the standard WordPress login screen, but don\'t worry, you can still use your existing WordPress login. Auth0 adds many features to make login easier and better for your users but the old system will still be there too.', 'wp-auth0' ); ?></b></p>
-
-                <div class="a0-message a0-warning multiline">
-
-                  <b>Note:</b>
-                  <?php _e( 'For this plugin to work, your server/host needs an inbound connection from auth0.com, as Auth0 needs to fetch some information to complete the process. If this website is not accessible from the internet, it will require manual intervention to configure the API token.', 'wp-auth0' ); ?>
-
-                </div>
-
-              </div>
-              <div class="modal-footer">
-                <a class="a0-button primary" href="#" id="manuallySetToken">Manual Setup (no Internet access)</a>
-                <a class="a0-button primary submit" href="#" id="automaticSetup">Automatic setup</a>
+                  <h4><?php _e( 'Standard Setup', 'wp-auth0' ) ?></h4>
+                  <p><?php _e( 'This will create and configure an Application and a database connection for this site.', 'wp-auth0' ) ?></p>
+                  <p><a class="a0-button primary" href="#" id="manuallySetToken"><?php _e( 'Start Standard Setup', 'wp-auth0' ) ?></a></p>
+                  <br>
+
+                  <h4><?php _e( 'User Migration Setup', 'wp-auth0' ) ?></h4>
+                  <p>
+                      <?php _e( 'This includes everything above plus data migration from your WordPress database.', 'wp-auth0' ) ?>
+                      <?php _e( 'This requires an inbound connection from Auth0 servers and cannot be changed later without losing data.', 'wp-auth0' ) ?>
+                      <a href="https://auth0.com/docs/cms/wordpress/how-does-it-work#scenario-data-migration" target="_blank">
+                        <?php _e( 'More information here.', 'wp-auth0' ) ?>
+                      </a></p>
+                  <p><a class="a0-button primary submit" href="#" id="automaticSetup"><?php
+                          _e( 'Start User Migration Setup', 'wp-auth0' ) ?></a></p>
+                  <br>
+
+                  <h4><?php _e( 'Manual Setup', 'wp-auth0' ) ?></h4>
+                  <p><?php _e( 'If you already have an Application or want to use an existing database connection, please follow the steps below.', 'wp-auth0' ) ?></p>
+                  <p><a class="a0-button primary" href="https://auth0.com/docs/cms/wordpress/installation#manual-setup"
+                        target="_blank"><?php _e( 'Manual Setup Instructions', 'wp-auth0' ) ?></a></p>
+                  <br>
               </div>
             </div>
           </div>
@@ -97,21 +109,21 @@
             <div class="modal-content">
               <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title" id="enterTokenModalModalLabel">Important</h4>
+                <h4 class="modal-title" id="enterTokenModalModalLabel"><?php _e( 'Important', 'wp-auth0' ) ?></h4>
               </div>
               <div class="modal-body">
                 <p>
-                  <?php _e( 'To complete the plugin\'s initial setup, you will need to enter your tenant Domain:', 'wp-auth0' ); ?>
+                  <?php _e( 'Enter your tenant Domain:', 'wp-auth0' ); ?>
                 </p>
-                <input type="text" name="domain" placeholder="youraccount.auth0.com" required>
+                <input type="text" name="domain" class="js-a0-setup-input" placeholder="youraccount.auth0.com" required>
                 <br><br>
                 <p>
-                  <?php _e( 'And manually create an API token with the', 'wp-auth0' ); ?>
+                  <?php _e( 'Manually create an API token with the', 'wp-auth0' ); ?>
                   <a href="https://auth0.com/docs/api/management/v2/tokens#get-a-token-manually" target="_blank">
-	                  <?php echo __( 'token generator', 'wp-auth0' ); ?></a>
+	                  <?php _e( 'token generator', 'wp-auth0' ); ?></a>
                   <?php _e( ' and paste it here:', 'wp-auth0' ); ?>
                 </p>
-                <input type="password" name="apitoken" autocomplete="off" required>
+                <input type="password" name="apitoken" class="js-a0-setup-input" autocomplete="off" required>
                 <p>
                   <small>
                     Scopes required:
@@ -140,24 +152,3 @@
 
   </div>
 </div>
-
-
-<script type="text/javascript">
-  jQuery('.profile .a0-button').click(function(e){
-    e.preventDefault();
-    jQuery('#profile-type').val(jQuery(this).val());
-    jQuery('#connectionSelectedModal').modal();
-  });
-
-  jQuery('#manuallySetToken').click(function(e){
-    e.preventDefault();
-    jQuery('#enterTokenModal').modal();
-    jQuery('#connectionSelectedModal').modal('hide');
-    return false;
-  });
-
-  jQuery('#automaticSetup').click(function(e){
-    e.preventDefault();
-    jQuery('#profile-form').submit();
-  });
-</script>
diff --git a/templates/initial-setup/connections.php b/templates/initial-setup/connections.php
@@ -21,8 +21,12 @@
 
 		<div class="row">
 			<div class="a0-buttons">
-			<a href="https://manage.auth0.com/#/applications/<?php echo $client_id; ?>/connections" class="a0-button primary" target="_blank"><?php _e( "Auth0 Dashboard", "wp-auth0" ); ?></a>
-			<a href="<?php echo admin_url( "admin.php?page=wpa0-setup&step={$next_step}&profile=social" ); ?>" class="a0-button primary">Next</a>
+			<a href="https://manage.auth0.com/#/applications/<?php
+            echo $client_id; ?>/connections" class="a0-button primary" target="_blank"><?php
+              _e( "Auth0 Dashboard", "wp-auth0" ); ?></a>
+			<a class="a0-button primary" href="<?php
+            echo admin_url( "admin.php?page=wpa0-setup&step={$next_step}&profile=social" ); ?>" ><?php
+              _e( 'Next', 'wp-auth0' ) ?></a>
 		</div>
     </div>
 

diff --git a/templates/initial-setup/consent-disclaimer.php b/templates/initial-setup/consent-disclaimer.php
diff --git a/templates/initial-setup/end.php b/templates/initial-setup/end.php
@@ -8,10 +8,10 @@
 
     <h1><?php _e( "Done! You finished this Setup Wizard", "wp-auth0" ); ?></h1>
 
-    <p class="a0-step-text"><?php _e( "Adjust the plug-in's settings from the WordPress dashboard, and visit Auth0's dashboard to change how users log in, add connections, enable multi-factor authentication, and more.", "wp-auth0" ); ?></p>
+    <p class="a0-step-text"><?php _e( "Adjust the plugin settings from the WordPress dashboard, and visit the Auth0 dashboard to change how users log in, add connections, enable multi-factor authentication, and more.", "wp-auth0" ); ?></p>
 
     <div class="a0-buttons extra-space">
-      <a href="<?php echo admin_url( 'admin.php?page=wpa0' ); ?>" class="a0-button primary">GO TO PLUG-IN SETTINGS</a>
+      <a href="<?php echo admin_url( 'admin.php?page=wpa0' ); ?>" class="a0-button primary">GO TO PLUGIN SETTINGS</a>
     </div>
   </div>
 </div>