Show "keep me logged in" checkbox for users on login page without Javascript
Closed, ResolvedPublic1 Estimated Story Points

Assigned To
Authored By
Jdlrobson
Jun 11 2018, 8:27 PM
Referenced Files
F23063894: image.png
Jun 28 2018, 11:52 PM
F23063902: image.png
Jun 28 2018, 11:52 PM
F23063898: image.png
Jun 28 2018, 11:52 PM
F23063904: image.png
Jun 28 2018, 11:52 PM
F23063915: image.png
Jun 28 2018, 11:52 PM
F23063896: image.png
Jun 28 2018, 11:52 PM
F22267262: Artboard.jpg
Jun 15 2018, 7:55 PM
F22034573: Screen Shot 2018-06-11 at 1.24.36 PM.png
Jun 11 2018, 8:28 PM
Tokens
"Piece of Eight" token, awarded by RandomDSdevel.

Description

From: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Mobile_site_broke_on_Windows_Phone

When a user has JavaScript enabled on a mobile device with a display less than 721px wide, we automatically mark them as "keep me logged in" and don't give them the option to untick the box.

Although this is convenient for those users with JavaScript, users without JavaScript get an annoying experience (see T196893)

Acceptance criteria

  • If JS is disabled I see the remember me checkbox and I can select or unselect it
  • If JS is enabled I do not see the remember me checkbox and it is ticked by default.

Note: Logging out will forgot users across all devices so provided a user remembers to logout there should be no need to check this checkbox.

Design

  • 10px padding/margin between the checkbox and password field
  • 23px padding/margin between the checkbox and the login button

Artboard.jpg (556×512 px, 134 KB)

QA step

Goal 1: Check no change in behaviour for modern devices

Goal 2: Check new behaviour in old devices
We should test in as many versions of Opera Mini as possible (can we test version4?) as well as other grade C browsers such as Windows Phones, Android 2.

Event Timeline

Jdlrobson added a subscriber: ovasileva.

I believe Windows Phone 8 has the user agent "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)" which makes it a grade B/C browser. Traffic is too low on this browser to upgrade it to a grade A browser.

Because JavaScript does not run, there's no way for us to automatically mark the user to have their login remembered. It's trivial for us to restore the checkbox for non-logged in users like so:

Screen Shot 2018-06-11 at 1.24.36 PM.png (556×392 px, 40 KB)

@ovasileva sound good?

I believe Windows Phone 8 has the user agent "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)" which makes it a grade B/C browser. Traffic is too low on this browser to upgrade it to a grade A browser.

Because JavaScript does not run, there's no way for us to automatically mark the user to have their login remembered. It's trivial for us to restore the checkbox for non-logged in users like so:

Screen Shot 2018-06-11 at 1.24.36 PM.png (556×392 px, 40 KB)

@ovasileva sound good?

Sounds good to me.

ovasileva triaged this task as Medium priority.Jun 12 2018, 3:46 PM

@Jdlrobson

  • 10px padding/margin between the checkbox and password field
  • 23px padding/margin between the checkbox and the login button

Artboard.jpg (556×512 px, 134 KB)

Jdlrobson set the point value for this task to 1.Jun 19 2018, 4:18 PM
Jdlrobson added a subscriber: Volker_E.

As always with a 1 pointer I've found a snag.
@Volker_E looks like mediawiki.ui.checkbox does not style non-JavaScript clients.

Looking at CSS inside core this code was introduced in I0b9691daa61fddb484b6adff759f4413d201ae03 sadly without a corresponding task

// We also disable this styling on JavaScript disabled devices. This fixes the issue with
// Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
// more capable browsers with unstyled checkboxes.
.client-js .mw-ui-checkbox:not( #noop ) {

I'm tempted to drop support for older devices Opera Mini provided we can verify this works correctly on the latest version.

Change 441148 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Checkboxes should be styled on non-JS browsers

https://gerrit.wikimedia.org/r/441148

Change 441246 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Allow non-js users to remember login on grade C browsers

https://gerrit.wikimedia.org/r/441246

@Jdlrobson, this change looks good to me but has a big impact. Is there any deprecation policy we need to go through or is this acceptable to push through based on our compatibility matrix alone?

Change 441148 merged by jenkins-bot:
[mediawiki/core@master] Checkboxes should be styled on non-JS browsers

https://gerrit.wikimedia.org/r/441148

Change 441246 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Allow non-js users to remember login on grade C browsers

https://gerrit.wikimedia.org/r/441246

Passing this over to Anthony. As far as I can tell this is all set, but I don't have the necessary devices to test this properly.

Looks good to me on Beta. Tried a bunch of opera mini versions. It looks like Android 4.x with opera mini 28 (or older) shows the checkbox as expected. Newer versions of Opera mini (version 30+) show no checkbox even on older android, but I think that's ok too.
w/o checkbox

image.png (667×376 px, 83 KB)

image.png (984×540 px, 151 KB)

image.png (1×720 px, 196 KB)

w/ checkbox
image.png (1×1 px, 174 KB)

image.png (984×540 px, 144 KB)

image.png (984×540 px, 151 KB)

Looks good! Also tested in latest Opera Mini with extreme mode - checkbox appears (@ABorbaWMF - extreme mode turns javascript off for Opera mini)

Vvjjkkii renamed this task from Show "keep me logged in" checkbox for users on login page without Javascript to k8aaaaaaaa.Jul 1 2018, 1:04 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed ABorbaWMF as the assignee of this task.
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed the point value for this task.
Vvjjkkii edited subscribers, added: ABorbaWMF; removed: gerritbot, Aklapper.
CommunityTechBot renamed this task from k8aaaaaaaa to Show "keep me logged in" checkbox for users on login page without Javascript.Jul 2 2018, 9:18 AM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to ABorbaWMF.
CommunityTechBot lowered the priority of this task from High to Medium.
CommunityTechBot set the point value for this task to 1.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot edited subscribers, added: gerritbot, Aklapper; removed: ABorbaWMF.

What is the goal here? If you just want to hide the keep logged in checkbox, that should be done in a way that works with or without Javascript (probably by checking and hiding it in the AuthChangeFormFields hook).