Skip to content

Commit

Permalink
Settings page final UI/UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshcanhelp
joshcanhelp committed May 1, 2018
1 parent ad2705f commit f6853de
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 61 deletions.
2 changes: 1 addition & 1 deletion assets/css/initial-setup.css
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion assets/css/initial-setup/main.styl
View file
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
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
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
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
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>

0 comments on commit f6853de

Please sign in to comment.