✨ feat(profile): Update localization strings and enhance third-party account binding

2025-02-09 21:05:56 +07:00
parent 3883646566
commit 2d1effb7ab
34 changed files with 1677 additions and 526 deletions
@@ -0,0 +1,33 @@
+'use client';
+
+import { bindOAuthCallback } from '@/services/user/user';
+import { getAllUrlParams } from '@/utils/common';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+interface CertificationProps {
+  platform: string;
+  children: React.ReactNode;
+}
+
+export default function Certification({ platform, children }: CertificationProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const searchParams = getAllUrlParams();
+    bindOAuthCallback({
+      method: platform,
+      callback: searchParams,
+    })
+      .then((res) => {
+        router.replace('/profile');
+        router.refresh();
+      })
+      .catch((error) => {
+        router.replace('/auth');
+      });
+  }, [pathname]);
+
+  return children;
+}
@@ -0,0 +1,61 @@
+import HyperText from '@workspace/ui/components/hyper-text';
+import { OrbitingCircles } from '@workspace/ui/components/orbiting-circles';
+import { Icon } from '@workspace/ui/custom-components/icon';
+import { getTranslations } from 'next-intl/server';
+import Certification from './certification';
+
+export async function generateStaticParams() {
+  return [
+    {
+      platform: 'telegram',
+    },
+    {
+      platform: 'apple',
+    },
+    {
+      platform: 'facebook',
+    },
+    {
+      platform: 'google',
+    },
+    {
+      platform: 'github',
+    },
+  ];
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{
+    platform: string;
+  }>;
+}) {
+  const { platform } = await params;
+  const t = await getTranslations('auth');
+  return (
+    <Certification platform={platform}>
+      <div className='bg-background relative flex h-screen w-full flex-col items-center justify-center overflow-hidden'>
+        <div className='pointer-events-none flex animate-pulse flex-col items-center whitespace-pre-wrap bg-gradient-to-r from-blue-500 via-indigo-500 to-violet-500 bg-clip-text text-center font-black tracking-tight text-transparent dark:from-blue-400 dark:via-indigo-300 dark:to-violet-400'>
+          <HyperText className='text-xl uppercase md:text-2xl'>{platform}</HyperText>
+          <HyperText className='text-lg md:text-xl'>{t('authenticating')}</HyperText>
+        </div>
+
+        <OrbitingCircles iconSize={40} speed={0.8}>
+          <Icon icon='logos:telegram' className='size-12' />
+          <Icon icon='uil:apple' className='size-12' />
+          <Icon icon='logos:google-icon' className='size-12' />
+          <Icon icon='logos:facebook' className='size-12' />
+          <Icon icon='uil:github' className='size-12' />
+        </OrbitingCircles>
+        <OrbitingCircles iconSize={30} radius={100} reverse speed={0.4}>
+          <Icon icon='logos:telegram' className='size-10' />
+          <Icon icon='uil:apple' className='size-10' />
+          <Icon icon='logos:google-icon' className='size-10' />
+          <Icon icon='logos:facebook' className='size-10' />
+          <Icon icon='uil:github' className='size-10' />
+        </OrbitingCircles>
+      </div>
+    </Certification>
+  );
+}