Improve readability of wp login dialog


silversword

Well-known member
Mar 21, 2019
46
9
Is there a way that we can clean the login dialog up for WP sites?

It's quite confusing as it is. Maybe this is a limitation of the WP login dialog and where you're allowed to inject customization?

2020-01-10 08_28_57-wp sqrl dialogs.png
 
  • Like
Reactions: MossyPaws

Dror Harari

Active member
Aug 10, 2019
26
6
The proposed arrangement is far better. The only thing that I find still imbalanced is that the blue LOG IN rectangle at the bottom side draws one's attention from the equivalent SQL option. You need to give the SQRL portion a similar visual prominence..
 
  • Like
Reactions: Dave

kalaspuffar

Well-known member
May 19, 2018
296
106
Sweden
coderinsights.com
Hi @silversword

Great suggestion, would be awesome if WordPress had callbacks that made that arrangement possible.

Have not checked the latest version but the old version put things where they are located today :)

I'm not keen on writing a custom login page as that would hinder modification from third parties.

Best regards
Daniel
 

silversword

Well-known member
Mar 21, 2019
46
9
@kalaspuffar
...so can't put content above the form, or below the default submit button. Gotcha.

What about:
  1. All SQL content in a single table with single cell. Border=1
  2. Change "Sign in with SQRL" from a button (that has the same exact style as the login button) to a link. Put it right above "Will look for QR login in x"

That should give enough visual differentiation.

I've tried to look at the github code, but it wasn't obvious what/where that is built from (sqrl-login.php and where in there - or the .css?). If you can point me in the right direction I might be able to take a swing at a pull request (only been able to do it once). :)
 

kalaspuffar

Well-known member
May 19, 2018
296
106
Sweden
coderinsights.com
Hi @silversword

Sounds great. In the main file sqrl-login.php at the bottom of add_to_login_form you can find the form.

There might be some classes in style.css that we use otherwise we reuse classes from WordPress.

Best regards
Daniel
 

silversword

Well-known member
Mar 21, 2019
46
9
well...a bit of an adventure. Searches for "<tr" and "class=" may help others on similar hunts :)

I think the relevant code is
thru line 573


How about this?
Code:
<div class="sqrl-login-wrapper">
            <table class="form-table"
                border: 1px solid black;>
                    <tr>
                        <td>
                            <div class="sqrl-login-row">
                                <div id="sqrl-qrcode"></div>
                                <div><?php echo $qrcode_label; ?></div>
                            </div>
                            <div class="sqrl-login-row">
                                <span id="reloadDisplay"></span>
                            </div>
                            <div class="sqrl-login-row">
                                <a id="sqrl"
                                    href="<?php echo $sqrl_url; ?>" onclick="sqrlLinkClick(this);return true;"
                                    encoded-sqrl-url="<?php echo $this->base64url_encode( $sqrl_url ); ?>"
                                    tabindex="-1"
                                >Sign in with SQRL
                                </a>
                            </div>
                            <div class="sqrl-login-row">
                                <a href="https://play.google.com/store/apps/details?id=org.ea.sqrl">
                                    <img src="<?php echo plugins_url( 'images/en_badge_web_generic.png', __FILE__ ); ?>" alt="Get it on Google Play" height="60" />
                                </a>
                                <a href="https://www.grc.com/files/sqrl.exe">
                                    <img src="<?php echo plugins_url( 'images/microsoft.png', __FILE__ ); ?>" alt="Get it for Windows" height="42" />
                                </a>
                            </div>
                        </td>
                    </tr>
            </table>
        </div>
I wish I knew how to live edit the page so I could see/check it's formatting on the fly.
 

silversword

Well-known member
Mar 21, 2019
46
9
Hi @silversword

Well, linode is pretty cheap

After that you have a web editor to update the code live :)
Oh, I have hosting servers already...it's the modifying the .php code, and then seeing it rendered, then getting the formatting right, and testing for multiple layouts. I know there's a lot of power in the developer tools of chrome, but reversing that back into the .php is 3 extra steps of rebuilding...and I'm not a developer. I read an HTML4 book about 20 years ago, and just poke at minor edits intermittently ;)

Can you test that code in the plugin, does it look good or should I still try and do the github pull. I don't think I have the centering right on the "Sign in with SQRL" link right now...thanks!
 

silversword

Well-known member
Mar 21, 2019
46
9
...ok, I feel a little dumb.

PSA for everyone else: Did you know Wordpress has a built in Plugin Editor?

2020-01-22 08_41_23-Window.png
 

Genghes

Member
May 16, 2019
6
3
If it is only to add a border, just edit the style.css file.
Change the sqrl-login-wrapper class

Example dotted border (Added padding-top to lift the border from the button):

.sqrl-login-wrapper {
padding-bottom: 10px;
border-style: dotted;
padding-top: 10px;
}
 
  • Like
Reactions: silversword

brianoflondon

Well-known member
Nov 22, 2018
120
14
Have you got some CSS files or changes I can test on my site by manually editing? Are these being pushed into the git repository?
 

silversword

Well-known member
Mar 21, 2019
46
9
Have you got some CSS files or changes I can test on my site by manually editing? Are these being pushed into the git repository?
I wasn't going to try pushing into the git repo till I had a good improvement ready.

I'm just installing the plugin into my site and using the build in wordpress plugin editor to change the php/css to test items.

PM me if you have questions on how to do that.

Hi @silversword
I was more thinking of the space between elements and elements overflowing as you can see in the supplied image.
I'll try some more tweaks. You prefer color gradient or horizontal line as divider?
 

silversword

Well-known member
Mar 21, 2019
46
9
Hey @kalaspuffar

Ok, so now I know what you're focusing on. It feels very kludgy...but had already used the trick some other places so figured I'd try and make it more consistent on all the spaces. This trick was required because of all the interactions of css properties of the multiple mixed object types and padding properties.

The space between WP's bottom of the ID form field and the top of the "Password" word look to be 23px in height when measuring using mouse cursor position on chrome on a win PC (no measurement testing using zoom factors/firefox/opera/brave/ie/mobile android or iOS versions of the same etc). I believe that's what you're referring to so that's what I tried to replicate.

I use this, which is a 1px x 1px transparent png base64 encoded and stretched using custom heights per space:

Code:
<div class="sqrl-login-row">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" height="24">
</div>
So you get this after you finish putting custom spacers everywhere:
2020-01-29 08_09_11-Window.png


If this is good....next step: github pull requests.... ;)
 
Last edited:
  • Like
Reactions: Genghes