julien/adastra_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mise à jour des formulaires d'inscription/connexion

Browse Source
This commit is contained in:
Rampeur
2025-08-08 10:44:51 +02:00
parent dbff41b9c8
commit e1e703c2d8
6 changed files with 122 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2
View File
@@ -79,3 +79,5 @@ sonar.properties
**/*.copy.ts **/*.copy.ts
**/*.copy.scss **/*.copy.scss
**/*.copy.html **/*.copy.html
certificates
package.json
+1
View File
@@ -7,6 +7,7 @@
}, },
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"secure": "next dev --experimental-https",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"lint": "next lint", "lint": "next lint",
src/app/login/_components/loginForm/presentation.tsx
+19 -16
View File
@@ -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 { ErrorMessage } from "@/modules/common/components/errorMessage";
import { SubmissionResult, useForm } from "@conform-to/react"; import { SubmissionResult, useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod"; import { parseWithZod } from "@conform-to/zod";
@@ -32,33 +32,36 @@ export const LoginForm = ({ result, action, isPending }: Props) => {
return ( return (
<> <>
<ErrorMessage messages={form.errors} /> <ErrorMessage messages={form.errors} />
<form id={form.id} onSubmit={form.onSubmit} action={action} noValidate={true}> <Form id={form.id} action={action} onSubmit={form.onSubmit} noValidate={true}>
<fieldset className="form-group"> <Form.Group className="mb-3" controlId="formEmail">
<input <Form.Label>Adresse email</Form.Label>
<Form.Control
type="email" type="email"
key={fields.email.key} key={fields.email.key}
name={fields.email.name} name={fields.email.name}
defaultValue={fields.email.initialValue} defaultValue={fields.email.initialValue}
placeholder="Email" placeholder="Votre adresse email"
className="form-control form-control-lg"
/> />
<ErrorMessage messages={fields.email.errors} /> <ErrorMessage messages={fields.email.errors} />
</fieldset> </Form.Group>
<fieldset className="form-group"> <Form.Group className="mb-3" controlId="formPassword">
<input <Form.Label>Mot de passe</Form.Label>
<Form.Control
type="password" type="password"
key={fields.password.key} key={fields.password.key}
name={fields.password.name} name={fields.password.name}
defaultValue={fields.password.initialValue} defaultValue={fields.password.initialValue}
placeholder="Password" placeholder="Mot de passe"
className="form-control form-control-lg" autoComplete="new-password"
/> />
<ErrorMessage messages={fields.password.errors} /> <ErrorMessage messages={fields.password.errors} />
</fieldset> </Form.Group>
<Button component="button" size="lg" type="submit" className="pull-xs-right" disabled={isPending}> <div className="d-flex justify-content-end">
Se connecter <Button variant="primary" type="submit" disabled={isPending}>
</Button> Se connecter
</form> </Button>
</div>
</Form>
</> </>
); );
}; };
src/app/register/_components/registrationForm/presentation.tsx
+88 -89
View File
@@ -1,4 +1,4 @@
import { Button, Form } from 'react-bootstrap'; import { Button, Form } from "react-bootstrap";
//import { Button } from "@/modules/common/components/button"; //import { Button } from "@/modules/common/components/button";
import { ErrorMessage } from "@/modules/common/components/errorMessage"; import { ErrorMessage } from "@/modules/common/components/errorMessage";
import { SubmissionResult, useForm } from "@conform-to/react"; import { SubmissionResult, useForm } from "@conform-to/react";
@@ -7,96 +7,95 @@ import { startTransition } from "react";
import { inputsSchema } from "./types"; import { inputsSchema } from "./types";
type Props = { type Props = {
action?: (formData: FormData) => void; action?: (formData: FormData) => void;
isPending?: boolean; isPending?: boolean;
result?: SubmissionResult<string[]>; result?: SubmissionResult<string[]>;
}; };
export const RegistrationForm = ({ result, action, isPending }: Props) => { export const RegistrationForm = ({ result, action, isPending }: Props) => {
const [form, fields] = useForm({ const [form, fields] = useForm({
lastResult: result, lastResult: result,
onValidate({ formData }) { onValidate({ formData }) {
return parseWithZod(formData, { schema: inputsSchema }); return parseWithZod(formData, { schema: inputsSchema });
}, },
// onSubmit is defined to avoid resetting form after successful submission // onSubmit is defined to avoid resetting form after successful submission
// see https://github.com/edmundhung/conform/discussions/606 // see https://github.com/edmundhung/conform/discussions/606
onSubmit(event, { formData }) { onSubmit(event, { formData }) {
event.preventDefault(); event.preventDefault();
startTransition(() => { startTransition(() => {
action?.(formData); action?.(formData);
}); });
}, },
shouldValidate: "onBlur", shouldValidate: "onBlur",
shouldRevalidate: "onBlur", shouldRevalidate: "onBlur",
}); });
return ( return (
<> <>
<ErrorMessage messages={form.errors} /> <ErrorMessage messages={form.errors} />
<Form id={form.id} action={action} onSubmit={form.onSubmit} noValidate={true}> <Form id={form.id} action={action} onSubmit={form.onSubmit} noValidate={true}>
<Form.Group className="mb-3" controlId="formFirstname"> <Form.Group className="mb-3" controlId="formFirstname">
<Form.Label>Nom</Form.Label> <Form.Label>Nom</Form.Label>
<Form.Control <Form.Control
type="text" type="text"
key={fields.lastname.key} key={fields.lastname.key}
name={fields.lastname.name} name={fields.lastname.name}
defaultValue={fields.lastname.initialValue} defaultValue={fields.lastname.initialValue}
placeholder="Votre nom" placeholder="Votre nom"
/> />
<ErrorMessage messages={fields.firstname.errors} /> <ErrorMessage messages={fields.firstname.errors} />
</Form.Group> </Form.Group>
<Form.Group className="mb-3" controlId="formLastname"> <Form.Group className="mb-3" controlId="formLastname">
<Form.Label>Prénom</Form.Label> <Form.Label>Prénom</Form.Label>
<Form.Control <Form.Control
type="text" type="text"
key={fields.firstname.key} key={fields.firstname.key}
name={fields.firstname.name} name={fields.firstname.name}
defaultValue={fields.firstname.initialValue} defaultValue={fields.firstname.initialValue}
placeholder="Votre prénom" placeholder="Votre prénom"
/> />
<ErrorMessage messages={fields.lastname.errors} /> <ErrorMessage messages={fields.lastname.errors} />
</Form.Group> </Form.Group>
<Form.Group className="mb-3" controlId="formUsername"> <Form.Group className="mb-3" controlId="formUsername">
<Form.Label>Pseudo</Form.Label> <Form.Label>Pseudo</Form.Label>
<Form.Control <Form.Control
type="text" type="text"
key={fields.username.key} key={fields.username.key}
name={fields.username.name} name={fields.username.name}
defaultValue={fields.username.initialValue} defaultValue={fields.username.initialValue}
placeholder="Votre pseudo" placeholder="Votre pseudo"
/> />
<ErrorMessage messages={fields.username.errors} /> <ErrorMessage messages={fields.username.errors} />
</Form.Group> </Form.Group>
<Form.Group className="mb-3" controlId="formEmail"> <Form.Group className="mb-3" controlId="formEmail">
<Form.Label>Adresse email</Form.Label> <Form.Label>Adresse email</Form.Label>
<Form.Control <Form.Control
type="email" type="email"
key={fields.email.key} key={fields.email.key}
name={fields.email.name} name={fields.email.name}
defaultValue={fields.email.initialValue} defaultValue={fields.email.initialValue}
placeholder="Votre adresse email" placeholder="Votre adresse email"
/> />
<ErrorMessage messages={fields.email.errors} /> <ErrorMessage messages={fields.email.errors} />
<Form.Text className="text-muted"> </Form.Group>
Nous ne partagerons jamais votre email avec qui que ce soit. <Form.Group className="mb-3" controlId="formPassword">
</Form.Text> <Form.Label>Mot de passe</Form.Label>
</Form.Group> <Form.Control
<Form.Group className="mb-3" controlId="formPassword"> type="password"
<Form.Label>Mot de passe</Form.Label> key={fields.password.key}
<Form.Control name={fields.password.name}
type="password" defaultValue={fields.password.initialValue}
key={fields.password.key} placeholder="Mot de passe"
name={fields.password.name} autoComplete="new-password"
defaultValue={fields.password.initialValue} />
placeholder="Mot de passe" <ErrorMessage messages={fields.password.errors} />
autoComplete="new-password" </Form.Group>
/> <div className="d-flex justify-content-end">
<ErrorMessage messages={fields.password.errors} /> <Button variant="primary" type="submit" disabled={isPending}>
</Form.Group> Créer mon compte
<Button variant="primary" type="submit" disabled={isPending}> </Button>
Submit </div>
</Button> </Form>
</Form> </>
</> );
);
}; };
src/modules/common/components/footer/footer.tsx
+4 -4
View File
@@ -18,8 +18,8 @@ export const Footer = () => (
</Link> </Link>
<ul className="list-unstyled small"> <ul className="list-unstyled small">
<li className="mb-2"> <li className="mb-2">
L&apos;équipe de passionnés Ad Astra est réactive et à l&apos;écoute de vos demandes afin de vous L&apos;équipe Ad Astra est réactive et à l&apos;écoute de vos demandes afin de vous accompagner au mieux
accompagner au mieux et satisfaire vos besoins en fleurs et hashes CBD de qualité. et satisfaire vos besoins en fleurs et hashes CBD de qualité.
</li> </li>
<li className="mb-2">Exigez la qualité Ad Astra, vous la méritez.</li> <li className="mb-2">Exigez la qualité Ad Astra, vous la méritez.</li>
</ul> </ul>
@@ -124,7 +124,7 @@ export const Footer = () => (
</div> </div>
</div> </div>
</div> </div>
<hr className="mt-3 mb-4" /> <hr className="my-3" />
<p className="text-muted px-4 small">Copyright © 2025 Ad Astra</p> <p className="text-muted px-4 mb-2 small">Copyright © 2025 Ad Astra</p>
</footer> </footer>
); );
src/styles/styles.scss
+8 -1
View File
@@ -5,7 +5,7 @@ $success: #7952b3;
$dark-blue: #141d5e; /*#171f50;*/ $dark-blue: #141d5e; /*#171f50;*/
$dark-grey: #222222; $dark-grey: #222222;
$gold: #d7c067; $gold: #d7c067;
$orange: #FF8300; $orange: #ff8300;
$time-grey: #b7b2aa; $time-grey: #b7b2aa;
$time-grey-dark: #474747; $time-grey-dark: #474747;
$dark-grey: #222222; $dark-grey: #222222;
@@ -34,6 +34,13 @@ body {
} }
} }
.error-messages {
width: 100%;
margin-top: 0.25rem;
font-size: 0.875em;
color: var(--bs-form-invalid-color);
}
.clock { .clock {
height: 100px; height: 100px;
.divider { .divider {