Refactored passwordless

Passwordless (PWL) was not working with new tenants and used the old, separate PWL JS library. This commit updates the Lock library used to 11.5, moves and re-writes the JS used to show Lock, loads required JS in one place for widget + shortcode + wp-login, and revises state handling to work better for the shortcode and widget.
auth0 · Apr 19, 2018 · 76ad48f · 76ad48f
1 parent 9724203
commit 76ad48f
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 249 deletions.
diff --git a/WP_Auth0.php b/WP_Auth0.php
@@ -400,6 +400,7 @@ public function render_form( $html ) {
 		ob_start();
 		require_once WPA0_PLUGIN_DIR . 'templates/login-form.php';
 		renderAuth0Form();
+
 		return ob_get_clean();
 	}
 

diff --git a/assets/js/login-pwl.js b/assets/js/login-pwl.js
@@ -0,0 +1,43 @@
+/* globals jQuery, console, alert, wpAuth0PwlGlobal, Auth0LockPasswordless */
+jQuery(document).ready(function ($) {
+
+    var formWrapper = $( '#form-signin-wrapper' );
+    var modalButton = $( '#a0LoginButton' );
+
+    // Missing critical Auth0 settings
+    if ( ! wpAuth0PwlGlobal.lock.ready ) {
+        formWrapper.hide();
+        $( '#loginform' ).show();
+        $( '#login' ).find( 'h1' ).show();
+        return;
+    }
+
+    // General Lock options pulled from the settings
+    var options = wpAuth0PwlGlobal.lock.options;
+
+    // Extra options are set in the shortcode and widget
+    var extraOptions = formWrapper.attr( 'data-auth0-opts' );
+
+    if ( extraOptions ) {
+        try {
+            extraOptions = JSON.parse( extraOptions );
+            $.extend( options, extraOptions );
+        } catch ( err ) {
+            // TODO: better handling
+            console.log( err.message );
+        }
+    }
+
+    var Lock = new Auth0LockPasswordless(
+        wpAuth0PwlGlobal.lock.clientId,
+        wpAuth0PwlGlobal.lock.domain,
+        options
+    );
+
+    if ( extraOptions.show_as_modal ) {
+        modalButton.click( Lock.show );
+    } else {
+        Lock.show();
+    }
+});
+
diff --git a/lib/WP_Auth0_Embed_Widget.php b/lib/WP_Auth0_Embed_Widget.php
@@ -43,7 +43,9 @@ public function widget( $args, $instance ) {
 		if ( WP_Auth0::ready() ) {
 
 			$instance['show_as_modal'] = $this->showAsModal();
-			$instance['modal_trigger_name'] = isset( $instance['modal_trigger_name'] ) ? $instance['modal_trigger_name'] : 'Login';
+			$instance['modal_trigger_name'] = isset( $instance['modal_trigger_name'] )
+        ? $instance['modal_trigger_name']
+        : __( 'Login', 'wp-auth0' );
 
 			if ( !isset( $instance['redirect_to'] ) || empty($instance['redirect_to']) ) {
 				$instance['redirect_to'] = home_url( $_SERVER["REQUEST_URI"] );

diff --git a/lib/WP_Auth0_Lock10_Options.php b/lib/WP_Auth0_Lock10_Options.php
@@ -7,11 +7,19 @@ class WP_Auth0_Lock10_Options {
   protected $signup_mode = false;
   protected $_scopes = 'openid email name nickname picture';
 
+  const PWL_CDN_URL = '//cdn.auth0.com/js/lock/11.5/lock.min.js';
+
+  /**
+   * WP_Auth0_Lock10_Options constructor.
+   *
+   * @param array $extended_settings - argument in renderAuth0Form(), used by shortcode and widget
+   */
   public function __construct( $extended_settings = array() ) {
     $this->wp_options = WP_Auth0_Options::Instance();
     $this->extended_settings = $extended_settings;
   }
 
+  // TODO: Deprecate - class name is set in a specific template
   public function get_lock_classname() {
     if ( $this->_get_boolean( $this->wp_options->get( 'passwordless_enabled' ) ) ) {
       return 'Auth0LockPasswordless';
@@ -20,10 +28,12 @@ public function get_lock_classname() {
     }
   }
 
+  // TODO: Deprecate - specific templates choose passwordless or not
   public function isPasswordlessEnable() {
     return $this->_get_boolean( $this->wp_options->get( 'passwordless_enabled' ) );
   }
 
+  // TODO: Deprecate - passwordless_method is no longer a valid way to load passwordless
   public function get_lock_show_method() {
     return 'show';
   }
@@ -50,7 +60,7 @@ public function get_custom_js() {
   }
 
   public function can_show() {
-    return trim( $this->get_client_id() ) !== '' && trim( $this->get_domain() ) !== '';
+    return WP_Auth0::ready();
   }
 
   public function get_client_id() {
@@ -169,6 +179,8 @@ protected function build_settings( $settings ) {
     }
     if ( $this->signup_mode ) {
       $options_obj["allowLogin"] = false;
+    } else if ( isset( $_GET['action'] ) && $_GET['action'] == 'register' ) {
+      $options_obj["allowLogin"] = true;
     }
     return $options_obj;
   }

diff --git a/lib/WP_Auth0_Lock_Options.php b/lib/WP_Auth0_Lock_Options.php
@@ -1,5 +1,5 @@
 <?php
-
+// TODO: Deprecate - previously used for passwordless
 class WP_Auth0_Lock_Options {
 
 	protected $wp_options;

diff --git a/templates/auth0-login-form-lock10.php b/templates/auth0-login-form-lock10.php
@@ -1,5 +1,4 @@
 <?php
-
 $lock_options = new WP_Auth0_Lock10_Options( $specialSettings );
 
 if ( ! $lock_options->can_show() ) {
@@ -14,22 +13,10 @@
 }
 
 $extra_css = '';
-
-if ( $lock_options->isPasswordlessEnable() ) {
-  $extra_css = '.auth0-lock {margin-bottom: 50px;}';
-}
-
 $extra_css .= trim( apply_filters( 'auth0_login_css', '' ) );
 $extra_css .= trim( $lock_options->get_custom_css() );
 
-$custom_js = trim( $lock_options->get_custom_js() );
-
-if ( empty( $title ) ) {
-  $title = "Sign In";
-}
-
 $options = $lock_options->get_lock_options();
-
 ?>
 
 <div id="form-signin-wrapper" class="auth0-login">
@@ -41,7 +28,6 @@
         <?php } else { ?>
             <div id="auth0-login-form"></div>
         <?php } ?>
-
         <?php if ( $lock_options->get_wordpress_login_enabled() && $canShowLegacyLogin ) { ?>
             <div id="extra-options">
                 <a href="?wle">Login with WordPress username</a>
@@ -50,13 +36,11 @@
 
     </div>
 </div>
-
 <?php if ( !empty( $extra_css ) ) { ?>
     <style type="text/css">
         <?php echo $extra_css; ?>
     </style>
 <?php } ?>
-
 <script type="text/javascript">
 var ignore_sso = false;
 
@@ -68,29 +52,23 @@
 
 document.addEventListener("DOMContentLoaded", function() {
 
-    var callback = null;
-
-    var options = <?php echo json_encode( $options ); ?>;
-
+    var options = {};
+    options = <?php echo json_encode( $options ); ?>;
     options.additionalSignUpFields = <?php echo $lock_options->get_custom_signup_fields(); ?>;
 
     if (!ignore_sso) {
-      var lock = new <?php echo $lock_options->get_lock_classname(); ?>('<?php echo $lock_options->get_client_id(); ?>', '<?php echo $lock_options->get_domain(); ?>', options);
-
-      <?php if ( ! empty( $custom_js ) ) { ?>
-
-          <?php echo $custom_js;?>
-
-      <?php } ?>
+      var lock = new Auth0Lock(
+          '<?php echo $lock_options->get_client_id(); ?>',
+          '<?php echo $lock_options->get_domain(); ?>',
+          options
+      );
 
-      function a0ShowLoginModal() {
-          lock.<?php echo $lock_options->get_lock_show_method(); ?>();
-      }
+      <?php echo $lock_options->get_custom_js(); ?>
 
       <?php if ( ! $lock_options->show_as_modal() ) { ?>
-          a0ShowLoginModal();
+        lock.show();
       <?php } else { ?>
-          jQuery('#a0LoginButton').click(a0ShowLoginModal);
+          jQuery('#a0LoginButton').click(lock.show);
       <?php } ?>
     }
 

diff --git a/templates/auth0-login-form-pwl.php b/templates/auth0-login-form-pwl.php
@@ -0,0 +1,39 @@
+<?php
+$auth0_options = WP_Auth0_Options::Instance();
+?>
+
+<div id="form-signin-wrapper" class="auth0-login" data-auth0-opts="<?php echo esc_attr( json_encode( $specialSettings ) ) ?>">
+    <?php include 'error-msg.php'; ?>
+    <div class="form-signin">
+        <div id="auth0-login-form"></div>
+        <?php if ( ! empty( $specialSettings['show_as_modal'] ) ) : ?>
+            <button id="a0LoginButton" ><?php
+              echo ! empty ( $specialSettings['modal_trigger_name'] )
+                ? sanitize_text_field($specialSettings['modal_trigger_name'] )
+                : __( 'Login', 'wp-auth0' )
+              ?></button>
+        <?php endif; ?>
+
+        <?php if ( $auth0_options->get( 'wordpress_login_enabled' ) && function_exists( 'login_header' ) ) { ?>
+            <div id="extra-options">
+                <a href="<?php echo wp_login_url() ?>?wle">
+                  <?php _e( 'Login with WordPress username', 'wp-auth0' ) ?>
+                </a>
+            </div>
+        <?php } ?>
+
+    </div>
+</div>
+
+<style type="text/css">
+    <?php echo apply_filters( 'auth0_login_css', '' ); ?>
+    <?php echo $auth0_options->get( 'custom_css' ); ?>
+</style>
+
+<?php if ( $custom_js = $auth0_options->get( 'custom_js' ) ) : ?>
+<script type="text/javascript">
+document.addEventListener("DOMContentLoaded", function() {
+    <?php echo $custom_js; ?>
+});
+</script>
+<?php endif; ?>