orchetera/template/src/pages/LoginPage.jsx

Welcome to **Orchetera** — your orchestration tool to kickstart Firebase-ready projects with ease!

import { useState } from "react";
import { auth } from "../firebase";
import { signInWithEmailAndPassword } from "firebase/auth";
import Swal from "sweetalert2";
import {
  Container,
  TextField,
  Button,
  Typography,
  Box,
  CssBaseline,
  Card,
  Paper,
  InputAdornment,
} from "@mui/material";
import GradientContainer from "./Components/GradientContainer";
import { EmailOutlined, LockOutline } from "@mui/icons-material";
import OverlayShade from "./Artefacts/OverlayShade";
import { Link, useNavigate } from "react-router-dom";
import Loader from "./Components/Loader";

const LoginPage = () => {
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();

  const handleLoading = (value = true) => {
    setLoading(value);
    console.log("loading", value);
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    handleLoading(true);
    try {
      await signInWithEmailAndPassword(auth, email, password);
      Swal.fire({
        title: "Sukses",
        text: "Login berhasil!",
        icon: "success",
        confirmButtonText: "OK",
        timer: 3000,
        timerProgressBar: true,
      });
      navigate("/dashboard");
    } catch (error) {
      handleLoading(false);
      Swal.fire("Error", error.message, "error");
    }
  };

  return (
    <>
      <CssBaseline />
      {loading && <Loader />}
      <GradientContainer>
        <OverlayShade
          borderRadius={8}
          rotation={60}
          opacity={0.2}
          top={-40}
          left={-135}
          width={400}
          height={400}
          transformOrigin="center"
        />
        <OverlayShade
          borderRadius={8}
          rotation={60}
          opacity={0.2}
          bottom={-40}
          right={-135}
          width={400}
          height={400}
          transformOrigin="right"
        />

        <Container
          maxWidth="xs"
          sx={{
            display: "flex",
            alignItems: "center",
            height: "100vh",
          }}
        >
          <Card
            component={Paper}
            variant="outlined"
            elevation={20}
            sx={{
              p: 5,
              border: 0,
            }}
            mt={10}
            display="flex"
            flexDirection="column"
            gap={2}
          >
            <Typography
              variant="h5"
              align="center"
              sx={{
                fontFamily: "'Roboto Flex', sans-serif",
                fontWeight: 700,
                mb: 4,
              }}
            >
              Login
            </Typography>

            <Box component="form" onSubmit={handleLogin} sx={{ width: "100%" }}>
              <TextField
                label="Email"
                autoComplete="off"
                autoCorrect="off"
                spellCheck={false}
                type="email"
                variant="standard"
                sx={{
                  mb: 3,
                }}
                onChange={(e) => setEmail(e.target.value)}
                fullWidth
                placeholder="Type your email address"
                slotProps={{
                  input: {
                    startAdornment: (
                      <InputAdornment position="start">
                        <EmailOutlined color="action" />
                      </InputAdornment>
                    ),
                  },
                }}
              />
              <TextField
                label="Password"
                autoComplete="off"
                autoCorrect="off"
                spellCheck={false}
                type="password"
                variant="standard"
                sx={{
                  mb: 3,
                }}
                onChange={(e) => setPassword(e.target.value)}
                fullWidth
                placeholder="Type your password"
                slotProps={{
                  input: {
                    startAdornment: (
                      <InputAdornment position="start">
                        <LockOutline color="action" />
                      </InputAdornment>
                    ),
                  },
                }}
              />
              <Button
                type="submit"
                os="custom"
                variant="contained"
                onClick={handleLogin}
                fullWidth
              >
                Login
              </Button>
            </Box>

            <Typography
              sx={{
                mt: 5,
                color: "grey",
                fontSize: 14,
              }}
            >
              Didn't have account?
              <br />
              <Button
                sx={{
                  textTransform: "none",
                  padding: 0,
                  margin: 0,
                  minWidth: "auto",
                  "&:hover": {
                    textDecoration: "underline",
                  },
                }}
                component={Link}
                to={"/register"}
              >
                Register
              </Button>{" "}
              Now!
            </Typography>
          </Card>
        </Container>
      </GradientContainer>
    </>
  );
};

export default LoginPage;