Added resending verification emails, auto-verify after accepting invites

Author: mphasize

app/lib/auth.server.ts

@@ -70,7 +70,10 @@ export async function login({ email, password }: LoginForm) {
 
 	if (!user.isVerified) {
 		return json(
-			{ error: `You still need to verify your email` },
+			{
+				error: `You still need to verify your email address.`,
+				errorCode: "verify-email",
+			},
 			{ status: 400 },
 		);
 	}

app/routes/user.accept-invite.$inviteId.$code.tsx

@@ -54,6 +54,7 @@ export const action: ActionFunction = async ({ request, params }) => {
 				password: passwordHash,
 				verifyCode: invite.verifyCode,
 				isAdmin: invite.isAdmin,
+				isVerified: true,
 			},
 		});
 

app/routes/user.login.tsx

@@ -128,6 +128,7 @@ export default function Login() {
 
 	const errors = actionData?.errors || {};
 	const formError = actionData?.error;
+	const formErrorCode = actionData?.errorCode;
 
 	// Updates the form data when an input changes
 	const handleInputChange = (
@@ -222,11 +223,33 @@ export default function Login() {
 						</CardDescription>
 					</CardHeader>
 
-					<Form method="POST">
-						<CardContent className="grid gap-4">
-							<div className="text-xs font-semibold text-center tracking-wide text-red-500 w-full">
+					<CardContent className="grid gap-4">
+						{formError && (
+							<div className="w-full font-semibold text-sm tracking-wide text-red-500 border border-red-500 rounded p-2 flex flex-col justify-center items-center gap-2">
 								{formError}
+								{formErrorCode &&
+									formErrorCode === "verify-email" && (
+										<Form
+											action="/user/verification/resend"
+											method="POST"
+										>
+											<input
+												type="hidden"
+												name="email"
+												value={formData.email}
+											/>
+											<Button
+												variant="outline"
+												size="sm"
+												type="submit"
+											>
+												Resend email
+											</Button>
+										</Form>
+									)}
 							</div>
+						)}
+						<Form method="POST">
 							<FormField
 								htmlFor="email"
 								label="Email"
@@ -308,8 +331,8 @@ export default function Login() {
 										: "Sign In"}
 								</Button>
 							</div>
-						</CardContent>
-					</Form>
+						</Form>
+					</CardContent>
 				</Card>
 				<div className="grow flex flex-row justify-center items-end gap-4 pb-5 text-xs">
 					{org.imprintUrl && (

app/routes/user.verification.resend.ts

@@ -0,0 +1,38 @@
+import type { ActionFunction } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
+import { prisma } from "~/lib/prisma.server";
+import { sendVerificationEmail } from "~/lib/user.server";
+import { validateEmail } from "~/lib/validators.server";
+
+export const action: ActionFunction = async ({ request }) => {
+	const form = await request.formData();
+	const email = form.get("email");
+	const emailError = validateEmail(email);
+
+	if (emailError) {
+		return new Response(null, {
+			status: 400,
+			statusText: emailError,
+		});
+	}
+
+	const user = await prisma.user.findUnique({
+		where: {
+			email,
+		},
+	});
+
+	if (!user) {
+		throw new Response(null, {
+			status: 404,
+			statusText: "Not Found",
+		});
+	}
+
+	if (user.isVerified) {
+		return redirect("/user/login");
+	} else {
+		await sendVerificationEmail(user);
+		return redirect("/user/verification-info");
+	}
+};