Bleurgh.

webui/package.json

@@ -13,7 +13,8 @@
   },
   "devDependencies": {
     "@types/react": "^16.8.1",
-    "@types/react-redux": "^6.0.0"
+    "@types/react-redux": "^6.0.0",
+    "@types/reactstrap": "^7.0.2"
   },
   "scripts": {
     "start": "react-scripts start",

webui/src/App.css

@@ -1,32 +1,7 @@
-.App {
-  text-align: center;
+.nav-tabs .nav-item {
+  cursor: pointer;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+button {
+  cursor: pointer;
+}

webui/src/Components/LoginForm.jsx

@@ -1,31 +1,122 @@
-import React from "react";
+import React, {useState} from "react";
 import {connect} from "react-redux";
-import {Card, CardBody, CardHeader, CardTitle, Col, Form, FormGroup, Input, Label} from "reactstrap";
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Col,
+  Form,
+  FormGroup,
+  Input,
+  Label,
+  NavItem,
+  NavLink,
+  CardFooter,
+  Nav,
+  TabPane
+} from "reactstrap";
+import TabContent from "reactstrap/es/TabContent";
 
 function LoginForm(props) {
-
+  const [tab, setTab] = useState(1);
+  const [loginUser, setLoginUser] = useState("");
+  const [loginPass, setLoginPass] = useState("");
+  const [regUser, setRegUser] = useState("");
+  const [regPass1, setRegPass1] = useState("");
+  const [regPass2, setRegPass2] = useState("");
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Innlogging</CardTitle>
-      </CardHeader>
+    <Card className="mt-3">
+      <CardHeader>Tilgangskontroll</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>
+        <Nav tabs>
+          <NavItem>
+            <NavLink className={tab === 1 ? "active" : ""}
+                     onClick={() => setTab(1)}
+            >
+              Innlogging
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink className={tab === 2 ? "active" : ""}
+                     onClick={() => setTab(2)}
+            >
+              Registrering
+            </NavLink>
+          </NavItem>
+        </Nav>
+        <TabContent activeTab={tab} className="mt-3">
+          <TabPane tabId={1}>
+            <Form>
+              <FormGroup row>
+                <Label sm={3} for="input-login-user">Brukernavn</Label>
+                <Col sm={9}>
+                  <Input type="text"
+                         id="input-login-user"
+                         value={loginUser}
+                         onChange={e => setLoginUser(e.target.value)}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup row>
+                <Label sm={3} for="input-login-password">Passord</Label>
+                <Col sm={9}>
+                  <Input type="password"
+                         id="input-login-password"
+                         value={loginPass}
+                         onChange={e => setLoginPass(e.target.value)}
+                  />
+                </Col>
+              </FormGroup>
+            </Form>
+          </TabPane>
+          <TabPane tabId={2}>
+            <Form>
+              <FormGroup row>
+                <Label sm={3} for="input-reg-user">Brukernavn</Label>
+                <Col sm={9}>
+                  <Input type="text"
+                         id="input-reg-user"
+                         value={regUser}
+                         onChange={e => setRegUser(e.target.value)}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup row>
+                <Label sm={3} for="input-reg-password-1">Passord</Label>
+                <Col sm={9}>
+                  <Input type="password"
+                         id="input-reg-password-1"
+                         value={regPass1}
+                         onChange={e => setRegPass1(e.target.value)}
+                  />
+                </Col>
+              </FormGroup>
+              <FormGroup row>
+                <Label sm={3} for="input-reg-password-2">Gjenta passord</Label>
+                <Col sm={9}>
+                  <Input type="password"
+                         id="input-reg-password-2"
+                         value={regPass2}
+                         onChange={e => setRegPass2(e.target.value)}
+                  />
+                </Col>
+              </FormGroup>
+            </Form>
+          </TabPane>
+        </TabContent>
       </CardBody>
+      <CardFooter>
+        {tab === 1 && <Button color="primary">Logg inn</Button>}
+        {tab === 2 && (
+          <>
+            <Button color="primary">Registrer</Button>
+            {" "}
+            <Button color="secondary" onClick={() => setTab(1)}>Avbryt</Button>
+          </>
+        )}
+      </CardFooter>
     </Card>
   );
 }