fix: Add interstitial verifying + persist email

https://harperdb.atlassian.net/browse/STUDIO-512

Author: dawsontoth

src/features/auth/ForgotPassword.tsx

@@ -5,7 +5,7 @@ import { FormItem } from '@/components/ui/form/FormItem';
 import { FormLabel } from '@/components/ui/form/FormLabel';
 import { FormMessage } from '@/components/ui/form/FormMessage';
 import { zodRequireEmail } from '@/lib/zod/email';
-import { Link, useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate, useSearch } from '@tanstack/react-router';
 import { useForgotPasswordMutation } from '@/features/auth/hooks/useForgotPassword';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
@@ -21,12 +21,14 @@ const ForgotPasswordSchema = z.object({
 
 export function ForgotPassword() {
 	const navigate = useNavigate();
+	const { me: formPersistenceEmail } = useSearch({ strict: false });
 	const methods = useForm({
 		resolver: zodResolver(ForgotPasswordSchema),
 		defaultValues: {
-			email: '',
+			email: formPersistenceEmail || '',
 		},
 	});
+	const email = methods.watch('email');
 	const { setFocus, control, handleSubmit } = methods;
 
 	useEffect(() => {
@@ -80,15 +82,13 @@ export function ForgotPassword() {
 				</form>
 			</Form>
 			<div className="flex px-4 mt-4 underline place-content-between">
-				<Link className="text-sm hover:text-blue-300" to="/sign-in">
+				<Link className="text-sm hover:text-blue-300" to="/sign-in" search={{ me: email }}>
 					Sign in to your account
 				</Link>
-				<Link className="text-sm hover:text-blue-300" to="/sign-up">
+				<Link className="text-sm hover:text-blue-300" to="/sign-up" search={{ me: email }}>
 					Sign up for free
 				</Link>
 			</div>
 		</div>
 	);
 }
-
-

src/features/auth/SignIn.tsx

@@ -28,17 +28,20 @@ const SignInSchema = z.object({
 
 export function SignIn() {
 	const navigate = useNavigate();
+	const { me: formPersistenceEmail } = useSearch({ strict: false });
 	const router = useRouter();
 	const queryClient = useQueryClient();
 	const { redirect } = useSearch({ strict: false });
 
 	const methods = useForm({
 		resolver: zodResolver(SignInSchema),
 		defaultValues: {
-			email: '',
+			email: formPersistenceEmail || '',
 			password: '',
 		},
 	});
+
+	const email = methods.watch('email');
 	const { handleSubmit, control, setFocus } = methods;
 
 	useEffect(() => {
@@ -111,15 +114,13 @@ export function SignIn() {
 				</form>
 			</Form>
 			<div className="flex px-4 mt-4 underline place-content-between">
-				<Link className="text-sm hover:text-blue-300" to="/sign-up">
+				<Link className="text-sm hover:text-blue-300" to="/sign-up" search={{ me: email }}>
 					Sign up for free
 				</Link>
-				<Link className="text-sm hover:text-blue-300" to="/forgot-password">
+				<Link className="text-sm hover:text-blue-300" to="/forgot-password" search={{ me: email }}>
 					Forgot password?
 				</Link>
 			</div>
 		</div>
 	);
 }
-
-

src/features/auth/SignUp.tsx

@@ -15,7 +15,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Link, useNavigate, useSearch } from '@tanstack/react-router';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { z } from 'zod';
 
 const SignInSchema = z.object({
@@ -42,17 +41,19 @@ const SignInSchema = z.object({
 
 export function SignUp() {
 	const navigate = useNavigate();
-	const { email } = useSearch({ strict: false });
+	const { email: searchEmail, me: formPersistenceEmail } = useSearch({ strict: false });
 	const methods = useForm({
 		resolver: zodResolver(SignInSchema),
 		defaultValues: {
 			firstname: '',
 			lastname: '',
-			email: email || '',
+			email: formPersistenceEmail || searchEmail || '',
 			password: '',
 			confirmPassword: '',
 		},
 	});
+
+	const email = methods.watch('email');
 	const { setFocus, control, handleSubmit } = methods;
 
 	useEffect(() => {
@@ -66,15 +67,6 @@ export function SignUp() {
 		const { confirmPassword, ...userData } = formData;
 		submitSignUpData(userData, {
 			onSuccess: () => {
-				toast.success('Success', {
-					duration: 60_000,
-					description: 'Your account has been created! Please check your email to finish activating your' +
-						' account.',
-					action: {
-						label: 'Dismiss',
-						onClick: () => toast.dismiss(),
-					},
-				});
 				const company = parseCompanyFromEmail(userData.email);
 				reoClient?.identify?.({
 					username: userData.email,
@@ -83,7 +75,7 @@ export function SignUp() {
 					lastname: userData.lastname,
 					...(company ? { company } : {}),
 				});
-				navigate({ to: '/sign-in' });
+				void navigate({ to: '/verifying?email=' + encodeURIComponent(userData.email) });
 			},
 		});
 	};
@@ -138,8 +130,8 @@ export function SignUp() {
 								<FormControl>
 									<Input
 										type="email"
-										readOnly={!!email}
-										disabled={!!email}
+										readOnly={!!searchEmail}
+										disabled={!!searchEmail}
 										className="bg-purple-400 border-purple-400 dark:bg-black dark:border-black"
 										autoComplete="email"
 										autoCapitalize="none"
@@ -197,12 +189,10 @@ export function SignUp() {
 				</form>
 			</Form>
 			<div className="flex px-4 mt-4 underline place-content-between">
-				<Link className="m-auto text-sm hover:text-blue-300" to="/sign-in">
+				<Link className="m-auto text-sm hover:text-blue-300" to="/sign-in" search={{ me: email }}>
 					Already have an account? Sign in instead.
 				</Link>
 			</div>
 		</div>
 	);
 }
-
-

src/features/auth/Verifying.tsx

@@ -0,0 +1,55 @@
+import { useForgotPasswordMutation } from '@/features/auth/hooks/useForgotPassword';
+import { Link, useSearch } from '@tanstack/react-router';
+import { MouseEvent, useCallback } from 'react';
+import { toast } from 'sonner';
+
+export function Verifying() {
+	const { email }: { email?: string; } = useSearch({ strict: false });
+
+	const { mutate: submitForgotPasswordData, isPending } = useForgotPasswordMutation();
+
+	const resendCode = useCallback((e: MouseEvent) => {
+		e.preventDefault();
+		if (email) {
+			submitForgotPasswordData({ email }, {
+				onSuccess: (message) => {
+					toast.success('Code Sent', {
+						description: `${message}`,
+						action: {
+							label: 'Dismiss',
+							onClick: () => toast.dismiss(),
+						},
+					});
+				},
+			});
+		}
+		return false;
+	}, []);
+
+	return (
+		<div className="text-white w-lg flex flex-col gap-4">
+			<h1 className="text-3xl font-light">
+				<span
+					aria-hidden="true"
+					className="text-2xl animate-flower-dance mr-4"
+					title="Loading"
+				>🌼</span>
+				Check your email!
+			</h1>
+			<p>Your account has been created! You should receive an email with a link to <strong>[Verify My Email]</strong>!
+			</p>
+			<p>From: <strong>[email protected]</strong></p>
+			<p>To: <strong>{email || 'your email'}</strong></p>
+			<p>Can you click it? Then we can carry on to more fun things!</p>
+
+			<div className="underline flex gap-4">
+				<Link className="text-sm hover:text-blue-300" to="/sign-in" search={{ me: email }}>
+					I did it, let me sign in!
+				</Link>
+				<Link className="text-sm opacity-50 hover:text-blue-300" to={undefined} onClick={resendCode} disabled={isPending}>
+					Send me another code, please.
+				</Link>
+			</div>
+		</div>
+	);
+}

src/features/auth/routes.ts

@@ -6,6 +6,7 @@ import { RestPassword as ResetPassword } from '@/features/auth/ResetPassword';
 import { SignIn } from '@/features/auth/SignIn';
 import { SignUp } from '@/features/auth/SignUp';
 import { VerifyEmail } from '@/features/auth/VerifyEmail';
+import { Verifying } from '@/features/auth/Verifying';
 import { OverallAppSignIn } from '@/lib/authStore';
 import { getDefaultSignedInCloudRouteForUser } from '@/lib/urls/getDefaultSignedInCloudRouteForUser';
 import { rootRoute } from '@/router/rootRoute';
@@ -60,14 +61,27 @@ const verifyEmailRoute = createRoute({
 	component: VerifyEmail,
 });
 
+const verifyingEmailRoute = createRoute({
+	getParentRoute: () => authLayout,
+	path: 'verifying',
+	component: Verifying,
+});
+
 const resetPasswordRoute = createRoute({
 	getParentRoute: () => authLayout,
 	path: 'reset-password',
 	component: ResetPassword,
 });
 
 export const authRouteTree =
-	authLayout.addChildren([signInRoute, signUpRoute, forgotPasswordRoute, verifyEmailRoute, resetPasswordRoute]);
+	authLayout.addChildren([
+		signInRoute,
+		signUpRoute,
+		forgotPasswordRoute,
+		verifyEmailRoute,
+		verifyingEmailRoute,
+		resetPasswordRoute,
+	]);
 
 export const localAuthRoutes = [
 	localSignInRoute,

src/index.css

@@ -229,3 +229,22 @@
     @apply h-full bg-black font-ubuntu text-white;
   }
 }
+
+
+/* Fun dancing flower loading animation */
+@keyframes flower-dance {
+  0% { transform: rotate(0deg) translateY(0) scale(1); }
+  20% { transform: rotate(-12deg) translateY(-3px) scale(1.06); }
+  40% { transform: rotate(6deg) translateY(0) scale(1); }
+  60% { transform: rotate(12deg) translateY(-3px) scale(1.06); }
+  80% { transform: rotate(-6deg) translateY(0) scale(1); }
+  100% { transform: rotate(0deg) translateY(0) scale(1); }
+}
+
+@layer utilities {
+  .animate-flower-dance {
+    animation: flower-dance 1.15s ease-in-out infinite;
+    transform-origin: bottom center;
+    display: inline-block;
+  }
+}