Can authenticate using password

geneit_app/src/api/AuthApi.ts

@@ -9,6 +9,13 @@ export enum CreateAccountResult {
   Error,
 }
 
+export enum PasswordLoginResult {
+  TooManyRequests,
+  InvalidCredentials,
+  Success,
+  Error,
+}
+
 export interface CheckResetTokenResponse {
   name: string;
 }
@@ -65,6 +72,40 @@ export class AuthApi {
     }
   }
 
+  /**
+   * Authenticate using an email and a password
+   *
+   * @param mail The email address to use
+   * @param password The password to use
+   */
+  static async LoginWithPassword(
+    mail: string,
+    password: string
+  ): Promise<PasswordLoginResult> {
+    const res = await APIClient.exec({
+      uri: "/auth/password_login",
+      method: "POST",
+      allowFail: true,
+      jsonData: {
+        mail: mail,
+        password: password,
+      },
+    });
+
+    switch (res.status) {
+      case 429:
+        return PasswordLoginResult.TooManyRequests;
+      case 401:
+        return PasswordLoginResult.InvalidCredentials;
+      case 200:
+      case 201:
+        sessionStorage.setItem(TokenStateKey, res.data.token);
+        return PasswordLoginResult.Success;
+      default:
+        return PasswordLoginResult.Error;
+    }
+  }
+
   /**
    * Start OpenID login
    *

geneit_app/src/routes/auth/LoginRoute.tsx

@@ -1,13 +1,24 @@
-import { Alert, CircularProgress } from "@mui/material";
+import {
+  Alert,
+  CircularProgress,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+  Tooltip,
+} 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 { AuthApi, PasswordLoginResult } from "../../api/AuthApi";
 import { ServerApi } from "../../api/ServerApi";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { VisibilityOff, Visibility } from "@mui/icons-material";
+import { useSetAtom } from "jotai";
 
 /**
  * Login form
@@ -16,13 +27,55 @@ 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>) => {
+  const setAuth = useSetAtom(AuthApi.authStatus);
+  const navigate = useNavigate();
+
+  const [mail, setMail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+
+  const canSubmit = mail.length > 0 && password.length > 0;
+
+  const [showPassword, setShowPassword] = React.useState(false);
+  const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+  const handleMouseDownPassword = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => {
     event.preventDefault();
-    const data = new FormData(event.currentTarget);
-    console.log({
-      email: data.get("email"),
-      password: data.get("password"),
-    });
+  };
+
+  const handleLoginSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+
+    try {
+      const res = await AuthApi.LoginWithPassword(mail, password);
+
+      switch (res) {
+        case PasswordLoginResult.TooManyRequests:
+          setError(
+            "Trop de tentatives de connection. Veuillez réessayer ultérieurement."
+          );
+          break;
+
+        case PasswordLoginResult.InvalidCredentials:
+          setError("Identifiants saisis invalides !");
+          break;
+
+        case PasswordLoginResult.Success:
+          navigate("/");
+          setAuth(true);
+          break;
+
+        case PasswordLoginResult.Error:
+          setError("Echec de la connexion !");
+          break;
+      }
+    } catch (e) {
+      console.error(e);
+      setError("Echec de l'authentification !");
+    }
+    setLoading(false);
   };
 
   const authWithProvider = async (id: string) => {
@@ -46,9 +99,7 @@ export function LoginRoute(): React.ReactElement {
 
   return (
     <>
-      {error === null ? (
-        <></>
-      ) : (
+      {error && (
         <Alert style={{ width: "100%" }} severity="error">
           {error}
         </Alert>
@@ -57,7 +108,12 @@ export function LoginRoute(): React.ReactElement {
       <Typography component="h2" variant="body1">
         Connexion
       </Typography>
-      <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
+      <Box
+        component="form"
+        noValidate
+        onSubmit={handleLoginSubmit}
+        sx={{ mt: 1 }}
+      >
         <TextField
           margin="normal"
           required
@@ -65,24 +121,47 @@ export function LoginRoute(): React.ReactElement {
           id="email"
           label="Adresse mail"
           name="email"
+          value={mail}
+          onChange={(e) => setMail(e.target.value)}
           autoComplete="email"
           autoFocus
         />
-        <TextField
-          margin="normal"
-          required
-          fullWidth
-          name="password"
-          label="Mot de passe"
-          type="password"
-          id="password"
-          autoComplete="current-password"
-        />
+
+        <FormControl fullWidth variant="outlined">
+          <InputLabel htmlFor="password">Mot de passe</InputLabel>
+          <OutlinedInput
+            required
+            fullWidth
+            name="password"
+            label="Mot de passe"
+            type={showPassword ? "text" : "password"}
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="current-password"
+            endAdornment={
+              <InputAdornment position="end">
+                <Tooltip title="Afficher le mot de passe">
+                  <IconButton
+                    aria-label="toggle password visibility"
+                    onClick={handleClickShowPassword}
+                    onMouseDown={handleMouseDownPassword}
+                    edge="end"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </Tooltip>
+              </InputAdornment>
+            }
+          />
+        </FormControl>
+
         <Button
           type="submit"
           fullWidth
           variant="contained"
           sx={{ mt: 3, mb: 2 }}
+          disabled={!canSubmit}
         >
           Connexion
         </Button>
@@ -117,7 +196,7 @@ export function LoginRoute(): React.ReactElement {
               style={{ textAlign: "center", width: "100%", marginTop: "20px" }}
               onClick={() => authWithProvider(p.id)}
             >
-              Connection avec {p.name}
+              Connexion avec {p.name}
             </Button>
           ))}
         </div>