turtles/controlpanel-old
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add react-router, Implement Token context

Browse Source
This commit is contained in:
Kai Vogelgesang 2022-01-01 23:01:01 +01:00
parent 7b5f5a4546
commit fe677d404b
Signed by: kai
GPG Key ID: 0A95D3B6E62C0879
9 changed files with 220 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/package-lock.json generated
View File

@ -15,8 +15,10 @@
"@types/node": "^16.11.17",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"typescript": "^4.5.4",
"web-vitals": "^2.1.2"
@ -3356,6 +3358,11 @@
"@types/node": "*"
}
},
"node_modules/@types/history": {
"version": "4.7.9",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
"integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ=="
},
"node_modules/@types/html-minifier-terser": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@ -3467,6 +3474,25 @@
"@types/react": "*"
}
},
"node_modules/@types/react-router": {
"version": "5.1.17",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz",
"integrity": "sha512-RNSXOyb3VyRs/EOGmjBhhGKTbnN6fHWvy5FNLzWfOWOGjgVUKqJZXfpKzLmgoU8h6Hj8mpALj/mbXQASOb92wQ==",
"dependencies": {
"@types/history": "*",
"@types/react": "*"
}
},
"node_modules/@types/react-router-dom": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.2.tgz",
"integrity": "sha512-ELEYRUie2czuJzaZ5+ziIp9Hhw+juEw8b7C11YNA4QdLCVbQ3qLi2l4aq8XnlqM7V31LZX8dxUuFUCrzHm6sqQ==",
"dependencies": {
"@types/history": "*",
"@types/react": "*",
"@types/react-router": "*"
}
},
"node_modules/@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -7905,6 +7931,14 @@
"he": "bin/he"
}
},
"node_modules/history": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
"integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
"dependencies": {
"@babel/runtime": "^7.7.6"
}
},
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -13228,6 +13262,30 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
"integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
"dependencies": {
"history": "^5.2.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
"integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
"dependencies": {
"history": "^5.2.0",
"react-router": "6.2.1"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@ -18384,6 +18442,11 @@
"@types/node": "*"
}
},
"@types/history": {
"version": "4.7.9",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
"integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ=="
},
"@types/html-minifier-terser": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@ -18495,6 +18558,25 @@
"@types/react": "*"
}
},
"@types/react-router": {
"version": "5.1.17",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz",
"integrity": "sha512-RNSXOyb3VyRs/EOGmjBhhGKTbnN6fHWvy5FNLzWfOWOGjgVUKqJZXfpKzLmgoU8h6Hj8mpALj/mbXQASOb92wQ==",
"requires": {
"@types/history": "*",
"@types/react": "*"
}
},
"@types/react-router-dom": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.2.tgz",
"integrity": "sha512-ELEYRUie2czuJzaZ5+ziIp9Hhw+juEw8b7C11YNA4QdLCVbQ3qLi2l4aq8XnlqM7V31LZX8dxUuFUCrzHm6sqQ==",
"requires": {
"@types/history": "*",
"@types/react": "*",
"@types/react-router": "*"
}
},
"@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@ -21772,6 +21854,14 @@
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
"history": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
"integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
"requires": {
"@babel/runtime": "^7.7.6"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -25471,6 +25561,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
"integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
"requires": {
"history": "^5.2.0"
}
},
"react-router-dom": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
"integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
"requires": {
"history": "^5.2.0",
"react-router": "6.2.1"
}
},
"react-scripts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

2
frontend/package.json
View File

@ -11,8 +11,10 @@
"@types/node": "^16.11.17",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"typescript": "^4.5.4",
"web-vitals": "^2.1.2"

8
frontend/src/App.tsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import MainView from './MainView';
import { TokenProvider } from './tokenStorage';
const App: React.FC = () => {
return <div>
Hallo i bims 1 frontend
</div>
return <TokenProvider>
<MainView />
</TokenProvider>
}
export default App;

25
frontend/src/Login.tsx Normal file
View File

@ -0,0 +1,25 @@
import React, { useState } from "react";
import { TokenContext } from "./tokenStorage";
export const Login: React.FC = () => {
const [inputState, setInputState] = useState("");
const tokenStorage = React.useContext(TokenContext);
return <>
<h1>gib token</h1>
<form onSubmit={(e) => {
e.preventDefault();
tokenStorage.set(inputState);
}}>
<input
type="text"
value={inputState}
onChange={(e) => setInputState(e.target.value)}>
</input>
<button type="submit"> Submit </button>
</form>
</>
}
export default Login;

14
frontend/src/MainView.tsx Normal file
View File

@ -0,0 +1,14 @@
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
import Page404 from './pages/Page404';
export const MainView: React.FC = () => {
return <Router>
<Routes>
<Route index element={<Index />} />
<Route path="*" element={<Page404 />} />
</Routes>
</Router >
}
export default MainView;

14
frontend/src/pages/Index.tsx Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import { TokenContext } from "../tokenStorage";
export const Index: React.FC = () => {
const tokenStorage = React.useContext(TokenContext);
return <>
Hallo i bims 1 index u d1 token bimst {tokenStorage.token}
<button onClick={tokenStorage.reset}>Resetteroni</button>
</>
}
export default Index;

5
frontend/src/pages/Page404.tsx Normal file
View File

@ -0,0 +1,5 @@
const Page404: React.FC = () => {
return <h1>404</h1>;
};
export default Page404;

9
frontend/src/proto.ts Normal file
View File

@ -0,0 +1,9 @@
export type Computer = {
uuid: string,
label: string,
group: string,
}
export type State = {
computers: Array<Computer>
};

39
frontend/src/tokenStorage.tsx Normal file
View File

@ -0,0 +1,39 @@
import React, { useState } from "react";
import Login from "./Login";
const LOCAL_STORAGE_KEY = "token";
export type Token = string | null;
export type TokenStorage = {
token: Token,
set: (newToken: string) => void,
reset: () => void,
}
export const TokenContext = React.createContext<TokenStorage>({
token: null,
set: () => { },
reset: () => { },
});
export const TokenProvider: React.FC = (props) => {
const [token, setToken] = useState<Token>(localStorage.getItem(LOCAL_STORAGE_KEY));
return <TokenContext.Provider value={{
token: token,
set: (newToken) => {
localStorage.setItem(LOCAL_STORAGE_KEY, newToken);
setToken(newToken);
},
reset: () => {
localStorage.removeItem(LOCAL_STORAGE_KEY);
setToken(null);
}
}}>
{
token
? props.children
: <Login />
}
</TokenContext.Provider>
}