[FxA] Login flow should work from a non-Firefox browser

[ianb]

Something we should confirm and make sure works:

• Using a browser besides Firefox desktop
• Go to https://screenshots.firefox.com (or localhost:10080)
• See a "sign in" button
• That starts an FxA sign-in flow
• After finishing, you should be able to see My Shots with any shots associated with your FxA account
• You should be able to delete and favorite shots

Note that we don't need to support creating new shots.

We do not need any persistent association between the browser, any deviceId, and the FxA id (accountId). Ideally we'd simply set the authentication cookie with an accountId, a null deviceId, and any appropriate queries (query on My Shots, permission check on delete/favorite) would work with a null deviceId and an existent req.accountId.

[punamdahiya]

FxA back-end relies heavily on deviceId for FxA auth flow and displaying shots on My Shots page

https://github.com/mozilla-services/screenshots/blob/master/server/src/server.js#L1073
https://github.com/mozilla-services/screenshots/blob/master/server/src/server.js#L1114
https://github.com/mozilla-services/screenshots/blob/master/server/src/servershot.js#L486

[chenba]

#4819 is related to this. Once that's fixed, a new profile will not have a device id until the first uploaded shot.

[weivicky]

@ianb Hi Ian! I was a UX Design intern on the Test Pilot team in the summer. I think we might have met in my first call with the Test Pilot team! :)

I was suggesting the empty state design for users who are accessing the https://screenshots.firefox.com/shots directly and not using Firefox browser (#4991), which is related to this. I want to speed up the approval process by collecting as much information as I can, since I want to get it done before I get lots of school work (don't want to be lingering here for too long).

Currently, if a user goes on https://screenshots.firefox.com/shots on a non-firefox browser, it shows a looking for a "Looking for shots" page and redirects users to back to the home page after 10 seconds. Since we are promoting the feature that users can access shots directly, I don't think it still makes sense to redirect users to the home page.

As a result, I'm proposing this design, which prompts users to sign in

Questions:

1. In my design, I wanted to include some context on the sign in page so users know that they are signing into Screenshots, so I changed the message from "Continue to Sync" to "Continue to Screenshots". What do you think since you are overseeing the Sync flow for Firefox Screenshots? I think a little bit of context is helpful since it could be hard to tell from the URL and "Continue to Sync" could be confusing.
2. Do you think the flow of prompting a sync sign in page makes sense when users on a non-Firefox browser go directly on https://screenshots.firefox.com/shots?
3. Just a small consistency issue: if a user on Firefox goes on firefox.screenshots.com, they see "My shots" instead of "Sign in". Should the page for users on non-Firefox browser see "Sign in" or "My shots"?
   
4. What about the empty states for when user goes on /settings page (or any other account related pages...can't think of any) on Chrome or something?

Really appreciate your response and apologize if I misunderstood/missed anything!

[weivicky]

@punamdahiya

Hi! I know you were specifically asking for empty states for /shots page on a non-Firefox browser.

But just wondering if you thought about empty states for the other account related pages, such as the settings page on a non-Firefox browser? I would assume the sign in page in the sync flow?

[punamdahiya]

@ianb Hi Ian! I was a UX Design intern on the Test Pilot team in the summer. I think we might have met in my first call with the Test Pilot team! :)

I was suggesting the empty state design for users who are accessing the https://screenshots.firefox.com/shots directly and not using Firefox browser (#4991), which is related to this. I want to speed up the approval process by collecting as much information as I can, since I want to get it done before I get lots of school work (don't want to be lingering here for too long).

Currently, if a user goes on https://screenshots.firefox.com/shots on a non-firefox browser, it shows a looking for a "Looking for shots" page and redirects users to back to the home page after 10 seconds. Since we are promoting the feature that users can access shots directly, I don't think it still makes sense to redirect users to the home page.

As a result, I'm proposing this design, which prompts users to sign in

Questions:

1. In my design, I wanted to include some context on the sign in page so users know that they are signing into Screenshots, so I changed the message from "Continue to Sync" to "Continue to Screenshots". What do you think since you are overseeing the Sync flow for Firefox Screenshots? I think a little bit of context is helpful since it could be hard to tell from the URL and "Continue to Sync" could be confusing.

2. Do you think the flow of prompting a sync sign in page makes sense when users on a non-Firefox browser go directly on https://screenshots.firefox.com/shots?

3. Just a small consistency issue: if a user on Firefox goes on firefox.screenshots.com, they see "My shots" instead of "Sign in". Should the page for users on non-Firefox browser see "Sign in" or "My shots"?
   ![image](https://user-images.githubusercontent.com/10877399/48519526-384bb400-e83b-11e8-9a43-9e0ea8f4b028.png)

4. What about the empty states for when user goes on /settings page (or any other account related pages...can't think of any) on Chrome or something?

Really appreciate your response and apologize if I misunderstood/missed anything!

@weivicky Thanks for your valuable feedback, all these are excellent points and we have accounted for in new UI currently on dev server https://screenshots.dev.mozaws.net/
It will be great if you can give your feedback and thoughts on the new UI in dev. Thanks!

[punamdahiya]

@punamdahiya

Hi! I know you were specifically asking for empty states for /shots page on a non-Firefox browser.

But just wondering if you thought about empty states for the other account related pages, such as the settings page on a non-Firefox browser? I would assume the sign in page in the sync flow?

@weivicky Major call to action on settings page is disconnect, a generic messaging to educate users is in review in #5156.

We have very less control on signin page, it's generic page from Firefox account used by services that needs to authenticate using oauth API

[punamdahiya]

@weivicky Sorry forgot install instructions for dev server. Thanks!

[weivicky]

@punamdahiya

Hi! Thanks for your quick response

@weivicky Major call to action on settings page is disconnect, a generic messaging to educate users is in review in #5156.

Sorry if I wasn't clear earlier, I meant if a user copies and pastes /settings page into a non-Firefox browser like Chrome. What would they see? They would see a disconnect button on the Chrome page?

We have very less control on signin page, it's generic page from Firefox account used by services that needs to authenticate using oauth API

We have control on the messaging on the sign in page of sync though right? We can change "Continue to Sync" to "Continue to Screenshots"?

It will be great if you can give your feedback and thoughts on the new UI in dev. Thanks!

Unfortunately, I couldn't get the dev server working because I can't seem to find extensions.install.requireBuiltInCerts and xpinstall.sigantures.dev-root

A couple things I noticed right away though (not sure if they were done intentionally or not) without being on dev:

1. Would the settings button and the banner lead to the same sign in page? Why are there two of them? I also think using "My shots" (like in the Firefox browser one) over the settings button might be a better idea on the screenshots.firefox.com page, since settings is usually something you see after you have logged in.
   
2. The "Get started" image on https://screenshots.firefox.com/ is different for non-Firefox browser and Firefox browser
   The picture on non-Firefox page might be outdated? Since I don't think I'm supposed to see the screenshots tool in my toolbar?
   

Thanks for your quick reply btw!

[punamdahiya]

@punamdahiya

Hi! Thanks for your quick response

@weivicky Major call to action on settings page is disconnect, a generic messaging to educate users is in review in #5156.

Sorry if I wasn't clear earlier, I meant if a user copies and pastes /settings page into a non-Firefox browser like Chrome. What would they see? They would see a disconnect button on the Chrome page?

@weivicky Filed #5185 to discuss settings page when accessed directly using url

We have very less control on signin page, it's generic page from Firefox account used by services that needs to authenticate using oauth API

We have control on the messaging on the sign in page of sync though right? We can change "Continue to Sync" to "Continue to Screenshots"?

Latest UI in dev server has the string updated to "Continue to Screenshots". Thanks!

[weivicky]

@punamdahiya Hi, really appreciate your quick response!

Thanks for submitting an issue! LOL I was asking about the /settings page because I was thinking about using the same empty state page for users who access /shots, /settings, and other account related pages directly on a non-Firefox browser to simplify things and keep things consistent. I think /shots and /settings might be the only ones. I don't think there's a need to have different pages.

[punamdahiya]

   The picture on non-Firefox page might be outdated? Since I don't think I'm supposed to see the screenshots tool in my toolbar?
   ![image](https://user-images.githubusercontent.com/10877399/48583840-2a0e9e00-e8f6-11e8-8720-08d66d1f86ec.png)

That's a good catch, logged issue #5187 to fix this. Thanks!

[punamdahiya]

Unfortunately, I couldn't get the dev server working because I can't seem to find extensions.install.requireBuiltInCerts and xpinstall.sigantures.dev-root

@weivicky you can create these preferences in nightly by going to about:config -> right click -> New -> boolean . Thanks!