update,

task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/server/complete.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom/server";
+import express from "express";
+import { getUser, generateToken, setUser } from "./utils";
+import Layout from "../layout/Layout";
+import Complete, { CompleteProps } from "../components/complete";
+
+const router = express.Router();
+
+const Page: React.VFC<CompleteProps> = (props) => {
+  return (
+    <Layout>
+      <Complete {...props} />
+    </Layout>
+  );
+};
+
+router.post("/", (req, res) => {
+  const user = getUser(req);
+  if (user && user.token === req.body._token) {
+    const token = generateToken();
+    const props: CompleteProps = {
+      message: req.body.message,
+      nextPageUri: "/register",
+    };
+    const html = ReactDOM.renderToStaticMarkup(<Page {...props} />);
+    setUser(req, { token });
+    res.status(303).send(html);
+  } else {
+    res.send(`Expired Session. <a href="/" rel="noopener">To Top</a>`);
+  }
+});
+
+export default router;

task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/server/confirm.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom/server";
+import express from "express";
+import { getUser, generateToken, setUser } from "./utils";
+import Layout from "../layout/Layout";
+import Form, { FormProps } from "../components/form";
+import multer from "multer";
+
+const upload = multer();
+
+const router = express.Router();
+
+const Page: React.VFC<FormProps> = (props) => {
+  return (
+    <Layout>
+      <Form {...props} />
+    </Layout>
+  );
+};
+
+router.post("/", upload.none(), (req, res) => {
+  const user = getUser(req);
+  if (user && user.token === req.body._token) {
+    const token = generateToken();
+    const props: FormProps = {
+      formTitle: "Confirm",
+      message: req.body.message,
+      _token: token,
+      readOnly: true,
+      actinoUrl: "/complete",
+      submitMessage: "Submit",
+    };
+    const html = ReactDOM.renderToStaticMarkup(<Page {...props} />);
+    setUser(req, { token });
+    res.status(303).send(html);
+  } else {
+    res.send(`Expired Session. <a href="/" rel="noopener">To Top</a>`);
+  }
+});
+
+export default router;

task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/server/index.ts

@@ -0,0 +1,47 @@
+import express from "express";
+import session from "express-session";
+import cookieParser from "cookie-parser";
+import next from "next";
+import registerRouter from "./register";
+import confirmRouter from "./confirm";
+import completeRouter from "./complete";
+
+const port = parseInt(process.env.PORT || "3000", 10);
+const dev = process.env.NODE_ENV !== "production";
+
+const run = async () => {
+  const app = next({
+    dev,
+    dir: ".",
+  });
+  await app.prepare();
+  const server = express();
+  server.set("trust proxy", 1); // trust first proxy
+  server.use(
+    session({
+      secret: "my_session_secret",
+      name: "my.connect.sid",
+      resave: false,
+      saveUninitialized: true,
+      cookie: { secure: false },
+    })
+  );
+  server.use(cookieParser());
+  server.use(express.json());
+  server.use(express.urlencoded({ extended: true }));
+  const handler = app.getRequestHandler();
+
+  server.use("/register", registerRouter);
+  server.use("/confirm", confirmRouter);
+  server.use("/complete", completeRouter);
+
+  server.all("*", (req, res) => {
+    return handler(req, res);
+  });
+
+  server.listen(port, () => {
+    console.log(`> Ready on http://localhost:${port}`);
+  });
+};
+
+run();

task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/server/register.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom/server";
+import express from "express";
+import { generateToken, setUser } from "./utils";
+import Layout from "../layout/Layout";
+import Form, { FormProps } from "../components/form";
+
+import axios from "axios";
+
+const router = express.Router();
+
+const Page: React.VFC<FormProps> = (props) => {
+  return (
+    <Layout>
+      <Form {...props} />
+    </Layout>
+  );
+};
+
+function testAxiosRequest() {
+  axios
+    .get("http://localhost:5000/api/data")
+    .then((response) => {
+      console.log(response.data);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+}
+
+router.get("/", (req, res) => {
+  testAxiosRequest();
+
+  const token = generateToken();
+  setUser(req, { token });
+  const props: FormProps = {
+    formTitle: "Register",
+    message: "",
+    _token: token,
+    readOnly: false,
+    actinoUrl: "/confirm",
+    submitMessage: "Next Confirm",
+  };
+  const html = ReactDOM.renderToStaticMarkup(<Page {...props} />);
+  setUser(req, { token });
+
+  res.send(html);
+});
+
+export default router;

task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/server/utils.ts

@@ -0,0 +1,14 @@
+import express from "express";
+import { v4 as uuid } from "uuid";
+
+export const generateToken = () => {
+  return uuid();
+};
+
+export const getUser = (req: express.Request): Record<string, any> | undefined => {
+  return req.session && (req.session as any).user;
+};
+
+export const setUser = (req: express.Request, newUser: Record<string, string>): void => {
+  (req.session as any).user = newUser;
+};