feat: delete users - not tested

frontend/src/features/auth/pages/SignupPage.tsx

@@ -0,0 +1,50 @@
+/**
+ * @ai-summary Desktop signup page with centered card layout
+ */
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { SignupForm } from '../components/SignupForm';
+import { useSignup } from '../hooks/useSignup';
+import { SignupRequest } from '../types/auth.types';
+
+export const SignupPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { mutate: signup, isPending } = useSignup();
+
+  const handleSubmit = (data: SignupRequest) => {
+    signup(data, {
+      onSuccess: () => {
+        navigate('/verify-email');
+      },
+    });
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-lg shadow-lg p-8">
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold text-primary-600 mb-2">MotoVaultPro</h1>
+            <h2 className="text-xl font-semibold text-gray-800">Create Your Account</h2>
+            <p className="text-sm text-gray-600 mt-2">
+              Start tracking your vehicle maintenance and fuel logs
+            </p>
+          </div>
+
+          <SignupForm onSubmit={handleSubmit} loading={isPending} />
+
+          <div className="mt-6 text-center text-sm text-gray-600">
+            Already have an account?{' '}
+            <button
+              onClick={() => navigate('/login')}
+              className="text-primary-600 hover:text-primary-700 font-medium focus:outline-none focus:underline"
+            >
+              Login
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/features/auth/pages/VerifyEmailPage.tsx

@@ -0,0 +1,90 @@
+/**
+ * @ai-summary Desktop email verification page with polling and resend functionality
+ */
+
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useVerifyStatus, useResendVerification } from '../hooks/useVerifyStatus';
+import { Button } from '../../../shared-minimal/components/Button';
+
+export const VerifyEmailPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { data: verifyStatus, isLoading } = useVerifyStatus({
+    enablePolling: true,
+  });
+  const { mutate: resendVerification, isPending: isResending } = useResendVerification();
+
+  useEffect(() => {
+    if (verifyStatus?.emailVerified) {
+      navigate('/onboarding');
+    }
+  }, [verifyStatus, navigate]);
+
+  const handleResend = () => {
+    resendVerification();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
+        <div className="text-lg text-gray-600">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-lg shadow-lg p-8">
+          <div className="text-center mb-8">
+            <div className="mx-auto w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-4">
+              <svg
+                className="w-8 h-8 text-primary-600"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                />
+              </svg>
+            </div>
+            <h1 className="text-2xl font-bold text-gray-800 mb-2">Check Your Email</h1>
+            <p className="text-gray-600">
+              We've sent a verification link to
+            </p>
+            <p className="text-primary-600 font-medium mt-1">
+              {verifyStatus?.email}
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div className="bg-slate-50 rounded-lg p-4 text-sm text-gray-700">
+              <p className="mb-2">Click the link in the email to verify your account.</p>
+              <p>Once verified, you'll be automatically redirected to complete your profile.</p>
+            </div>
+
+            <div className="text-center">
+              <p className="text-sm text-gray-600 mb-3">Didn't receive the email?</p>
+              <Button
+                onClick={handleResend}
+                loading={isResending}
+                variant="secondary"
+                className="w-full min-h-[44px]"
+              >
+                Resend Verification Email
+              </Button>
+            </div>
+          </div>
+
+          <div className="mt-6 text-center text-sm text-gray-500">
+            <p>Check your spam folder if you don't see the email in your inbox.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};