|
|
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> ); }
|