Wordpress-ios: Implement magic links for sign in

[frosty]

Currently in progress on feature/magic-sign-in:

• [x] Call API to send magic link email (when implemented)
• [x] Call API to perform magic link auth (when implemented)
• [x] Handle 2FA for non-magic link login (WP.com)
• [x] Handle 2FA for self-hosted login
• [x] Show errors
• [x] Add field validation
• [x] Add analytics
• [x] UI Polish
• [x] Helpshift integration
• [x] 1Password integration
• [x] Fix animations on iPad
• [x] Allow back navigation through steps
• [x] Fix text formatting on password cell when showing password
• [ ] Update sms / authenticator message.
• [x] Handle special usernames like "admin"

[mattmiklic]

Took a look through the branch in progress today and have some design feedback ready for you.

Buttons
These buttons are based on the standard compact button style in iOS (see purchase links in the app store, for example). This is smaller than the recommended minimum size of 44pt for tap targets but should work in this case because they're either secondary to the soft keyboard "Next" or "Go" buttons, or on a screen with no other nearby tap targets.

Magic Links Screens
Just some small adjustments needed to font sizes and margins here.

Bottom links
When there's more than one button at the bottom of the screen, here's how they should be spaced.

Toolbar
The help icon should sit 8pt from the right edge, mirroring the margin on the Back arrow in the left corner.

All of the above are mockups at 4x size, for reference.

I'll post some other issues I noticed in a second post.

[mattmiklic]

On 3.5" devices, the keyboard covers up the button. This is fairly minor since the button is also on the soft keyboard, but it would look nicer if the form could be moved up for this screen size when the keyboard is active.

The "Forgot Password?" link should read "Lost your password?" to match the phrasing we use on the web, and should be at the bottom of the screen, like other text links on these screens.

When logging in with 2FA, the helper text doesn't fit on the screen.

When using a username/password to log in, the "connecting" message appears on top of the lost password link.

When I logged in with a username and password; if I tap Back when I'm on the two-factor authentication screen and return to the login page, then tap "Sign in" again, a verification code is sent but I'm not taken to the verification screen, I just get an error message (Sorry, we can't log you in. Invalid verification code). No screenshot but I can help with reproducing if you have trouble.

[aerych]

Thanks Matt! I'll get these sorted. Also, very nice catch on the 2fa issue. I know what that is.

[mattmiklic]

Thanks @aerych -- by the way, I just updated the buttons mockup above. After playing with a mockup on a phone, I've increased the height of the buttons from 26px to 34px for a more comfortable tap target.

[aerych]

Thanks again @mattmiklic. I've updated the branch with the changes. A couple of things:

• A UILabel's intrinsic height is based off the line height for the text. This should be ~2pt top and bottom so I've accounted for this when adjusting the spacing between buttons and text, and the bottom buttons on the first screen. This was a best guess so let me know if we need to tweak further.
• I was able to tweak positioning so we're not cropping anything on any form on any screen from the 4s up. There were a couple of trade offs on the 4s:
  
  
  
  • The self-hosted form's Sign In button lies below the keyboard.
  
  
  • The 2fa form's SMS message is fully visible by reducing the spacing between it and the submit button. Its still sits _right_ on the keyboard but maybe its okay?
    
    
  
  

Let me know if there are any pixels still needing wrangling! :)

[mattmiklic]

Hey @aerych I've finally had a chance to look through this this morning. Here's what I see still outstanding:

• Placeholder text color should be greyLighten10.
• It looks like the text inputs have a corner radius, you can see a few pixels of blue encroaching into the corners of the text box when you zoom in:
  
• Could we move the logo/inputs/next button group up about 30px?
• Add self-hosted/create site/sign in with safari saved links should be 13pt in size.
• Magic link text should be centered instead of left-aligned:
  
• "Enter the code on your authenticator app" message should be center-aligned.
  
• The "enter the code" message doesn't make sense if I have set up 2FA to use text messages instead of an authenticator app by default. The message we use on WPcom is "Please check your text messages at the phone number ending with _1234_ and enter the verification code." If we could change that it would be nice, though probably would be its own issue.
• On the 4S, where the space for the verification code message is very tight, could we remove the W logo on that screen to give us more space to work with? It would be OK to remove the logo on that screen for all devices if need be. I think the logo on the initial username/password screen is where it's most important; once they're verifying their 2FA login I think the logo's no longer necessary.

[mattmiklic]

Bonus round: it'd be nice to update the OK button on the error screen to match the new button styles used on the login screen.

[aerych]

Thanks @mattmiklic :)

• Placeholder text color should be greyLighten10.

Done

• It looks like the text inputs have a corner radius, you can see a few pixels of blue encroaching into the corners of the text box when you zoom in

Keen eye right there. Fixed.

• Could we move the logo/inputs/next button group up about 30px?

Yep yep. They were offset by -32 px (half the height of the navbar + statusbar). Now they are offset -64px, the full amount.

• Add self-hosted/create site/sign in with safari saved links should be 13pt in size.

Oops! I'd changed this in the storyboards but forgot the buttons were attached to some code that was applying a different styling. Fixed.

• Magic link text should be centered instead of left-aligned

Done.

• "Enter the code on your authenticator app" message should be center-aligned

Done.

• The "enter the code" message doesn't make sense if I have set up 2FA to use text messages instead of an authenticator app by default.

This matches the previous message. I'm fine with making a change but I'll need to look into how we're retrieving the phone number. I'll add this as a later todo.

• On the 4S, where the space for the verification code message is very tight, could we remove the W logo on that screen to give us more space to work with? It would be OK to remove the logo on that screen for all devices if need be. I think the logo on the initial username/password screen is where it's most important; once they're verifying their 2FA login I think the logo's no longer necessary.

I dunno. That flow would be Email screen (shows logo) > username password screen (shows logo) > 2fa screen (wait, what happened to the logo?). The two previous screens set the expectation I think. It looks like our 4s user base is > 1% of our total users. That coupled with the tiny number of users taking advantage of 2fa makes me wonder if its fine the way it is?

• Bonus round: it'd be nice to update the OK button on the error screen to match the new button styles used on the login screen.

Done.

[mattmiklic]

Everything is looking good now!

This matches the previous message. I'm fine with making a change but I'll need to look into how we're retrieving the phone number. I'll add this as a later todo.

Yeah, this should probably be a freestanding issue, since you're not changing that message in this issue.

It looks like our 4s user base is > 1% of our total users. That coupled with the tiny number of users taking advantage of 2fa makes me wonder if its fine the way it is?

I have maybe an easier idea to try -- can you reduce the amount of spacing between the W logo and the first text field by ~15px? I just tried it in a mockup, and not only does it help the 4S look nicer, it makes the margin above the text fields and below it more equal.

On a 5S:

On a 4S:

I just realized while testing that the "Create an account" screen hasn't been updated with the new text colors and button styles.

[aerych]

can you reduce the amount of spacing between the W logo and the first text field by ~15px?

For sure!

I just realized while testing that the "Create an account" screen hasn't been updated with the new text colors and button styles.

Out of scope for this issue, but is next on deck along with the recently added screen for creating a new wpcom blog (accessed from the blog list's add (+) button).

[mattmiklic]

Perfect. :+1: from me on this one then!