feat: added more info to error messages

Signed-off-by: Varun Raj <mailme@varunraj.in>

src/components/auth/LoginForm.tsx

@@ -33,7 +33,6 @@ export function LoginForm(
   const [loading, setLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({ ...formData, [e.target.id]: e.target.value })
   }
@@ -50,7 +49,6 @@ export function LoginForm(
     })
   }
 
-
   return (
     <>
     <Head>
@@ -96,7 +94,6 @@ export function LoginForm(
                 Login with OAuth
               </Button>
             </form>
-            
           </CardContent>
         </Card>
       </div>

src/components/layouts/RootLayout.tsx

@@ -9,12 +9,14 @@ import Loader from "../ui/loader";
 import { ArrowRight, TriangleAlert } from "lucide-react";
 import Link from "next/link";
 import { LoginForm } from "../auth/LoginForm";
+import { useConfig } from "@/contexts/ConfigContext";
 
 type RootLayoutProps = {
   children: ReactNode;
 };
 
 export default function RootLayout({ children }: RootLayoutProps) {
+  const { immichURL, exImmichUrl } = useConfig();
   const [user, setUser] = useState<IUser | null>(null);
   const [loading, setLoading] = useState(true);
   const [errorMessage, setErrorMessage] = useState<{
@@ -40,6 +42,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
     fetchData();
   }, []);
 
+
   if (loading) return <Loader />;
   if (errorMessage)
     return (
@@ -49,16 +52,32 @@ export default function RootLayout({ children }: RootLayoutProps) {
           title={errorMessage.error}
           description={errorMessage.message}
           action={
-            <Link
-              className="flex items-center gap-2 text-xs"
-              href={
-                "https://github.com/varun-raj/immich-power-tools?tab=readme-ov-file#-getting-started"
-              }
-              target="_blank"
-            >
-              Setup Instructions
-              <ArrowRight className="h-4 w-4" />
-            </Link>
+            <div className="flex flex-col items-center">
+              <Link
+                className="flex items-center gap-2 text-xs"
+                href={
+                  "https://github.com/varun-raj/immich-power-tools?tab=readme-ov-file#-getting-started"
+                }
+                target="_blank"
+              >
+                Setup Instructions
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+              <div className="text-xs flex flex-col gap-4 py-4 w-full">
+                <div className="text-center">
+                  <p className="text-muted-foreground font-mono">Connected to (External)</p>
+                  <Link href={exImmichUrl || ""} target="_blank" className="font-mono">
+                    {exImmichUrl || "Not Set"}
+                  </Link>
+                </div>
+                <div className="text-center">
+                  <p className="text-muted-foreground font-mono">Connected to (Internal)</p>
+                  <Link href={immichURL} target="_blank" className="font-mono">
+                    {immichURL}
+                  </Link>
+                </div>
+              </div>
+            </div>
           }
         />
       </div>

src/components/shared/ErrorBlock.tsx

@@ -1,3 +1,5 @@
+import { useConfig } from '@/contexts/ConfigContext';
+import { Link } from 'lucide-react';
 import React from 'react'
 
 interface ErrorBlockProps {

src/pages/_app.tsx

@@ -6,6 +6,7 @@ import { ENV } from "@/config/environment";
 import ConfigContext from "@/contexts/ConfigContext";
 import { useEffect, useRef, useState } from "react";
 import { getMe } from "@/handlers/api/user.handler";
+import { db } from "@/config/db";
 
 interface AppPropsWithProps extends AppProps {
   props: {

src/pages/api/immich-proxy/thumbnail/[id].ts

@@ -24,8 +24,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return res.status(403).json({ message: 'Forbidden' })
   }
 
-  console.log('currentUser.accessToken:', currentUser)
-
   try {
     // Forward the request to the target API
     const response = await fetch(targetUrl, {

src/pages/api/users/me.ts

@@ -1,5 +1,6 @@
 // pages/api/proxy.js
 
+import { ENV } from "@/config/environment";
 import { getCurrentUser } from "@/handlers/serverUtils/user.utils";
 import { NextApiRequest, NextApiResponse } from "next";
 
@@ -13,14 +14,18 @@ export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  if (req.method !== "GET")
-  
-  return res.status(405).json({ message: "Method Not Allowed" });
+  if (req.method !== "GET")  {
+    return res.status(405).json({ message: "Method Not Allowed" });
+  }
 
-  const user = await getCurrentUser(req);
-  console.log("currentUser.accessToken:", user);
+  try {
+    const user = await getCurrentUser(req);
 
-  if (user) return res.status(200).json(user);
+    if (user) return res.status(200).json(user);
 
-  return res.status(403).json({ message: "Forbidden" });
+    return res.status(403).json({ message: "Forbidden" });
+    
+  } catch (error) {
+    return res.status(500).json(error);
+  }
 }