feat: telegram link page

Author: lorenzocorallo

src/app/dashboard/(active)/account/telegram.tsx

@@ -1,22 +1,5 @@
 "use client";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Progress } from "@/components/ui/progress";
-import { auth, useSession } from "@/lib/auth";
-import { APIError } from "better-auth/api";
-import { useEffect, useMemo, useState } from "react";
-import { InputWithPrefix } from "@/components/input-prefix";
-import { Code } from "@/components/code";
-import { toast } from "sonner";
-import { ClockAlertIcon } from "lucide-react";
+import { useSession } from "@/lib/auth";
 import { useTRPC } from "@/lib/trpc/client";
 import { useQuery } from "@tanstack/react-query";
 
@@ -28,7 +11,7 @@ export function Telegram() {
   return user.telegramUsername && user.telegramId ? (
     <ShowTelegram username={user.telegramUsername} userId={user.telegramId} />
   ) : (
-    <LinkTelegram />
+    <></>
   );
 }
 
@@ -52,235 +35,3 @@ function ShowTelegram({
     </>
   );
 }
-
-function LinkTelegram() {
-  const [open, setOpen] = useState(false);
-  const { refetch } = useSession();
-  function handleComplete() {
-    toast.success("Telegram link completed!");
-    refetch();
-    localStorage.removeItem("linktg");
-    setOpen(false);
-  }
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" variant="secondary">
-          Link
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Link your Telegram</DialogTitle>
-          <div className="flex min-h-40 flex-col justify-center">
-            <Form onComplete={handleComplete} />
-          </div>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function getSaved() {
-  const saved = localStorage.getItem("linktg");
-  if (!saved) return null;
-  const { username, code, ttl, startTime } = JSON.parse(saved) as {
-    username: string;
-    code: string;
-    ttl: number;
-    startTime: number;
-  };
-
-  const leftTime = ttl - (Date.now() - startTime) / 1000;
-  if (leftTime <= 0) {
-    localStorage.removeItem("linktg");
-    return null;
-  }
-
-  return { username, leftTime, code, ttl };
-}
-
-function Form({ onComplete }: { onComplete: () => void }) {
-  const saved = useMemo(() => getSaved(), []);
-  const [username, setUsername] = useState<string>(saved?.username ?? "");
-  const [code, setCode] = useState<string | null>(saved?.code ?? null);
-  const [ttl, setTTL] = useState<number | null>(saved?.leftTime ?? null);
-  const [expired, setExpired] = useState<boolean>(false);
-
-  async function handleSubmit(
-    e:
-      | React.FormEvent<HTMLFormElement>
-      | React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) {
-    e.stopPropagation();
-    e.preventDefault();
-    if (username.length === 0) return;
-    const res = await auth.telegram.link.start({
-      telegramUsername: username,
-    });
-
-    if (res.error) return console.error("custom error", res.error);
-    if (res.data instanceof APIError)
-      return console.error("better-auth APIError", res.data);
-    setExpired(false);
-    setCode(res.data.code);
-    setTTL(res.data.ttl);
-
-    localStorage.setItem(
-      "linktg",
-      JSON.stringify({
-        code: res.data.code,
-        ttl: res.data.ttl,
-        startTime: Date.now(),
-        username,
-      }),
-    );
-  }
-
-  function reset() {
-    setTTL(null);
-    setCode(null);
-    setExpired(false);
-    setUsername("");
-    localStorage.removeItem("linktg");
-  }
-
-  useEffect(() => {
-    if (!code || !ttl) return;
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    const interval = setInterval(async () => {
-      const res = await auth.telegram.link.verify({ query: { code } });
-
-      if (res.error) return console.error("custom error", res.error);
-      if (res.data instanceof APIError)
-        return console.error("better-auth APIError", res.data);
-
-      if (res.data.verified) {
-        clearInterval(interval);
-        onComplete();
-        return;
-      }
-
-      if (res.data.expired) {
-        setExpired(true);
-        localStorage.removeItem("linktg");
-        setTTL(null);
-        setCode(null);
-        clearInterval(interval);
-        return;
-      }
-
-      console.log("polling... not verified or expired");
-    }, 5000);
-    return () => clearInterval(interval);
-  }, [code, onComplete, ttl]);
-
-  if (expired)
-    return (
-      <div className="flex flex-col items-center gap-4 py-8">
-        <ClockAlertIcon size={64} />
-        <p>Code Expired!</p>
-        <Button onClick={handleSubmit}>Regenerate</Button>
-      </div>
-    );
-
-  return code && ttl ? (
-    <div className="flex flex-col items-center gap-4 pt-8 pb-4">
-      <p className="flex items-center justify-between gap-4 text-4xl">
-        {code.split("").map((c, i) => (
-          <span key={i}>{c}</span>
-        ))}
-      </p>
-      <Timer
-        ttl={saved?.ttl ?? ttl}
-        timeLeft={ttl}
-        onEnd={() => setExpired(true)}
-      />
-
-      <div className="flex items-center gap-2">
-        <Button variant="outline">
-          <a
-            aria-label="open telegram bot"
-            href="tg://resolve?domain=pn_ts_dev_bot"
-          >
-            Start the bot
-          </a>
-        </Button>
-        <p>and then send</p>
-        <Code copyOnClick>/link</Code>
-      </div>
-
-      <p className="text-foreground/30 pt-2 text-xs">
-        Having troubles with this code?{" "}
-        <button className="underline" onClick={reset}>
-          Click to reset
-        </button>
-      </p>
-    </div>
-  ) : (
-    <form onSubmit={handleSubmit} className="flex flex-col items-center gap-4">
-      <div className="flex items-center gap-4">
-        <Label htmlFor="username">Username</Label>
-        <InputWithPrefix
-          prefix="@"
-          id="username"
-          autoComplete="off"
-          min={1}
-          value={username}
-          pattern="^[^@]*"
-          onChange={(e) => setUsername(e.target.value.replaceAll("@", ""))}
-          placeholder="example"
-        />
-      </div>
-      <Button type="submit">Inizia</Button>
-    </form>
-  );
-}
-
-function Timer({
-  ttl,
-  timeLeft: pTimeLeft,
-  onEnd,
-}: {
-  ttl: number;
-  timeLeft: number;
-  onEnd: () => void;
-}) {
-  const ttlMs = ttl * 1000;
-  const [timeLeft, setTimeLeft] = useState<number>(pTimeLeft * 1000);
-
-  const percentage = (timeLeft / ttlMs) * 100;
-  useEffect(() => {
-    if (timeLeft === 0) return;
-    const interval = setInterval(() => {
-      setTimeLeft((prevTime) => {
-        if (prevTime <= 100) {
-          clearInterval(interval);
-          onEnd();
-          return 0;
-        }
-        return timeLeft - 100;
-      });
-    }, 100);
-
-    return () => clearInterval(interval);
-  }, [onEnd, timeLeft]);
-
-  return (
-    <>
-      <Progress
-        value={percentage}
-        className="h-2 w-64"
-        indicatorClassname={
-          timeLeft < 31_000 ? "bg-red-600 dark:bg-red-400" : "bg-primary"
-        }
-      />
-      <span className="text-foreground/70 text-sm">
-        Time left:
-        <span className="inline-block w-10 text-end">
-          {Math.floor(timeLeft / 1000)}s
-        </span>
-      </span>
-    </>
-  );
-}

src/app/layout.tsx

@@ -2,10 +2,10 @@ import { GeistSans } from "geist/font/sans";
 import { type Metadata } from "next";
 import "@/index.css";
 import { TRPCReactProvider } from "@/lib/trpc/client";
-import { Header, HEADER_HEIGHT } from "@/components/header";
+import { HEADER_HEIGHT } from "@/components/header";
 import { ThemeProvider } from "@/components/theme-provider";
-import { SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const desc = "PoliNetwork Admin Dashboard";
 
@@ -42,8 +42,10 @@ export default function RootLayout({
           storageKey="polinetwork_darkmode"
           disableTransitionOnChange
         >
-          <TRPCReactProvider>{children}</TRPCReactProvider>
-          <Toaster richColors position="bottom-right" />
+          <TooltipProvider>
+            <TRPCReactProvider>{children}</TRPCReactProvider>
+            <Toaster richColors position="bottom-right" />
+          </TooltipProvider>
         </ThemeProvider>
       </body>
     </html>

src/app/login/page.tsx

@@ -11,10 +11,10 @@ export default async function SignInPage({
   searchParams: Promise<{ callbackUrl?: string }>;
 }) {
   const { callbackUrl } = await searchParams;
-  const callbackURL = `${getBaseUrl()}${callbackUrl ?? "/dashboard"}`;
+  const callbackURL = `${getBaseUrl()}${callbackUrl ?? "/login/success"}`;
 
   const session = await getServerSession();
-  if (session.data?.user) redirect("/dashboard");
+  if (session.data?.user) redirect("/login/success");
 
   return (
     <main className="text-accent container mx-auto flex grow flex-col items-center justify-start space-y-6 px-4 py-8">

src/app/login/success/page.tsx

@@ -0,0 +1,19 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "@/server/auth";
+import { getQueryClient, trpc } from "@/lib/trpc/server";
+
+export default async function LoginSuccess() {
+  const session = await getServerSession();
+  if (!session.data) redirect("/login");
+
+  const tgId = session.data.user.telegramId
+  if (!tgId) redirect("/onboarding/link");
+  // if (session?.user.role === USER_ROLE.INACTIVE) ;
+  // if (session?.user.role === USER_ROLE.DISABLED) redirect("/dashboard/disabled");
+  
+  const qc = getQueryClient()
+  const { role } = await qc.fetchQuery(trpc.tg.permissions.getRole.queryOptions({ userId: tgId }))
+  if (role === "user") redirect("/onboarding/no-role")
+  if (role === "creator") redirect("/onboarding/unauthorized")
+  return redirect("/dashboard")
+}

src/app/onboarding/layout.tsx

@@ -0,0 +1,10 @@
+import { Header } from "@/components/header";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="scrollbar scrollbar-w-2 scrollbar-track-card scrollbar-thumb-white/20 flex h-screen w-full flex-col items-center justify-start overflow-y-auto">
+      <Header />
+      {children}
+    </div>
+  );
+}

src/app/onboarding/link/page.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+import { TelegramLink } from "./telegram";
+import loginSvg2 from "@/assets/svg/login-2.svg";
+import { Card } from "@/components/ui/card";
+import { getServerSession } from "@/server/auth";
+import { redirect } from "next/navigation";
+import { env } from "@/env";
+
+const BOT_USERNAME =
+  env.NODE_ENV === "production" ? "pn_ts_dev_bot" : "pn_ts_devlocal_bot";
+
+export default async function OnboardingLink() {
+  const { data } = await getServerSession();
+  if (data?.user.telegramId) redirect("/login/success");
+
+  return (
+    <main className="grid grow place-content-center">
+      <Card className="relative grid h-140 min-w-120 grow grid-rows-[5fr_auto_4fr] items-center">
+        <div className="flex flex-col gap-y-4 place-self-center justify-self-center">
+          <Image
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            src={loginSvg2}
+            width={200}
+            alt="insert credentials"
+          />
+          <div className="text-center">
+            <p className="text-primary text-lg font-bold dark:text-white">
+              Link your Telegram account
+            </p>
+            <p className="text-muted-foreground text-sm">
+              This allows to verify your role
+            </p>
+          </div>
+        </div>
+        <hr />
+        <TelegramLink botUsername={BOT_USERNAME} />
+      </Card>
+    </main>
+  );
+}