feat: add page to resend confirmation email

Author: corp-0

app/(account)/resend-confirm-email/actions.ts

@@ -0,0 +1,53 @@
+"use server"
+
+import {z} from 'zod';
+import {FieldError, GeneralError, isFieldError} from "../../../lib/auth/guards";
+
+export interface ResendConfirmationMailRequest {
+    success: boolean;
+    error?: GeneralError | FieldError;
+}
+
+export const postResendConfirmationMail = async (_: ResendConfirmationMailRequest, formData: FormData): Promise<ResendConfirmationMailRequest>  => {
+    const schema = z.object({
+        email: z.string().email()
+    });
+
+    const parsed = schema.safeParse({
+        email: formData.get('email')
+    });
+
+    if (!parsed.success) {
+        const fieldErrors = parsed.error.errors.reduce((acc, error) => {
+            return {...acc, [error.path[0]]: error.message}
+        }, {});
+
+        return {success: false, error: {status: 400, error: fieldErrors}};
+    }
+
+    try {
+        const response = await fetch(`${process.env.CC_API_URL}/accounts/resend-account-confirmation`, {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                email: parsed.data.email
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            if (isFieldError(error)) {
+                return {success: false, error: error};
+            }
+
+            throw new Error('Unknown error');
+        }
+
+    } catch (e) {
+        return {success: false, error: {error: 'An unexpected error happened', status: 500}};
+    }
+
+    return {success: true}
+}

app/(account)/resend-confirm-email/page.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+
+import FormContainer from "../../common/uiLibrary/Layouters/formContainer";
+import TextField from "../../common/uiLibrary/forms/textField";
+import Button from "../../common/uiLibrary/Button";
+import ContactInformation from "../../(home)/contactInformation";
+import React from "react";
+import FullPage from "../../common/uiLibrary/Layouters/fullPage";
+import {useFormState} from "react-dom";
+import {postResendConfirmationMail, ResendConfirmationMailRequest} from "./actions";
+
+const ResendConfirmationMail = () => {
+    const initialState: ResendConfirmationMailRequest = {
+        success: false,
+    }
+
+    const [state, formAction] = useFormState(postResendConfirmationMail, initialState);
+
+    const resendForm = () => {
+        return (
+            <>
+                {!state.success && state.error && errorMessage()}
+
+                <TextField
+                    id='email'
+                    name='email'
+                    label='Email'
+                    type='email'
+                    placeholder='cuban@pete.com'
+                    required
+                    shadow
+                />
+                <Button type="submit" className="mt-4 w-full" filled>Submit</Button>
+            </>
+        )
+    }
+    const errorMessage = () => {
+        return (
+            <div className='flex flex-col gap-4'>
+                <h3 className="text-lg text-center font-medium text-red-700">Oops!</h3>
+                <p>There was an unexpected error while trying to resend the confirmation email.</p>
+                <p>Please try again later or contact us.</p>
+            </div>
+        )
+    }
+
+    const successMessage = () => (
+        <div className='flex flex-col gap-4'>
+            <h3 className="text-lg text-center font-medium text-green-800">Success!</h3>
+            <p>Your request has been processed successfully. If your account is found in our system and the email
+                address you provided matches our records, we have sent a confirmation email to that address.</p>
+            <p>Please check your inbox for the confirmation email. If you don't receive it within a few minutes, check
+                your spam or junk folder. For further assistance, don't hesitate to contact us.</p>
+        </div>
+    );
+
+    return (
+        <FullPage>
+            <div className='flex-grow'>
+                <FormContainer action={formAction} title='Resend password confirmation'>
+                    {state.success ? successMessage() : resendForm()}
+                </FormContainer>
+            </div>
+            <ContactInformation/>
+        </FullPage>
+    )
+};
+
+export default ResendConfirmationMail;