+ {body} +
+ ); +}); +FormMessage.displayName = 'FormMessage'; + +export { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, + useFormField, +}; diff --git a/web/src/components/ui/input-otp.tsx b/web/src/components/ui/input-otp.tsx new file mode 100644 index 000000000..7da83e7ab --- /dev/null +++ b/web/src/components/ui/input-otp.tsx @@ -0,0 +1,71 @@ +'use client'; + +import { OTPInput, OTPInputContext } from 'input-otp'; +import { Dot } from 'lucide-react'; +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +const InputOTP = React.forwardRef< + React.ElementRef
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ });
+ }
+
+ return (
+
+
+ );
+}
+
+export function SignInForm() {
+ const { t } = useTranslate('login');
+
+ const FormSchema = z.object({
+ email: z.string().email({
+ message: t('emailPlaceholder'),
+ }),
+ password: z.string({ required_error: t('passwordPlaceholder') }),
+ });
+
+ const form = useForm
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ });
+ }
+
+ return (
+
+
+ );
+}
+
+export function VerifyEmailForm() {
+ const FormSchema = z.object({
+ pin: z.string().min(6, {
+ message: 'Your one-time password must be 6 characters.',
+ }),
+ });
+
+ const form = useForm
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ });
+ }
+
+ return (
+
+
+ );
+}
diff --git a/web/src/pages/login-next/index.tsx b/web/src/pages/login-next/index.tsx
new file mode 100644
index 000000000..ec5aad044
--- /dev/null
+++ b/web/src/pages/login-next/index.tsx
@@ -0,0 +1,88 @@
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useTranslate } from '@/hooks/common-hooks';
+import { DiscordLogoIcon, GitHubLogoIcon } from '@radix-ui/react-icons';
+import { SignInForm, SignUpForm, VerifyEmailForm } from './form';
+
+function LoginFooter() {
+ return (
+ or continue with
++ We’ve sent a 6-digit code to +
+yifanwu92@gmail.com.
+