Migrate team invite signup to React - Part II (Front-end)

[paolodamico]

Changes

Builds up on #2734 to support accepting team invites on a React FE, instead of a static Django page, which among other things:

• Provides a clearer UX, makes it easier for users to understand what to do.
• Incorporates a brand-new sleek design (special shout-out to @lottiecoxon) in line with the upcoming new landing page.
• Speeds up the process and reduces friction on the signup process as invitees are no longer required to enter their email address.
• Allows inviting users to prefill the user's first name to speed up the sign up process for invitees.
• Standardizes password requirements which were causing a lot of confusion.
• Provides clearer and more actionable error messages when something unexpected happens.
• Closes Migrate team signup to React #2336.

Main functionality

• Allows users to sign up for PostHog directly to an org using an invite link.
  
  
• Includes full mobile support (particular feedback requested here)
  
• Supports creating your account with social logins.
  
• If you're an existing user, it lets you join the organization with your same account and it shows you how to switch between organizations.
  

Edge cases

• Invite link is invalid or expired (authenticated & unauthenticated).
  
• Edge case when logged in user attempts to use invite intended for another user. Also, when a new user attempts to accept an invite intended for another user using a social login.
  
• Generic error, something went wrong.
  

Additional changes

• Finally add Gosha Sans to the app, and use it for titles and PostHog wordmark.
  
• Some extra Django tests & BE adjustments.

Checklist

• All querysets/queries filter by Organization, by Team, and by User
• Django backend tests
• Jest frontend tests. Not applicable.
• Cypress end-to-end tests

[paolodamico]

Wow @Twixes thanks for the very thorough review 🙌, you rock! Code comments I'll address directly on each thread. UX comments below,

1. 👍 I think you're right, let me play around with it a bit and get back to you.
2. 👍 Right, I actually didn't notice that because my screen size made it look exactly the same. Will fix.
3. I thought that, but there's the "Already have an account? Log in ..." text, that's why I thought the "Or" might make sense too. Might be a thinker so I may just drop it as you suggest.
4. Very nice, love that UX! Though I do think there can be one security concern, a malicious user could create multiple invites to random email addresses and then open the email links and see if they have an account or not (same as if you return a detailed error message on forgot password flows). Thoughts?
5. 👍 will fix
6. 👍 will fix
7. (Social Auth 1). 👍 will fix
8. (Social Auth 2). I think that makes sense, but I'd like to get @lottiecoxon's input as it was her design?

[Twixes]

Re 4. auto login vs. signup, that is a slight downside on Cloud. However such a user could find that out anyway, since signup will simply not proceed if the email already is in the database, only leading to confusion for valid users AND information for malicious ones.

[paolodamico]

Ready for a final look @Twixes, FYI point 4 on UX I'll have to leave it for #3339 because we need the login screen on React too.

[Twixes]

This is great! Only a couple of wording clarity notes.
And "Already have an account? Log in" appears twice. 🤔 Actually it did earlier too, I just missed that it's awkward and now it's even more so, as they are both centered.

Actionables for other PRs (will make relevant issues):

• choose between signup and login automatically (prerequisite: React login page)
• join/create organization without need for full page reload
• allow for optional trailing slash in frontend router

[paolodamico]

All final comments addressed, will merge after tests pass. Thanks for tracking the follow-up items!