55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Box from "@mui/material/Box";
|
|
import Button from "@mui/material/Button";
|
|
import Container from "@mui/material/Container";
|
|
import Typography from "@mui/material/Typography";
|
|
import { useLogin } from "@refinedev/core";
|
|
import { Title } from "@components/title";
|
|
|
|
export default function Login() {
|
|
const { mutate: login } = useLogin();
|
|
|
|
return (
|
|
<Container
|
|
style={{
|
|
height: "100vh",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Box
|
|
display="flex"
|
|
gap="36px"
|
|
justifyContent="center"
|
|
flexDirection="column"
|
|
>
|
|
<Box display="flex" justifyContent="center">
|
|
<Title collapsed={false} />
|
|
</Box>
|
|
<Button
|
|
style={{ width: "240px" }}
|
|
size="large"
|
|
variant="contained"
|
|
onClick={() => login({})}
|
|
>
|
|
Sign in
|
|
</Button>
|
|
<Typography align="center" color={"text.secondary"} fontSize="12px">
|
|
Powered by
|
|
<Image
|
|
style={{ padding: "0 5px" }}
|
|
alt="Keycloak"
|
|
src="https://refine.ams3.cdn.digitaloceanspaces.com/superplate-auth-icons%2Fkeycloak.svg"
|
|
width={18}
|
|
height={18}
|
|
/>
|
|
Keycloak
|
|
</Typography>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|