Implemented email confirmation flow

Implemented user registration confirmation flow
2026-06-16 00:30:02 +00:00 · 2024-09-27 09:34:52 +02:00
parent 913ff9d289
commit e47ab8405f
19 changed files with 283 additions and 35 deletions
@@ -0,0 +1,76 @@
+import {Card, CardBody, CardHeader} from "@nextui-org/react";
+import {useNavigate, useSearchParams} from "react-router-dom";
+import React, {useEffect, useState} from "react";
+import {CheckCircle, Warning, WarningCircle} from "@phosphor-icons/react";
+import TokenValidationResult from "Frontend/generated/de/grimsi/gameyfin/shared/token/TokenValidationResult";
+import {EmailConfirmationEndpoint} from "Frontend/generated/endpoints";
+import {useAuth} from "Frontend/util/auth";
+
+export default function EmailConfirmationView() {
+    const auth = useAuth();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const [validationResult, setValidationResult] = useState<TokenValidationResult>(TokenValidationResult.INVALID);
+
+    useEffect(() => {
+        if (auth.state.user?.emailConfirmed === true) {
+            navigate("/");
+        }
+    }, []);
+
+    useEffect(() => {
+        let token = searchParams.get("token");
+        if (token) confirmEmail(token).then((result) => setValidationResult(result));
+    }, [searchParams]);
+
+    async function confirmEmail(token: string): Promise<TokenValidationResult> {
+        let result = await EmailConfirmationEndpoint.confirmEmail(token) as TokenValidationResult;
+
+        if (result === TokenValidationResult.VALID) {
+            setTimeout(() => window.location.reload(), 5000);
+        }
+
+        return result;
+    }
+
+    return (
+        <div className="flex flex-row flex-grow items-center justify-center size-full gradient-primary">
+            <Card className="p-4 min-w-[468px]">
+                <CardHeader className="mb-4">
+                    <img
+                        className="h-28 w-full content-center"
+                        src="/images/Logo.svg"
+                        alt="Gameyfin Logo"
+                    />
+                </CardHeader>
+                <CardBody className="flex flex-row justify-center">
+                    {validationResult === TokenValidationResult.VALID ?
+                        <div className="flex flex-row items-center gap-4 text-success">
+                            <CheckCircle size={40}/>
+                            <p>
+                                Email confirmed<br/>
+                                You will be redirected shortly
+                            </p>
+                        </div>
+                        : validationResult === TokenValidationResult.EXPIRED ?
+                            <div className="flex flex-row items-center gap-4 text-warning">
+                                <WarningCircle size={40}/>
+                                <p>
+                                    Expired token<br/>
+                                    Please request a new one
+                                </p>
+                            </div>
+                            :
+                            <div className="flex flex-row items-center gap-4 text-danger">
+                                <Warning size={40}/>
+                                <p>
+                                    Invalid token<br/>
+                                    Please try again
+                                </p>
+                            </div>
+                    }
+                </CardBody>
+            </Card>
+        </div>
+    );
+}