Add auth target

config/jest/client.config.js

@@ -24,6 +24,7 @@ module.exports = {
   ],
   moduleNameMapper: {
     "^talk-admin/(.*)$": "<rootDir>/src/core/client/admin/$1",
+    "^talk-auth/(.*)$": "<rootDir>/src/core/client/auth/$1",
     "^talk-ui/(.*)$": "<rootDir>/src/core/client/ui/$1",
     "^talk-stream/(.*)$": "<rootDir>/src/core/client/stream/$1",
     "^talk-framework/(.*)$": "<rootDir>/src/core/client/framework/$1",

config/watcher.ts

@@ -31,6 +31,23 @@ const config: Config = {
         runOnInit: true,
       }),
     },
+    compileRelayAuth: {
+      paths: [
+        "core/client/auth/**/*.ts",
+        "core/client/auth/**/*.tsx",
+        "core/client/auth/**/*.graphql",
+        "core/server/**/*.graphql",
+      ],
+      ignore: [
+        "core/**/*.d.ts",
+        "core/**/*.graphql.ts",
+        "**/test/**/*",
+        "core/**/*.spec.*",
+      ],
+      executor: new CommandExecutor("npm run compile:relay-auth", {
+        runOnInit: true,
+      }),
+    },
     compileCSSTypes: {
       paths: ["**/*.css"],
       executor: new CommandExecutor("npm run compile:css-types", {
@@ -59,9 +76,15 @@ const config: Config = {
       "runWebpackDevServer",
       "compileCSSTypes",
       "compileRelayStream",
+      "compileRelayAuth",
     ],
     docz: ["runDocz", "compileCSSTypes"],
-    compile: ["compileSchema", "compileCSSTypes", "compileRelayStream"],
+    compile: [
+      "compileSchema",
+      "compileCSSTypes",
+      "compileRelayStream",
+      "compileRelayAuth",
+    ],
   },
 };
 

package.json

@@ -9,6 +9,7 @@
     "compile": "npm-run-all --parallel compile:*",
     "compile:css-types": "tcm src/core/client/",
     "compile:relay-stream": "ts-node ./scripts/compileRelay --src ./src/core/client/stream --schema tenant",
+    "compile:relay-auth": "ts-node ./scripts/compileRelay --src ./src/core/client/auth --schema tenant",
     "compile:schema": "node ./scripts/generateSchemaTypes.js",
     "docz": "docz",
     "start": "node dist/index.js",

src/core/build/createWebpackConfig.ts

@@ -80,6 +80,28 @@ export default function createWebpackConfig({
     },
   ];
 
+  const localesOptions = {
+    pathToLocales: paths.appLocales,
+
+    // Default locale if non could be negotiated.
+    defaultLocale: "en-US",
+
+    // Fallback locale if a translation was not found.
+    // If not set, will use the text that is already
+    // in the code base.
+    fallbackLocale: "en-US",
+
+    // Common fluent files are always included in the locale bundles.
+    commonFiles: ["framework.ftl", "common.ftl"],
+
+    // Locales that come with the main bundle. Others are loaded on demand.
+    bundled: ["en-US"],
+
+    // All available locales can be loadable on demand.
+    // To restrict available locales set:
+    // availableLocales: ["en-US"],
+  };
+
   const additionalPlugins = isProduction
     ? [
         // Minify the code.
@@ -214,29 +236,26 @@ export default function createWebpackConfig({
                 {
                   loader: "locales-loader",
                   options: {
-                    pathToLocales: paths.appLocales,
-
-                    // Default locale if non could be negotiated.
-                    defaultLocale: "en-US",
-
-                    // Fallback locale if a translation was not found.
-                    // If not set, will use the text that is already
-                    // in the code base.
-                    fallbackLocale: "en-US",
-
-                    // Common fluent files are always included in the locale bundles.
-                    commonFiles: ["framework.ftl", "common.ftl"],
-
-                    // Locales that come with the main bundle. Others are loaded on demand.
-                    bundled: ["en-US"],
-
+                    ...localesOptions,
                     // Target specifies the prefix for fluent files to be loaded.
                     // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
                     target: "stream",
-
-                    // All available locales can be loadable on demand.
-                    // To restrict available locales set:
-                    // availableLocales: ["en-US"],
+                  },
+                },
+              ],
+            },
+            {
+              test: paths.appAuthLocalesTemplate,
+              use: [
+                // This is the locales loader that loads available locales
+                // from a particular target.
+                {
+                  loader: "locales-loader",
+                  options: {
+                    ...localesOptions,
+                    // Target specifies the prefix for fluent files to be loaded.
+                    // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
+                    target: "auth",
                   },
                 },
               ],
@@ -380,6 +399,24 @@ export default function createWebpackConfig({
           paths.appStreamIndex,
           // Remove deactivated entries.
         ].filter(s => s),
+        auth: [
+          // We ship polyfills by default
+          paths.appPolyfill,
+          // Include an alternative client for WebpackDevServer. A client's job is to
+          // connect to WebpackDevServer by a socket and get notified about changes.
+          // When you save a file, the client will either apply hot updates (in case
+          // of CSS changes), or refresh the page (in case of JS changes). When you
+          // make a syntax error, this client will display a syntax error overlay.
+          // Note: instead of the default WebpackDevServer client, we use a custom one
+          // to bring better experience for Create React App users. You can replace
+          // the line below with these two lines if you prefer the stock client:
+          // require.resolve('webpack-dev-server/client') + '?/',
+          // require.resolve('webpack/hot/dev-server'),
+          (isProduction && "") ||
+            require.resolve("react-dev-utils/webpackHotDevClient"),
+          paths.appAuthIndex,
+          // Remove deactivated entries.
+        ].filter(s => s),
       },
       plugins: [
         ...baseConfig.plugins!,
@@ -391,6 +428,14 @@ export default function createWebpackConfig({
           inject: "body",
           ...htmlWebpackConfig,
         }),
+        // Generates an `auth.html` file with the <script> injected.
+        new HtmlWebpackPlugin({
+          filename: "auth.html",
+          template: paths.appAuthHTML,
+          chunks: ["auth"],
+          inject: "body",
+          ...htmlWebpackConfig,
+        }),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

src/core/build/paths.ts

@@ -23,6 +23,9 @@ export default {
   appStreamHTML: resolveSrc("core/client/stream/index.html"),
   appStreamLocalesTemplate: resolveSrc("core/client/stream/locales.ts"),
   appStreamIndex: resolveSrc("core/client/stream/index.tsx"),
+  appAuthHTML: resolveSrc("core/client/auth/index.html"),
+  appAuthLocalesTemplate: resolveSrc("core/client/auth/locales.ts"),
+  appAuthIndex: resolveSrc("core/client/auth/index.tsx"),
   appEmbedIndex: resolveSrc("core/client/embed/index.ts"),
   appEmbedHTML: resolveSrc("core/client/embed/index.html"),
 

src/core/client/auth/.babelrc.js

@@ -0,0 +1,10 @@
+const path = require("path");
+module.exports = {
+  extends: "../.babelrc.js",
+  plugins: [
+    [
+      "babel-plugin-relay",
+      { artifactDirectory: path.resolve(__dirname, "./__generated__") },
+    ],
+  ],
+};

src/core/client/auth/components/App.css

@@ -0,0 +1,15 @@
+/* Here we add global stylings for body and document */
+:global {
+  body {
+    margin: "0";
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.root {
+  width: 100%;
+}

src/core/client/auth/components/App.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex } from "talk-ui/components";
+
+import * as styles from "./App.css";
+
+export interface AppProps {
+  // TODO: (cvle) Remove %future added value when we have Relay 1.6
+  // https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
+  view: "SIGN_UP" | "SIGN_IN" | "FORGOT_PASSWORD" | "%future added value";
+}
+
+const App: StatelessComponent<AppProps> = props => {
+  return (
+    <Flex justifyContent="center" className={styles.root}>
+      Hello World
+    </Flex>
+  );
+};
+
+export default App;

src/core/client/auth/containers/AppContainer.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { AppContainerLocal as Local } from "talk-auth/__generated__/AppContainerLocal.graphql";
+import { graphql, withLocalStateContainer } from "talk-framework/lib/relay";
+
+import App from "../components/App";
+
+interface InnerProps {
+  local: Local;
+}
+
+const AppContainer: StatelessComponent<InnerProps> = ({ local: { view } }) => {
+  return <App view={view} />;
+};
+
+const enhanced = withLocalStateContainer<Local>(
+  graphql`
+    fragment AppContainerLocal on Local {
+      view
+    }
+  `
+)(AppContainer);
+
+export default enhanced;

src/core/client/auth/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Talk - Auth</title>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>

src/core/client/auth/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { StatelessComponent } from "react";
+import ReactDOM from "react-dom";
+
+import {
+  createContext,
+  TalkContext,
+  TalkContextProvider,
+} from "talk-framework/lib/bootstrap";
+
+import AppContainer from "./containers/AppContainer";
+import { initLocalState } from "./local";
+import localesData from "./locales";
+
+// This is called when the context is first initialized.
+async function init({ relayEnvironment }: TalkContext) {
+  await initLocalState(relayEnvironment);
+}
+
+async function main() {
+  // Bootstrap our context.
+  const context = await createContext({
+    init,
+    localesData,
+    userLocales: navigator.languages,
+  });
+
+  const Index: StatelessComponent = () => (
+    <TalkContextProvider value={context}>
+      <AppContainer />
+    </TalkContextProvider>
+  );
+
+  ReactDOM.render(<Index />, document.getElementById("app"));
+}
+
+main();

src/core/client/auth/local/index.ts

@@ -0,0 +1 @@
+export { default as initLocalState } from "./initLocalState";

src/core/client/auth/local/initLocalState.ts

@@ -0,0 +1,24 @@
+import { commitLocalUpdate, Environment } from "relay-runtime";
+
+import {
+  createAndRetain,
+  LOCAL_ID,
+  LOCAL_TYPE,
+} from "talk-framework/lib/relay";
+
+/**
+ * Initializes the local state, before we start the App.
+ */
+export default async function initLocalState(environment: Environment) {
+  commitLocalUpdate(environment, s => {
+    const root = s.getRoot();
+
+    // Create the Local Record which is the Root for the client states.
+    const localRecord = createAndRetain(environment, s, LOCAL_ID, LOCAL_TYPE);
+
+    // Set default view.
+    localRecord.setValue("SIGN_IN", "view");
+
+    root.setLinkedRecord(localRecord, "local");
+  });
+}

src/core/client/auth/local/local.graphql

@@ -0,0 +1,13 @@
+enum View {
+  SIGN_UP
+  SIGN_IN
+  FORGOT_PASSWORD
+}
+
+type Local {
+  view: View!
+}
+
+extend type Query {
+  local: Local!
+}

src/core/client/auth/locales.ts

@@ -0,0 +1,9 @@
+/**
+ * The actual content of this file is being generated by our `locales-loader`.
+ * Please check `./src/loaders` and the webpack config for more information.
+ *
+ * This file only represents the types that gets exported.
+ */
+
+import { LocalesData } from "talk-framework/lib/i18n";
+export default {} as LocalesData;

src/core/client/tsconfig.json

@@ -9,6 +9,7 @@
     "baseUrl": "./",
     "paths": {
       "talk-admin/*": ["./admin/*"],
+      "talk-auth/*": ["./auth/*"],
       "talk-stream/*": ["./stream/*"],
       "talk-framework/*": ["./framework/*"],
       "talk-ui/*": ["./ui/*"],