update,
This commit is contained in:
louiscklaw
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
37
vinniesniper-54816/task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/.gitignore
vendored
Normal file
37
vinniesniper-54816/task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/.gitignore
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
||||
dist
|
||||
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
public
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"printWidth": 144
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
# nextjs form app
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
```bash
|
||||
yarn dev
|
||||
# Open
|
||||
|
||||
open http://localhost:3000
|
||||
```
|
||||
|
||||
## Production Server
|
||||
|
||||
```bash
|
||||
yarn build
|
||||
|
||||
yarn start
|
||||
```
|
||||
|
||||
|
||||
## References
|
||||
|
||||
* https://nextjs.org/docs/advanced-features/custom-server
|
||||
* https://github.com/vercel/next.js/tree/canary/examples/custom-server-express
|
||||
* https://github.com/vercel/next.js/tree/canary/examples/custom-server-hapi
|
||||
@@ -0,0 +1,6 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -ex
|
||||
|
||||
rm -rf node_modules
|
||||
rm -rf .next
|
||||
@@ -0,0 +1,28 @@
|
||||
/* eslint-disable @next/next/no-html-link-for-pages */
|
||||
import * as React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export interface CompleteProps {
|
||||
message: string;
|
||||
nextPageUri: string;
|
||||
}
|
||||
|
||||
export const Complete: React.VFC<CompleteProps> = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Completed</h1>
|
||||
<div>
|
||||
<h2>The following information has been received</h2>
|
||||
<div>
|
||||
<p>Message</p>
|
||||
<pre>{props.message}</pre>
|
||||
</div>
|
||||
<div>
|
||||
<Link href={props.nextPageUri}>To Next</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Complete;
|
||||
@@ -0,0 +1,38 @@
|
||||
import * as React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export interface FormProps {
|
||||
formTitle: string;
|
||||
message: string;
|
||||
_token: string;
|
||||
actinoUrl: string;
|
||||
readOnly: boolean;
|
||||
submitMessage: string;
|
||||
}
|
||||
|
||||
export const Form: React.VFC<FormProps> = (props) => {
|
||||
return (
|
||||
<div>
|
||||
<h1>{props.formTitle}</h1>
|
||||
<form action={props.actinoUrl} method="post" encType="multipart/form-data">
|
||||
<p>
|
||||
<label htmlFor="message">Message</label>
|
||||
<input readOnly={props.readOnly} id="message" name="message" type="text" defaultValue={props.message} />
|
||||
<input name="_token" type="hidden" value={props._token} />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label htmlFor="file">File</label>
|
||||
<input id="file" type="file" name="file" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input type="submit" value={props.submitMessage} />
|
||||
</p>
|
||||
</form>
|
||||
<Link href="/">To Top</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Form;
|
||||
@@ -0,0 +1,21 @@
|
||||
import * as React from "react";
|
||||
|
||||
export interface Props {
|
||||
children?: JSX.Element;
|
||||
}
|
||||
|
||||
export const Component: React.FC<Props> = (props) => {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="UTF-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>{props.children}</body>
|
||||
</html>
|
||||
);
|
||||
};
|
||||
|
||||
export default Component;
|
||||
5
vinniesniper-54816/task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/next-env.d.ts
vendored
Normal file
5
vinniesniper-54816/task1/_lab/011-flask-nextjs/nextjs/nextjs-form-app-main/next-env.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
@@ -0,0 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"watch": ["**/**"],
|
||||
"ignore": ["node_modules"],
|
||||
"ext": "ts,.tsx",
|
||||
"exec": "yarn server"
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "nextjs-form-app",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build && tsc -P tsconfig.server.json",
|
||||
"dev": "nodemon",
|
||||
"server": "ts-node -P tsconfig.server.json server",
|
||||
"format": "prettier --write **/**",
|
||||
"lint": "next lint",
|
||||
"start": "cross-env NODE_ENV=production yarn server"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.7",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"express": "^4.17.3",
|
||||
"express-session": "^1.17.2",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"next": "12.1.1",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"uuid": "^8.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/cookie-parser": "^1.4.2",
|
||||
"@types/express": "^4.17.13",
|
||||
"@types/express-session": "^1.17.4",
|
||||
"@types/multer": "^1.4.12",
|
||||
"@types/node": "17.0.23",
|
||||
"@types/react": "17.0.43",
|
||||
"@types/react-dom": "17.0.14",
|
||||
"@types/uuid": "^8.3.4",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "8.12.0",
|
||||
"eslint-config-next": "12.1.1",
|
||||
"nodemon": "^2.0.15",
|
||||
"prettier": "^2.6.1",
|
||||
"ts-node": "^10.7.0",
|
||||
"typescript": "4.6.3"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import Link from "next/link";
|
||||
|
||||
function About() {
|
||||
return (
|
||||
<div>
|
||||
<h1>About Page</h1>
|
||||
<p>
|
||||
Sample form application using next.js, which can be realised by using custom-server.
|
||||
<br />
|
||||
<Link href="https://nextjs.org/docs/advanced-features/custom-server">Custom Server - next.js</Link>
|
||||
</p>
|
||||
<p>
|
||||
Custom servers have hot reload disabled and must be hot reloaded using nodemon.
|
||||
<br />
|
||||
<Link href="https://github.com/remy/nodemon">nodemon</Link>
|
||||
</p>
|
||||
<p>
|
||||
<Link href="/">To Top</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default About;
|
||||
@@ -0,0 +1,19 @@
|
||||
import Link from "next/link";
|
||||
|
||||
function About() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Top Page</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/about">About Page</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/register">Regsiter Form</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default About;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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();
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
};
|
||||
@@ -0,0 +1,115 @@
|
||||
.container {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
set -ex
|
||||
|
||||
yarn
|
||||
yarn dev
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"outDir": "dist",
|
||||
"lib": ["es2019"],
|
||||
"target": "es2019",
|
||||
"isolatedModules": false,
|
||||
"noEmit": false,
|
||||
"jsx": "react"
|
||||
},
|
||||
"include": ["server/**/*.ts"]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user