feat: new SignIn UI (#592)

## What does this PR do?

This PR has the same changes from #589, that PRs history is not same with the history of our main branch.
Upon trying to rebase this PR, I was getting 54 conflicts due to the folder rename.
The old PR is based on main branch, so I cant force push either, thus this PR

> From Old PR
<img width="425" alt="Screenshot 2024-07-22 at 17 56 40" src="https://github.com/user-attachments/assets/31d9e67f-d74e-42ed-90a9-f30dbdeee984">
<img width="558" alt="Screenshot 2024-07-22 at 17 57 29" src="https://github.com/user-attachments/assets/4c90f884-3bba-46ab-98e4-d9ab5674d58d">


## 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/web/src/app/(login)/_components/two-factor-dialog.tsx

@@ -0,0 +1,74 @@
+import { Button } from '@/src/components/shadcn-ui/button';
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot
+} from '@/src/components/shadcn-ui/input-otp';
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription
+} from '@/src/components/shadcn-ui/alert-dialog';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { platform } from '@/src/lib/trpc';
+
+export function TwoFactorDialog({ open }: { open: boolean }) {
+  const [code, setCode] = useState('');
+  const router = useRouter();
+  const { isSuccess, error, mutateAsync, isPending } =
+    platform.auth.twoFactorAuthentication.verifyTwoFactorChallenge.useMutation();
+
+  return (
+    <AlertDialog open={open}>
+      <AlertDialogContent className="w-min p-8">
+        <AlertDialogTitle>Two Factor Authentication</AlertDialogTitle>
+        <AlertDialogDescription>
+          Please enter the 6-digit code from your authenticator app
+        </AlertDialogDescription>
+        <div className="mx-auto w-fit">
+          <InputOTP
+            maxLength={6}
+            value={code}
+            onChange={(e) => setCode(e)}>
+            <InputOTPGroup>
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+              <InputOTPSlot index={3} />
+              <InputOTPSlot index={4} />
+              <InputOTPSlot index={5} />
+            </InputOTPGroup>
+          </InputOTP>
+        </div>
+        {error && (
+          <div className="text-destructive text-center text-sm">
+            {error.message}
+          </div>
+        )}
+        <Button
+          className="mx-auto w-full"
+          variant="secondary"
+          disabled={code.length !== 6 || isPending || isSuccess}
+          loading={isPending || isSuccess}
+          onClick={async () => {
+            try {
+              const { defaultOrgSlug } = await mutateAsync({
+                twoFactorCode: code
+              });
+              if (!defaultOrgSlug) {
+                router.push('/join/org');
+              } else {
+                router.push(`/${defaultOrgSlug}`);
+              }
+            } catch {
+              /* do nothing */
+            }
+          }}>
+          {isSuccess ? 'Redirecting...' : isPending ? 'Verifying...' : 'Verify'}
+        </Button>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}