Card-ify login components (#53)

* Card-ify login components

* Fix lint warnings

* Replace HTML with react-bootstrap components

* Remove now obsolete flex div

* Apply fixed width to fa-icons

* Reset sign-in buttons to normal size
This commit is contained in:
Henrik Hüttemann 2020-05-25 20:48:27 +02:00 committed by GitHub
parent 8636391a73
commit 7a33177014
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 167 additions and 165 deletions

View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from "react";
import React, {useState} from "react";
import {Trans, useTranslation} from "react-i18next";
import {Alert, Button, Form} from "react-bootstrap";
import {Alert, Button, Card, Form} from "react-bootstrap";
import {postLdapLogin} from "../../../../../api/user";
import {getAndSetUser} from "../../../../../utils/apiUtils";
import {useSelector} from "react-redux";
@ -33,43 +33,47 @@ const ViaLdap: React.FC = () => {
}
return (
<Fragment>
<h5 className="center">
<Trans i18nKey="signInVia" values={{service: name}}/>
</h5>
<Form onSubmit={onFormSubmit}>
<Form.Group controlId="username">
<Form.Control
isInvalid={error}
type="text"
size="sm"
placeholder={t("username")}
onChange={(event) => setUsername(event.currentTarget.value)}
/>
</Form.Group>
<Card className="bg-dark mb-4">
<Card.Body>
<Card.Title>
<Trans i18nKey="signInVia" values={{service: name}}/>
</Card.Title>
<Form.Group controlId="password">
<Form.Control
isInvalid={error}
type="password"
size="sm"
placeholder={t("password")}
onChange={(event) => setPassword(event.currentTarget.value)}
/>
</Form.Group>
<Form onSubmit={onFormSubmit}>
<Form.Group controlId="username">
<Form.Control
isInvalid={error}
type="text"
size="sm"
placeholder={t("username")}
onChange={(event) => setUsername(event.currentTarget.value)}
className="bg-dark text-white"
/>
</Form.Group>
<Alert className="small" show={error} variant="danger">
<Trans i18nKey="errorLdapLogin"/>
</Alert>
<Form.Group controlId="password">
<Form.Control
isInvalid={error}
type="password"
size="sm"
placeholder={t("password")}
onChange={(event) => setPassword(event.currentTarget.value)}
className="bg-dark text-white"
/>
</Form.Group>
<Button
type="submit"
size="sm"
variant="primary">
<Trans i18nKey="signIn"/>
</Button>
</Form>
</Fragment>
<Alert className="small" show={error} variant="danger">
<Trans i18nKey="errorLdapLogin"/>
</Alert>
<Button
type="submit"
variant="primary">
<Trans i18nKey="signIn"/>
</Button>
</Form>
</Card.Body>
</Card>
);
};