+
{/*
OPTION WITH OPACITY
{
const sectionBottom = sectionTop + rect.height;
const multiplier = viewportHeight > 1600 ? 0.34 : 0.22;
- if (scrollY + viewportHeight * multiplier >= sectionTop && scrollY <= sectionBottom) {
+ if (
+ scrollY + viewportHeight * multiplier >= sectionTop &&
+ scrollY <= sectionBottom
+ ) {
currentVisible = id;
}
}
@@ -120,85 +132,333 @@ export const SideMenu = ({ sections, children }) => {
export const SideMenuSectionItem = ({ id, children }) => {
return (
-
+
);
};
-export const SignUpForm = () => {
- const [isAuthenticated, setIsAuthenticated] = useState(false);
+export const SignUpForm = ({
+ appType, // 'regular_web' | 'spa' | 'native' | 'non_interactive',
+ sampleAppUrl,
+}) => {
+ const TOAST_DISPLAY_DURATION = 2200;
+
const [storeReady, setStoreReady] = useState(false);
+ const [toasts, setToasts] = useState([]);
+ const [route, setRoute] = useState("menu");
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+ const [selectedClientId, setSelectedClientIdState] = useState(null);
+ const [selectedApiId, setSelectedApiIdState] = useState(null);
+
+ // Side effects
useEffect(() => {
- let unsubscribe = null;
-
- function init() {
- setStoreReady(true);
- // Set up reactive subscription to auth state
- unsubscribe = window.autorun(() => {
- const authenticated = window.rootStore?.sessionStore?.isAuthenticated || false;
- setIsAuthenticated(authenticated);
- });
- }
+ const init = () => setStoreReady(true);
if (window.rootStore) {
init();
- } else {
+ } else if (typeof window !== "undefined") {
window.addEventListener("adu:storeReady", init);
}
return () => {
- window.removeEventListener("adu:storeReady", init);
- unsubscribe?.();
+ if (typeof window !== "undefined") {
+ window.removeEventListener("adu:storeReady", init);
+ }
};
}, []);
- /** Start LoggedInForm */
- /**
- * Auth Flows Demo (no external UI libs)
- * - Tailwind-only, production-ready structure
- * - LocalStorage-backed app list + per-app URL config
- * - 3 flows:
- * 1) Menu: Create | Integrate | Sample
- * 2) Create Application -> adds to list then routes to Integrate flow preselected
- * 3) Integrate with Existing: select app + save URLs -> toast
- */
- function LoggedInForm({ sampleApp }) {
- /** Utilities */
- const LS_APPS_KEY = "auth_demo_apps"; // [{id, name}]
- const LS_APP_CFG_KEY = "auth_demo_app_cfg"; // { [id]: { callbacks, logouts, origins } }
- const CHANNEL = "auth_flows_sync_v1";
- const mkChannel = () => new BroadcastChannel(CHANNEL);
-
- function uid() {
- return Math.random().toString(36).slice(2) + Date.now().toString(36);
- }
+ useEffect(() => {
+ if (!storeReady) return;
- function loadApps() {
- const raw = localStorage.getItem(LS_APPS_KEY);
- if (raw) return JSON.parse(raw);
- // seed with the 3 shown in screenshots
- const seeded = [{ id: "{yourClientId}", name: "Default App" }];
- localStorage.setItem(LS_APPS_KEY, JSON.stringify(seeded));
- return seeded;
- }
+ const disposer = autorun(() => {
+ const rootStore = window.rootStore;
+ setIsAuthenticated(rootStore.sessionStore.isAuthenticated);
+ setSelectedClientIdState(rootStore.clientStore.selectedClientId ?? null);
+ setSelectedApiIdState(
+ rootStore.resourceServerStore.selectedApiId ?? null
+ );
+ });
- function saveApps(apps) {
- localStorage.setItem(LS_APPS_KEY, JSON.stringify(apps));
- }
+ return () => {
+ disposer();
+ };
+ }, [storeReady]);
- function loadCfg() {
- const raw = localStorage.getItem(LS_APP_CFG_KEY);
- return raw ? JSON.parse(raw) : {};
- }
+ if (!storeReady || typeof window === "undefined") {
+ return <>;
+ }
+
+ // Utility functions
- function saveCfg(cfg) {
- localStorage.setItem(LS_APP_CFG_KEY, JSON.stringify(cfg));
+ const setSelectedClientId = (clientId) => {
+ window.rootStore.clientStore.setSelectedClient(clientId);
+ };
+
+ const setSelectedApiId = (apiId) => {
+ window.rootStore.resourceServerStore.setSelectedApi(apiId);
+ };
+
+ const showToast = (message, type = "success") => {
+ const id = `toast-${Date.now()}-${Math.random()}`;
+ const toast = { id, message, type };
+ setToasts((prev) => [...prev, toast]);
+
+ setTimeout(() => {
+ setToasts((prev) => prev.filter((t) => t.id !== id));
+ }, TOAST_DISPLAY_DURATION);
+ };
+
+ const dismissToast = (id) => {
+ setToasts((prev) => prev.filter((toast) => toast.id !== id));
+ };
+
+ const cn = (...classes) => {
+ return classes.filter(Boolean).join(" ");
+ };
+
+ // Components
+
+ function Toast({ open, onClose, children, type = "success" }) {
+ if (open) {
+ setTimeout(onClose, TOAST_DISPLAY_DURATION);
}
- /** Icons */
- const RightChevron = ({ className = "w-5 h-5", ...props }) => (
+ const isError = type === "error";
+
+ const bgColorClass = isError ? "bg-red-500" : "bg-emerald-500";
+ const ringColorClass = isError ? "ring-red-200" : "ring-emerald-200";
+ const textColorClass = isError ? "text-red-600" : "text-emerald-600";
+
+ return (
+
+
+ );
+ }
+
+ function Wrapper({ children }) {
+ return (
+ <>
+ {children}
+
+
+
+
+ {children}
+
+
+
+ {toasts.map((toast) => (
+ dismissToast(toast.id)}
+ type={toast.type}
+ >
+ {toast.message}
+
+ ))}
+
+
+ );
+ }
+
+ function Card({ className = "", children }) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ function Button({ variant, children, className, ...props }) {
+ const commonClasses =
+ "inline-flex items-center justify-center gap-2 h-10 px-4 rounded-xl font-medium transition disabled:opacity-50 disabled:cursor-not-allowed";
+ const variants = {
+ primary:
+ "mint-bg-indigo-600 text-white hover:mint-bg-indigo-700 disabled:hover:mint-bg-indigo-600",
+ outline:
+ "border border-zinc-300 dark:border-zinc-700 mint-bg-transparent hover:mint-bg-zinc-50 dark:hover:mint-bg-zinc-800 disabled:hover:mint-bg-transparent",
+ ghost:
+ "hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800 disabled:hover:mint-bg-transparent",
+ };
+
+ return (
+
+ );
+ }
+
+ function Input({ id, label, value, onChange, placeholder, name }) {
+ return (
+
+ );
+ }
+
+ function Select({ label, value, onChange, options }) {
+ return (
+
+ );
+ }
+
+ function IconTile({ children }) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ function SignUpFormInternal() {
+ return (
+
+ 
+
+ Sign up for an{" "}
+
+ Auth0 account
+ {" "}
+ or{" "}
+ console.log("log in")}
+ >
+ log in
+ {" "}
+ to your existing account to integrate directly with your own tenant.
+
+
+
+ );
+ }
+
+ function RightChevron({ className = "w-5 h-5", ...props }) {
+ return (
);
+ }
- const LightningIcon = () => (
-
+
+ Sign up for an{" "}
+
+ Auth0 account
+ {" "}
+ or{" "}
+ console.log("log in")}
+ >
+ log in
+ {" "}
+ to your existing account to integrate directly with your own tenant.
+
+
+