Ajoute le flux d'invitation avec activation de compte

2026-07-19 19:40:38 +02:00
parent 08b9bb8095
commit 18bf4e60d1
13 changed files with 747 additions and 97 deletions
@@ -0,0 +1,109 @@
+import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
+import { Alert, AlertDescription, AlertIcon, Button, FormControl, FormLabel, Input, Spinner, Stack, Text } from "./chakra-compat";
+import { FcGoogle } from "react-icons/fc";
+import type { AccountInviteTokenState } from "./types";
+
+type InviteAcceptFormTexts = {
+  loadingLabel: string;
+  invalidLinkLabel: string;
+  emailLabel: string;
+  nameLabel: string;
+  passwordLabel: string;
+  passwordConfirmLabel: string;
+  submitLabel: string;
+  googleLabel: string;
+};
+
+type InviteAcceptFormProps = {
+  texts: InviteAcceptFormTexts;
+  tokenState: AccountInviteTokenState;
+  loading?: boolean;
+  initialName?: string | null;
+  showGoogleSignIn?: boolean;
+  googleLoading?: boolean;
+  onSubmit: (values: { name: string; password: string; passwordConfirm: string }) => void | Promise<void>;
+  onGoogleSignIn?: () => void | Promise<void>;
+};
+
+export function InviteAcceptForm({
+  texts,
+  tokenState,
+  loading = false,
+  initialName = null,
+  showGoogleSignIn = false,
+  googleLoading = false,
+  onSubmit,
+  onGoogleSignIn
+}: InviteAcceptFormProps) {
+  const [name, setName] = useState(initialName ?? "");
+
+  useEffect(() => {
+    setName(initialName ?? "");
+  }, [initialName, tokenState.status]);
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const form = new FormData(event.currentTarget);
+    void onSubmit({
+      name: String(form.get("name") ?? ""),
+      password: String(form.get("password") ?? ""),
+      passwordConfirm: String(form.get("passwordConfirm") ?? "")
+    });
+  }
+
+  if (tokenState.status === "loading") {
+    return (
+      <Stack align="center" py={6} gap={3}>
+        <Spinner />
+        <Text color="gray.600">{texts.loadingLabel}</Text>
+      </Stack>
+    );
+  }
+
+  if (tokenState.status === "invalid") {
+    return (
+      <Alert status="error" borderRadius="md">
+        <AlertIcon />
+        <AlertDescription>{tokenState.error || texts.invalidLinkLabel}</AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack gap={4}>
+      <FormControl>
+        <FormLabel>{texts.emailLabel}</FormLabel>
+        <Input value={tokenState.email} readOnly disabled />
+      </FormControl>
+
+      <form onSubmit={handleSubmit}>
+        <Stack gap={4}>
+          <FormControl isRequired>
+            <FormLabel>{texts.nameLabel}</FormLabel>
+            <Input name="name" value={name} onChange={(event: ChangeEvent<HTMLInputElement>) => setName(event.target.value)} />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>{texts.passwordLabel}</FormLabel>
+            <Input name="password" type="password" minLength={8} />
+          </FormControl>
+
+          <FormControl isRequired>
+            <FormLabel>{texts.passwordConfirmLabel}</FormLabel>
+            <Input name="passwordConfirm" type="password" minLength={8} />
+          </FormControl>
+
+          <Button type="submit" loading={loading}>
+            {texts.submitLabel}
+          </Button>
+        </Stack>
+      </form>
+
+      {showGoogleSignIn && onGoogleSignIn ? (
+        <Button variant="outline" loading={googleLoading} leftIcon={<FcGoogle />} onClick={() => void onGoogleSignIn()}>
+          {texts.googleLabel}
+        </Button>
+      ) : null}
+    </Stack>
+  );
+}