link-stack/apps/link/app/(login)/login/_components/Login.tsx

"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;
  baseURL: string;
};

export const Login: FC<LoginProps> = ({ session, baseURL }) => {
  let origin = null;
  if (typeof window !== "undefined") {
    origin = window.location.origin;
  }
  const callbackUrl = `${origin}/link`;
  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,
                          })
                        }
                      >
                        <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,
                          })
                        }
                      >
                        <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,
                          })
                        }
                      >
                        <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,
                            });
                          }}
                        >
                          <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>
  );
};