Validate for E-Mail Address on Verification Page (#666)

* validate: for email in the user verification modal

* feat: email auth is now a server page, uses server-side zod lib for email input validation, removes validator lib

* Add FormWrapper to Error Message

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
This commit is contained in:
Shubham Palriwala
2023-08-11 20:06:26 +05:30
committed by GitHub
parent 98cdf941e6
commit 09436c78fc
2 changed files with 27 additions and 22 deletions

View File

@@ -1,33 +1,38 @@
"use client";
import { RequestVerificationEmail } from "@/components/auth/RequestVerificationEmail";
import { useSearchParams } from "next/navigation";
import FormWrapper from "@/components/auth/FormWrapper";
import { z } from "zod";
export default function VerficationPage() {
const searchParams = useSearchParams();
return (
<FormWrapper>
{searchParams && searchParams?.get("email") ? (
const VerificationPageSchema = z.string().email();
export default function VerificationPage(params) {
const email = params.searchParams.email;
try {
const parsedEmail = VerificationPageSchema.parse(email);
return (
<FormWrapper>
<>
<h1 className="leading-2 mb-4 text-center text-lg font-semibold text-slate-900">
Please confirm your email address
</h1>
<p className="text-center text-sm text-slate-700">
We sent an email to <span className="font-semibold italic">{searchParams.get("email")}</span>.
Please click the link in the email to activate your account.
We sent an email to <span className="font-semibold italic">{parsedEmail}</span>. Please click the
link in the email to activate your account.
</p>
<hr className="my-4" />
<p className="text-center text-xs text-slate-500">
You didn&apos;t receive an email or your link expired?
</p>
<div className="mt-5">
<RequestVerificationEmail email={searchParams.get("email")} />
<RequestVerificationEmail email={parsedEmail} />
</div>
</>
) : (
<p className="text-center">No E-Mail Address provided</p>
)}
</FormWrapper>
);
</FormWrapper>
);
} catch (error) {
return (
<FormWrapper>
<p className="text-center">Invalid email address</p>
</FormWrapper>
);
}
}

12
pnpm-lock.yaml generated
View File

@@ -352,7 +352,7 @@ importers:
version: 8.10.0(eslint@8.46.0)
eslint-config-turbo:
specifier: latest
version: 1.8.8(eslint@8.46.0)
version: 1.10.3(eslint@8.46.0)
eslint-plugin-react:
specifier: 7.33.1
version: 7.33.1(eslint@8.46.0)
@@ -9837,13 +9837,13 @@ packages:
eslint: 8.46.0
dev: true
/eslint-config-turbo@1.8.8(eslint@8.46.0):
resolution: {integrity: sha512-+yT22sHOT5iC1sbBXfLIdXfbZuiv9bAyOXsxTxFCWelTeFFnANqmuKB3x274CFvf7WRuZ/vYP/VMjzU9xnFnxA==}
/eslint-config-turbo@1.10.3(eslint@8.46.0):
resolution: {integrity: sha512-ggzPfTJfMsMS383oZ4zfTP1zQvyMyiigOQJRUnLt1nqII6SKkTzdKZdwmXRDHU24KFwUfEFtT6c8vnm2VhL0uQ==}
peerDependencies:
eslint: '>6.6.0'
dependencies:
eslint: 8.46.0
eslint-plugin-turbo: 1.8.8(eslint@8.46.0)
eslint-plugin-turbo: 1.10.3(eslint@8.46.0)
dev: true
/eslint-import-resolver-node@0.3.6:
@@ -10031,8 +10031,8 @@ packages:
semver: 6.3.1
string.prototype.matchall: 4.0.8
/eslint-plugin-turbo@1.8.8(eslint@8.46.0):
resolution: {integrity: sha512-zqyTIvveOY4YU5jviDWw9GXHd4RiKmfEgwsjBrV/a965w0PpDwJgEUoSMB/C/dU310Sv9mF3DSdEjxjJLaw6rA==}
/eslint-plugin-turbo@1.10.3(eslint@8.46.0):
resolution: {integrity: sha512-g3Mnnk7el1FqxHfqbE/MayLvCsYjA/vKmAnUj66kV4AlM7p/EZqdt42NMcMSKtDVEm0w+utQkkzWG2Xsa0Pd/g==}
peerDependencies:
eslint: '>6.6.0'
dependencies: