Improve Setup Wizard #468

joshcanhelp · 2018-05-24T22:27:08Z

Fix language and translation throughout Setup Wizard
Fix Wrong z-index on modal error message in manual setup #252 double modal issue
Fix settings tab not looking for URL hash
Fix undefined JS functions in Setup Wizard
Fix setup prompt appearing in Setup Wizard
Remove automatic setup for public sites
Remove unused setup template
Change setup step 1 modal to explicitly describe what happens, required attribute
Move <script> tag JS to external file and load on Setup Wizard

Addresses #408

- Revise language throughout setup wizard - Stop forcing auto install - Do not show configuration nag on wizard page - Add `required` for various required form inputs - Add `password` input type where appropriate - Fix broken auto install button

joshcanhelp · 2018-05-25T16:21:57Z

assets/js/admin.js

@@ -61,7 +61,9 @@ jQuery(document).ready(function($) {
    Admin settings tab switching
     */
    var currentTab;
-    if ( localStorageAvailable() && window.localStorage.getItem( 'Auth0WPSettingsTab' ) ) {
+    if ( window.location.hash ) {


Use the hash if we have one so we're able to link to specific tabs in the settings panel

joshcanhelp · 2018-05-25T16:22:17Z

assets/js/admin.js

@@ -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 = '';


If we navigate to a new tab, remove the hash so we use localStorage

joshcanhelp · 2018-05-25T16:22:37Z

assets/js/admin.js

+    /*
+    Initial setup
+     */
+    $('.js-a0-setup-input').keydown(function(e){


Do not submit the form if we press enter (fixes #252)

joshcanhelp · 2018-05-25T16:23:00Z

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 );


Missing a cache breaker

joshcanhelp · 2018-05-25T16:23:14Z

lib/admin/WP_Auth0_Admin.php

@@ -215,11 +215,11 @@ public function admin_enqueue() {
 			return;
 		}

-		if ( ! WP_Auth0::ready() ) {
+		if ( ! WP_Auth0::ready() && 'wpa0-setup' !== $_REQUEST['page'] ) {


Exclude setup nag if we're on the setup page

joshcanhelp · 2018-05-25T16:23:23Z

lib/admin/WP_Auth0_Admin.php

 			add_action( 'admin_notices', array( $this, 'create_account_message' ) );
 		}

-		if ( 'wpa0' === $wpa0_curr_page ) {
+		if ( in_array( $wpa0_curr_page, array( 'wpa0', 'wpa0-setup' ) ) ) {


Load admin JS if we're on the setup page

joshcanhelp · 2018-05-25T16:23:42Z

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' ) .


Clarifying this based on the setup language

joshcanhelp · 2018-05-25T16:24:12Z

templates/initial-setup/admin-creation.php

-            <input type="text" id="admin-email" value="<?php echo $current_user->user_email; ?>" disabled />
-            <input type="password" id="admin-password" name="admin-password" placeholder="Password" value="" />
+            <input type="text" id="admin-email" value="<?php echo $current_user->user_email; ?>" disabled>
+            <input type="password" id="admin-password" name="admin-password" placeholder="Password" value="" required>


Don't let the form submit if we don't have a password

Just the password is not enough, but that's a beginning. What about email/username?

It uses the current admin email address, next line above.

joshcanhelp · 2018-05-25T16:25:00Z

templates/initial-setup/connection_profile.php

@@ -26,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>


"Social" was misleading here ... also includes Passwordless, DB, etc. Basically "non-Enterprise" and what folks usually want, so "Standard"

I'd double check the name and get a second opinion since this looks like a term you'd share among platforms and use on quickstarts.

joshcanhelp · 2018-05-25T16:25:42Z

templates/initial-setup/connection_profile.php

-              <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="#">Automatic setup</a>
+                  <h4><?php _e( 'Standard Setup', 'wp-auth0' ) ?></h4>


New modal language and prompts to clarify what the two options will do

Is this "standard" still talking about the 2 types of data-profile-type? if not, find a different word or clarify it.

joshcanhelp · 2018-05-25T16:26:47Z

templates/initial-setup/connection_profile.php

  </div>
 </div>
-
-
-<script type="text/javascript">


Removed the auto-setup here (was forcing a data migration which not all sites need) and moved the rest to assets/js/admin.js

joshcanhelp · 2018-05-25T16:27:09Z

templates/initial-setup/consent-disclaimer.php

@@ -1,36 +0,0 @@
-<div class="a0-wrap consent-disclaimer">


Unused template

joshcanhelp · 2018-05-25T16:29:20Z

@jeffreylees - Added you here for a review of the documentation that I changed. All in-line, let me know if it's hard to read or if you'd rather see it in-place on a demo site.

lbalmaceda

🔢

lbalmaceda · 2018-05-28T17:33:40Z

assets/css/initial-setup/main.styl

@@ -6,6 +6,17 @@
  margin: 30px auto;
 }

+.modal-open {
+
+  .modal{


Are you going to run the code beautifier now or in a separate PR?

There is no repo-wide beautifier yet. Coming in the next release.

lbalmaceda · 2018-05-28T17:39:35Z

assets/js/admin.js

+    Initial setup
+     */
+    $('.js-a0-setup-input').keydown(function(e){
+        if(13 === e.keyCode) {


13 would be "enter" key? add a comment for that, or use a constant.

lbalmaceda · 2018-05-28T17:42:13Z

assets/js/admin.js

+        e.preventDefault();
+        $('#enterTokenModal').modal();
+        $('#connectionSelectedModal').modal('hide');
+        return false;


On some languages at least, this boolean that you return is for "The event has already been handled". If that's the case, why are some returning it and some others not?

Legacy but I agree

lbalmaceda · 2018-05-28T17:46:25Z

templates/initial-setup/admin-creation.php

-            <input type="text" id="admin-email" value="<?php echo $current_user->user_email; ?>" disabled />
-            <input type="password" id="admin-password" name="admin-password" placeholder="Password" value="" />
+            <input type="text" id="admin-email" value="<?php echo $current_user->user_email; ?>" disabled>
+            <input type="password" id="admin-password" name="admin-password" placeholder="Password" value="" required>


Just the password is not enough, but that's a beginning. What about email/username?

lbalmaceda · 2018-05-28T17:50:43Z

templates/initial-setup/connection_profile.php

@@ -26,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>


I'd double check the name and get a second opinion since this looks like a term you'd share among platforms and use on quickstarts.

lbalmaceda · 2018-05-28T18:00:15Z

templates/initial-setup/connection_profile.php

-              <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="#">Automatic setup</a>
+                  <h4><?php _e( 'Standard Setup', 'wp-auth0' ) ?></h4>


Is this "standard" still talking about the 2 types of data-profile-type? if not, find a different word or clarify it.

lbalmaceda · 2018-05-28T18:01:29Z

templates/initial-setup/connection_profile.php

                  <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>


this won't last long (default expiration time). What do you need the token for?

Setup process to create an Application and a DB connection

lbalmaceda · 2018-05-28T18:03:59Z

templates/initial-setup/enterprise_connections.php

@@ -30,8 +30,8 @@
    </div>

    <div class="a0-buttons">
-      <a onclick="gotodashboard()" href="https://manage.auth0.com/#/clients/<?php echo WP_Auth0_Options::Instance()->get('client_id'); ?>/connections" class="a0-button primary" target="_blank"><?php _e( "GO TO DASHBOARD", "wp-auth0" ); ?></a>
-      <a onclick="next()" href="<?php echo admin_url( 'admin.php?page=wpa0-setup&step=4' ); ?>"class="a0-button link"><?php _e( "Skip this step", "wp-auth0" ); ?></a>
+      <a href="https://manage.auth0.com/#/clients/<?php echo WP_Auth0_Options::Instance()->get('client_id'); ?>/connections" class="a0-button primary" target="_blank"><?php _e( "GO TO DASHBOARD", "wp-auth0" ); ?></a>


fix the URL. clients -> applications

lbalmaceda

👍 waiting for @jeffreylees

joshcanhelp · 2018-05-29T17:07:07Z

👍 from docs in Slack for "Standard"

joshcanhelp added the work in progress label May 24, 2018

joshcanhelp added 2 commits May 25, 2018 09:11

Setup wizard language and UX hazards

a1b62a6

- Revise language throughout setup wizard - Stop forcing auto install - Do not show configuration nag on wizard page - Add `required` for various required form inputs - Add `password` input type where appropriate - Fix broken auto install button

removing missing JS functions

79625e9

joshcanhelp force-pushed the change-setup-wizard-display branch from 98628a0 to 7ee06d3 Compare May 25, 2018 16:11

joshcanhelp commented May 25, 2018

View reviewed changes

joshcanhelp added CH: Fixed and removed work in progress labels May 25, 2018

joshcanhelp added this to the 3.6.0 milestone May 25, 2018

joshcanhelp requested a review from jeffreylees May 25, 2018 16:28

joshcanhelp force-pushed the change-setup-wizard-display branch from 7ee06d3 to c7cb02e Compare May 25, 2018 21:46

Fixing bugs and clearing up initial setup

f7a1000

joshcanhelp force-pushed the change-setup-wizard-display branch from c7cb02e to f7a1000 Compare May 25, 2018 21:57

lbalmaceda reviewed May 28, 2018

View reviewed changes

PR review feedback

05f3941

lbalmaceda approved these changes May 29, 2018

View reviewed changes

joshcanhelp merged commit 49e9c52 into dev May 29, 2018

joshcanhelp deleted the change-setup-wizard-display branch May 29, 2018 17:07

joshcanhelp removed the Ready for Review label May 29, 2018

This was referenced May 29, 2018

Wrong z-index on modal error message in manual setup #252

Closed

Release 3.6.0 #475

Merged

github-actions bot locked as resolved and limited conversation to collaborators Sep 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Setup Wizard #468

Improve Setup Wizard #468

joshcanhelp commented May 24, 2018

joshcanhelp May 25, 2018

joshcanhelp May 25, 2018

joshcanhelp May 25, 2018

joshcanhelp May 25, 2018

joshcanhelp May 25, 2018

joshcanhelp May 25, 2018

joshcanhelp May 25, 2018

joshcanhelp May 25, 2018

lbalmaceda May 28, 2018

joshcanhelp May 29, 2018

joshcanhelp May 25, 2018

lbalmaceda May 28, 2018

joshcanhelp May 25, 2018

lbalmaceda May 28, 2018

joshcanhelp May 25, 2018

joshcanhelp May 25, 2018

joshcanhelp commented May 25, 2018

lbalmaceda left a comment

lbalmaceda May 28, 2018

joshcanhelp May 29, 2018

lbalmaceda May 28, 2018

lbalmaceda May 28, 2018

joshcanhelp May 29, 2018

lbalmaceda May 28, 2018

lbalmaceda May 28, 2018

lbalmaceda May 28, 2018

lbalmaceda May 28, 2018

joshcanhelp May 29, 2018

lbalmaceda May 28, 2018

lbalmaceda left a comment

joshcanhelp commented May 29, 2018

Improve Setup Wizard #468

Improve Setup Wizard #468

Conversation

joshcanhelp commented May 24, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joshcanhelp commented May 25, 2018

lbalmaceda left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lbalmaceda left a comment

Choose a reason for hiding this comment

joshcanhelp commented May 29, 2018