Fixes #659 Adds a show password options for login #679

kushaldas · 2020-01-02T11:53:13Z

Description

Fixes #659

Test Plan

Checklist

If these changes modify code paths involving cryptography, the opening of files in VMs or network (via the RPC service) traffic, Qubes testing in the staging environment is required. For fine tuning of the graphical user interface, testing in any environment in Qubes is required. Please check as applicable:

I have tested these changes in the appropriate Qubes environment
I do not have an appropriate Qubes OS workstation set up (the reviewer will need to test these changes)
These changes should not need testing in Qubes

kushaldas · 2020-01-02T11:55:32Z

The ICONS in the default state looks horrible. Need tips from @ninavizz on how they should look like. We can then convert this into a complete widget which can be used in any other place too.

sssoleileraaa · 2020-01-02T19:54:08Z

You can update all the QLineEdit margins to 0px to get around this scaling issue:

securedrop-client/securedrop_client/gui/widgets.py

Lines 1314 to 1318 in 4d71556

    
               #login_form QLineEdit { 
        
                   border-radius: 0px; 
        
                   height: 30px; 
        
                   margin: 0px 0px 10px 0px; 
        
               }

Why is this happening?

Looks like Qt doesn't respect CSS margins when rendering icons in QLineEdit (I believe this is where the Qt code would need to be modified in order to check for margins and scale appropriately: https://code.woboq.org/qt5/qtbase/src/widgets/widgets/qlineedit_p.cpp.html#352)

I tested this by using their builtin clear textbox feature and you can see that it also looks large and pixelated when we use a QLineEdit margin that is non-zero:

If you update the QLineEdit margins to 0px then our textboxes will be closer together in the form so I suggest adding a spacer in between the widgets.

Also, if you want more control over the icon size, you will want to load a pixmap and scale it before adding it the icon. And for toggling, you might want to use our load_toggle_icon helper function.

In the end, I wouldn't be surprised if you choose to go down the path of creating a custom QLineEdit widget that adds a toggle svg label or push button, because you'll have more control over the look and feel.

kushaldas · 2020-01-03T11:11:33Z

@creviera I have added a new PasswordEdit widget, the load_toggle_icon did not work for me, I had to manually change the icon as required.

I have the svgs as provided by @ninavizz and when I tried to fix the aspect ratio issue, I broke it even more. I will learn from you how to fix this when you are online.

sssoleileraaa · 2020-01-03T17:16:25Z

It's looking better! This is where @ninavizz provides image inventory: freedomofpress/securedrop-ux#17 I just want to note that while you wait for up-to-date icons from nina, you can still work on scaling the icon within the textbox. If you replace the eye_visible.svg with send.svg or any other svg, for instance, you'll notice that they all are resized to fit within a square. If the aspect ratio isn't a square, that is, 1:1, it'll look incorrect. So either, nina needs to provide you with a 1:1 version of the eye icons (which still might appear too small) or you'll need to scale the icons to keep the current aspect ratio of the image. You can see SvgPushButton for an example of how to do this or perhaps you'll come up with another way.

kushaldas · 2020-01-13T07:00:25Z

The square size icons are fixing the issue. @creviera i tried with icons from another project of mine to verify (DEMO PURPOSE ONLY). Now, I will wait for @ninavizz :)

ninavizz · 2020-01-13T07:11:42Z

@kushaldas Definitely an improvement—however the icons are too stylistically different from all the others. The "x" slash is also far too subtle in the difference between the two, and the lightness of the stroke(s) w/ the reflection on the iris make them too fussy.

I'd prefer to keep with the ones I'd spec'd... what exactly do you need from me to "fix" the ones in the inventory? Are you using SVGs or PNGs? Do you basically need the same art, but with a white square behind it so that it registers a square aspect-ratio?

kushaldas · 2020-01-13T08:14:54Z

Do you basically need the same art, but with a white square behind it so that it registers a square aspect-ratio?

Yes, I need square SVGs for this.

ninavizz · 2020-01-16T08:24:27Z

Eye — Hidden

<?xml version="1.0" encoding="UTF-8"?>
<svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
    <title>Group 7</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0 0 19 0 19 17 0 17"></polygon>
    </defs>
    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Login-Active-First-Step" transform="translate(-1140.000000, -642.000000)">
            <g id="Group-7" transform="translate(1141.000000, 643.000000)">
                <rect id="Rectangle" stroke="#F4FDFF" x="0" y="0" width="21" height="21"></rect>
                <g id="Group-3" transform="translate(1.000000, 2.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Clip-2"></g>
                    <path d="M4.41318182,4.9002611 L5.92454545,6.4537859 C5.72590909,6.94203655 5.61363636,7.47467363 5.61363636,8.03394256 C5.61363636,10.2355091 7.35818182,12.0287206 9.5,12.0287206 C10.0440909,12.0287206 10.5622727,11.9139077 11.0286364,11.7091384 L11.875,12.5797041 C11.115,12.7921671 10.3204545,12.9164491 9.5,12.9164491 C6.22681818,12.9164491 3.30772727,11.0261793 1.88272727,8.03394256 C2.48727273,6.76449086 3.36818182,5.71697128 4.41318182,4.9002611 L4.41318182,4.9002611 Z M7.34954545,7.91853786 L9.60363636,10.2355091 C9.56909091,10.2443864 9.53454545,10.2532637 9.5,10.2532637 C8.30818182,10.2532637 7.34090909,9.25900783 7.34090909,8.03394256 C7.34090909,7.98955614 7.34954545,7.96292428 7.34954545,7.91853786 L7.34954545,7.91853786 Z M0.872272727,1.26057441 L3.18681818,3.63968668 C1.77909091,4.77597911 0.665,6.28511749 0,8.03394256 C1.49409091,11.9310705 5.18181818,14.691906 9.5,14.691906 C10.8127273,14.691906 12.0736364,14.4344648 13.2309091,13.9639687 L16.1845455,17 L17.4022727,15.7483029 L2.09,0 L0.872272727,1.26057441 Z M8.57590909,4.16344648 L10.3636364,6.00104439 C10.8559091,6.2229765 11.2531818,6.63133159 11.4690909,7.13733681 L13.2568182,8.97493473 C13.3253333,8.67310705 13.3777592,8.3535248 13.3777592,8.02506527 C13.3863636,5.82349869 11.6418182,4.03916449 9.5,4.03916449 C9.18045455,4.03916449 8.87818182,4.08355091 8.57590909,4.16344648 L8.57590909,4.16344648 Z M9.5,3.15143603 C12.7731818,3.15143603 15.6922727,5.04229765 17.1172727,8.03394256 C16.6077273,9.11697128 15.8909091,10.0490862 15.0359091,10.8042472 L16.2536364,12.0553525 C17.4540909,10.9634465 18.4040909,9.59693647 19,8.03394256 C17.5059091,4.13681462 13.8181818,1.37597911 9.5,1.37597911 C8.40318182,1.37597911 7.34954545,1.5535248 6.35636364,1.88198433 L7.78136364,3.34673629 C8.34272727,3.23133159 8.91272727,3.15143603 9.5,3.15143603 L9.5,3.15143603 Z" id="Fill-1" fill="#102781" mask="url(#mask-2)"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

Eye — Visible

<?xml version="1.0" encoding="UTF-8"?>
<svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
    <title>Group 7</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0 0.0004 20 0.0004 20 13.6364 0 13.6364"></polygon>
    </defs>
    <g id="Login" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Login-Active-First-Step" transform="translate(-1140.000000, -642.000000)">
            <g id="Group-7" transform="translate(1141.000000, 643.000000)">
                <rect id="Rectangle" stroke="#F4FDFF" x="0" y="0" width="21" height="21"></rect>
                <g id="Group-3" transform="translate(0.000000, 3.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Clip-2"></g>
                    <path d="M10,2.7274 C7.746,2.7274 5.909,4.5634 5.909,6.8184 C5.909,9.0734 7.746,10.9094 10,10.9094 C12.255,10.9094 14.091,9.0734 14.091,6.8184 C14.091,4.5634 12.255,2.7274 10,2.7274 M10,4.5454 C11.254,4.5454 12.272,5.5634 12.272,6.8184 C12.272,8.0724 11.254,9.0904 10,9.0904 C8.746,9.0904 7.727,8.0724 7.727,6.8184 C7.727,5.5634 8.746,4.5454 10,4.5454 M10,-0.0006 C5.455,-0.0006 1.573,2.8274 0,6.8184 C1.573,10.8094 5.455,13.6364 10,13.6364 C14.546,13.6364 18.428,10.8094 20,6.8184 C18.428,2.8274 14.546,-0.0006 10,-0.0006 M10,1.8184 C13.445,1.8184 16.519,3.7544 18.019,6.8184 C16.519,9.8814 13.445,11.8184 10,11.8184 C6.555,11.8184 3.482,9.8814 1.982,6.8184 C3.482,3.7544 6.555,1.8184 10,1.8184" id="Fill-1" fill="#162D84" mask="url(#mask-2)"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

@kushal, if there's any problem with these icons... they're from here, and are actually in a square aspect-ratio (tho black) in their OG form. I just colored and sized them, and put them on a square the same color as the text fields, in mine (above).

kushaldas · 2020-01-16T09:48:54Z

@ninavizz those are beautiful. Thank you :)

It loads icons to show/hidden the password entry.

kushaldas · 2020-01-16T09:54:51Z

ninavizz · 2020-01-16T18:38:22Z

Aaah, so lovely Kushal, thank u! :)

sssoleileraaa

lgtm!

kushaldas force-pushed the password_show_field branch from 221c633 to 6e39531 Compare January 2, 2020 11:53

emkll added the needs: ux review label Jan 2, 2020

kushaldas force-pushed the password_show_field branch from 6e39531 to 4f13dd3 Compare January 3, 2020 11:09

kushaldas force-pushed the password_show_field branch 2 times, most recently from a2fc708 to 97eed42 Compare January 3, 2020 11:33

Adds new PasswordEdit widget

4ebb106

It loads icons to show/hidden the password entry.

kushaldas force-pushed the password_show_field branch from 97eed42 to 4ebb106 Compare January 16, 2020 09:51

kushaldas marked this pull request as ready for review January 16, 2020 10:07

kushaldas requested review from sssoleileraaa and redshiftzero as code owners January 16, 2020 10:07

sssoleileraaa approved these changes Jan 16, 2020

View reviewed changes

sssoleileraaa merged commit 610e93a into master Jan 16, 2020

sssoleileraaa deleted the password_show_field branch January 16, 2020 18:38

sssoleileraaa mentioned this pull request Mar 16, 2020

Animate activestate on frameless dialog boxes. #940

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes #659 Adds a show password options for login #679

Fixes #659 Adds a show password options for login #679

kushaldas commented Jan 2, 2020

kushaldas commented Jan 2, 2020

sssoleileraaa commented Jan 2, 2020

kushaldas commented Jan 3, 2020

sssoleileraaa commented Jan 3, 2020

kushaldas commented Jan 13, 2020 •

edited

Loading

ninavizz commented Jan 13, 2020 •

edited

Loading

kushaldas commented Jan 13, 2020 •

edited by eloquence

Loading

ninavizz commented Jan 16, 2020

kushaldas commented Jan 16, 2020

kushaldas commented Jan 16, 2020

ninavizz commented Jan 16, 2020

sssoleileraaa left a comment

Fixes #659 Adds a show password options for login #679

Fixes #659 Adds a show password options for login #679

Conversation

kushaldas commented Jan 2, 2020

Description

Test Plan

Checklist

kushaldas commented Jan 2, 2020

sssoleileraaa commented Jan 2, 2020

kushaldas commented Jan 3, 2020

sssoleileraaa commented Jan 3, 2020

kushaldas commented Jan 13, 2020 • edited Loading

ninavizz commented Jan 13, 2020 • edited Loading

kushaldas commented Jan 13, 2020 • edited by eloquence Loading

ninavizz commented Jan 16, 2020

Eye — Hidden

Eye — Visible

kushaldas commented Jan 16, 2020

kushaldas commented Jan 16, 2020

ninavizz commented Jan 16, 2020

sssoleileraaa left a comment

Choose a reason for hiding this comment

kushaldas commented Jan 13, 2020 •

edited

Loading

ninavizz commented Jan 13, 2020 •

edited

Loading

kushaldas commented Jan 13, 2020 •

edited by eloquence

Loading