GeneIT/geneit_app/src/routes/auth/LoginRoute.tsx

import { Alert, CircularProgress } from "@mui/material";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import * as React from "react";
import { AuthApi } from "../../api/AuthApi";
import { ServerApi } from "../../api/ServerApi";
import { Link } from "react-router-dom";

/**
 * Login form
 */
export function LoginRoute(): React.ReactElement {
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
      email: data.get("email"),
      password: data.get("password"),
    });
  };

  const authWithProvider = async (id: string) => {
    try {
      setLoading(true);

      const res = await AuthApi.StartOpenIDLogin(id);
      window.location.href = res.url;
    } catch (e) {
      console.error(e);
      setError("Echec de l'initialisation de l'authentification OpenID !");
    }
  };

  if (loading)
    return (
      <>
        <CircularProgress />
      </>
    );

  return (
    <>
      {error === null ? (
        <></>
      ) : (
        <Alert style={{ width: "100%" }} severity="error">
          {error}
        </Alert>
      )}

      <Typography component="h2" variant="body1">
        Connexion
      </Typography>
      <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
        <TextField
          margin="normal"
          required
          fullWidth
          id="email"
          label="Adresse mail"
          name="email"
          autoComplete="email"
          autoFocus
        />
        <TextField
          margin="normal"
          required
          fullWidth
          name="password"
          label="Mot de passe"
          type="password"
          id="password"
          autoComplete="current-password"
        />
        <Button
          type="submit"
          fullWidth
          variant="contained"
          sx={{ mt: 3, mb: 2 }}
        >
          Connexion
        </Button>

        <Grid container>
          <Grid item xs>
            <Typography variant="body2" color={"primary"}>
              <Link
                to="/password_forgotten"
                style={{ color: "inherit", textDecorationColor: "inherit" }}
              >
                Mot de passe oublié
              </Link>
            </Typography>
          </Grid>
          <Grid item>
            <Typography variant="body2" color={"primary"}>
              {" "}
              <Link
                to="#"
                style={{ color: "inherit", textDecorationColor: "inherit" }}
              >
                Créer un nouveau compte
              </Link>
            </Typography>
          </Grid>
        </Grid>

        <div>
          {ServerApi.Config.oidc_providers.map((p) => (
            <Button
              key={p.id}
              style={{ textAlign: "center", width: "100%", marginTop: "20px" }}
              onClick={() => authWithProvider(p.id)}
            >
              Connection avec {p.name}
            </Button>
          ))}
        </div>
      </Box>
    </>
  );
}