Code Monkey home page Code Monkey logo

modern-login's Introduction

Modern Login

Latest Stable Version Total Downloads

Here lives a simple mu-plugin to whitelabel and modernize wp-login.php. No admin panels, no bloat – just a simple filter to optionally customize the CSS properties with your color palette.

Screenshot

Requirements

Installation

Bedrock

Install via Composer:

$ composer require log1x/modern-login

Manual

Download the release .zip and install into wp-content/plugins.

Customization

To customize the color palette, simply pass an array containing one or more of the colors you would like to change to the login_color_palette filter:

add_filter('login_color_palette', function () {
    return [
        'brand' => '#0073aa',
        'trim' => '#181818',
        'trim-alt' => '#282828',
    ];
});

Text color will automatically be inverted to #fff or #111 determined by the relative luminance of the element's background color.

Changing the Logo

The logo uses the first letter of the login header text set by WordPress. You can customize this using the login_headertext filter:

/**
 * Change the WordPress login header to the blog name.
 *
 * @return string
 */
add_filter('login_headertext', function () {
    return get_bloginfo('name');
});

Development

Modern Login is built using TailwindCSS and compiled with Laravel Mix.

$ yarn

In order to ease development, Modern Login makes use of wp-env to quickly setup a WordPress instance with everything needed (this requires Docker).

$ npx wp-env start

In another terminal tab/window, you can start browser sync and webpack to watch for changes:

$ yarn start

You can test color values and other settings in tests/mu-plugins/mu.php.

Bug Reports

If you discover a bug in Modern Login, please open an issue.

Contributing

Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.

License

Modern Login is provided under the MIT License.

modern-login's People

Contributors

log1x avatar nlemoine avatar pablobh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

modern-login's Issues

When using a light color palette, input text is barely visible

Problem

If you use a light color palette, the text on the inputs is barely visible.

Example

Here is my current color palette:

add_filter('login_color_palette', function () {
    return [
        'brand' => '#f3f3f3',
        'trim' => '#9d402d',
        'trim-alt' => '#f3f3f3',
    ];
});

This is how it looks:
Screenshot from 2020-07-21 19-23-45

As you can see, the text from the inputs is really hard to read.

Possible solution

Have an additional variable we can setup named "text" or something like that and have the inputs text use them.

Additional info

I'm using the latest version of the plugin. I think this may be related to #1

Bonus track

I know this plugin is supposed to be as simple as possible, but would it be too much to ask to add another variable for the login button? As you can see from my screenshot, the login button doesn't looks like a button, maybe add a little bit of shadow?

Login Letter/Logo Spacing on Session Expiration

Problem

Noticed something super minor today but the login/logo letter is a little cramped when the admin session expires. This isn't apparent with the default Wordpress styles because the top modal bar is the same color as the iframed login background. By changing the background color with this package the spacing, or lack of, becomes apparent.

Examples

spacing_issue

wordpress_login

Steps to reproduce

  1. Login to the admin
  2. Delete domain cookies
  3. Wait for session expiration login modal to appear

Possible Solution

padding?

v2.0.0

This package is kind of silly but I do use it on all of my sites still and it needs some love in the near future.

I can probably get fancy with https://github.com/spatie/color as well as using Tailwind's CSS var placeholder stuff for handling alpha values.

I'd also like a bit better coverage this time around to account for screen's such as the admin email confirmation. Will also get something in for #11 and adding a little more control/customization.

Admin password reminder not visible

Problem

When a dark color is used for the trim value, the admin password reminder is eligible. Some details related to the admin password reminder can be found here.
This error occurs with version 1.0.5

Example

The markup for this form includes the following. This should include the class names needed to adjust the styles appropriately.

<form class="admin-email-confirm-form" name="admin-email-confirm-form"
  action="https://redacted/wp/wp-login.php?action=confirm_admin_email" method="post">
  <input type="hidden" id="confirm_admin_email_nonce" name="confirm_admin_email_nonce" value="4aa4746d3d" /><input
    type="hidden" name="_wp_http_referer"
    value="https://redacted%2Fwp%2Fwp-admin%2F&amp;action=confirm_admin_email&amp;wp_lang=en_US" />
  <input type="hidden" name="redirect_to" value="https://redacted/wp/wp-admin/" />

  <h1 class="admin-email__heading">
    Administration email verification </h1>
  <p class="admin-email__details">
    Please verify that the <strong>administration email</strong> for this website is still correct. <a
      href="https://wordpress.org/support/article/settings-general-screen/#email-address" rel="noopener noreferrer"
      target="_blank">Why is this important?<span class="screen-reader-text"> (opens in a new tab)</span></a> </p>
  <p class="admin-email__details">
    Current administration email: <strong>[email protected]</strong> </p>
  <p class="admin-email__details">
    This email may be different from your personal email address. </p>

  <div class="admin-email__actions">
    <div class="admin-email__actions-primary">
      <a class="button button-large"
        href="https://redacted/wp/wp-admin/options-general.php?highlight=confirm_admin_email">Update</a>
      <input type="submit" name="correct-admin-email" id="correct-admin-email"
        class="button button-primary button-large" value="The email is correct" />
    </div>
    <div class="admin-email__actions-secondary">
      <a
        href="https://redacted%2Fwp%2Fwp-admin%2F&#038;action=confirm_admin_email&#038;remind_me_later=c5834aa3ec">Remind
        me later</a>
    </div>
  </div>
</form>

Steps to reproduce

WordPress >=5.3 defaults to showing the reminder every 6 months when logging in to the admin. There does not appear to be a way to programmatically trigger the reminder. You can adjust the interval at which it appears with the admin_email_check_interval filter. The best chance at getting it to appear is to log into a site that you haven't recently.

Text color and removal of logo

Great little package, thanks for your work on it!

I saw that you've previously had the option to set text color, would it be possible to bring it back?
Would be cool to optionally disable the logo image altogether as well!

The design I'm going for is something like this:
Skärmavbild 2021-09-10 kl  11 59 09

"Back to Site" not showing

Problem

WP default login page has a link on the bottom that says: "← Back to Site Name" that is currently missing.

Example

This is the default login page:
Screen Shot 2021-03-23 at 2 01 46 PM

This is the login page while using this plugin:
Screen Shot 2021-03-23 at 2 02 03 PM

After inspecting the code I found a few things:

.login #login #backtoblog { 
    display: none;
}

.login #login a {
    /* color: #0073aa; */
    color: var(--login-brand,#0073aa);
}

So, the link is there but there are two situations:

  1. It has display:none;
  2. It is using the same color as the background, thus making it "invisible".

Possible solution

  1. Remove the display:none from the css.
  2. Change the color for the link

Additional info

This also happens with the privacy policy page link. Since it also uses the colors from .login #login a, this would also benefit from the fix described before.

Login button doesn't respect text color

Problem

When a light background (brand) color is used, the login button text is difficult to read.

Example

Applying a palette with the follow:

add_filter('login_color_palette', function () {
    return [
        'text' => '#999',
        'brand' => '#F0F0F4',
        'trim' => '#040437',
        'trim-alt' => '#fff',
    ];
});

will produce this result:

Screenshot 2020-02-06 16 47 46

Possible solution

Include styles so that the login button text respects the text palette value.

Registration

Hi,

Thanks for this great little plugin which provides login customization in no time!

There's a little issue with the registration form:

Capture d’écran 2020-09-15 à 10 49 15

Maybe it would be more secure to set a safer base text color?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.