Mise à jour des formulaires d'inscription/connexion

src/app/login/_components/loginForm/presentation.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/modules/common/components/button";
+import { Button, Form } from "react-bootstrap";
 import { ErrorMessage } from "@/modules/common/components/errorMessage";
 import { SubmissionResult, useForm } from "@conform-to/react";
 import { parseWithZod } from "@conform-to/zod";
@@ -32,33 +32,36 @@ export const LoginForm = ({ result, action, isPending }: Props) => {
   return (
     <>
       <ErrorMessage messages={form.errors} />
-      <form id={form.id} onSubmit={form.onSubmit} action={action} noValidate={true}>
-        <fieldset className="form-group">
-          <input
+      <Form id={form.id} action={action} onSubmit={form.onSubmit} noValidate={true}>
+        <Form.Group className="mb-3" controlId="formEmail">
+          <Form.Label>Adresse email</Form.Label>
+          <Form.Control
             type="email"
             key={fields.email.key}
             name={fields.email.name}
             defaultValue={fields.email.initialValue}
-            placeholder="Email"
-            className="form-control form-control-lg"
+            placeholder="Votre adresse email"
           />
           <ErrorMessage messages={fields.email.errors} />
-        </fieldset>
-        <fieldset className="form-group">
-          <input
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formPassword">
+          <Form.Label>Mot de passe</Form.Label>
+          <Form.Control
             type="password"
             key={fields.password.key}
             name={fields.password.name}
             defaultValue={fields.password.initialValue}
-            placeholder="Password"
-            className="form-control form-control-lg"
+            placeholder="Mot de passe"
+            autoComplete="new-password"
           />
           <ErrorMessage messages={fields.password.errors} />
-        </fieldset>
-        <Button component="button" size="lg" type="submit" className="pull-xs-right" disabled={isPending}>
-          Se connecter
-        </Button>
-      </form>
+        </Form.Group>
+        <div className="d-flex justify-content-end">
+          <Button variant="primary" type="submit" disabled={isPending}>
+            Se connecter
+          </Button>
+        </div>
+      </Form>
     </>
   );
 };

src/app/register/_components/registrationForm/presentation.tsx

@@ -1,4 +1,4 @@
-import { Button, Form } from 'react-bootstrap';
+import { Button, Form } from "react-bootstrap";
 //import { Button } from "@/modules/common/components/button";
 import { ErrorMessage } from "@/modules/common/components/errorMessage";
 import { SubmissionResult, useForm } from "@conform-to/react";
@@ -7,96 +7,95 @@ import { startTransition } from "react";
 import { inputsSchema } from "./types";
 
 type Props = {
-    action?: (formData: FormData) => void;
-    isPending?: boolean;
-    result?: SubmissionResult<string[]>;
+  action?: (formData: FormData) => void;
+  isPending?: boolean;
+  result?: SubmissionResult<string[]>;
 };
 
 export const RegistrationForm = ({ result, action, isPending }: Props) => {
-    const [form, fields] = useForm({
-        lastResult: result,
-        onValidate({ formData }) {
-            return parseWithZod(formData, { schema: inputsSchema });
-        },
-        // onSubmit is defined to avoid resetting form after successful submission
-        // see https://github.com/edmundhung/conform/discussions/606
-        onSubmit(event, { formData }) {
-            event.preventDefault();
-            startTransition(() => {
-                action?.(formData);
-            });
-        },
-        shouldValidate: "onBlur",
-        shouldRevalidate: "onBlur",
-    });
+  const [form, fields] = useForm({
+    lastResult: result,
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: inputsSchema });
+    },
+    // onSubmit is defined to avoid resetting form after successful submission
+    // see https://github.com/edmundhung/conform/discussions/606
+    onSubmit(event, { formData }) {
+      event.preventDefault();
+      startTransition(() => {
+        action?.(formData);
+      });
+    },
+    shouldValidate: "onBlur",
+    shouldRevalidate: "onBlur",
+  });
 
-    return (
-        <>
-            <ErrorMessage messages={form.errors} />
-            <Form id={form.id} action={action} onSubmit={form.onSubmit} noValidate={true}>
-                <Form.Group className="mb-3" controlId="formFirstname">
-                    <Form.Label>Nom</Form.Label>
-                    <Form.Control
-                        type="text"
-                        key={fields.lastname.key}
-                        name={fields.lastname.name}
-                        defaultValue={fields.lastname.initialValue}
-                        placeholder="Votre nom"
-                    />
-                    <ErrorMessage messages={fields.firstname.errors} />
-                </Form.Group>
-                <Form.Group className="mb-3" controlId="formLastname">
-                    <Form.Label>Prénom</Form.Label>
-                    <Form.Control
-                        type="text"
-                        key={fields.firstname.key}
-                        name={fields.firstname.name}
-                        defaultValue={fields.firstname.initialValue}
-                        placeholder="Votre prénom"
-                    />
-                    <ErrorMessage messages={fields.lastname.errors} />
-                </Form.Group>
-                <Form.Group className="mb-3" controlId="formUsername">
-                    <Form.Label>Pseudo</Form.Label>
-                    <Form.Control
-                        type="text"
-                        key={fields.username.key}
-                        name={fields.username.name}
-                        defaultValue={fields.username.initialValue}
-                        placeholder="Votre pseudo"
-                    />
-                    <ErrorMessage messages={fields.username.errors} />
-                </Form.Group>
-                <Form.Group className="mb-3" controlId="formEmail">
-                    <Form.Label>Adresse email</Form.Label>
-                    <Form.Control
-                        type="email"
-                        key={fields.email.key}
-                        name={fields.email.name}
-                        defaultValue={fields.email.initialValue}
-                        placeholder="Votre adresse email"
-                    />
-                    <ErrorMessage messages={fields.email.errors} />
-                    <Form.Text className="text-muted">
-                        Nous ne partagerons jamais votre email avec qui que ce soit.
-                    </Form.Text>
-                </Form.Group>
-                <Form.Group className="mb-3" controlId="formPassword">
-                    <Form.Label>Mot de passe</Form.Label>
-                    <Form.Control
-                        type="password"
-                        key={fields.password.key}
-                        name={fields.password.name}
-                        defaultValue={fields.password.initialValue}
-                        placeholder="Mot de passe"
-                        autoComplete="new-password"
-                    />
-                    <ErrorMessage messages={fields.password.errors} />
-                </Form.Group>
-                <Button variant="primary" type="submit" disabled={isPending}>
-                    Submit
-                </Button>
-            </Form>
-        </>
-    );
+  return (
+    <>
+      <ErrorMessage messages={form.errors} />
+      <Form id={form.id} action={action} onSubmit={form.onSubmit} noValidate={true}>
+        <Form.Group className="mb-3" controlId="formFirstname">
+          <Form.Label>Nom</Form.Label>
+          <Form.Control
+            type="text"
+            key={fields.lastname.key}
+            name={fields.lastname.name}
+            defaultValue={fields.lastname.initialValue}
+            placeholder="Votre nom"
+          />
+          <ErrorMessage messages={fields.firstname.errors} />
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formLastname">
+          <Form.Label>Prénom</Form.Label>
+          <Form.Control
+            type="text"
+            key={fields.firstname.key}
+            name={fields.firstname.name}
+            defaultValue={fields.firstname.initialValue}
+            placeholder="Votre prénom"
+          />
+          <ErrorMessage messages={fields.lastname.errors} />
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formUsername">
+          <Form.Label>Pseudo</Form.Label>
+          <Form.Control
+            type="text"
+            key={fields.username.key}
+            name={fields.username.name}
+            defaultValue={fields.username.initialValue}
+            placeholder="Votre pseudo"
+          />
+          <ErrorMessage messages={fields.username.errors} />
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formEmail">
+          <Form.Label>Adresse email</Form.Label>
+          <Form.Control
+            type="email"
+            key={fields.email.key}
+            name={fields.email.name}
+            defaultValue={fields.email.initialValue}
+            placeholder="Votre adresse email"
+          />
+          <ErrorMessage messages={fields.email.errors} />
+        </Form.Group>
+        <Form.Group className="mb-3" controlId="formPassword">
+          <Form.Label>Mot de passe</Form.Label>
+          <Form.Control
+            type="password"
+            key={fields.password.key}
+            name={fields.password.name}
+            defaultValue={fields.password.initialValue}
+            placeholder="Mot de passe"
+            autoComplete="new-password"
+          />
+          <ErrorMessage messages={fields.password.errors} />
+        </Form.Group>
+        <div className="d-flex justify-content-end">
+          <Button variant="primary" type="submit" disabled={isPending}>
+            Créer mon compte
+          </Button>
+        </div>
+      </Form>
+    </>
+  );
 };