- To get started, open the src/pages
- src/pages
-
- );
- }
-
- return (
-
-
-
-
- - BlueSky PDS Manager -
-- Enter your PDS credentials to get started -
- -
-
- );
-}
diff --git a/src/components/InviteCodes.tsx b/src/components/InviteCodes.tsx
deleted file mode 100644
index 8ad00cb..0000000
--- a/src/components/InviteCodes.tsx
+++ /dev/null
@@ -1,356 +0,0 @@
-import { useState, useEffect } from "react";
-import { Settings } from "../lib/settings";
-
-interface InviteCodeUse {
- usedBy: string;
- usedAt: string;
-}
-
-interface InviteCode {
- code: string;
- available: number;
- disabled: boolean;
- forAccount: string;
- createdBy: string;
- createdAt: string;
- uses: InviteCodeUse[];
-}
-
-function getAuthHeader(adminPassword: string) {
- const authString = `admin:${adminPassword}`;
- const base64Auth = btoa(authString);
- return `Basic ${base64Auth}`;
-}
-
-export default function InviteCodes({ onLogout }: { onLogout: () => void }) {
- const [codes, setCodes] = useState
-
-
-
-
- BlueSky PDS Manager
-
-
-
-
-
-
- -
-
- - - -
-
-
-
- );
-}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/TabView.tsx b/src/components/TabView.tsx
new file mode 100644
index 0000000..6526a5f
--- /dev/null
+++ b/src/components/TabView.tsx
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import InviteCodes from "./features/invites/InviteCodes";
+
+const TABS = {
+ invites: {
+ component: InviteCodes,
+ label: "Invite Codes",
+ },
+} as const;
+
+type TabKey = keyof typeof TABS;
+
+export default function TabView() {
+ const [activeTab, setActiveTab] = useState
-
-
- {/* Settings Modal */}
-
-
-
-
-
-
- {error && (
- Invite Codes
-
-
-
-
-
-
-
- )}
-
- {loading ? (
-
-
-
- Error!
-{error}
-
-
-
- ) : (
-
- {sortCodes(codes).map((code, index) => (
-
- )}
-
-
- ))}
- {!loading && codes.length === 0 && (
-
-
-
-
-
- {code.code}
-
-
- {code.disabled ? (
- Disabled
- ) : (
-
- )}
-
-
- {!code.disabled && (
-
- {code.uses.length > 0 && (
-
- Uses: {code.uses.length} / {code.available}
-
- )}
-
- Created: {new Date(code.createdAt).toLocaleString()}
-
- {code.uses.length > 0 && (
-
- {code.uses.length}{" "}
- {code.uses.length === 1 ? "use" : "uses"}
-
- )}
-
- Used by:{" "}
- {code.uses.map((use) => use.usedBy).join(", ")}
-
- )}
-
-
- )}
-
- No invite codes found
-
-
+
+ );
+}
diff --git a/src/components/Welcome.astro b/src/components/Welcome.astro
deleted file mode 100644
index 6b7b9c7..0000000
--- a/src/components/Welcome.astro
+++ /dev/null
@@ -1,209 +0,0 @@
----
-import astroLogo from '../assets/astro.svg';
-import background from '../assets/background.svg';
----
-
-
+
+
+
+
+ {Object.entries(TABS).map(([key, { label }]) => (
+
+ ))}
+
+
+
+
- 
-
-
- 
-
- Read our docs
- Join our Discord
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/auth/AuthWrapper.tsx b/src/components/auth/AuthWrapper.tsx
new file mode 100644
index 0000000..b5a1a49
--- /dev/null
+++ b/src/components/auth/AuthWrapper.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { Settings } from "../../lib/settings";
+import NavBar from "../navigation/NavBar";
+import LoginForm from "./LoginForm";
+import { LogoutContext } from "../../lib/LogoutContext";
+import { RefreshContext } from "../../lib/RefreshContext";
+import TabView from "../TabView";
+
+export default function AuthWrapper() {
+ const [isConfigured, setIsConfigured] = useState(
+ Boolean(Settings.getServiceUrl() && Settings.getAdminPassword()),
+ );
+ const [lastUpdate, setLastUpdate] = useState(Date.now());
+
+ const handleLogout = () => {
+ Settings.clearSettings();
+ setIsConfigured(false);
+ };
+
+ const refresh = () => {
+ setLastUpdate(Date.now());
+ };
+
+ if (!isConfigured) {
+ return - To get started, open the
-What's New in Astro 5.0?
-- From content layers to server islands, click to learn more about the new features and - improvements in Astro 5.0 -
- -
+
+
+
+
+
+ );
+}
diff --git a/src/components/features/invites/InviteCodes.tsx b/src/components/features/invites/InviteCodes.tsx
new file mode 100644
index 0000000..ea4583e
--- /dev/null
+++ b/src/components/features/invites/InviteCodes.tsx
@@ -0,0 +1,288 @@
+import { useState, useEffect } from "react";
+import { Settings } from "../../../lib/settings";
+import { useRefresh } from "../../../lib/RefreshContext";
+
+interface InviteCodeUse {
+ usedBy: string;
+ usedAt: string;
+}
+
+interface InviteCode {
+ code: string;
+ available: number;
+ disabled: boolean;
+ forAccount: string;
+ createdBy: string;
+ createdAt: string;
+ uses: InviteCodeUse[];
+}
+
+function getAuthHeader(adminPassword: string) {
+ const authString = `admin:${adminPassword}`;
+ const base64Auth = btoa(authString);
+ return `Basic ${base64Auth}`;
+}
+
+export default function InviteCodes() {
+ const [codes, setCodes] = useState
+
+
+
+ + BlueSky PDS Manager +
++ Enter your PDS credentials to get started +
+ +
+
+ );
+}
diff --git a/src/components/navigation/NavBar.tsx b/src/components/navigation/NavBar.tsx
new file mode 100644
index 0000000..06ef4a1
--- /dev/null
+++ b/src/components/navigation/NavBar.tsx
@@ -0,0 +1,119 @@
+import { useLogout } from "../../lib/LogoutContext";
+import { useRefresh } from "../../lib/RefreshContext";
+import { useState } from "react";
+import { Settings } from "../../lib/settings";
+
+export default function NavBar() {
+ const logout = useLogout();
+ const { refresh } = useRefresh();
+ const [showSettings, setShowSettings] = useState(false);
+ const [newUrl, setNewUrl] = useState(Settings.getServiceUrl());
+ const [newPassword, setNewPassword] = useState(Settings.getAdminPassword());
+
+ const saveSettings = () => {
+ Settings.saveSettings(newUrl, newPassword);
+ setShowSettings(false);
+ refresh();
+ };
+
+ return (
+ <>
+
+
+
+
+
+ {error && (
+ Invite Codes
+ +
+
+
+ )}
+
+ {loading ? (
+
+
+
+ Error!
+{error}
+
+
+
+ ) : (
+
+ {sortCodes(codes).map((code, index) => (
+
+ )}
+
+
+ ))}
+ {!loading && codes.length === 0 && (
+
+
+
+
+
+ {code.code}
+
+
+ {code.disabled ? (
+ Disabled
+ ) : (
+
+ )}
+
+
+ {!code.disabled && (
+
+ {code.uses.length > 0 && (
+
+ Uses: {code.uses.length} / {code.available}
+
+ )}
+
+ Created: {new Date(code.createdAt).toLocaleString()}
+
+ {code.uses.length > 0 && (
+
+ {code.uses.length}{" "}
+ {code.uses.length === 1 ? "use" : "uses"}
+
+ )}
+
+ Used by:{" "}
+ {code.uses.map((use) => use.usedBy).join(", ")}
+
+ )}
+
+
+ )}
+
+ No invite codes found
+
+
+
+
+ {/* Settings Modal */}
+
+
+ );
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ef588b7..03abd5d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,22 +1,16 @@
-
+
-
+
+
+
+ BlueSky PDS Manager
+
+
+ {/* Regular buttons for larger screens */}
+
+
+
+
+
+
+ {/* Dropdown for mobile */}
+
+
+
+ -
+
- + + +
- + + +