mirror of
https://github.com/etiennecollin/unifi-voucher-manager.git
synced 2025-10-23 00:02:10 +00:00
feat: improved welcome page
This commit is contained in:
@@ -2,16 +2,23 @@
|
||||
|
||||
import { api } from "@/utils/api";
|
||||
import { getRuntimeConfig } from "@/utils/runtimeConfig";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
|
||||
export default function WelcomePage() {
|
||||
const [visited, setVisited] = useState(false);
|
||||
const [ssid, setSsid] = useState<string | undefined>(undefined);
|
||||
const [hasMounted, setHasMounted] = useState(false);
|
||||
|
||||
const ssid = useMemo(() => {
|
||||
if (!hasMounted) return null;
|
||||
const { WIFI_SSID: ssid } = getRuntimeConfig();
|
||||
return ssid;
|
||||
}, [hasMounted, getRuntimeConfig]);
|
||||
|
||||
const rotateVoucher = useCallback(async () => {
|
||||
try {
|
||||
await api.createRollingVoucher();
|
||||
} catch (error: any) {
|
||||
// Error 403 is expected if the user already created a rolling voucher
|
||||
if (error?.status !== 403) {
|
||||
console.error("Failed to create rolling voucher", error);
|
||||
}
|
||||
@@ -19,22 +26,23 @@ export default function WelcomePage() {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const { WIFI_SSID: ssid } = getRuntimeConfig();
|
||||
setSsid(ssid);
|
||||
}, []);
|
||||
setHasMounted(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (visited) {
|
||||
return;
|
||||
}
|
||||
if (visited) return;
|
||||
rotateVoucher();
|
||||
setVisited(true);
|
||||
}, [visited, rotateVoucher]);
|
||||
}, [rotateVoucher]);
|
||||
|
||||
return (
|
||||
<main className="flex-center h-screen w-full px-4">
|
||||
<div className="w-full text-center font-bold text-4xl sm:text-5xl md:text-7xl lg:text-9xl leading-snug">
|
||||
{ssid ? `Welcome to ${ssid}!` : "Welcome!"}
|
||||
{ssid ? (
|
||||
<>
|
||||
Welcome to <span className="text-brand font-mono">{ssid}</span>!
|
||||
</>
|
||||
) : (
|
||||
"Welcome!"
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
|
Reference in New Issue
Block a user