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

Fix help tab text and settings tab UX #452

Merged
merged 1 commit into from
May 1, 2018
Merged

Fix help tab text and settings tab UX #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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.

5 changes: 4 additions & 1 deletion assets/css/initial-setup/main.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import 'partials/_fonts';
@import 'partials/_colors';
@import 'partials/_logos';

#lock-wrapper {
width: 300px;
Expand Down Expand Up @@ -184,6 +183,10 @@
.a0-step-text {
margin:30px 0 0;
}

.a0-settings-form[data-tab-showing="help"] #submit {
display: none;
}

.a0-button, #wpa0_choose_icon {

Expand Down
45 changes: 35 additions & 10 deletions assets/js/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ jQuery(document).ready(function($) {
event.preventDefault();
//If the frame already exists, reopen it
if (typeof(media_frame)!=="undefined")
media_frame.close();
media_frame.close();

var related_control_id = 'wpa0_icon_url';
if (typeof($(this).attr('related')) != 'undefined' &&
Expand Down Expand Up @@ -57,17 +57,37 @@ jQuery(document).ready(function($) {
}
});

// Persistent admin tab
if ( localStorageAvailable() ) {
window.location.hash = window.localStorage.getItem( 'Auth0WPSettingsTab' );
$( '.nav-tabs [role="tab"]' ).click( function () {
var tabHref = $( this ).attr( 'href' );
window.location.hash = tabHref;
window.localStorage.setItem( 'Auth0WPSettingsTab', tabHref );
} );
/*
Admin settings tab switching
*/
var currentTab;
if ( localStorageAvailable() && window.localStorage.getItem( 'Auth0WPSettingsTab' ) ) {
// Previous tab being used
currentTab = window.localStorage.getItem( 'Auth0WPSettingsTab' );
} else {
// Default tab if no saved tab was found
currentTab = 'features';
}

// Clear cache button on Basic settings page
// Uses the Bootstrap tab plugin
$('#tab-' + currentTab).tab('show');

// Controls whether the submit button is showing or not
var $settingsForm = $( '#js-a0-settings-form' );
$settingsForm.attr( 'data-tab-showing', currentTab );

// Set the tab showing on the form and persist the tab
$( '.nav-tabs [role="tab"]' ).click( function () {
var tabHref = $( this ).attr( 'aria-controls' );
$settingsForm.attr( 'data-tab-showing', tabHref );
if ( localStorageAvailable() ) {
window.localStorage.setItem( 'Auth0WPSettingsTab', tabHref );
}
} );

/*
Clear cache button on Basic settings page
*/
var deleteCacheId = 'auth0_delete_cache_transient';
var $deleteCacheButton = $( '#' + deleteCacheId );
$deleteCacheButton.click( function(e) {
Expand All @@ -83,6 +103,11 @@ jQuery(document).ready(function($) {
}, 'json');
} );

/**
* Can we use localStorage?
*
* @returns {boolean}
*/
function localStorageAvailable() {
try {
var x = '__Auth0_localStorage_assertion__';
Expand Down
2 changes: 1 addition & 1 deletion templates/export-users.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<h1><?php _e( 'Export Auth0 Users', 'wp-auth0' ); ?></h1>

<form action="options.php" method="post" onsubmit="return presubmit();">
<form action="options.php" method="post">
<input type="hidden" name="action" value="wpauth0_export_users" />
<p class="a0-step-text">Download all your user information in a CSV file for manual processing. The CSV will contain the users who logged in to this WordPress instance using Auth0.</p>

Expand Down
4 changes: 2 additions & 2 deletions templates/import_settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="import">

<form action="options.php" method="post" onsubmit="return presubmit_import();" enctype="multipart/form-data">
<form action="options.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="action" value="wpauth0_import_settings" />

<div id="upload-file">
Expand All @@ -39,7 +39,7 @@
</div>
<div role="tabpanel" class="tab-pane" id="export">

<form action="options.php" method="post" onsubmit="return presubmit_export();">
<form action="options.php" method="post">
<input type="hidden" name="action" value="wpauth0_export_settings" />

<p class="a0-step-text top-margin">Download the entire plugin configuration.</p>
Expand Down
71 changes: 25 additions & 46 deletions templates/settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,50 +19,46 @@
<?php settings_errors(); ?>

<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a id="tab-basic" href="#basic" aria-controls="basic" role="tab" data-toggle="tab">Basic</a></li>
<li role="presentation"><a id="tab-features" href="#features" aria-controls="features" role="tab" data-toggle="tab">Features</a></li>
<li role="presentation"><a id="tab-appearance" href="#appearance" aria-controls="appearance" role="tab" data-toggle="tab">Appearance</a></li>
<li role="presentation"><a id="tab-advanced" href="#advanced" aria-controls="advanced" role="tab" data-toggle="tab">Advanced</a></li>
<li role="presentation"><a id="tab-help" href="#help" aria-controls="help" role="tab" data-toggle="tab">Help</a></li>
<?php foreach ( array( 'basic', 'features', 'appearance', 'advanced', 'help' ) as $tab ) : ?>
<li role="presentation"><a id="tab-<?php echo $tab ?>" href="#<?php echo $tab ?>" aria-controls="<?php
echo $tab ?>" role="tab" data-toggle="tab"><?php echo ucfirst( $tab ) ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<form action="options.php" method="post" onsubmit="return presubmit();">
<form action="options.php" method="post" id="js-a0-settings-form" class="a0-settings-form">
<?php settings_fields( WP_Auth0_Options::Instance()->get_options_name() . '_basic' ); ?>

<div class="tab-content">
<div role="tabpanel" class="tab-pane row" id="basic">
<?php do_settings_sections( WP_Auth0_Options::Instance()->get_options_name() . '_basic' ); ?>
</div>
<div role="tabpanel" class="tab-pane row active" id="features">
<?php do_settings_sections( WP_Auth0_Options::Instance()->get_options_name() . '_features' ); ?>
</div>
<div role="tabpanel" class="tab-pane row" id="appearance">
<?php do_settings_sections( WP_Auth0_Options::Instance()->get_options_name() . '_appearance' ); ?>
</div>
<div role="tabpanel" class="tab-pane row" id="advanced">
<?php do_settings_sections( WP_Auth0_Options::Instance()->get_options_name() . '_advanced' ); ?>
</div>
<div role="tabpanel" class="tab-pane row" id="help">
<?php foreach ( array( 'basic', 'features', 'appearance', 'advanced' ) as $tab ) : ?>
<div role="tabpanel" class="tab-pane row" id="<?php echo $tab ?>">
<?php do_settings_sections( WP_Auth0_Options::Instance()->get_options_name() . '_' . $tab ); ?>
</div>
<?php endforeach; ?>

<p>Thank you for installing the <a href="https://auth0.com/wordpress">Auth0 WordPress Plugin</a>.</p>
<div role="tabpanel" class="tab-pane row" id="help">

<p>This plugin allows you to connect your WP instance to many login solutions. If you have many users commenting or buying products from you, then our social connectors will help. They will let users log in using things like Twitter, Google or Facebook. We also support many enterprise login systems like Active Directory.</p>
<p>Thank you for installing <a href="https://auth0.com/wordpress" target="_blank">Login by Auth0</a>! Auth0 is a powerful identity solution that that secures billions of logins every month. In addition to the options here, there are many more features available in the <a href="https://manage.auth0.com" target="_blank">Auth0 dashboard</a>, including:</p>

<p>Auth0 is a powerful solution and besides the options you see here on your WordPress instance, there are many more things you can do on your <a href="https://manage.auth0.com">Auth0 dashboard</a>. The dashboard allows you to enable more authentication providers and activate advanced features like running javascript snippets on a login event to do things like record activity or send an email. But don't worry, if you just want to enable social logins for your site, you can safely stay within the options here.</p>
<ul class="list">
<li>Many social and enterprise <a href="https://auth0.com/docs/identityproviders" target="_blank">login connections</a></li>
<li><a href="https://auth0.com/docs/connections/passwordless" target="_blank">Passwordless login connections</a></li>
<li><a href="https://auth0.com/docs/anomaly-detection" target="_blank">Anomaly detection</a></li>
<li>Profile enrichment, app integrations, and other custom user management tasks using <a href="https://auth0.com/docs/rules/current" target="_blank">Rules</a></li>
</ul>

<p>If you're having any issues - please contact us. We have a variety of channels to help you:<p>
<p>If you have any issues or questions, we provide a variety of channels to assist:<p>

<ul class="list">
<li>We have a lot of documentation at <a href="https://auth0.com/docs">our help website</a></li>
<li>Our <a href="https://ask.auth0.com">forums</a> where you can look the discussion threads or open a new one asking for help.</li>
<li>Our <a href="https://support.auth0.com">support center</a> to open a support ticket.</li>
<li>For more information on Auth0, see <a href="https://auth0.com/blog">our blog</a></li>
<li>If you're setting up the plugin for the first time or having issues after an upgrade, please review the <a href="https://auth0.com/docs/cms/wordpress/configuration" target="_blank">plugin configuration page</a> to make sure your Application is setup correctly.</li>
<li>If you have questions about how to use Auth0 or the plugin, please <a href="https://community.auth0.com/tags/wordpress" target="_blank">search our community site</a> and create a post (tagged "WordPress") if you don't find what you're looking for.</li>
<li>If you find a bug in the plugin code, <a href="https://github.com/auth0/wp-auth0/issues" target="_blank">submit an issue</a> or <a href="https://github.com/auth0/wp-auth0/pulls" target="_blank">create a pull request</a> on Github.</li>
<li>You can see additional documentation and answers on our <a href="https://support.auth0.com/" target="_blank">support site</a>. Customers on a paid Auth0 plan can submit trouble tickets for a quick response.</li>
</ul>

<div class="a0-feedback">
<div>

<h2>Please give us your feedback, how is the Auth0 WP plugin working for you?</h2>
<h2>How is the Auth0 WP plugin working for you?</h2>

<div>
<input type="radio" name="feedback_calification" class="feedback_calification" id="feedback_calification_1" value="1" />
Expand All @@ -86,7 +82,7 @@

<div>
<h2>What one thing would you change?</h2>
<textarea id="feedback_text" placeholder="Please feel free to be as brief or detailed as you like"></textarea>
<textarea id="feedback_text" placeholder="Be as brief or detailed as you like!"></textarea>
</div>

<div>
Expand All @@ -111,15 +107,6 @@
<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {
var tab = (window.location.hash || 'features').replace('#','');

checkTab(tab);

jQuery('#tab-'+tab).tab('show');

jQuery('.nav-tabs a').click(function (e) {
checkTab(jQuery(this).attr('aria-controls'));
});

var q = async.queue(function (task, callback) {

Expand Down Expand Up @@ -179,12 +166,4 @@ function send_feedback() {
jQuery('.a0-feedback').html('<h2 class="message">Done! Thank you for your feedback.</h2>')
});
}

function checkTab(tab) {
if (tab == 'help') {
jQuery('#submit').hide();
} else {
jQuery('#submit').show();
}
}
</script>