Feat/qr code

client/src/auth/MemberRoute.tsx

@@ -0,0 +1,13 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "./useAuth";
+
+export function MemberRoute({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  const { role, loading } = useAuth();
+
+  if (loading) return <p>Loading...</p>;
+  if (role !== "member" && role !== "admin") return <Navigate to="/" replace />;
+
+  return <>{children}</>;
+}

client/src/components/MembershipQR.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { QRCodeSVG } from "qrcode.react";
+import axios from "axios";
+import api from "../api";
+
+const MembershipQR = () => {
+  const [url, setUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchQR = async () => {
+    try {
+      const res = await api.get("/qr/generate");
+      setUrl(res.data.url);
+    } catch (err) {
+      if (axios.isAxiosError(err)) {
+        setError(
+          err.response?.data?.message ??
+            "Failed to load membership QR code. Please try again."
+        );
+      } else {
+        setError("Failed to load membership QR code. Please try again.");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchQR();
+  }, []);
+
+  if (loading) return <p>Loading membership card...</p>;
+  if (error) return <p>{error}</p>;
+  if (!url) return <p>No QR code available.</p>;
+
+  return <QRCodeSVG value={url} size={120} />;
+};
+
+export default MembershipQR;

client/src/main/App.tsx

@@ -9,6 +9,8 @@ import { AuthProvider } from "../auth/AuthProvider.tsx";
 import Header from "./Header.tsx";
 import Footer from "./Footer.tsx";
 
+import { MemberRoute } from "../auth/MemberRoute.tsx";
+
 import Home from "../pages/Home.tsx";
 import Faq from "../pages/Faq.tsx";
 import Contact from "../pages/Contact.tsx";
@@ -17,6 +19,7 @@ import Events from "../pages/Events.tsx";
 import EventDetail from "../pages/EventDetail.tsx";
 import About from "../pages/About.tsx";
 import SignUp from "../pages/Signup.tsx";
+import Profile from "../pages/Profile.tsx";
 import Toast from "../components/Toast.tsx";
 
 const App = () => {
@@ -36,6 +39,15 @@ const App = () => {
             <Route path="Sponsors" element={<Sponsors />} />
             <Route path="Contact" element={<Contact />} />
             <Route path="Faq" element={<Faq />} />
+
+            <Route
+              path="Profile"
+              element={
+                <MemberRoute>
+                  <Profile />
+                </MemberRoute>
+              }
+            />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Route>
         </Routes>

client/src/pages/Profile.tsx

@@ -0,0 +1,16 @@
+// TODO: replace with dynamic link fetched from admin dashboard once implemented
+const PASS2U_LINK =
+  "https://www.pass2u.net/p/mZvjfJH6V37n?openExternalBrowser=1";
+
+const Profile = () => {
+  return (
+    <div>
+      <h1>My Membership</h1>
+      <a href={PASS2U_LINK} target="_blank" rel="noopener noreferrer">
+        Add to Wallet
+      </a>
+    </div>
+  );
+};
+
+export default Profile;

client/src/pages/Signup.tsx

@@ -140,12 +140,10 @@ const SignUpForm = () => {
       if (axios.isAxiosError(err)) {
         setError(
           err.response?.data?.message ??
-            "Something went wrong. Please try again."
+            "An error occurred during signup. Please try again."
         );
-      } else if (err instanceof Error) {
-        setError(err.message);
       } else {
-        setError("Something went wrong. Please try again.");
+        setError("An error occurred during signup. Please try again.");
       }
     } finally {
       setSubmitting(false);