fix: remove duplicate turnstile on login page (#608)

Removed the duplicated Turnstile Captcha from login Page.

## Type of change

<!-- Please mark the relevant points by using [x] -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] Chore (refactoring code, technical debt, workflow improvements)
- [ ] Enhancement (small improvements)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update

## Checklist

<!-- We're starting to get more and more contributions. Please help us making this efficient for all of us and go through this checklist. Please tick off what you did  -->

### Required

- [ ] Read [Contributing Guide](https://github.com/un/inbox/blob/main/CONTRIBUTING.md)
- [ ] Self-reviewed my own code
- [ ] Tested my code in a local environment
- [ ] Commented on my code in hard-to-understand areas
- [ ] Checked for warnings, there are none
- [ ] Removed all `console.logs`
- [ ] Merged the latest changes from main onto my branch with `git pull origin main`
- [ ] My changes don't cause any responsiveness issues

### Appreciated

- [ ] If a UI change was made: Added a screen recording or screenshots to this PR
- [ ] Updated the UnInbox Docs if changes were necessary

Author: BlankParticle

apps/platform/trpc/routers/authRouter/twoFactorRouter.ts

@@ -55,7 +55,6 @@ export const twoFactorRouter = router({
       })
     )
     .mutation(async ({ ctx, input }) => {
-      await new Promise((resolve) => setTimeout(resolve, 4000));
       const challengeCookie = getCookie(
         ctx.event,
         'two-factor-login-challenge'

apps/web/src/app/(login)/_components/passkey-login.tsx

@@ -18,14 +18,19 @@ export function TwoFactorDialog({ open }: { open: boolean }) {
   const [code, setCode] = useState('');
   const router = useRouter();
   const { isSuccess, error, mutateAsync, isPending } =
-    platform.auth.twoFactorAuthentication.verifyTwoFactorChallenge.useMutation();
+    platform.auth.twoFactorAuthentication.verifyTwoFactorChallenge.useMutation({
+      onError: () => setCode('')
+    });
 
   return (
-    <AlertDialog open={open}>
+    <AlertDialog
+      open={open}
+      // don't close on any interaction
+      onOpenChange={() => false}>
       <AlertDialogContent className="w-min p-8">
         <AlertDialogTitle>Two Factor Authentication</AlertDialogTitle>
         <AlertDialogDescription>
-          Please enter the 6-digit code from your authenticator app
+          Enter the 6-digit code from your authenticator app
         </AlertDialogDescription>
         <div className="mx-auto w-fit">
           <InputOTP
@@ -43,11 +48,10 @@ export function TwoFactorDialog({ open }: { open: boolean }) {
           </InputOTP>
         </div>
         {error && (
-          <div className="text-red-9 text-center text-sm">{error.message}</div>
+          <div className="text-red-9 text-center text-xs">{error.message}</div>
         )}
         <Button
           className="mx-auto w-full"
-          variant="secondary"
           disabled={code.length !== 6 || isPending || isSuccess}
           loading={isPending || isSuccess}
           onClick={async () => {

apps/web/src/app/(login)/_components/two-factor-dialog.tsx

@@ -10,7 +10,6 @@ import {
 import { Button } from '@/src/components/shadcn-ui/button';
 import { Separator } from '@/src/components/shadcn-ui/separator';
 import { Badge } from '@/src/components/shadcn-ui/badge';
-import { PasskeyLoginButton } from './_components/passkey-login';
 import { At, Lock } from '@phosphor-icons/react';
 import Link from 'next/link';
 import Image from 'next/image';
@@ -25,24 +24,27 @@ import {
   TurnstileComponent,
   turnstileEnabled
 } from '@/src/components/turnstile';
-import { platform } from '@/src/lib/trpc';
-import { useState } from 'react';
 import { TwoFactorDialog } from './_components/two-factor-dialog';
+import { Fingerprint } from '@phosphor-icons/react';
+import { platform } from '@/src/lib/trpc';
+import { startAuthentication } from '@simplewebauthn/browser';
+import { toast } from 'sonner';
+import { useCallback, useState } from 'react';
 
 const loginSchema = z.object({
   username: zodSchemas.username(2),
-  password: z.string().min(8, 'Password must be at least 8 characters'),
-  turnstileToken: turnstileEnabled
-    ? z.string({
-        required_error:
-          'Waiting for Captcha. If you can see the Captcha, complete it manually'
-      })
-    : z.undefined()
+  password: z.string().min(8, 'Password must be at least 8 characters')
 });
 
 export default function Page() {
   const router = useRouter();
   const [twoFactorDialogOpen, setTwoFactorDialogOpen] = useState(false);
+  const [turnstileToken, setTurnstileToken] = useState<string | undefined>();
+  const generatePasskey =
+    platform.useUtils().auth.passkey.generatePasskeyChallenge;
+  const { mutateAsync: loginPasskey } =
+    platform.auth.passkey.verifyPasskey.useMutation();
+  const [loadingPasskey, setLoadingPasskey] = useState(false);
 
   const form = useForm<z.infer<typeof loginSchema>>({
     resolver: zodResolver(loginSchema),
@@ -53,29 +55,88 @@ export default function Page() {
   });
 
   const {
-    mutateAsync: login,
+    mutateAsync: loginPassword,
     error,
     isPending
   } = platform.auth.password.signIn.useMutation();
 
-  const handleLogin = async (values: z.infer<typeof loginSchema>) => {
+  const loginWithPasskey = useCallback(async () => {
+    if (turnstileEnabled && !turnstileToken) {
+      toast.error(
+        'Captcha has not been completed yet, if you can see the Captcha, complete it manually'
+      );
+      return;
+    }
     try {
-      const { status, defaultOrgShortcode } = await login(values);
-      if (status === 'NO_2FA_SETUP') {
-        if (!defaultOrgShortcode) {
-          router.push('/join/org');
+      setLoadingPasskey(true);
+      const data = await generatePasskey.fetch({
+        turnstileToken
+      });
+      const response = await startAuthentication(data.options);
+      const { defaultOrg } = await loginPasskey({
+        verificationResponseRaw: response
+      });
+
+      if (!defaultOrg) {
+        toast.error('You are not a member of any organization', {
+          description: 'Redirecting you to create an organization'
+        });
+        router.push('/join/org');
+        return;
+      }
+
+      toast.success('Sign in successful!', {
+        description: 'Redirecting you to your conversations'
+      });
+      router.push(`/${defaultOrg}/convo`);
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.name === 'NotAllowedError') {
+          toast.warning('Passkey login either timed out or was cancelled');
         } else {
-          router.push(
-            `/${defaultOrgShortcode}/settings/user/security?code=NO_2FA_SETUP`
-          );
+          toast.error(error.name, {
+            description: error.message
+          });
         }
       } else {
-        setTwoFactorDialogOpen(true);
+        console.error(error);
       }
-    } catch {
-      /* do nothing */
+    } finally {
+      setLoadingPasskey(false);
     }
-  };
+  }, [generatePasskey, router, turnstileToken, loginPasskey]);
+
+  const loginWithPassword = useCallback(
+    async ({ username, password }: z.infer<typeof loginSchema>) => {
+      if (turnstileEnabled && !turnstileToken) {
+        toast.error(
+          'Captcha has not been completed yet, if you can see the Captcha, complete it manually'
+        );
+        return;
+      }
+      try {
+        const { status, defaultOrgShortcode } = await loginPassword({
+          username,
+          password,
+          turnstileToken
+        });
+        if (status === 'NO_2FA_SETUP') {
+          if (!defaultOrgShortcode) {
+            router.push('/join/org');
+          } else {
+            router.push(
+              `/${defaultOrgShortcode}/settings/user/security?code=NO_2FA_SETUP`
+            );
+          }
+        } else {
+          setTwoFactorDialogOpen(true);
+        }
+      } catch {
+        /* do nothing */
+      }
+    },
+    [loginPassword, router, turnstileToken]
+  );
 
   return (
     <div className="bg-base-2 flex h-full items-center justify-center">
@@ -90,7 +151,16 @@ export default function Page() {
         <h1 className="mb-2 text-2xl font-medium">Login to your UnInbox</h1>
         <h2 className="text-base-10 text-sm">Enter your details to login.</h2>
         <div className="py-6">
-          <PasskeyLoginButton />
+          <div className="flex flex-col gap-2">
+            <Button
+              onClick={() => loginWithPasskey()}
+              loading={loadingPasskey}
+              disabled={loadingPasskey || (turnstileEnabled && !turnstileToken)}
+              className="mb-2 w-72 cursor-pointer gap-2 font-semibold">
+              <Fingerprint size={20} />
+              <span>Login with my passkey</span>
+            </Button>
+          </div>
           <div className="flex items-center justify-center gap-2 py-4">
             <Separator className="bg-base-5 w-28" />
             <Badge
@@ -103,7 +173,7 @@ export default function Page() {
           <div className="flex flex-col items-center justify-center gap-4 py-2">
             <Form {...form}>
               <form
-                onSubmit={form.handleSubmit(handleLogin)}
+                onSubmit={form.handleSubmit(loginWithPassword)}
                 className="flex w-full flex-col items-center justify-center gap-3">
                 <FormField
                   control={form.control}
@@ -143,22 +213,6 @@ export default function Page() {
                   <div className="text-red-10 text-sm">{error.message}</div>
                 )}
 
-                <FormField
-                  control={form.control}
-                  name="turnstileToken"
-                  render={() => (
-                    <FormItem>
-                      <FormControl>
-                        <TurnstileComponent
-                          onSuccess={(value) =>
-                            form.setValue('turnstileToken', value)
-                          }
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
                 <Button
                   className="w-full"
                   loading={isPending}
@@ -168,6 +222,7 @@ export default function Page() {
               </form>
             </Form>
           </div>
+          <TurnstileComponent onSuccess={setTurnstileToken} />
         </div>
         <div className="text-base-10 flex flex-col gap-2 text-sm">
           <Link