Add QR Scan

Author: nalves599

package.json

@@ -16,7 +16,6 @@
     "autoprefixer": "10.4.15",
     "eslint": "8.47.0",
     "eslint-config-next": "^14.1.0",
-    "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.469.0",
     "moment": "^2.30.1",
     "msw": "^2.6.5",
@@ -35,7 +34,6 @@
     "typescript": "5.1.6"
   },
   "devDependencies": {
-    "@types/jsonwebtoken": "^9.0.7",
     "prettier": "^3.4.2"
   }
 }

src/app/(authenticated)/qr/page.tsx

@@ -10,6 +10,7 @@ import { UserService } from "@/services/UserService";
 import { CompanyService } from "@/services/CompanyService";
 import { convertToAppRole, isCompany } from "@/utils/utils";
 import Link from "next/link";
+import { ScanQrCode } from "lucide-react";
 
 export default async function QR() {
   const session = await getServerSession(authOptions);
@@ -25,8 +26,8 @@ export default async function QR() {
   let company: Company | null = null;
   if (isCompany(user.role)) {
     // assumes that cannon api only provides the company associated with the current edition
-    if (user.company) {
-      company = await CompanyService.getCompany(user.company.id);
+    if (user.company?.length) {
+      company = await CompanyService.getCompany(user.company[0].company);
     } else {
       await demoteMe(session!.cannonToken);
     }
@@ -49,13 +50,15 @@ export default async function QR() {
 
   return (
     <div className="container m-auto h-full">
-      <div className="flex flex-col justify-center items-center text-center p-4 gap-y-4">
+      <div className="h-full flex flex-col justify-center items-center text-center p-4 gap-y-4">
         <div className="flex flex-col justify-center items-center">
-          <Image className="w-48" src={hackyPeeking} alt="Hacky Peaking" />
+          {!isCompany(user.role) && (
+            <Image className="w-48" src={hackyPeeking} alt="Hacky Peaking" />
+          )}
           <QRCode
             className="w-72 h-auto p-4 border-[14px] bg-white rounded-lg"
             style={{ borderColor }}
-            value={`sinfo://${btoa(JSON.stringify({ kind: "user", user: { id: user.id, name: user.name, img: user.img, role: user.role } }))}`}
+            value={userQRCode}
           />
         </div>
         <div>
@@ -64,17 +67,25 @@ export default async function QR() {
             {convertToAppRole(user.role)}
           </p>
         </div>
-        {user.company && (
-          <Link href={`/companies/${user.company.id}`}>
+        {company && (
+          <Link href={`/companies/${company.id}`}>
             <Image
               className="object-contain"
               width={100}
               height={100}
-              src={user.company.img}
-              alt={`${user.company.name} logo`}
+              src={company.img}
+              alt={`${company.name} logo`}
             />
           </Link>
         )}
+        <Link
+          href="/qr/scan"
+          className="button button-primary text-lg w-full"
+          style={{ backgroundColor: borderColor }}
+        >
+          <ScanQrCode size={24} />
+          Scan
+        </Link>
       </div>
     </div>
   );

src/app/(authenticated)/qr/scan/QRScanner.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import MessageCard from "@/components/MessageCard";
+import QRCodeScanner from "@/components/QRCodeScanner";
+import { UserTile } from "@/components/user/UserTile";
+import { CompanyService } from "@/services/CompanyService";
+import {
+  getAchievementFromQRCode,
+  getUserFromQRCode,
+  isCompany,
+} from "@/utils/utils";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+
+interface QRScannerProps {
+  user: User;
+  cannonToken: string;
+}
+
+export default function QRScanner({ user, cannonToken }: QRScannerProps) {
+  const [bottomCard, setBottomCard] = useState<ReactNode | undefined>();
+  const [statusCard, setStatusCard] = useState<ReactNode | undefined>();
+  const cardsTimeout = useRef<NodeJS.Timeout>();
+
+  const handleQRCodeScanned = useCallback(
+    async (data: string) => {
+      cardsTimeout.current && clearTimeout(cardsTimeout.current);
+
+      const scannedUser = getUserFromQRCode(data);
+      const scannedAchievement = getAchievementFromQRCode(data);
+
+      if (scannedUser) {
+        setBottomCard(<UserTile user={scannedUser} />);
+        if (isCompany(user.role) && user.company?.length) {
+          const signedUser = await CompanyService.sign(
+            cannonToken,
+            user.company[0].company,
+            scannedUser.id,
+          );
+          if (signedUser) {
+            setStatusCard(
+              <MessageCard type="info" content="User got its achievement." />,
+            );
+          } else {
+            setStatusCard(
+              <MessageCard
+                type="warning"
+                content="Failed to get user's achievement. Scan again!"
+              />,
+            );
+          }
+        }
+      } else if (scannedAchievement) {
+        // FIXME: Redeem secret achievement
+        setBottomCard(<h1>Achievement Redeemed</h1>);
+      } else {
+        setBottomCard(<MessageCard type="danger" content="Invalid QR-Code" />);
+      }
+
+      cardsTimeout.current = setTimeout(() => {
+        setBottomCard(null);
+        setStatusCard(null);
+      }, 10 * 1000); // 10 seconds
+    },
+    [cannonToken, user.role, user.company],
+  );
+
+  useEffect(() => {
+    setBottomCard((card) => (
+      <div className="flex flex-col justify-start gap-y-1">
+        {statusCard}
+        {card}
+      </div>
+    ));
+  }, [statusCard]);
+
+  return (
+    <div className="container m-auto h-full">
+      <QRCodeScanner
+        onQRCodeScanned={handleQRCodeScanned}
+        bottomCard={bottomCard}
+      />
+    </div>
+  );
+}

src/app/(authenticated)/qr/scan/page.tsx

@@ -0,0 +1,18 @@
+import { getServerSession } from "next-auth";
+import QRScanner from "./QRScanner";
+import UserSignOut from "@/components/UserSignOut";
+import { UserService } from "@/services/UserService";
+import authOptions from "@/app/api/auth/[...nextauth]/authOptions";
+
+export default async function ScanQRCode() {
+  const session = await getServerSession(authOptions);
+
+  const user: User | null = await UserService.getMe(session?.cannonToken ?? "");
+  if (!user) return <UserSignOut />;
+
+  return (
+    <div className="container m-auto h-full">
+      <QRScanner user={user} cannonToken={session!.cannonToken} />
+    </div>
+  );
+}

src/components/BottomNavbar/QRCodeButton.tsx

@@ -11,7 +11,8 @@ export default function QRCodeButton() {
   if (
     currPath === "/qr" ||
     currPath.endsWith("/check-in") ||
-    currPath.endsWith("/promote")
+    currPath.endsWith("/promote") ||
+    currPath.endsWith("/scan")
   )
     return <></>;
 

src/components/QRCodeScanner.tsx

@@ -26,7 +26,7 @@ export default function QRCodeScanner({
       scannerRef.current = new QrScanner(
         videoRef.current,
         (result) => {
-          if (result.data && scanning) {
+          if (result.data && scanning.current) {
             scanning.current = false;
             setTimeout(() => (scanning.current = true), TIMEOUT_SCAN);
             onQRCodeScanned(result.data);

src/services/CompanyService.ts

@@ -35,5 +35,24 @@ export const CompanyService = (() => {
     return null;
   };
 
-  return { getCompany, getCompanies, getConnections };
+  const sign = async (
+    cannonToken: string,
+    id: string,
+    userId: string,
+  ): Promise<User | null> => {
+    try {
+      const resp = await fetch(`${companiesEndpoint}/${id}/sign/${userId}`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${cannonToken}`,
+        },
+      });
+      if (resp.ok) return (await resp.json()) as User;
+    } catch (e) {
+      console.error(e);
+    }
+    return null;
+  };
+
+  return { getCompany, getCompanies, getConnections, sign };
 })();

src/services/UserService.ts

@@ -46,7 +46,7 @@ export const UserService = (() => {
         },
       });
 
-      if (resp.ok) return (await resp.json()).data;
+      if (resp.ok) return (await resp.json()).token;
     } catch (error) {
       console.error(error);
     }
@@ -175,7 +175,7 @@ export const UserService = (() => {
     options: PromoteOptions,
   ): Promise<boolean> => {
     try {
-      const resp = await fetch(usersEndpoint + `/users/${id}`, {
+      const resp = await fetch(usersEndpoint + `/${id}`, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",
@@ -193,7 +193,7 @@ export const UserService = (() => {
 
   const demote = async (cannonToken: string, id: string): Promise<boolean> => {
     try {
-      const resp = await fetch(usersEndpoint + `/users/${id}`, {
+      const resp = await fetch(usersEndpoint + `/${id}`, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",

src/types/globals.d.ts

@@ -11,9 +11,18 @@ type User = {
     email?: string;
     github?: string;
   };
+  signatures?: {
+    edition: string;
+    day: string;
+    redeemed: boolean;
+    signatures: SINFOSignature[];
+  }[];
   achievements?: Achievement[];
   connections?: User[];
-  company?: Company;
+  company?: {
+    edition: string;
+    company: string;
+  }[];
   mail?: string;
   bearer?:
     | []
@@ -61,6 +70,12 @@ type Achievement = {
   updated?: string;
 };
 
+type SINFOSignature = {
+  companyId: string;
+  date: string;
+  _id: string;
+};
+
 type Company = {
   id: string;
   name: string;

src/utils/utils.ts

@@ -1,5 +1,3 @@
-import jwt, { JwtPayload, VerifyOptions } from "jsonwebtoken";
-
 export function convertToAppRole(role: string): UserRole {
   switch (role) {
     case "company":
@@ -94,14 +92,27 @@ export function getEventFullDate(date: string): string {
 // TODO: Implement this correctly
 export function isValidQRCode(
   data: string,
-  jwtOptions?: VerifyOptions,
+  kind?: "user" | "achievement",
 ): boolean {
-  return data.startsWith("sinfo://");
+  try {
+    return (
+      data.startsWith("sinfo://") &&
+      (kind === undefined ||
+        JSON.parse(atob(data.split("sinfo://")[1])).kind === kind)
+    );
+  } catch {
+    return false;
+  }
 }
 
 // TODO: Implement this correctly
 export function getUserFromQRCode(data: string): User | null {
-  if (!isValidQRCode(data, { subject: "user" })) return null;
-  //return (jwt.decode(data.split("sinfo://")[1]) as JwtPayload).user as User;
+  if (!isValidQRCode(data, "user")) return null;
   return JSON.parse(atob(data.split("sinfo://")[1])).user as User;
 }
+
+// TODO: Implement this correctly
+export function getAchievementFromQRCode(data: string): string | null {
+  if (!isValidQRCode(data, "achievement")) return null;
+  return JSON.parse(atob(data.split("sinfo://")[1])).achievement as string;
+}