From 054e1c6da06f10201ce9a50119fdfa9e40bcf7f7 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sat, 7 Dec 2024 19:06:24 +0100
Subject: [PATCH] Display a message after successful submission of registration
 form

---
 app/ui/components/registration-form.tsx | 101 +++++++++++++-----------
 1 file changed, 55 insertions(+), 46 deletions(-)

diff --git a/app/ui/components/registration-form.tsx b/app/ui/components/registration-form.tsx
index 5c4fb71..3c7b5d7 100644
--- a/app/ui/components/registration-form.tsx
+++ b/app/ui/components/registration-form.tsx
@@ -11,6 +11,7 @@ import { register } from '@/app/api/authentication';
 import { getCaptchaChallenge } from '@/app/api/captcha';
 
 export default function RegistrationForm() {
+  const [submitted, setSubmitted] = useState<boolean>(false);
   const [errors, setErrors] = useState<string[]>([]);
 
   const [email, setEmail] = useState<string>("");
@@ -36,54 +37,62 @@ export default function RegistrationForm() {
   useEffect(refreshCaptcha, [])
 
   return (
-    <div className="card flex justify-evenly py-5 flex-col">
-      <FloatLabel className="my-4">
-        <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
-        <label htmlFor="email">Email</label>
-      </FloatLabel>
-      <FloatLabel className="my-4">
-        <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
-        <label htmlFor="password">Password</label>
-      </FloatLabel>
-      <FloatLabel className="my-4">
-        <InputText id="passwordConfirmation" type="password" className='rounded-sm' onChange={(e) => setPasswordConfirmation(e.target.value)} />
-        <label htmlFor="passwordConfirmation">Confirm Password</label>
-      </FloatLabel>
-      <FloatLabel className="my-4">
-        <InputText id="slug" type="text" className='rounded-sm' onChange={(e) => setSlug(e.target.value)} />
-        <label htmlFor="slug">Slug</label>
-      </FloatLabel>
-      <img className="w-96" src={captchaUrl} alt="captcha" />
-      <FloatLabel className="my-4">
-        <InputText id="captcha" type="text" className='rounded-sm' value={captchaAnswer} onChange={(e) => setCaptchaAnswer(e.target.value)} />
-        <label htmlFor="captcha">Captcha</label>
-      </FloatLabel>
+    submitted ? (
+      <div className="card flex justify-evenly py-5 flex-col">
+        <div className="text-green-500">Registration successful. Check your email for a confirmation link.</div>
+      </div>
+    ) : (
 
-      {errors.map((error, index) => (
-        <div key={index} className="text-red-500">{error}</div>
-      ))}
+      <div className="card flex justify-evenly py-5 flex-col">
+        <FloatLabel className="my-4">
+          <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
+          <label htmlFor="email">Email</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
+          <label htmlFor="password">Password</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="passwordConfirmation" type="password" className='rounded-sm' onChange={(e) => setPasswordConfirmation(e.target.value)} />
+          <label htmlFor="passwordConfirmation">Confirm Password</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="slug" type="text" className='rounded-sm' onChange={(e) => setSlug(e.target.value)} />
+          <label htmlFor="slug">Slug</label>
+        </FloatLabel>
+        <img className="w-96" src={captchaUrl} alt="captcha" />
+        <FloatLabel className="my-4">
+          <InputText id="captcha" type="text" className='rounded-sm' value={captchaAnswer} onChange={(e) => setCaptchaAnswer(e.target.value)} />
+          <label htmlFor="captcha">Captcha</label>
+        </FloatLabel>
+
+        {errors.map((error, index) => (
+          <div key={index} className="text-red-500">{error}</div>
+        ))}
 
 
-      <button
-        className={classNames('primary')}
-        disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)}
-        onClick={() => register(
-          {
-            slug: slug,
-            email: email,
-            password: password,
-            passwordConfirmation: passwordConfirmation,
-            captcha: {
-              id: captchaId,
-              answer: captchaAnswer
-            },
-            onRegister: () => { setErrors([]) },
-            onError: (errors) => { refreshCaptcha(); setErrors(errors)  }
-          }
-        )}
-      >
-        Register
-      </button>
-    </div>
+        <button
+          className={classNames('primary')}
+          disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)}
+          onClick={() => register(
+            {
+              slug: slug,
+              email: email,
+              password: password,
+              passwordConfirmation: passwordConfirmation,
+              captcha: {
+                id: captchaId,
+                answer: captchaAnswer
+              },
+              onRegister: () => { setErrors([]); setSubmitted(true) },
+              onError: (errors) => { refreshCaptcha(); setErrors(errors) }
+            }
+          )}
+        >
+          Register
+        </button>
+      </div>
+    )
+
   );
 }
\ No newline at end of file