Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve Setup Wizard #468

Merged
merged 4 commits into from
May 29, 2018
Merged

Improve Setup Wizard #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1b62a6
Setup wizard language and UX hazards
joshcanhelp May 20, 2018
79625e9
removing missing JS functions
joshcanhelp May 23, 2018
f7a1000
Fixing bugs and clearing up initial setup
joshcanhelp May 24, 2018
05f3941
PR review feedback
joshcanhelp May 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/css/initial-setup.css
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 12 additions & 1 deletion assets/css/initial-setup/main.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,17 @@
margin: 30px auto;
}

.modal-open {

.modal{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

background: rgba(0,0,0,0.5)
}

.modal-backdrop{
display: none
}
}

#wpwrap {
background-color: bgColor;

Expand Down Expand Up @@ -418,7 +429,7 @@
p {
font-size: 14px;
margin: 20px 10px;
height: 125px;
min-height: 6em;
}

img {
Expand Down
37 changes: 34 additions & 3 deletions assets/js/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' &&
Expand All @@ -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
Expand Down Expand Up @@ -61,7 +61,9 @@ jQuery(document).ready(function($) {
Admin settings tab switching
*/
var currentTab;
if ( localStorageAvailable() && window.localStorage.getItem( 'Auth0WPSettingsTab' ) ) {
if ( window.location.hash ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

currentTab = window.location.hash.replace( '#', '' );
} else if ( localStorageAvailable() && window.localStorage.getItem( 'Auth0WPSettingsTab' ) ) {
// Previous tab being used
currentTab = window.localStorage.getItem( 'Auth0WPSettingsTab' );
} else {
Expand All @@ -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 = '';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

var tabHref = $( this ).attr( 'aria-controls' );
$settingsForm.attr( 'data-tab-showing', tabHref );
if ( localStorageAvailable() ) {
Expand All @@ -103,6 +106,34 @@ jQuery(document).ready(function($) {
}, 'json');
} );

/*
Initial setup
*/
$('.js-a0-setup-input').keydown(function(e){
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

// Do not submit the form if the enter key is pressed.
if(13 === e.keyCode) {
e.preventDefault();
return false;
}
});

$('.js-a0-select-setup').click(function (e) {
e.preventDefault();
$('#profile-type').val($(this).attr('data-profile-type'));
$('#connectionSelectedModal').modal();
});

$('#manuallySetToken').click(function (e) {
e.preventDefault();
$('#enterTokenModal').modal();
$('#connectionSelectedModal').modal('hide');
});

$('#automaticSetup').click(function (e) {
e.preventDefault();
$('#profile-form').submit();
});

/**
* Can we use localStorage?
*
Expand Down
2 changes: 1 addition & 1 deletion lib/WP_Auth0_Embed_Widget.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing a cache breaker

wp_enqueue_style( 'media' );
wp_localize_script( 'wpa0_admin', 'wpa0', array(
'media_title' => __( 'Choose your icon', 'wp-auth0' ),
Expand Down
4 changes: 2 additions & 2 deletions lib/admin/WP_Auth0_Admin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,11 +215,11 @@ public function admin_enqueue() {
return;
}

if ( ! WP_Auth0::ready() ) {
if ( ! WP_Auth0::ready() && 'wpa0-setup' !== $_REQUEST['page'] ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exclude setup nag if we're on the setup page

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

if ( 'wpa0' === $wpa0_curr_page ) {
if ( in_array( $wpa0_curr_page, array( 'wpa0', 'wpa0-setup' ) ) ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Load admin JS if we're on the setup page

wp_enqueue_script( 'wpa0_admin', WPA0_PLUGIN_JS_URL . 'admin.js', array( 'jquery' ), WPA0_VERSION );
wp_localize_script(
'wpa0_admin', 'wpa0', array(
Expand Down
1 change: 1 addition & 0 deletions lib/admin/WP_Auth0_Admin_Basic.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ) .
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clarifying this based on the setup language

__( 'This is typically only used while testing the plugin initially', 'wp-auth0' )
);
}
Expand Down
8 changes: 4 additions & 4 deletions templates/initial-setup/admin-creation.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@
<?php } ?>


<form action="options.php" method="POST" onsubmit="onNext()">
<form action="options.php" method="POST">

<div class="row">
<div class="a0-admin-creation col-sm-6 col-xs-10">
<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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

</div>
</div>

<div class="a0-buttons">
<input type="hidden" name="action" value="wpauth0_callback_step3_social" />
<input type="submit" class="a0-button primary" value="Submit" />
<a onclick="onSkip()" href="<?php echo admin_url( 'admin.php?page=wpa0-setup&step=4&profile=social' ); ?>"class="a0-button link"><?php _e( "Skip this step", "wp-auth0" ); ?></a>
<a href="<?php echo admin_url( 'admin.php?page=wpa0-setup&step=4&profile=social' ); ?>"class="a0-button link"><?php _e( "Skip this step", "wp-auth0" ); ?></a>
</div>

</form>
Expand Down
129 changes: 54 additions & 75 deletions templates/initial-setup/connection_profile.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,36 @@

<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 name/password - or use their employee credentials through an enterprise connection. Use either or both, and you'll increase your WordPress site's security and gather data about your visitors. For more information and help on the Auth0 WordPress plugin please visit", "wp-auth0" ); ?> <a href="https://auth0.com/docs/cms" target="_blank">our help documentation</a> </p>
<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 _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">
<form action="options.php" method="POST" id="profile-form">
Expand All @@ -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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


<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="Standard" name="type" data-profile-type="social" class="a0-button primary js-a0-select-setup"/>
</div>
</div>
</div>
Expand All @@ -40,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" data-profile-type="enterprise" name="type" class="a0-button primary js-a0-select-setup"/>
</div>
</div>
</div>
Expand All @@ -57,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="#">Automatic setup</a>
<h4><?php _e( 'Standard Setup', 'wp-auth0' ) ?></h4>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<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>
Expand All @@ -84,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" />
<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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setup process to create an Application and a DB connection

<?php _e( ' and paste it here:', 'wp-auth0' ); ?>
</p>
<input type="text" name="apitoken" autocomplete="off" />
<input type="password" name="apitoken" class="js-a0-setup-input" autocomplete="off" required>
<p>
<small>
Scopes required:
Expand All @@ -125,51 +150,5 @@
</form>
</div>

<div class="a0-message a0-tip row">
<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.' ); ?>
</div>

</div>
</div>


<script type="text/javascript">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

var with_token = false;

var force_automatic = false;
var force_manual = false;

document.addEventListener("DOMContentLoaded", function() {
var url = 'https://sandbox.it.auth0.com/api/run/wptest/wp-auth0-ping?domain=<?php echo urlencode( get_bloginfo( 'url' ) ); ?>';

jQuery.ajax(url).done(function(response) {
force_automatic = true;
});

});

jQuery('.profile .a0-button').click(function(e){
e.preventDefault();
jQuery('#profile-type').val(jQuery(this).val());

if (force_automatic && !force_manual) {
jQuery('.a0-button.submit').click();
} else if (force_manual && !force_automatic) {
jQuery('#manuallySetToken').click();
} else {
jQuery('#connectionSelectedModal').modal();
}

return false;
});
jQuery('#manuallySetToken').click(function(e){
e.preventDefault();
with_token = true;
jQuery('#enterTokenModal').modal();
jQuery('#connectionSelectedModal').modal('hide');
return false;
});
</script>
10 changes: 7 additions & 3 deletions templates/initial-setup/connections.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,20 @@

<h1><?php _e( "Configure your social connections", "wp-auth0" ); ?></h1>

<p class="a0-step-text"><?php _e( "If your WordPress site's visitors already have social network accounts, they can access your site with their existing credentials, or they can set up a username/password combination safeguarded by Auth0's password complexity policies and brute force protection. To configure your connections, you'll use the Auth0 Dashboard.", "wp-auth0" ); ?></p>
<p class="a0-step-text"><?php _e( "If your site visitors already have social network accounts, they can authenticate using their existing credentials, or they can set up a username and password combination safeguarded by Auth0's password policies and brute force protection. To configure these connections, use the Auth0 Dashboard button below.", "wp-auth0" ); ?></p>

<div class="a0-separator"></div>

</div>

<div class="row">
<div class="a0-buttons">
<a onclick="gotodashboard()" href="https://manage.auth0.com/#/clients/<?php echo $client_id; ?>/connections" class="a0-button primary" target="_blank"><?php _e( "GO TO DASHBOARD", "wp-auth0" ); ?></a>
<a onclick="onNext()" 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>

Expand Down
Loading