[next] Auth Popup v2 (#2101)

* feat: Implement new Sign In view

* feat: Move forgot + resetPassword to new design

* feat: Implement sign up with new design

* fix: narrow gutter

* test: add unit tests

* test: integration tests

* feat: support show / hide password

* feat: support oauth2 flow

* feat: add views for user completion

* feat: implement oauth2 sign up

* test: fix snapshots

* fix: lint

* fix: get more complete mutation response

* fix: removed array of OIDC integrations

* fix: renamed resolver function

* fix: adapt oidc client implementation

* fix: targetFilter should be stream on signup

* fix: removed unneeded message

* fix: moved password into local profile

* fix: made username optional, removed valid null value

* fix: linting

* fix: respect targetFilter

* feat: support user registration mutations

- Added `setUsername`
- Added `setEmail`
- Added `setPassword`
- Added `permit` to `@auth`
- Added `email` to `User`

* fix: fixed issue with query

* feat: added user password update

* feat: complete sign in mutation

* fix: adapt some rebasing gitches

* test: improve tests

* test: unittest for setting auth token

* fix: failing tests

* test: move most tests from enzyme to react-test-renderer

* fix: remove schema warnings in tests

* test: improve window mock

* test: test different social login configurations

* test: test social logins for sign up

* fix: use htmlFor instead of for

* test: more feature tests

* feat: always go through account completion

* test: feature test account completion

* feat: addtional account completion test

* Update start.ts

* chore: refactor auth token retrieval logic

src/core/client/stream/containers/UserBoxContainer.spec.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
 
 import { removeFragmentRefs } from "talk-framework/testHelpers";
 import { PropTypesOf } from "talk-framework/types";
@@ -26,20 +26,31 @@ it("renders fully", () => {
           facebook: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          sso: {
+          oidc: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -50,8 +61,9 @@ it("renders fully", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders without logout button", () => {
@@ -71,20 +83,31 @@ it("renders without logout button", () => {
           facebook: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          sso: {
+          oidc: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -95,8 +118,9 @@ it("renders without logout button", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders sso only", () => {
@@ -116,20 +140,31 @@ it("renders sso only", () => {
           facebook: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
-            enabled: false,
-            allowRegistration: true,
-          },
-          sso: {
             enabled: true,
             allowRegistration: true,
+            targetFilter: {
+              stream: false,
+            },
+          },
+          oidc: {
+            enabled: false,
+            allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -140,11 +175,12 @@ it("renders sso only", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
-it("renders sso only without logut button", () => {
+it("renders sso only without logout button", () => {
   const props: PropTypesOf<typeof UserBoxContainerN> = {
     local: {
       authPopup: {
@@ -161,20 +197,31 @@ it("renders sso only without logut button", () => {
           facebook: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          sso: {
-            enabled: true,
+          oidc: {
+            enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -185,8 +232,9 @@ it("renders sso only without logut button", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });
 
 it("renders without register button", () => {
@@ -206,20 +254,31 @@ it("renders without register button", () => {
           facebook: {
             enabled: true,
             allowRegistration: false,
+            targetFilter: {
+              stream: true,
+            },
           },
           google: {
             enabled: false,
-            allowRegistration: false,
+            allowRegistration: true,
+            targetFilter: {
+              stream: false,
+            },
           },
-          sso: {
+          oidc: {
             enabled: false,
             allowRegistration: true,
+            targetFilter: {
+              stream: true,
+            },
           },
           local: {
             enabled: true,
             allowRegistration: false,
+            targetFilter: {
+              stream: true,
+            },
           },
-          oidc: [],
         },
       },
     },
@@ -230,6 +289,7 @@ it("renders without register button", () => {
     // tslint:disable-next-line:no-empty
     signOut: async () => {},
   };
-  const wrapper = shallow(<UserBoxContainerN {...props} />);
-  expect(wrapper).toMatchSnapshot();
+  const renderer = createRenderer();
+  renderer.render(<UserBoxContainerN {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
 });

src/core/client/stream/containers/UserBoxContainer.tsx

@@ -45,23 +45,22 @@ export class UserBoxContainer extends Component<InnerProps> {
 
   private get supportsRegister() {
     const integrations = this.props.settings.auth.integrations;
-    return (
-      (integrations.facebook.allowRegistration &&
-        integrations.facebook.enabled) ||
-      (integrations.google.allowRegistration && integrations.google.enabled) ||
-      (integrations.local.allowRegistration && integrations.local.enabled) ||
-      integrations.oidc.some(c => c.allowRegistration && c.enabled)
-    );
+    return [
+      integrations.facebook,
+      integrations.google,
+      integrations.local,
+      integrations.oidc,
+    ].some(i => i.allowRegistration && i.enabled && i.targetFilter.stream);
   }
 
   private get weControlAuth() {
     const integrations = this.props.settings.auth.integrations;
-    return (
-      integrations.facebook.enabled ||
-      integrations.google.enabled ||
-      integrations.local.enabled ||
-      integrations.oidc.some(c => c.enabled)
-    );
+    return [
+      integrations.facebook,
+      integrations.google,
+      integrations.local,
+      integrations.oidc,
+    ].some(i => i.enabled && i.targetFilter.stream);
   }
 
   public render() {
@@ -75,7 +74,7 @@ export class UserBoxContainer extends Component<InnerProps> {
     if (me) {
       return (
         <UserBoxAuthenticated
-          onSignOut={(this.weControlAuth && this.handleSignOut) || undefined}
+          onSignOut={this.handleSignOut}
           username={me.username!}
           showLogoutButton={this.supportsLogout}
         />
@@ -91,7 +90,7 @@ export class UserBoxContainer extends Component<InnerProps> {
         <Popup
           href={`${urls.embed.auth}?view=${view}`}
           title="Talk Auth"
-          features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
+          features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
           open={open}
           focus={focus}
           onFocus={this.handleFocus}
@@ -138,22 +137,30 @@ const enhanced = withSignOutMutation(
                   local {
                     enabled
                     allowRegistration
-                  }
-                  sso {
-                    enabled
-                    allowRegistration
+                    targetFilter {
+                      stream
+                    }
                   }
                   oidc {
                     enabled
                     allowRegistration
+                    targetFilter {
+                      stream
+                    }
                   }
                   google {
                     enabled
                     allowRegistration
+                    targetFilter {
+                      stream
+                    }
                   }
                   facebook {
                     enabled
                     allowRegistration
+                    targetFilter {
+                      stream
+                    }
                   }
                 }
               }

src/core/client/stream/containers/__snapshots__/UserBoxContainer.spec.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders fully 1`] = `
-<Fragment>
+<React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
@@ -17,17 +17,17 @@ exports[`renders fully 1`] = `
     onSignIn={[Function]}
     showRegisterButton={true}
   />
-</Fragment>
+</React.Fragment>
 `;
 
-exports[`renders sso only 1`] = `""`;
+exports[`renders sso only 1`] = `null`;
 
-exports[`renders sso only without logut button 1`] = `""`;
+exports[`renders sso only without logout button 1`] = `null`;
 
 exports[`renders without logout button 1`] = `
-<Fragment>
+<React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
@@ -41,13 +41,13 @@ exports[`renders without logout button 1`] = `
     onSignIn={[Function]}
     showRegisterButton={true}
   />
-</Fragment>
+</React.Fragment>
 `;
 
 exports[`renders without register button 1`] = `
-<Fragment>
+<React.Fragment>
   <Popup
-    features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
+    features="menubar=0,resizable=0,width=350,height=450,top=100,left=500"
     focus={false}
     href="/embed/auth?view=SIGN_IN"
     onBlur={[Function]}
@@ -60,5 +60,5 @@ exports[`renders without register button 1`] = `
     onSignIn={[Function]}
     showRegisterButton={false}
   />
-</Fragment>
+</React.Fragment>
 `;