Wordpress-android: Jetpack: Add Jetpack Security Settings

[tonyr59h]

• [x] Monitor uptime - #6273
• [x] Send Notification via e-mail - #6273
• [x] Send app Notification - #6273
• [x] Prevent brute force attacks - #6408
• [x] Whitelisted IP addresses - #6408
  ~- [ ] Spam filtering~ - Probably not implementing
• [x] Allow login with .com credentials - #6440
• [x] Match accounts using e-mail - #6440
• [x] Require 2FA - #6440
• [x] Learn More - #6553

Problems to address before merging:

• [x] Sanitize Whitelist IP's/ranges - #6571
• [x] Verify app update path
• [x] Nest views of nested preferences - #6571
• [x] Improve error handling - #6579

[tonyr59h]

My first thought as to where these settings should live is in the Site Settings screen. That's where it exists in Calypso at least.

Here's a quick shot of how it would look in the app. IMO that settings screen is crowded enough as it is and all these new toggles don't help. It'd be nice to convert it from a PreferenceScreen to a custom layout so we can use cards (a'la the new Post Settings), but that's certainly outside the scope of this issue.

@mattmiklic I'm going to need a bit of guidance on where to put these settings. Do you think they should live in the existing Site Settings screen? I'm thinking a separate row for Jetpack Security on the My Site tab might be better.

[maxme]

IMO that settings screen is crowded enough as it is and all these new toggles don't help.

Yes, there are too many options already. Can we add a new screen "Security Settings", like for "Discussion Settings"?

It'd be nice to convert it from a PreferenceScreen to a custom layout so we can use cards (a'la the new Post Settings), but that's certainly outside the scope of this issue.

I agree that would be nice and I also agree I don't think that's in the scope, there is a lot of work required for this for wpcom but also for wporg sites.

[mattmiklic]

Yes, there are too many options already. Can we add a new screen "Security Settings", like for "Discussion Settings"?

Yeah, I think it makes sense to treat this section similarly. I'm talking to @rickybanister about this tomorrow; it sounds like some of these settings may be changing in Calypso soon so I want to be sure we're designing with the latest changes in mind.

[tonyr59h]

Great, happy to move these into their own screen 👍

I've added a Jetpack section directly after the More row. Clicking it will load the preferences in it's own screen.

[mattmiklic]

The Jetpack section in the main list looks good. I talked to @rickybanister about the plans for this screen in Calypso, and we agreed that it made sense to focus on implementing what's there now first. A new "Backups and security scanning" section will be added to Calypso; I'm not sure what our plans are for implementing that in the apps yet.

Based on the current settings available in Calypso, I've mocked up what I think this should look like. It's pretty similar to what @tonyr59h has already posted, with a few differences.

• I've added a section for "whitelisted IP addresses" to the brute force protection section.
• I've edited the text of some labels to make them fit better on mobile.
• I haven't included the spam filtering section from Calypso. Because the main thing shown in Calypso is a status label and not an interactive setting, I'm not sure how we should treat this if we do want to include it. Do we need to show the API key setting in the apps @rickybanister?
• I've added a "Learn More" button to the WordPress.com login section (renamed from "sign in" in Calypso to align with our decision to standardize on "login" as the term used in the apps and Calypso). The button should link to https://jetpack.com/support/sso/ in the browser.
• The help text in the whitelisted IPs screen is pretty verbose. Maybe we should ask editorial for help with this message?

Any comments, questions, or concerns on this?

[tonyr59h]

Looks good! One question: Was Send notifications via WordPress.com notification left out intentionally?

[tonyr59h]

Here's an updated screenshot of the changes (minus Learn More and Whitelist summary):
EDIT: I just noticed the action bar title, that'll be changed soon 😉

[tonyr59h]

I'd also recommend we use existing infrastructure for the Whitelisted IP addresses settings. We have a Blacklist setting already in Discussion->More that behaves the same way.

[rickybanister]

A few small thoughts—

I do not think we need to offer the api keys here necessarily. Since you can't buy a plan in the apps it seems not very relevant and possibly just confusing to offer the ability to edit the API key here. I might be wrong, but it doesn't seem too important at this point.

Regarding the labels here, 'jetpack monitor' can go away and you can just move the 'monitor my site's uptime' up to being the label (unless you _have_ to have a section label that is not the toggle's label).

We have been 'debranding' the features of jetpack to just refer to them as what they do rather than invent names for them. Photon is now mostly referred to as 'speed up photos and videos' etc.

[mattmiklic]

Looks good! One question: Was Send notifications via WordPress.com notification left out intentionally?

Good question; I wasn't sure what this meant since it's not currently in the Calypso Jetpack security settings. I'm also curious about whether this is the place for it. All other notifications are handled, in Calypso and in the apps, under Me > Notification Settings. From there, they can opt-in to push notifications, in-app notifications, and email notifications. It seems like this should be in the same place, but maybe not since it's a notification that's dependent on the monitor setting being turned on. @rickybanister any thoughts on that?

Assuming it stays under Site Settings > Security, if this setting turns on push notifications, I'd change the label to Send push notifications. (if that's not what it does, let me know!)

[mattmiklic]

I'd also recommend we use existing infrastructure for the Whitelisted IP addresses settings. We have a Blacklist setting already in Discussion->More that behaves the same way.

Good call. Let's re-use that same pattern here.

[mattmiklic]

I do not think we need to offer the api keys here necessarily. Since you can't buy a plan in the apps it seems not very relevant and possibly just confusing to offer the ability to edit the API key here. I might be wrong, but it doesn't seem too important at this point.

Agreed, I think this makes sense.

Regarding the labels here, 'jetpack monitor' can go away and you can just move the 'monitor my site's uptime' up to being the label (unless you have to have a section label that is not the toggle's label).

Cool; we can just lose the section label at the top.

[rickybanister]

Yeah, I noticed Monitor's settings being different as well. I think we could likely revise them to show the master toggle to enable the feature, then a clickable card (for calypso) to take the user over to /me/notifications to manage the notifications.

I imagine it was done this way so that you didn't have to leave wp-admin to enable the same settings on the remote site side of things though.

Is it alright to leave it as-is for now while we figure this out?

[mattmiklic]

Is it alright to leave it as-is for now while we figure this out?

Sure, the desktop user is probably going to look under security settings to find that toggle since that's where it is in Calypso. So it makes sense to keep them in the same place in the hierarchy of the app.

[tonyr59h]

We're nearing completion on this. @mattmiklic can you check out the design on the feature branch and make sure there's nothing we need to fix?

[mattmiklic]

@tonyr59h Sure thing; I looked for that branch in Buddybuild and am a little bit confused; it's showing the latest commit as being from two days ago; can you take a look and make sure the build for this branch is the most up to date?

[mattmiklic]

Actually nevermind; I looked at the commit history for that branch and that does look like it's up to date. I'll take a look ASAP (I'm on Helpshift this week so it may be later tonight).

[mattmiklic]

Hey @tonyr59h I've just had a chance to look at this -- it looks good, the only thing I see missing is the "Learn More" button under the WordPress.com login section:

I've added a "Learn More" button to the WordPress.com login section (renamed from "sign in" in Calypso to align with our decision to standardize on "login" as the term used in the apps and Calypso). The button should link to https://jetpack.com/support/sso/ in the browser.