Skip to content

Add option to enter custom CSS #21 #27

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

Merged
mgonto merged 1 commit into from
Oct 29, 2014
Merged

Add option to enter custom CSS #21 #27

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
8 changes: 3 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,11 @@ Under some situations, you may end up with a user with two accounts. **WordPres

### Can I customize the Login Widget?

You can style the login form by adding a filter like this
You can style the login form by adding your css on the "Customize the Login Widget CSS" Auth0 setting and the widget settings

add_filter( 'auth0_login_css', function() {
return "form a.a0-btn-small { background-color: red }";
} );
form a.a0-btn-small { background-color: red !important; }

The Login Widget is Open Source. For more information about it: https://github.com/auth0/widget
The Login Widget is Open Source. For more information about it: https://github.com/auth0/lock

### Can I access the user profile information?

Expand Down
3 changes: 3 additions & 0 deletions WP_Auth0.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,9 @@ public static function buildSettings($settings)
$options_obj['dict'] = $settings['dict'];
}
}
if (self::IsValid($settings,'custom_css')) {
$options_obj['customCSS'] = $settings['custom_css'];
}
if (self::IsValid($settings,'social_big_buttons')) {
$options_obj['socialBigButtons'] = self::GetBoolean($settings['social_big_buttons']);
}
Expand Down
7 changes: 7 additions & 0 deletions lib/WP_Auth0_Admin.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ public static function init_admin(){
array('id' => 'wpa0_social_big_buttons', 'name' => 'Show big social buttons', 'function' => 'render_social_big_buttons'),
array('id' => 'wpa0_icon_url', 'name' => 'Icon URL', 'function' => 'render_icon_url'),
array('id' => 'wpa0_gravatar', 'name' => 'Enable Gravatar integration', 'function' => 'render_gravatar'),
array('id' => 'wpa0_custom_css', 'name' => 'Customize the Login Widget CSS', 'function' => 'render_custom_css'),

));

Expand Down Expand Up @@ -131,6 +132,12 @@ public static function render_dict(){
echo '<br/><span class="description">' . __('This is the widget\'s dict param.', WPA0_LANG) . '<a target="_blank" href="https://github.com/auth0/lock/wiki/Auth0Lock-customization#dict-stringobject">' . __('More info', WPA0_LANG) . '</a></span>';
}

public static function render_custom_css(){
$v = WP_Auth0_Options::get( 'custom_css' );
echo '<textarea name="' . WP_Auth0_Options::OPTIONS_NAME . '[custom_css]" id="wpa0_custom_css">' . esc_attr( $v ) . '</textarea>';
echo '<br/><span class="description">' . __('This should be a valid CSS to customize the Auth0 login widget. ', WPA0_LANG) . '<a target="_blank" href="https://github.com/auth0/wp-auth0#can-i-customize-the-login-widget">' . __('More info', WPA0_LANG) . '</a></span>';
}

public static function render_username_style(){
$v = WP_Auth0_Options::get( 'username_style' );
echo '<input type="radio" name="' . WP_Auth0_Options::OPTIONS_NAME . '[username_style]" id="wpa0_username_style_email" value="email" ' . (esc_attr( $v ) == 'email' ? 'checked="true"' : '') . '"/>';
Expand Down
1 change: 1 addition & 0 deletions lib/WP_Auth0_Options.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ private static function defaults(){
'username_style' => 'email',
'extra_conf' => '',
'remember_last_login' => true,
'custom_css' => '',
'gravatar' => true,
);
}
Expand Down
8 changes: 3 additions & 5 deletions readme.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,13 +105,11 @@ Under some situations, you may end up with a user with two accounts. Wordpress a

= Can I customize the Login Widget? =

You can style the login form by adding a filter like this
You can style the login form by adding your css on the "Customize the Login Widget CSS" Auth0 setting and the widget settings

add_filter( 'auth0_login_css', function() {
return "form a.a0-btn-small { background-color: red }";
} );
form a.a0-btn-small { background-color: red !important; }

The Login Widget is Open Source. For more information about it: https://github.com/auth0/widget
The Login Widget is Open Source. For more information about it: https://github.com/auth0/lock

= Can I access the user profile information? =

Expand Down
13 changes: 13 additions & 0 deletions templates/a0-widget-setup-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
$dict = isset($instance[ 'dict' ]) ? $instance[ 'dict' ] : '';
$extra_conf = isset($instance[ 'extra_conf' ]) ? $instance[ 'extra_conf' ] : '';
$remember_last_login = isset($instance[ 'remember_last_login' ]) ? $instance[ 'remember_last_login' ] : '';
$custom_css = isset($instance[ 'custom_css' ]) ? $instance[ 'custom_css' ] : '';

?>

Expand Down Expand Up @@ -130,6 +131,18 @@ class="button-secondary"><?php echo _e( 'Choose Icon' ); ?></a>
</span>
</span>
</p>
<p>
<label for="<?php echo $this->get_field_id( 'extra_conf' ); ?>"><?php _e( 'Customize the Login Widget CSS:' ); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id( 'custom_css' ); ?>"
name="<?php echo $this->get_field_name( 'custom_css' ); ?>">
<?php echo esc_attr( $custom_css ); ?>
</textarea>
<br/><span class="description">
<?php echo __('This should be a valid CSS to customize the Auth0 login widget.', WPA0_LANG); ?>
<a target="_blank" href="https://github.com/auth0/wp-auth0#can-i-customize-the-login-widget"><?php echo __('More info', WPA0_LANG); ?></a>
</span>
</span>
</p>



Expand Down
55 changes: 31 additions & 24 deletions templates/auth0-login-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,42 @@
$stateObj = array("interim" => $interim_login, "uuid" =>uniqid());
$state = json_encode($stateObj);


$options_obj = WP_Auth0::buildSettings(WP_Auth0_Options::get_options());

$options_obj = array_merge( array(
"callbackURL" => site_url('/index.php?auth0=1'),
"authParams" => array("state" => $state),
), $options_obj );

if (isset($specialSettings)){
$options_obj = array_merge( $options_obj , $specialSettings );
}

if (!$showAsModal){
$options_obj['container'] = 'auth0-login-form';
}

if (!$allow_signup) {
$options_obj['disableSignupAction'] = true;
}
$options = json_encode($options_obj);

if(empty($client_id) || empty($domain)){ ?>

<p><?php _e('Auth0 Integration has not yet been set up! Please visit your Wordpress Auth0 settings and fill in the required settings.', WPA0_LANG); ?></p>

<?php } else { ?>

<?php if($options_obj['customCSS']) { ?>

<style type="text/css">
<?php echo $options_obj['customCSS'];?>
</style>

<?php } ?>


<div id="form-signin-wrapper" class="auth0-login">
<?php include 'error-msg.php'; ?>
<div class="form-signin">
Expand Down Expand Up @@ -72,30 +103,6 @@

var lock = new Auth0Lock('<?php echo $client_id; ?>', '<?php echo $domain; ?>');

<?php


$options_obj = WP_Auth0::buildSettings(WP_Auth0_Options::get_options());

$options_obj = array_merge( array(
"callbackURL" => site_url('/index.php?auth0=1'),
"authParams" => array("state" => $state),
), $options_obj );

if (isset($specialSettings)){
$options_obj = array_merge( $options_obj , $specialSettings );
}

if (!$showAsModal){
$options_obj['container'] = 'auth0-login-form';
}

if (!$allow_signup) {
$options_obj['disableSignupAction'] = true;
}

$options = json_encode($options_obj);
?>
function a0ShowLoginModal() {
var options = <?php echo $options; ?>;

Expand Down