Add react-router, Implement Token context
This commit is contained in:
parent
7b5f5a4546
commit
fe677d404b
107
frontend/package-lock.json
generated
107
frontend/package-lock.json
generated
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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
25
frontend/src/Login.tsx
Normal 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
14
frontend/src/MainView.tsx
Normal 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
14
frontend/src/pages/Index.tsx
Normal 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
5
frontend/src/pages/Page404.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
const Page404: React.FC = () => {
|
||||
return <h1>404</h1>;
|
||||
};
|
||||
|
||||
export default Page404;
|
9
frontend/src/proto.ts
Normal file
9
frontend/src/proto.ts
Normal 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
39
frontend/src/tokenStorage.tsx
Normal 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>
|
||||
}
|
Loading…
Reference in New Issue
Block a user