Auth app added

.github/workflows/auth.yml

@@ -0,0 +1,54 @@
+name: deploy-auth
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "packages/auth/**"
+  workflow_dispatch:
+    inputs:
+      logLevel:
+        description: "Log level"
+        required: true
+        default: "debug"
+        type: choice
+        options:
+          - info
+          - warning
+          - debug
+      environment:
+        description: "Environment to run tests against"
+        type: environment
+        required: true
+
+defaults:
+  run:
+    working-directory: packages/auth
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{inputs.environment}}
+    env:
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+    steps:
+      - uses: actions/checkout@master
+      - run: npm install
+      - run: npm run build
+        env:
+          PRODUCTION_DOMAIN: ${{ vars.PRODUCTION_DOMAIN }}
+
+      - name: Deploy
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks --delete
+        env:
+          AWS_S3_BUCKET: ${{ vars.AWS_S3_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ vars.AWS_DEFAULT_REGION }}
+          SOURCE_DIR: "packages/auth/dist"
+          DEST_DIR: "auth/latest"

.github/workflows/container.yml

@@ -11,7 +11,7 @@ on:
       logLevel:
         description: "Log level"
         required: true
-        default: "warning"
+        default: "debug"
         type: choice
         options:
           - info
@@ -40,7 +40,7 @@ jobs:
       - run: npm run build
         env:
           PRODUCTION_DOMAIN: ${{ vars.PRODUCTION_DOMAIN }}
-  
+
       - name: Deploy
         uses: jakejarvis/s3-sync-action@master
         with:
@@ -50,5 +50,5 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           AWS_REGION: ${{ vars.AWS_DEFAULT_REGION }}
-          SOURCE_DIR: 'packages/container/dist'      
-          DEST_DIR:  'container/latest'
+          SOURCE_DIR: "packages/container/dist"
+          DEST_DIR: "container/latest"

.github/workflows/marketing.yml

@@ -11,7 +11,7 @@ on:
       logLevel:
         description: "Log level"
         required: true
-        default: "warning"
+        default: "debug"
         type: choice
         options:
           - info

packages/auth/config/webpack.common.js

@@ -0,0 +1,17 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-react", "@babel/preset-env"],
+            plugins: ["@babel/plugin-transform-runtime"],
+          },
+        },
+      },
+    ],
+  },
+};

packages/auth/config/webpack.dev.js

@@ -0,0 +1,33 @@
+const { merge } = require("webpack-merge");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const commonConfig = require("./webpack.common");
+const packageJson = require("../package.json");
+
+const devConfig = {
+  mode: "development",
+  devServer: {
+    port: 5012,
+    historyApiFallback: {
+      historyApiFallback: true,
+    },
+  },
+  output: {
+    publicPath: "http://localhost:5012/",
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "auth",
+      filename: "remoteEntry.js",
+      exposes: {
+        "./AuthApp": "./src/bootstrap",
+      },
+      shared: packageJson.dependencies,
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html",
+    }),
+  ],
+};
+
+module.exports = merge(commonConfig, devConfig);

packages/auth/config/webpack.prod.js

@@ -0,0 +1,24 @@
+const { merge } = require("webpack-merge");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const commonConfig = require("./webpack.common");
+const packageJson = require("../package.json");
+
+const prodConfig = {
+  mode: "production",
+  output: {
+    filename: `[name].[contenthash].js`,
+    publicPath: "/auth/latest",
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "auth",
+      filename: "remoteEntry.js",
+      exposes: {
+        "./AuthApp": "./src/bootstrap",
+      },
+      shared: packageJson.dependencies,
+    }),
+  ],
+};
+
+module.exports = merge(commonConfig, prodConfig);

packages/auth/package.json

@@ -2,7 +2,8 @@
   "name": "auth",
   "version": "1.0.0",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "webpack serve --config config/webpack.dev.js",
+    "build": "webpack --config config/webpack.prod.js"
   },
   "dependencies": {
     "@material-ui/core": "^4.11.0",
@@ -26,4 +27,4 @@
     "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^5.2.0"
   }
-}
+}

packages/auth/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auth</title>
+  </head>
+  <body>
+    <div id="auth-development"></div>
+  </body>
+</html>

packages/auth/src/App.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { Switch, Route, Router } from "react-router-dom";
+import {
+  StylesProvider,
+  createGenerateClassName,
+} from "@material-ui/core/styles";
+
+import Signin from "./components/Signin";
+import Signup from "./components/Signup";
+import SignUp from "./components/Signup";
+
+const classNameGenerator = createGenerateClassName({
+  productionPrefix: "auth",
+});
+
+export default ({ history, onSignIn }) => {
+  return (
+    <div>
+      <StylesProvider generateClassName={classNameGenerator}>
+        <Router history={history}>
+          <Switch>
+            <Route path="/auth/signin">
+              <Signin onSignIn={onSignIn}></Signin>
+            </Route>
+            <Route path="/auth/signup">
+              <SignUp onSignIn={onSignIn}></SignUp>
+            </Route>
+          </Switch>
+        </Router>
+      </StylesProvider>
+    </div>
+  );
+};

packages/auth/src/bootstrap.js

@@ -0,0 +1,37 @@
+import React, { StrictMode } from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { createMemoryHistory, createBrowserHistory } from "history";
+
+//Mount function to startup the App
+const mount = (el, { onNavigate, defaultHistory, initialPath, onSignIn }) => {
+  const history =
+    defaultHistory ||
+    createMemoryHistory({
+      initialEntries: [initialPath],
+    });
+
+  if (onNavigate) history.listen(onNavigate);
+  ReactDOM.render(
+    <StrictMode>
+      <App onSignIn={onSignIn} history={history}></App>
+    </StrictMode>,
+    el
+  );
+
+  return {
+    onParentNavigate({ pathname: nextPathname }) {
+      const { pathname } = history.location;
+      if (pathname !== nextPathname) {
+        history.push(nextPathname);
+      }
+    },
+  };
+};
+
+//If we are in development and  isolation call immediatly the mount
+if (process.env.NODE_ENV === "development") {
+  const devRoot = document.querySelector("#auth-development");
+  if (devRoot) mount(devRoot, { defaultHistory: createBrowserHistory() });
+}
+export { mount };

packages/auth/src/components/Signin.js

@@ -0,0 +1,118 @@
+import React from "react";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import Grid from "@material-ui/core/Grid";
+import Box from "@material-ui/core/Box";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+import { Link } from "react-router-dom";
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {"Copyright © "}
+      <Link color="inherit" to="/">
+        Your Website
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
+    </Typography>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  "@global": {
+    a: {
+      textDecoration: "none",
+    },
+  },
+  paper: {
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: "100%",
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+}));
+
+export default function SignIn({ onSignIn }) {
+  const classes = useStyles();
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <div className={classes.paper}>
+        <Avatar className={classes.avatar}>
+          <LockOutlinedIcon />
+        </Avatar>
+        <Typography component="h1" variant="h5">
+          Sign in
+        </Typography>
+        <form
+          onSubmit={(e) => e.preventDefault()}
+          className={classes.form}
+          noValidate
+        >
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            id="email"
+            label="Email Address"
+            name="email"
+            autoComplete="email"
+            autoFocus
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Password"
+            type="password"
+            id="password"
+            autoComplete="current-password"
+          />
+          <FormControlLabel
+            control={<Checkbox value="remember" color="primary" />}
+            label="Remember me"
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={onSignIn}
+          >
+            Sign In
+          </Button>
+          <Grid container>
+            <Grid item>
+              <Link to="/auth/signup">{"Don't have an account? Sign Up"}</Link>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+      <Box mt={8}>
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}