diff --git a/app/components/zxing-scanner.tsx b/app/components/zxing-scanner.tsx index 0c40bbf8e..b20c65c91 100644 --- a/app/components/zxing-scanner.tsx +++ b/app/components/zxing-scanner.tsx @@ -9,6 +9,7 @@ import { useClientNotification } from "~/hooks/use-client-notification"; import type { loader } from "~/routes/_layout+/scanner"; import { ShelfError } from "~/utils/error"; import { isFormProcessing } from "~/utils/form"; +import { isQrId } from "~/utils/id"; import { Spinner } from "./shared/spinner"; export const ZXingScanner = ({ @@ -27,11 +28,18 @@ export const ZXingScanner = ({ // Function to decode the QR code const decodeQRCodes = (result: string) => { if (result != null && !isRedirecting) { - const regex = /^(https?:\/\/)([^/:]+)(:\d+)?\/qr\/([a-zA-Z0-9]+)$/; - /** We make sure the value of the QR code matches the structure of Shelf qr codes */ + /** + * - ^(https?:\/\/[^\/]+\/ matches the protocol, domain, and the initial slash. + * - (?:qr\/)? optionally matches the /qr/ part. + * - ([a-zA-Z0-9]+))$ matches the QR ID which is the last segment of the URL. + */ + // Regex to match both old and new QR code structures + const regex = /^(https?:\/\/[^/]+\/(?:qr\/)?([a-zA-Z0-9]+))$/; + + /** We make sure the value of the QR code matches the structure of Shelf QR codes */ const match = result.match(regex); if (!match) { - /** If the QR code does not match the structure of Shelf qr codes, we show an error message */ + /** If the QR code does not match the structure of Shelf QR codes, we show an error message */ sendNotification({ title: "QR Code Not Valid", message: "Please Scan valid asset QR", @@ -40,12 +48,22 @@ export const ZXingScanner = ({ return; } + const qrId = match[2]; // Get the QR id from the URL + if (!isQrId(qrId)) { + sendNotification({ + title: "QR ID Not Valid", + message: "Please Scan valid asset QR", + icon: { name: "trash", variant: "error" }, + }); + return; + } + sendNotification({ title: "Shelf's QR Code detected", message: "Redirecting to mapped asset", icon: { name: "success", variant: "success" }, }); - const qrId = match[4]; // Get the last segment of the URL as the QR id + navigate(`/qr/${qrId}`); } }; diff --git a/app/utils/env.ts b/app/utils/env.ts index 76beda650..94c9e84ee 100644 --- a/app/utils/env.ts +++ b/app/utils/env.ts @@ -14,6 +14,7 @@ declare global { ENABLE_PREMIUM_FEATURES: string; MAINTENANCE_MODE: string; CHROME_EXECUTABLE_PATH: string; + URL_SHORTENER: string; }; } } @@ -223,5 +224,6 @@ export function getBrowserEnv() { ENABLE_PREMIUM_FEATURES, MAINTENANCE_MODE, CHROME_EXECUTABLE_PATH, + URL_SHORTENER, }; }