[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/auth/components/Header/Bar.css

@@ -0,0 +1,4 @@
+.root {
+  min-height: calc(var(--spacing-unit) * 8);
+  background-color: var(--palette-text-primary);
+}

src/core/client/auth/components/Header/Bar.spec.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Bar from "./Bar";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Bar> = {
+    children: "Hello World",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Bar {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/auth/components/Header/Bar.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex } from "talk-ui/components";
+
+import styles from "./Bar.css";
+
+export interface BarProps {
+  children: React.ReactNode;
+}
+
+const Bar: StatelessComponent<BarProps> = props => (
+  <Flex className={styles.root} alignItems="center" justifyContent="center">
+    <div>{props.children}</div>
+  </Flex>
+);
+
+export default Bar;

src/core/client/auth/components/Header/SubBar.css

@@ -0,0 +1,4 @@
+.root {
+  min-height: calc(var(--spacing-unit) * 4);
+  border-bottom: 1px solid var(--palette-divider);
+}

src/core/client/auth/components/Header/SubBar.spec.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import SubBar from "./SubBar";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof SubBar> = {
+    children: "Hello World",
+  };
+  const renderer = createRenderer();
+  renderer.render(<SubBar {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/auth/components/Header/SubBar.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex } from "talk-ui/components";
+
+import styles from "./SubBar.css";
+
+export interface SubBarProps {
+  children: React.ReactNode;
+}
+
+const SubBar: StatelessComponent<SubBarProps> = props => (
+  <Flex className={styles.root} alignItems="center" justifyContent="center">
+    <div>{props.children}</div>
+  </Flex>
+);
+
+export default SubBar;

src/core/client/auth/components/Header/Subtitle.css

@@ -0,0 +1,3 @@
+.root {
+  color: var(--palette-text-light);
+}

src/core/client/auth/components/Header/Subtitle.spec.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Subtitle from "./Subtitle";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Subtitle> = {
+    children: "Hello World",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Subtitle {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/auth/components/Header/Subtitle.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Typography } from "talk-ui/components";
+import styles from "./Subtitle.css";
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+const Subtitle: StatelessComponent<Props> = props => (
+  <Typography variant="heading4" align="center" className={styles.root}>
+    {props.children}
+  </Typography>
+);
+
+export default Subtitle;

src/core/client/auth/components/Header/Title.css

@@ -0,0 +1,3 @@
+.root {
+  color: var(--palette-text-light);
+}

src/core/client/auth/components/Header/Title.spec.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Title from "./Title";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Title> = {
+    children: "Hello World",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Title {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});

src/core/client/auth/components/Header/Title.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { StatelessComponent } from "react";
+
+import { Typography } from "talk-ui/components";
+import styles from "./Title.css";
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+const Title: StatelessComponent<Props> = props => (
+  <Typography variant="heading2" align="center" className={styles.root}>
+    {props.children}
+  </Typography>
+);
+
+export default Title;

src/core/client/auth/components/Header/__snapshots__/Bar.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)
+  alignItems="center"
+  className="Bar-root"
+  justifyContent="center"
+>
+  <div>
+    Hello World
+  </div>
+</withPropsOnChange(Flex)>
+`;

src/core/client/auth/components/Header/__snapshots__/SubBar.spec.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Flex)
+  alignItems="center"
+  className="SubBar-root"
+  justifyContent="center"
+>
+  <div>
+    Hello World
+  </div>
+</withPropsOnChange(Flex)>
+`;

src/core/client/auth/components/Header/__snapshots__/Subtitle.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Typography)
+  align="center"
+  className="Subtitle-root"
+  variant="heading4"
+>
+  Hello World
+</withPropsOnChange(Typography)>
+`;

src/core/client/auth/components/Header/__snapshots__/Title.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<withPropsOnChange(Typography)
+  align="center"
+  className="Title-root"
+  variant="heading2"
+>
+  Hello World
+</withPropsOnChange(Typography)>
+`;

src/core/client/auth/components/Header/index.ts

@@ -0,0 +1,4 @@
+export { default as Bar } from "./Bar";
+export { default as SubBar } from "./SubBar";
+export { default as Title } from "./Title";
+export { default as Subtitle } from "./Subtitle";