LoginForm.tsx

import {
  Box,
  Button,
  FormControl,
  FormLabel,
  Input,
  Link,
  Stack,
  Typography,
} from "@mui/material";
import React, { useState } from "react";
import {
  TasksApiLoginParameters,
  useLoginMutation,
} from "../store/slices/tasksApi";

export default function LoginForm() {
  const [formData, setFormData] = useState<TasksApiLoginParameters>({
    login: "",
    password: "",
  });

  const [login] = useLoginMutation();

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    login(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Stack
        direction="column"
        gap="2"
        width="25rem"
        mx="auto"
        py="3"
        px="2"
        borderRadius="sm"
        boxShadow="md"
      >
        <Box>
          <Typography variant="h4" component="h1">
            <b>Welcome!</b>
          </Typography>
          <Typography variant="subtitle1">Sign in to continue.</Typography>
        </Box>
        <FormControl>
          <FormLabel>Login</FormLabel>
          <Input
            name="login"
            type="text"
            autoComplete="username"
            value={formData.login}
            onChange={(e) =>
              setFormData({ ...formData, login: e.target.value })
            }
          />
        </FormControl>
        <FormControl>
          <FormLabel>Password</FormLabel>
          <Input
            name="password"
            type="password"
            autoComplete="current-password"
            value={formData.password}
            onChange={(e) =>
              setFormData({ ...formData, password: e.target.value })
            }
          />
        </FormControl>

        <Button type="submit" sx={{ mt: 1 }}>
          Log in
        </Button>

        <Typography fontSize="sm" sx={{ alignSelf: "center" }}>
          Don&apos;t have an account?{" "}
          <Link href="https://iut-rcc-infoapi.univ-reims.fr/tasks/register">
            Sign up
          </Link>
        </Typography>

        <Typography fontSize="sm" sx={{ alignSelf: "center" }}>
          Forgot your password ?{" "}
          <Link href="https://iut-rcc-infoapi.univ-reims.fr/tasks/reset-password">
            Reset your password
          </Link>
        </Typography>
      </Stack>
    </form>
  );
}