Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 356x 23x 1x 1x 1x 1x 46x 1x 1x 1x 1x | import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { Link } from "react-router";
import KompassiLogo from "client/components/icons/kompassi.svg";
import KonstiLogo from "client/components/icons/konsti.svg";
import { RaisedCard } from "client/components/RaisedCard";
import { KompassiLoginButton } from "client/views/login/components/KompassiLoginButton";
import { LocalLoginForm } from "client/views/login/components/LocalLoginForm";
export const KompassiAndLocalLogin = (): ReactElement => {
const { t } = useTranslation();
return (
<Container>
{t("loginView.kompassiAndLocalLoginHint")}
<StyledCard>
<KompassiHeader>
<KompassiIcon aria-hidden={true} />
{t("registrationView.kompassiAccount")}
</KompassiHeader>
<ButtonContainer>
<KompassiLoginButton />
</ButtonContainer>
</StyledCard>
<StyledCard>
<StyledH3>
<KonstiIcon aria-hidden={true} />
{t("registrationView.konstiAccount")}
</StyledH3>
<LocalLoginForm />
<Link to={"/registration"}>
<StyledP>{t("loginView.noAccountRegister")}</StyledP>
</Link>
</StyledCard>
</Container>
);
};
const Container = styled.div`
display: flex;
flex-direction: column;
gap: 0;
`;
const StyledH3 = styled.h3`
margin-top: 0;
`;
const KompassiHeader = styled(StyledH3)`
margin-bottom: 8px;
`;
const StyledCard = styled(RaisedCard)`
margin-top: 12px;
margin-bottom: 12px;
@media (min-width: ${(props) => props.theme.breakpointDesktop}) {
width: 400px;
padding-left: 24px;
padding-right: 24px;
}
`;
const KompassiIcon = styled(KompassiLogo)`
width: 24px;
height: 24px;
vertical-align: middle;
padding-right: 4px;
`;
const KonstiIcon = styled(KonstiLogo)`
width: 24px;
height: 24px;
vertical-align: middle;
padding-right: 4px;
`;
const StyledP = styled.p`
margin-bottom: 4px;
`;
const ButtonContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
|