+
You do not have permission to view this page. Your role: {user.role}. Required: {UserRoles.MOD}.
)}
@@ -37,21 +54,14 @@ const ClientDetailPage: React.FC = () => {
);
}
- // Ensure clientId is a string before passing
- const clientIdentifier = Array.isArray(clientId) ? clientId[0] : clientId;
-
- if (!clientIdentifier) {
- return Client ID not found in URL.
;
- }
-
return (
-
-
+
+
diff --git a/src/components/LoginPage.tsx b/src/components/LoginPage.tsx
index f805a6b..785e73a 100644
--- a/src/components/LoginPage.tsx
+++ b/src/components/LoginPage.tsx
@@ -9,6 +9,7 @@ import { useAuth } from '@/context/AuthContext';
// You'll need to import authAwareFetch directly or ensure your useAuth hook provides it for registration if not handling it internally.
// For this example, we'll assume direct import as it's a separate utility.
import { authAwareFetch } from '@/utils/AuthAwareFetch'; // Import authAwareFetch
+import { toast } from 'sonner';
const LoginPage: React.FC = () => {
@@ -35,7 +36,7 @@ const LoginPage: React.FC = () => {
const handleRegister = async (): Promise => {
try {
const response = await authAwareFetch(
- '/auth/register_user', // The registration endpoint
+ '/auth/register',
{
method: 'POST',
headers: {
@@ -48,7 +49,9 @@ const LoginPage: React.FC = () => {
);
if (response.ok) {
- alert('Registration successful! You can now log in.');
+ toast("Registration Successful!", {
+ description: "You can now log in with your new account.",
+ });
setIsRegistering(false); // Switch back to login form
setUsername('');
setPassword('');
diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..2dec67d
--- /dev/null
+++ b/src/components/ThemeProvider.tsx
@@ -0,0 +1,113 @@
+// components/ThemeProvider.tsx
+"use client";
+
+import React, { useState, useEffect, createContext, useContext } from 'react';
+
+// === CORRECTED LINE HERE ===
+type Theme = "light" | "dark" | "system";
+// ==========================
+
+interface ThemeProviderProps {
+ children: React.ReactNode;
+ defaultTheme?: Theme; // This can now correctly be "system"
+ storageKey?: string;
+ attribute?: string; // Add this prop for applying class to html
+ enableSystem?: boolean; // Add this prop to enable system theme detection
+ disableTransitionOnChange?: boolean; // Add this prop for transitions
+}
+
+interface ThemeContextType {
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext(undefined);
+
+export function ThemeProvider({
+ children,
+ defaultTheme = "system",
+ storageKey = "vite-ui-theme",
+ attribute = "class", // Default to 'class' as per next-themes pattern
+ enableSystem = true, // Default to true for system theme detection
+ disableTransitionOnChange = false, // Default to false
+ ...props
+}: ThemeProviderProps) {
+ const [theme, setThemeState] = useState(() => {
+ if (typeof window === 'undefined') {
+ return defaultTheme; // For SSR, return default
+ }
+
+ const storedTheme = localStorage.getItem(storageKey);
+ if (storedTheme) {
+ return storedTheme as Theme;
+ }
+
+ // If defaultTheme is "system", check system preference
+ if (defaultTheme === "system") {
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+ }
+
+ return defaultTheme;
+ });
+
+ useEffect(() => {
+ const root = window.document.documentElement;
+
+ // Apply the theme class
+ root.classList.remove("light", "dark");
+
+ if (theme === "system" && enableSystem) {
+ const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+ root.classList.add(systemTheme);
+ } else {
+ root.classList.add(theme);
+ }
+
+ // Handle transition disabling (optional)
+ if (disableTransitionOnChange) {
+ root.classList.add('no-transition'); // Add a class to disable transitions
+ const timeout = setTimeout(() => {
+ root.classList.remove('no-transition');
+ }, 10); // Small delay to allow class to be applied before removal
+ return () => clearTimeout(timeout);
+ }
+
+ }, [theme, enableSystem, disableTransitionOnChange]);
+
+ useEffect(() => {
+ // Listen for system theme changes if defaultTheme is 'system' and system is enabled
+ if (enableSystem) {
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ const handleChange = (e: MediaQueryListEvent) => {
+ // Only update if the current theme is "system"
+ if (theme === "system") {
+ setThemeState(e.matches ? "dark" : "light");
+ }
+ };
+ mediaQuery.addEventListener("change", handleChange);
+ return () => mediaQuery.removeEventListener("change", handleChange);
+ }
+ }, [enableSystem, theme]);
+
+
+ const setTheme = (newTheme: Theme) => {
+ if (typeof window !== 'undefined') {
+ localStorage.setItem(storageKey, newTheme);
+ }
+ setThemeState(newTheme);
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useTheme() {
+ const context = useContext(ThemeContext);
+ if (context === undefined) {
+ throw new Error("useTheme must be used within a ThemeProvider");
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..c4d79af
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import * as React from "react";
+import { useTheme } from "@/components/ThemeProvider"; // Adjust path as needed
+import { Button } from "@/components/ui/button"; // Assuming you have a Shadcn UI Button component
+import { Sun, Moon } from "lucide-react"; // Assuming you have lucide-react for icons
+
+export function ThemeToggle() {
+ const { setTheme, theme } = useTheme();
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..957524e
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+
-
- );
-}
-
-export default DRB;
\ No newline at end of file
Radio App Admin
- Logged in as: {user.username} ({user.role})
+ Logged in as: {user.username} ({user.role})
- {/* Use the destructured logout */}
+