Merge pull request #200 from Hestia-Homes/bug/magic-email-flagged-as-phish

Bug/magic email flagged as phish: Added acceptance based login

public/.well-known/security.txt

@@ -0,0 +1,5 @@
+Contact: mailto:security@domna.homes
+Expires: 2027-01-01T00:00:00.000Z
+Preferred-Languages: en
+Policy: https://domna.homes/security
+Canonical: https://ara.domna.homes/.well-known/security.txt

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://domna.homes/sitemap.xml

src/app/verify/[token]/page.tsx

@@ -1,9 +1,13 @@
-import { redirect } from "next/navigation";
 import { db } from "@/app/db/db";
 import { verificationTokens } from "@/app/db/schema/users";
 import { eq } from "drizzle-orm";
 import crypto from "crypto";
 
+import { Button } from "@/app/shadcn_components/ui/button";
+import { Card } from "@/app/shadcn_components/ui/card";
+
+import { ShieldCheck } from "lucide-react";
+
 async function getEmailByToken(token: string) {
   const secret = process.env.NEXTAUTH_SECRET!;
 
@@ -18,14 +22,12 @@ async function getEmailByToken(token: string) {
     .where(eq(verificationTokens.token, hashedToken))
     .limit(1);
 
-  if (!record.length) {
-    return null;
-  }
+  if (!record.length) return null;
 
   return record[0].identifier;
 }
 
-export default async function LoginPage({
+export default async function VerifyPage({
   params,
 }: {
   params: Promise<{ token: string }>;
@@ -34,11 +36,94 @@ export default async function LoginPage({
 
   const email = await getEmailByToken(token);
 
-  if (!email) {
-    redirect("/");
-  }
+  return (
+    <div className="relative min-h-screen flex flex-col bg-gradient-to-b from-gray-50 to-white overflow-hidden">
+      {/* Soft background brand glow */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        <div className="absolute -top-24 -left-24 w-[28rem] h-[28rem] bg-brandblue/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 right-0 w-[30rem] h-[30rem] bg-midblue/10 rounded-full blur-3xl" />
+      </div>
 
-  redirect(
-    `/api/auth/callback/email?token=${token}&email=${encodeURIComponent(email)}`,
+      {/* Hero */}
+      <div className="relative bg-gradient-to-r from-brandblue to-midblue text-white py-16 px-8">
+        <div className="max-w-5xl mx-auto text-center">
+          <h1 className="text-4xl font-bold mb-4">Sign in to Ara</h1>
+
+          <p className="text-white/90 text-lg max-w-xl mx-auto">
+            Continue securely to access your retrofit planning tools and
+            property insights.
+          </p>
+        </div>
+      </div>
+
+      {/* Center content */}
+      <div className="relative flex-1 flex items-center justify-center px-6">
+        <div className="w-full max-w-md">
+          <Card className="p-10 shadow-xl border border-gray-100 backdrop-blur-sm text-center space-y-6">
+            {/* Security icon */}
+            <div className="flex justify-center">
+              <div className="bg-brandblue/10 p-3 rounded-full">
+                <ShieldCheck className="w-7 h-7 text-brandblue" />
+              </div>
+            </div>
+
+            {email ? (
+              <>
+                <h2 className="text-xl font-semibold text-brandblue">
+                  Confirm sign-in
+                </h2>
+
+                <p className="text-sm text-gray-600 leading-relaxed">
+                  Click below to securely sign in to your Ara account.
+                </p>
+
+                <form
+                  action="/api/auth/callback/email"
+                  method="GET"
+                  className="pt-2"
+                >
+                  <input type="hidden" name="token" value={token} />
+                  <input type="hidden" name="email" value={email} />
+
+                  <Button
+                    type="submit"
+                    className="bg-brandbrown hover:bg-hoverblue w-full text-base py-3"
+                  >
+                    Continue to Ara
+                  </Button>
+                </form>
+
+                <p className="text-xs text-gray-400">
+                  This link expires after one hour.
+                </p>
+              </>
+            ) : (
+              <>
+                <h2 className="text-xl font-semibold text-red-500">
+                  Link expired
+                </h2>
+
+                <p className="text-sm text-gray-600">
+                  This login link has already been used or has expired.
+                </p>
+
+                <Button
+                  asChild
+                  className="bg-brandbrown hover:bg-hoverblue w-full text-base py-3"
+                >
+                  <a href="/">Request new login link</a>
+                </Button>
+              </>
+            )}
+          </Card>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="pb-10 text-center text-xs text-gray-400 space-y-1">
+        <p>Secure authentication powered by Ara</p>
+        <p>© {new Date().getFullYear()} Domna Homes</p>
+      </div>
+    </div>
   );
 }