Stian Aune
5 years ago
5 changed files with 123 additions and 28 deletions
-
65webui/package-lock.json
-
8webui/package.json
-
5webui/src/App.js
-
38webui/src/Components/Header.jsx
-
35webui/src/Components/LoginForm.jsx
@ -1,21 +1,29 @@ |
|||||
import React, {Component} from "react" |
|
||||
|
import React, {useState} from "react" |
||||
|
import {Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink} from "reactstrap"; |
||||
import {connect} from "react-redux"; |
import {connect} from "react-redux"; |
||||
import {Navbar, NavbarBrand} from "reactstrap"; |
|
||||
|
|
||||
class Header extends Component { |
|
||||
constructor(props) { |
|
||||
super(props); |
|
||||
} |
|
||||
|
function Header({isLoggedIn}) { |
||||
|
const [showMenu, setShowMenu] = useState(false); |
||||
|
|
||||
render() { |
|
||||
return ( |
|
||||
<Navbar color="dark" expand="md"> |
|
||||
<NavbarBrand href="/">Lucifer</NavbarBrand> |
|
||||
</Navbar> |
|
||||
); |
|
||||
} |
|
||||
|
return ( |
||||
|
<Navbar color="dark" dark expand="md"> |
||||
|
<NavbarBrand href="/">Lucifer</NavbarBrand> |
||||
|
<NavbarToggler onClick={() => setShowMenu(!showMenu)}/> |
||||
|
<Collapse isOpen={showMenu} navbar> |
||||
|
{isLoggedIn && ( |
||||
|
<Nav className="ml-auto" navbar> |
||||
|
<NavItem> |
||||
|
<NavLink href="/lights">Grupper</NavLink> |
||||
|
</NavItem> |
||||
|
</Nav> |
||||
|
)} |
||||
|
</Collapse> |
||||
|
</Navbar> |
||||
|
); |
||||
} |
} |
||||
|
|
||||
const mapStateToProps = (state) => ({}); |
|
||||
|
const mapStateToProps = (state) => ({ |
||||
|
isLoggedIn: state.auth.isLoggedIn, |
||||
|
}); |
||||
|
|
||||
export default connect(mapStateToProps)(Header); |
|
||||
|
export default connect(mapStateToProps)(Header); |
@ -0,0 +1,35 @@ |
|||||
|
import React from "react"; |
||||
|
import {connect} from "react-redux"; |
||||
|
import {Card, CardBody, CardHeader, CardTitle, Col, Form, FormGroup, Input, Label} from "reactstrap"; |
||||
|
|
||||
|
function LoginForm(props) { |
||||
|
|
||||
|
|
||||
|
return ( |
||||
|
<Card> |
||||
|
<CardHeader> |
||||
|
<CardTitle>Innlogging</CardTitle> |
||||
|
</CardHeader> |
||||
|
<CardBody> |
||||
|
<Form> |
||||
|
<FormGroup row> |
||||
|
<Label sm={2} for="input-username">Brukernavn</Label> |
||||
|
<Col sm={10}> |
||||
|
<Input type="text" name="email" id="input-username"/> |
||||
|
</Col> |
||||
|
</FormGroup> |
||||
|
<FormGroup row> |
||||
|
<Label sm={2} for="input-password">Passord</Label> |
||||
|
<Col sm={10}> |
||||
|
<Input type="password" name="email" id="input-password"/> |
||||
|
</Col> |
||||
|
</FormGroup> |
||||
|
</Form> |
||||
|
</CardBody> |
||||
|
</Card> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const mapStateToProps = (state) => ({}); |
||||
|
|
||||
|
export default connect(mapStateToProps)(LoginForm); |
Write
Preview
Loading…
Cancel
Save
Reference in new issue