You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
4.3 KiB
141 lines
4.3 KiB
import React, {useState} from "react";
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardBody,
|
|
CardFooter,
|
|
CardHeader,
|
|
Col,
|
|
Form,
|
|
FormGroup,
|
|
Input,
|
|
Label,
|
|
Nav,
|
|
NavItem,
|
|
NavLink,
|
|
TabPane
|
|
} from "reactstrap";
|
|
import TabContent from "reactstrap/es/TabContent";
|
|
import useAuth from "../../Hooks/auth";
|
|
import {onEnter} from "../../Helpers/keys";
|
|
|
|
export default function LoginForm() {
|
|
const {login, register} = useAuth();
|
|
|
|
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 className="mt-3">
|
|
<CardHeader>Tilgangskontroll</CardHeader>
|
|
<CardBody>
|
|
<Nav tabs>
|
|
<NavItem>
|
|
<NavLink className={tab === 1 ? "active" : ""}
|
|
onClick={() => setTab(1)}
|
|
onKeyDown={onEnter(() => setTab(1))}
|
|
tabIndex={0}
|
|
>
|
|
Innlogging
|
|
</NavLink>
|
|
</NavItem>
|
|
<NavItem>
|
|
<NavLink className={tab === 2 ? "active" : ""}
|
|
onClick={() => setTab(2)}
|
|
onKeyDown={onEnter(() => setTab(2))}
|
|
tabIndex={0}
|
|
>
|
|
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" onClick={() => login(loginUser, loginPass)}>Logg inn</Button>}
|
|
{tab === 2 && (
|
|
<>
|
|
<Button color="primary"
|
|
onClick={() => register(regUser, regPass1, regPass2)}
|
|
>
|
|
Registrer
|
|
</Button>
|
|
{" "}
|
|
<Button color="secondary"
|
|
onClick={() => {
|
|
setRegUser("");
|
|
setRegPass1("");
|
|
setRegPass2("");
|
|
setTab(1);
|
|
}}>
|
|
Avbryt
|
|
</Button>
|
|
</>
|
|
)}
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|