Working on some structure to use react-router
This commit is contained in:
Jesús Espino
parent
751114f61b
commit
8396303932
14 changed files with 282 additions and 151 deletions
|
|
@ -8,28 +8,11 @@
|
|||
<link rel="stylesheet" href="/main.css">
|
||||
<link rel="stylesheet" href="/images.css">
|
||||
<link rel="stylesheet" href="/colors.css">
|
||||
|
||||
<script>
|
||||
window.location.href = "/boards"
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="container">
|
||||
<header id="header">
|
||||
<a href="/">OCTO</a>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<p>
|
||||
<a href="boards">All Boards</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<footer id="footer">
|
||||
</footer>
|
||||
|
||||
<div id="overlay">
|
||||
<div id="octo-tasks-app">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
109
package-lock.json
generated
109
package-lock.json
generated
|
|
@ -4,6 +4,14 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
|
||||
"integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
|
||||
|
|
@ -2350,6 +2358,19 @@
|
|||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
|
||||
"dev": true
|
||||
},
|
||||
"history": {
|
||||
"version": "4.10.1",
|
||||
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
||||
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"loose-envify": "^1.2.0",
|
||||
"resolve-pathname": "^3.0.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0",
|
||||
"value-equal": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
|
|
@ -2361,6 +2382,14 @@
|
|||
"minimalistic-crypto-utils": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"homedir-polyfill": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
|
||||
|
|
@ -2975,6 +3004,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"mini-create-react-context": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
|
||||
"integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"minimalistic-assert": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
|
||||
|
|
@ -3469,6 +3507,21 @@
|
|||
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
|
||||
"dev": true
|
||||
},
|
||||
"path-to-regexp": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
|
||||
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
|
||||
"requires": {
|
||||
"isarray": "0.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
}
|
||||
}
|
||||
},
|
||||
"pbkdf2": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
|
||||
|
|
@ -3697,6 +3750,37 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
|
||||
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"hoist-non-react-statics": "^3.1.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"mini-create-react-context": "^0.4.0",
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-is": "^16.6.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
|
||||
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-router": "5.2.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-simplemde-editor": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-simplemde-editor/-/react-simplemde-editor-4.1.3.tgz",
|
||||
|
|
@ -3739,6 +3823,11 @@
|
|||
"picomatch": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.7",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
|
||||
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
|
||||
},
|
||||
"regex-not": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
|
||||
|
|
@ -3831,6 +3920,11 @@
|
|||
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
|
||||
"dev": true
|
||||
},
|
||||
"resolve-pathname": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
|
||||
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
|
||||
},
|
||||
"resolve-url": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||
|
|
@ -4407,6 +4501,16 @@
|
|||
"setimmediate": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"tiny-invariant": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
|
||||
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"to-arraybuffer": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
|
||||
|
|
@ -4701,6 +4805,11 @@
|
|||
"integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==",
|
||||
"dev": true
|
||||
},
|
||||
"value-equal": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
|
||||
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
|
||||
},
|
||||
"vm-browserify": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"marked": "^1.1.1",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-simplemde-editor": "^4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -404,10 +404,12 @@ func main() {
|
|||
|
||||
// Static files
|
||||
handleStaticFile(r, "/", "index.html", "text/html; charset=utf-8")
|
||||
handleStaticFile(r, "/boards", "boards.html", "text/html; charset=utf-8")
|
||||
handleStaticFile(r, "/board", "board.html", "text/html; charset=utf-8")
|
||||
handleStaticFile(r, "/login", "index.html", "text/html; charset=utf-8")
|
||||
handleStaticFile(r, "/boards", "index.html", "text/html; charset=utf-8")
|
||||
handleStaticFile(r, "/board", "index.html", "text/html; charset=utf-8")
|
||||
|
||||
handleStaticFile(r, "/boardsPage.js", "boardsPage.js", "text/javascript; charset=utf-8")
|
||||
handleStaticFile(r, "/main.js", "main.js", "text/javascript; charset=utf-8")
|
||||
handleStaticFile(r, "/boardPage.js", "boardPage.js", "text/javascript; charset=utf-8")
|
||||
handleStaticFile(r, "/boardPage.js", "boardPage.js", "text/javascript; charset=utf-8")
|
||||
|
||||
handleStaticFile(r, "/favicon.ico", "static/favicon.svg", "image/svg+xml; charset=utf-8")
|
||||
|
|
|
|||
40
src/client/app.tsx
Normal file
40
src/client/app.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import React from "react";
|
||||
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
Link
|
||||
} from "react-router-dom";
|
||||
|
||||
import LoginPage from './pages/loginPage';
|
||||
import HomePage from './pages/homePage';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Router>
|
||||
<div>
|
||||
<header id="header">
|
||||
<a href="/">OCTO</a>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<Switch>
|
||||
<Route path="/login">
|
||||
<LoginPage />
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<HomePage />
|
||||
</Route>
|
||||
</Switch>
|
||||
</main>
|
||||
|
||||
<footer id="footer">
|
||||
</footer>
|
||||
|
||||
<div id="overlay">
|
||||
</div>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
import { Archiver } from "./archiver"
|
||||
import { Board } from "./board"
|
||||
import { Mutator } from "./mutator"
|
||||
import { OctoClient } from "./octoClient"
|
||||
import { UndoManager } from "./undomanager"
|
||||
import { Utils } from "./utils"
|
||||
|
||||
class BoardsPage {
|
||||
boardsPanel: HTMLElement
|
||||
|
||||
boardId: string
|
||||
boards: Board[]
|
||||
|
||||
octo = new OctoClient()
|
||||
|
||||
constructor() {
|
||||
// This is a placeholder page
|
||||
|
||||
const mainPanel = Utils.getElementById("main")
|
||||
|
||||
this.boardsPanel = mainPanel.appendChild(document.createElement("div"))
|
||||
|
||||
{
|
||||
const addButton = document.body.appendChild(document.createElement("div"))
|
||||
addButton.className = "octo-button"
|
||||
addButton.innerText = "+ Add Board"
|
||||
addButton.onclick = () => { this.addClicked() }
|
||||
}
|
||||
|
||||
document.body.appendChild(document.createElement("br"))
|
||||
|
||||
{
|
||||
const importButton = document.body.appendChild(document.createElement("div"))
|
||||
importButton.className = "octo-button"
|
||||
importButton.innerText = "Import archive"
|
||||
importButton.onclick = async () => {
|
||||
const octo = new OctoClient()
|
||||
const mutator = new Mutator(octo, UndoManager.shared)
|
||||
Archiver.importFullArchive(mutator, () => {
|
||||
this.updateView()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
{
|
||||
const exportButton = document.body.appendChild(document.createElement("div"))
|
||||
exportButton.className = "octo-button"
|
||||
exportButton.innerText = "Export archive"
|
||||
exportButton.onclick = () => {
|
||||
const octo = new OctoClient()
|
||||
const mutator = new Mutator(octo, UndoManager.shared)
|
||||
Archiver.exportFullArchive(mutator)
|
||||
}
|
||||
}
|
||||
|
||||
this.updateView()
|
||||
}
|
||||
|
||||
async getBoardData() {
|
||||
const boards = this.octo.getBlocks(null, "board")
|
||||
}
|
||||
|
||||
async updateView() {
|
||||
const { boardsPanel } = this
|
||||
|
||||
boardsPanel.innerText = ""
|
||||
|
||||
const boards = await this.octo.getBlocks(null, "board")
|
||||
for (const board of boards) {
|
||||
const p = boardsPanel.appendChild(document.createElement("p"))
|
||||
const a = p.appendChild(document.createElement("a"))
|
||||
a.style.padding = "5px 10px"
|
||||
a.style.fontSize = "20px"
|
||||
a.href = `./board?id=${encodeURIComponent(board.id)}`
|
||||
|
||||
if (board.icon) {
|
||||
const icon = a.appendChild(document.createElement("span"))
|
||||
icon.className = "octo-icon"
|
||||
icon.style.marginRight = "10px"
|
||||
icon.innerText = board.icon
|
||||
}
|
||||
|
||||
const title = a.appendChild(document.createElement("b"))
|
||||
const updatedDate = new Date(board.updateAt)
|
||||
title.innerText = board.title
|
||||
const details = a.appendChild(document.createElement("span"))
|
||||
details.style.fontSize = "15px"
|
||||
details.style.color = "#909090"
|
||||
details.style.marginLeft = "10px"
|
||||
details.innerText = ` ${Utils.displayDate(updatedDate)}`
|
||||
}
|
||||
|
||||
console.log(`updateView: ${boards.length} board(s).`)
|
||||
}
|
||||
|
||||
async addClicked() {
|
||||
const board = new Board()
|
||||
await this.octo.insertBlock(board)
|
||||
await this.updateView()
|
||||
}
|
||||
}
|
||||
|
||||
export = BoardsPage
|
||||
|
||||
const _ = new BoardsPage()
|
||||
console.log("boardsView")
|
||||
|
|
@ -14,7 +14,7 @@ import { OctoUtils } from "../octoUtils"
|
|||
import { Utils } from "../utils"
|
||||
import { BoardCard } from "./boardCard"
|
||||
import { BoardColumn } from "./boardColumn"
|
||||
import { Button } from "./button"
|
||||
import Button from "./button"
|
||||
import { Editable } from "./editable"
|
||||
|
||||
type Props = {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ type Props = {
|
|||
title?: string
|
||||
}
|
||||
|
||||
class Button extends React.Component<Props> {
|
||||
export default class Button extends React.Component<Props> {
|
||||
render() {
|
||||
const style = {...this.props.style, backgroundColor: this.props.backgroundColor}
|
||||
return (
|
||||
|
|
@ -22,5 +22,3 @@ class Button extends React.Component<Props> {
|
|||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
export { Button }
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { IBlock } from "../octoTypes"
|
|||
import { OctoUtils } from "../octoUtils"
|
||||
import { PropertyMenu } from "../propertyMenu"
|
||||
import { Utils } from "../utils"
|
||||
import { Button } from "./button"
|
||||
import Button from "./button"
|
||||
import { Editable } from "./editable"
|
||||
import { MarkdownEditor } from "./markdownEditor"
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Mutator } from "../mutator"
|
|||
import { IBlock, IPageController } from "../octoTypes"
|
||||
import { OctoUtils } from "../octoUtils"
|
||||
import { Utils } from "../utils"
|
||||
import { Button } from "./button"
|
||||
import Button from "./button"
|
||||
import { Editable } from "./editable"
|
||||
import { TableRow } from "./tableRow"
|
||||
|
||||
|
|
|
|||
6
src/client/main.tsx
Normal file
6
src/client/main.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import App from './app';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('octo-tasks-app'));
|
||||
76
src/client/pages/homePage.tsx
Normal file
76
src/client/pages/homePage.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import React from 'react';
|
||||
|
||||
import { IBlock } from "../octoTypes"
|
||||
import { Archiver } from "../archiver"
|
||||
import { Board } from "../board"
|
||||
import { Mutator } from "../mutator"
|
||||
import { OctoClient } from "../octoClient"
|
||||
import { UndoManager } from "../undomanager"
|
||||
import { Utils } from "../utils"
|
||||
import Button from '../components/button';
|
||||
|
||||
type Props = {};
|
||||
|
||||
type State = {
|
||||
boards: IBlock[];
|
||||
};
|
||||
|
||||
export default class HomePage extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
boards: [],
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadBoards();
|
||||
}
|
||||
|
||||
loadBoards = async () => {
|
||||
const octo = new OctoClient()
|
||||
const boards = await octo.getBlocks(null, "board")
|
||||
this.setState({boards});
|
||||
}
|
||||
|
||||
importClicked = async () => {
|
||||
const octo = new OctoClient()
|
||||
const mutator = new Mutator(octo, UndoManager.shared)
|
||||
Archiver.importFullArchive(mutator, () => {
|
||||
this.loadBoards()
|
||||
})
|
||||
}
|
||||
|
||||
exportClicked = async () => {
|
||||
const octo = new OctoClient()
|
||||
const mutator = new Mutator(octo, UndoManager.shared)
|
||||
Archiver.exportFullArchive(mutator)
|
||||
}
|
||||
|
||||
addClicked = async () => {
|
||||
const octo = new OctoClient()
|
||||
const board = new Board()
|
||||
await octo.insertBlock(board)
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={this.addClicked}>+ Add Board</Button>
|
||||
<br />
|
||||
<Button onClick={this.addClicked}>Import Archive</Button>
|
||||
<br />
|
||||
<Button onClick={this.addClicked}>Export Archive</Button>
|
||||
{this.state.boards.map((board) => (
|
||||
<p>
|
||||
<a href={`/board/${board.id}`}>
|
||||
{board.icon && <span>{board.icon}</span>}
|
||||
<span>{board.title}</span>
|
||||
<span>{Utils.displayDate(new Date(board.updateAt))}</span>
|
||||
</a>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
37
src/client/pages/loginPage.tsx
Normal file
37
src/client/pages/loginPage.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import React from "react"
|
||||
|
||||
type Props = {}
|
||||
|
||||
type State = {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export default class LoginPage extends React.Component<Props, State> {
|
||||
state = {
|
||||
username: '',
|
||||
password: '',
|
||||
}
|
||||
|
||||
handleLogin = () => {
|
||||
console.log("Logging in");
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
return (
|
||||
<div className='LoginPage'>
|
||||
<label htmlFor='login-username'>Username</label>
|
||||
<input
|
||||
id='login-username'
|
||||
value={this.state.username}
|
||||
onChange={(e) => this.setState({username: e.target.value})}
|
||||
/>
|
||||
<label htmlFor='login-username'>Password</label>
|
||||
<input
|
||||
id='login-password'
|
||||
/>
|
||||
<button onClick={this.handleLogin}>Login</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -50,28 +50,13 @@ function makeCommonConfig() {
|
|||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
title: "OCTO",
|
||||
chunks: [],
|
||||
chunks: ["main"],
|
||||
template: "html-templates/index.ejs",
|
||||
filename: 'index.html'
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
title: "OCTO - Boards",
|
||||
chunks: ["boardsPage"],
|
||||
template: "html-templates/page.ejs",
|
||||
filename: 'boards.html'
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
title: "OCTO",
|
||||
chunks: ["boardPage"],
|
||||
template: "html-templates/page.ejs",
|
||||
filename: 'board.html'
|
||||
}),
|
||||
],
|
||||
entry: {
|
||||
boardsPage: "./src/client/boardsPage.ts",
|
||||
boardPage: "./src/client/boardPage.tsx"
|
||||
main: "./src/client/main.tsx",
|
||||
},
|
||||
output: {
|
||||
filename: "[name].js",
|
||||
|
|
|
|||
Loading…
Reference in a new issue