Repository: mdn/kuma

Issue:
Sign-In Landing page
**Summary**

We are moving to a new sign-in/sign-up flow where we will be offering two options to users of MDN Web Docs. The first is the existing Github auth and the second new option will be Google Auth.

To facilitate this, we need a new account auth landing page that presents these options to the user(see below):

![Screenshot 2019-10-22 at 15 10 50](https://user-images.githubusercontent.com/10350960/67289216-8b63c780-f4de-11e9-8e41-e5441793b64d.png)

This issue is related to the creation of the new landing page and changing the current account flow to point to this intermediary page, instead of directly sending users to Github.

**Audience**

All new users of MDN Web Docs

**Workaround**

Currently, we offer only one option for sign-up which possibly narrows our reach.

## Acceptance Criteria

- [ ] When a user clicks the `signin` link in the header, they are sent to a new intermediary page as discussed under `summary` above.
- [ ] Page offers the option between our two auth provider i.e. Github or Google
- [ ] Clicking either will send the user to the third party for authentication
- [ ] Show relevant bullet points



Discussion:
For now, only use the last bullet point in "benefits of MDN account"
I had a chat with @Gregoor on Slack around how we will approach the work for the Google Auth piece. We decided that it would be a good call to do this behind the waffle flag `google-auth`. That means we can open pull requests and land pieces of the work in master without affecting production.

Gregor is still investigating all things oAuth but, this issue will introduce a new flow where a user goes through an intermediary page where they will then choose their Auth provider of choice.

That means that instead of going directly to `github/login` we will now have to first direct a user to the `signup/in` page. Here we will use the waffle flag to conditionally send users to one of the two endpoints, for example:

```
if waffle res.send(signup) else res.send(github/login)
```
It seems like adding an actual landing page for this is adding a bunch of overhead. Since we don't have logins from the portal and no content behind log-in, we don't really need a landing page. Would it be easier to use a modal instead?
@Gregoor just FYI, I got my wires crossed. I meant I am working on *this* one, and perhaps you can grab the delete account front-end piece once I am done with this. 😄

Resolving patch:
diff --git a/kuma/settings/common.py b/kuma/settings/common.py
--- a/kuma/settings/common.py
+++ b/kuma/settings/common.py
@@ -836,6 +836,12 @@ def pipeline_one_scss(slug, **kwargs):
         ),
         'output_filename': 'build/styles/signup-flow.css',
     },
+    'auth-modal': {
+        'source_filenames': (
+            'styles/minimalist/components/auth-modal.scss',
+        ),
+        'output_filename': 'build/styles/auth-modal.css',
+    },
     'user-banned': {
         'source_filenames': (
             'styles/user-banned.scss',
@@ -1013,6 +1019,16 @@ def pipeline_one_scss(slug, **kwargs):
             'async': True,
         },
     },
+    'auth-modal': {
+        'source_filenames': (
+            'js/components/modal.js',
+            'js/components/user-signup/auth-modal.js',
+        ),
+        'output_filename': 'build/js/auth-modal.js',
+        'extra_context': {
+            'async': True,
+        },
+    },
     'dashboard': {
         'source_filenames': (
             'js/dashboard.js',
@@ -1831,6 +1847,8 @@ def get_user_url(user):
 # Whether or not to enable the BCD signalling feature.
 # Affects loading of CSS (statically) and JS (in runtime).
 ENABLE_BCD_SIGNAL = config('ENABLE_BCD_SIGNAL', default=True, cast=bool)
+# Multi Auth Switch
+MULTI_AUTH_ENABLED = config('MULTI_AUTH_ENABLED', default=False, cast=bool)
 
 # Content Experiments
 # Must be kept up to date with PIPELINE_JS setting and the JS client-side
diff --git a/kuma/users/urls.py b/kuma/users/urls.py
--- a/kuma/users/urls.py
+++ b/kuma/users/urls.py
@@ -21,6 +21,9 @@
     url(r'^signup/?$',
         views.signup,
         name='socialaccount_signup'),
+    url(r'^signup-landing/?$',
+        views.signin_landing,
+        name='socialaccount_signin'),
     url(r'^inactive/?$',
         account_views.account_inactive,
         name='account_inactive'),
diff --git a/kuma/users/views.py b/kuma/users/views.py
--- a/kuma/users/views.py
+++ b/kuma/users/views.py
@@ -544,6 +544,10 @@ def delete_user():
     return render(request, 'users/user_delete.html', context)
 
 
+def signin_landing(request):
+    return render(request, "socialaccount/signup-landing.html")
+
+
 class SignupView(BaseSignupView):
     """
     The default signup view from the allauth account app.


Test patch:
diff --git a/kuma/javascript/src/header/__snapshots__/header.test.js.snap b/kuma/javascript/src/header/__snapshots__/header.test.js.snap
--- a/kuma/javascript/src/header/__snapshots__/header.test.js.snap
+++ b/kuma/javascript/src/header/__snapshots__/header.test.js.snap
@@ -345,7 +345,7 @@ exports[`Header snapshot 1`] = `
   <a
     className="signin-link"
     data-service="GitHub"
-    href="/users/github/login/?next=/[fake%20absolute%20url]"
+    href="/users/github/login?next=/[fake%20absolute%20url]"
     rel="nofollow"
   >
     Sign in
diff --git a/kuma/javascript/src/header/__snapshots__/login.test.js.snap b/kuma/javascript/src/header/__snapshots__/login.test.js.snap
--- a/kuma/javascript/src/header/__snapshots__/login.test.js.snap
+++ b/kuma/javascript/src/header/__snapshots__/login.test.js.snap
@@ -69,7 +69,7 @@ exports[`Login component when user is not logged in 1`] = `
 <a
   className="signin-link"
   data-service="GitHub"
-  href="/users/github/login/?next=/"
+  href="/users/github/login?next=/"
   rel="nofollow"
 >
   Sign in