feat: add page to confirm your mail after registering (#68)

Author: corp-0

app/confirm-email/[token]/actions.ts

@@ -0,0 +1,31 @@
+"use server"
+
+export const postMailConfirmationToken = async (token: string): Promise<any> => {
+    try {
+        const response = await fetch(`${process.env.CC_API_URL}/accounts/confirm-account`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ token }),
+        });
+
+        if (!response.ok) {
+            const errorResponse = await response.json();
+            if (errorResponse.error) {
+                if (typeof errorResponse.error === 'string') {
+                    return { error: errorResponse.error };
+                } else if (errorResponse.error.token) {
+                    return { error: errorResponse.error.token.join(' ') };
+                } else if (errorResponse.error.non_field_errors) {
+                    return { error: errorResponse.error.non_field_errors.join(' ') };
+                }
+            }
+            return { error: "An unexpected error occurred." };
+        }
+
+        return { success: true };
+    } catch (error) {
+        return { error: "An unexpected error occurred." };
+    }
+};

app/confirm-email/[token]/page.tsx

@@ -0,0 +1,48 @@
+"use client"
+import {usePathname} from "next/navigation";
+import {postMailConfirmationToken} from "./actions";
+import React, {useEffect, useState} from "react";
+import Panel from "../../common/uiLibrary/panel";
+import ContactInformation from "../../(home)/contactInformation";
+
+const MailConfirmationPage = () => {
+    const [response, setResponse] = useState<{ success?: boolean; error?: string }>({});
+    const token = usePathname().split('/').filter(Boolean).pop();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            if (token) {
+                return await postMailConfirmationToken(token);
+            }
+        };
+
+        fetchData().then(r => {
+            setResponse(r);
+        });
+    }, []);
+
+    if (!token) {
+        return <main>
+        </main>;
+    }
+
+    return (
+        <main className="flex flex-col justify-between min-h-screen pt-8 pb-16 lg:pt-16 lg:pb-24">
+            <div>
+                <Panel>
+                    <div
+                        className="mb-4 text-4xl text-center font-extrabold leading-tight lg:mb-6 text-white">
+                        {response.success ? (
+                            <h1>Confirmation successful!</h1>
+                        ) : (
+                            <h1>{response.error || 'Waiting for confirmation...'}</h1>
+                        )}
+                    </div>
+                </Panel>
+            </div>
+            <ContactInformation/>
+        </main>
+    );
+};
+
+export default MailConfirmationPage;

app/layout.tsx

@@ -4,6 +4,7 @@ import Clown from "./clown/clown";
 import {Metadata} from "next";
 import DefaultNavbar from "./common/defaultNavbar";
 import { Analytics } from '@vercel/analytics/react';
+import type { Viewport } from 'next'
 
 export const metadata: Metadata = {
     title: 'Unitystation - The Space Station 13 Remake Made in Unity',
@@ -20,9 +21,7 @@ export const metadata: Metadata = {
         'roleplaying game',
     ],
     description: 'Unitystation is a free and open-source chaotic multiplayer role-playing and simulation game made in Unity. Remake of the cult classic Space Station 13.',
-    colorScheme: 'dark',
     authors: {name: 'Unitystation Team', url: 'https://github.com/unitystation'},
-    viewport: {width: "device-width", initialScale: 1},
     robots: {follow: true, index: true},
     openGraph: {
         type: 'website',
@@ -38,6 +37,12 @@ export const metadata: Metadata = {
     }
 }
 
+export const viewport: Viewport = {
+    themeColor: 'black',
+    width: 'device-width',
+    initialScale: 1,
+}
+
 export default function RootLayout({children,}: { children: React.ReactNode; }) {
 
     return (