diff options
author | Jon Bergli Heier <snakebite@jvnv.net> | 2020-11-16 20:32:50 +0100 |
---|---|---|
committer | Jon Bergli Heier <snakebite@jvnv.net> | 2020-11-16 20:32:50 +0100 |
commit | b03234567aa2069f777a7a5d38a2ae0bc0d7ebc5 (patch) | |
tree | c59c86f45eb63c1d8b6cb3fcdad4ce16fc483887 /frontend/src/index.js | |
parent | f23c03a3375cce6c16ba9255abaddf03efca01eb (diff) |
Add frontend
Authentication is currently working but no other functionality is yet
implemented. Authentication is done using OAuth 2 via the backend,
currently we assume jab is being used.
Diffstat (limited to 'frontend/src/index.js')
-rw-r--r-- | frontend/src/index.js | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/frontend/src/index.js b/frontend/src/index.js new file mode 100644 index 0000000..c2a2b74 --- /dev/null +++ b/frontend/src/index.js @@ -0,0 +1,66 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { BrowserRouter, Link, Switch, Route } from 'react-router-dom'; +import { Navbar, Nav, Container } from 'react-bootstrap'; +import { UserContext, Login, Logout, OauthCallback, AuthenticationProvider } from './auth.js'; +import { Flash } from './flash'; +import { ThemeContext, ThemeProvider, ThemeSwitcher } from './theme.js'; +import Main from './app'; + +function LoginNavigation(props) { + if (!props.value.is_logged_in) { + return <Nav.Link as={Link} to="/login">Login</Nav.Link> + } + return <> + <Nav.Link as={Link} to="/logout">Logout [{props.value.username}]</Nav.Link> + </>; +} + +function Navigation() { + return <ThemeContext.Consumer> + {theme => ( + <Navbar bg={theme.bg} variant={theme.bg} expand="lg"> + <Navbar.Brand as={Link} to="/">Inventory</Navbar.Brand> + <Navbar.Toggle aria-controls="navbar-content" /> + <Navbar.Collapse id="navbar-content"> + <Nav className="mr-auto"> + <Nav.Link as={Link} to="/">Home</Nav.Link> + <UserContext.Consumer> + {value => <LoginNavigation value={value} />} + </UserContext.Consumer> + </Nav> + <ThemeSwitcher /> + </Navbar.Collapse> + </Navbar>)} + </ThemeContext.Consumer>; +} + +function Router() { + return <BrowserRouter> + <Navigation /> + <Flash /> + <Container fluid> + <Switch> + <Route path="/login" component={Login} /> + <Route path="/logout" component={Logout} /> + <Route path="/oauth-callback" component={OauthCallback} /> + <Route path="/" component={Main} /> + </Switch> + </Container> + </BrowserRouter>; +} + +function Root() { + return <AuthenticationProvider> + <ThemeProvider> + <Router /> + </ThemeProvider> + </AuthenticationProvider>; +} + +ReactDOM.render( + <React.StrictMode> + <Root /> + </React.StrictMode>, + document.getElementById('root') +); |