256 lines
8 KiB
TypeScript
256 lines
8 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useState, useEffect } from "react";
|
|
import {
|
|
Box,
|
|
Grid,
|
|
Container,
|
|
IconButton,
|
|
Typography,
|
|
TextField,
|
|
} from "@mui/material";
|
|
import {
|
|
Apple as AppleIcon,
|
|
Google as GoogleIcon,
|
|
Microsoft as MicrosoftIcon,
|
|
Key as KeyIcon,
|
|
} from "@mui/icons-material";
|
|
import { signIn, getProviders } from "next-auth/react";
|
|
import Image from "next/image";
|
|
import LinkLogo from "public/link-logo-small.png";
|
|
import { colors, fonts } from "@link-stack/ui";
|
|
import { useSearchParams } from "next/navigation";
|
|
|
|
type LoginProps = {
|
|
session: any;
|
|
};
|
|
|
|
export const Login: FC<LoginProps> = ({ session }) => {
|
|
const origin =
|
|
typeof window !== "undefined" && window.location.origin
|
|
? window.location.origin
|
|
: "";
|
|
const [provider, setProvider] = useState(undefined);
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const params = useSearchParams();
|
|
const error = params.get("error");
|
|
const { darkGray, cdrLinkOrange, white } = colors;
|
|
const { poppins } = fonts;
|
|
const buttonStyles = {
|
|
borderRadius: 500,
|
|
width: "100%",
|
|
fontSize: "16px",
|
|
fontWeight: "bold",
|
|
backgroundColor: white,
|
|
"&:hover": {
|
|
color: white,
|
|
backgroundColor: cdrLinkOrange,
|
|
},
|
|
};
|
|
const fieldStyles = {
|
|
"& label.Mui-focused": {
|
|
color: cdrLinkOrange,
|
|
},
|
|
"& .MuiInput-underline:after": {
|
|
borderBottomColor: cdrLinkOrange,
|
|
},
|
|
"& .MuiFilledInput-underline:after": {
|
|
borderBottomColor: cdrLinkOrange,
|
|
},
|
|
"& .MuiOutlinedInput-root": {
|
|
"&.Mui-focused fieldset": {
|
|
borderColor: cdrLinkOrange,
|
|
},
|
|
},
|
|
};
|
|
|
|
useEffect(() => {
|
|
const fetchProviders = async () => {
|
|
const providers = await getProviders();
|
|
setProvider(Object.keys(providers)?.pop());
|
|
};
|
|
fetchProviders();
|
|
}, []);
|
|
|
|
return (
|
|
<Box sx={{ backgroundColor: darkGray, height: "100vh" }}>
|
|
<Container maxWidth="md" sx={{ p: 10 }}>
|
|
<Grid container spacing={2} direction="column" alignItems="center">
|
|
<Grid
|
|
item
|
|
container
|
|
direction="row"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Grid item>
|
|
<Box
|
|
sx={{
|
|
width: "70px",
|
|
height: "70px",
|
|
margin: "0 auto",
|
|
}}
|
|
>
|
|
<Image
|
|
src={LinkLogo}
|
|
alt="Link logo"
|
|
width={70}
|
|
height={70}
|
|
style={{
|
|
objectFit: "cover",
|
|
filter: "grayscale(100) brightness(100)",
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item>
|
|
<Typography
|
|
variant="h2"
|
|
sx={{
|
|
fontSize: 36,
|
|
color: "white",
|
|
fontWeight: 700,
|
|
mt: 1,
|
|
ml: 0.5,
|
|
fontFamily: poppins.style.fontFamily,
|
|
}}
|
|
>
|
|
CDR Link
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Grid item sx={{ width: "100%" }}>
|
|
{!session ? (
|
|
<Container
|
|
maxWidth="xs"
|
|
sx={{
|
|
p: 3,
|
|
mt: 3,
|
|
}}
|
|
>
|
|
<Grid
|
|
container
|
|
spacing={3}
|
|
direction="column"
|
|
alignItems="center"
|
|
>
|
|
{error ? (
|
|
<Grid item sx={{ width: "100%" }}>
|
|
<Box sx={{ backgroundColor: "red", p: 3 }}>
|
|
<Typography
|
|
variant="body1"
|
|
sx={{
|
|
fontSize: 18,
|
|
color: "white",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{`${error} error`}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
) : null}
|
|
{provider === "google" && (
|
|
<Grid item sx={{ width: "100%" }}>
|
|
<IconButton
|
|
sx={buttonStyles}
|
|
onClick={() =>
|
|
signIn("google", {
|
|
callbackUrl: `${origin}`,
|
|
})
|
|
}
|
|
>
|
|
<GoogleIcon sx={{ mr: 1 }} />
|
|
Sign in with Google
|
|
</IconButton>
|
|
</Grid>
|
|
)}
|
|
{provider === "apple" && (
|
|
<Grid item sx={{ width: "100%" }}>
|
|
<IconButton
|
|
aria-label="Sign in with Apple"
|
|
sx={buttonStyles}
|
|
onClick={() =>
|
|
signIn("apple", {
|
|
callbackUrl: `${window.location.origin}`,
|
|
})
|
|
}
|
|
>
|
|
<AppleIcon sx={{ mr: 1 }} />
|
|
Sign in with Apple
|
|
</IconButton>
|
|
</Grid>
|
|
)}
|
|
{provider === "azure-ad" && (
|
|
<Grid item sx={{ width: "100%" }}>
|
|
<IconButton
|
|
sx={buttonStyles}
|
|
onClick={() =>
|
|
signIn("azure-ad", {
|
|
callbackUrl: `${origin}`,
|
|
})
|
|
}
|
|
>
|
|
<MicrosoftIcon sx={{ mr: 1 }} />
|
|
Sign in with Azure
|
|
</IconButton>
|
|
</Grid>
|
|
)}
|
|
{provider === "credentials" && (
|
|
<Grid item container spacing={3}>
|
|
<Grid item sx={{ width: "100%" }}>
|
|
<TextField
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
label="Email"
|
|
variant="filled"
|
|
size="small"
|
|
fullWidth
|
|
sx={{ ...fieldStyles, backgroundColor: white }}
|
|
/>
|
|
</Grid>
|
|
<Grid item sx={{ ...fieldStyles, width: "100%" }}>
|
|
<TextField
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
label="Password"
|
|
variant="filled"
|
|
size="small"
|
|
fullWidth
|
|
sx={{ backgroundColor: white }}
|
|
type="password"
|
|
/>
|
|
</Grid>
|
|
<Grid item sx={{ width: "100%" }}>
|
|
<IconButton
|
|
sx={buttonStyles}
|
|
onClick={() =>
|
|
signIn("credentials", {
|
|
email,
|
|
password,
|
|
callbackUrl: `${origin}/setup`,
|
|
})
|
|
}
|
|
>
|
|
<KeyIcon sx={{ mr: 1 }} />
|
|
Sign in with Zammad credentials
|
|
</IconButton>
|
|
</Grid>
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
</Container>
|
|
) : null}
|
|
{session ? (
|
|
<Box component="h4">
|
|
{` ${session.user.name ?? session.user.email}.`}
|
|
</Box>
|
|
) : null}
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|