@xeplr/ui-account 1.0.0 → 1.0.2

package/src/pages.jsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useLoginController } from './useLoginController.js';
 import { useRegisterController } from './useRegisterController.js';
 import { useForgotPasswordController } from './useForgotPasswordController.js';
@@ -8,85 +9,141 @@ import { useProfileController } from './useProfileController.js';
 import { useUserRolesController } from './useUserRolesController.js';
 import { useAccessMatrixController } from './useAccessMatrixController.js';
 import { useMasterSettingsController } from './useMasterSettingsController.js';
-import { useTenantController } from './useTenantController.js';
-import { useTenantPickerController } from './useTenantPickerController.js';
-import { LoginSample, RegisterSample, ForgotPasswordSample, ResetPasswordSample, ActivateSample, NotActivatedSample, ChangePasswordSample, ProfileSample, UserRolesMatrixSample, AccessMatrixSample, MasterSettingsSample, TenantSample, TenantPickerSample } from './designs/index.js';
-import { useDesignValidator, LOGIN_RULES, REGISTER_RULES, FORGOT_PASSWORD_RULES, RESET_PASSWORD_RULES, CHANGE_PASSWORD_RULES, PROFILE_RULES, USER_ROLES_MATRIX_RULES, ACCESS_MATRIX_RULES, MASTER_SETTINGS_RULES } from './validateDesign.js';
+import { useNavController } from './useNavController.js';
+import { LoginSample, RegisterSample, ForgotPasswordSample, ResetPasswordSample, ActivateSample, NotActivatedSample, ChangePasswordSample, ProfileSample, UserRolesMatrixSample, AccessMatrixSample, MasterSettingsSample, NavTopSample, NavDrawer, NavFloatingSettings } from './designs/index.js';
+import { useDesignValidator, LOGIN_RULES, REGISTER_RULES, FORGOT_PASSWORD_RULES, RESET_PASSWORD_RULES, CHANGE_PASSWORD_RULES, PROFILE_RULES, USER_ROLES_MATRIX_RULES, ACCESS_MATRIX_RULES, MASTER_SETTINGS_RULES, NAV_RULES } from './validateDesign.js';
 
 /**
- * Ready-made pages using sample designs.
- * Use these for quick setup, or build your own with the controllers + your own designs.
+ * Ready-made pages: controller (the logic) + sample design (the look), wired together.
+ *
+ * Every page takes an optional `design` prop — pass your OWN design component to
+ * re-skin the page while keeping the framework's controller + validation. The design
+ * receives the controller's output as props (the same contract the sample honours), e.g.
+ * LoginSample gets { email, setEmail, password, setPassword, error, loading, handleSubmit }.
+ *
+ *   <LoginPage design={MyLogin} onSuccess={...} />   // my look, framework logic
+ *   <LoginPage onSuccess={...} />                     // framework look
+ *
+ * Any other props (onSuccess, etc.) flow through to the controller.
  */
 
-export function LoginPage(props) {
+export function LoginPage({ design, ...props }) {
   var controller = useLoginController(props);
   var ref = useDesignValidator('LoginPage', LOGIN_RULES);
-  return <div ref={ref}><LoginSample {...controller} /></div>;
+  var View = design || LoginSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function RegisterPage(props) {
+export function RegisterPage({ design, ...props }) {
   var controller = useRegisterController(props);
   var ref = useDesignValidator('RegisterPage', REGISTER_RULES);
-  return <div ref={ref}><RegisterSample {...controller} /></div>;
+  var View = design || RegisterSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function ForgotPasswordPage() {
-  var controller = useForgotPasswordController();
+export function ForgotPasswordPage({ design, ...props }) {
+  var controller = useForgotPasswordController(props);
   var ref = useDesignValidator('ForgotPasswordPage', FORGOT_PASSWORD_RULES);
-  return <div ref={ref}><ForgotPasswordSample {...controller} /></div>;
+  var View = design || ForgotPasswordSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function ResetPasswordPage() {
-  var controller = useResetPasswordController();
+export function ResetPasswordPage({ design, ...props }) {
+  var controller = useResetPasswordController(props);
   var ref = useDesignValidator('ResetPasswordPage', RESET_PASSWORD_RULES);
-  return <div ref={ref}><ResetPasswordSample {...controller} /></div>;
+  var View = design || ResetPasswordSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function ActivatePage() {
-  var controller = useActivateController();
-  return <ActivateSample {...controller} />;
+export function ActivatePage({ design, ...props }) {
+  var controller = useActivateController(props);
+  var View = design || ActivateSample;
+  return <View {...controller} />;
 }
 
-export function NotActivatedPage() {
-  return <NotActivatedSample />;
+export function NotActivatedPage({ design }) {
+  var View = design || NotActivatedSample;
+  return <View />;
 }
 
-export function ChangePasswordPage(props) {
+export function ChangePasswordPage({ design, ...props }) {
   var controller = useChangePasswordController(props);
   var ref = useDesignValidator('ChangePasswordPage', CHANGE_PASSWORD_RULES);
-  return <div ref={ref}><ChangePasswordSample {...controller} /></div>;
+  var View = design || ChangePasswordSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function ProfilePage(props) {
+export function ProfilePage({ design, ...props }) {
   var controller = useProfileController(props);
   var ref = useDesignValidator('ProfilePage', PROFILE_RULES);
-  return <div ref={ref}><ProfileSample {...controller} /></div>;
+  var View = design || ProfileSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function UserRolesPage(props) {
+export function UserRolesPage({ design, ...props }) {
   var controller = useUserRolesController(props);
   var ref = useDesignValidator('UserRolesPage', USER_ROLES_MATRIX_RULES);
-  return <div ref={ref}><UserRolesMatrixSample {...controller} /></div>;
+  var View = design || UserRolesMatrixSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function AccessMatrixPage(props) {
+export function AccessMatrixPage({ design, ...props }) {
   var controller = useAccessMatrixController(props);
   var ref = useDesignValidator('AccessMatrixPage', ACCESS_MATRIX_RULES);
-  return <div ref={ref}><AccessMatrixSample {...controller} /></div>;
+  var View = design || AccessMatrixSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function MasterSettingsPage(props) {
+export function MasterSettingsPage({ design, ...props }) {
   var controller = useMasterSettingsController(props);
   var ref = useDesignValidator('MasterSettingsPage', MASTER_SETTINGS_RULES);
-  return <div ref={ref}><MasterSettingsSample {...controller} /></div>;
+  var View = design || MasterSettingsSample;
+  return <div ref={ref}><View {...controller} /></div>;
 }
 
-export function TenantPage(props) {
-  var controller = useTenantController(props);
-  return <TenantSample {...controller} />;
+// NavPage is memoized — unlike the other pages, it lives in your app's layout
+// route alongside <Outlet/>, so it must not re-render when the routed page
+// changes. Exactly ONE of two things renders, never both: if `drawerItems` is
+// non-empty, the drawer rail (NavDrawer) IS the nav — it hosts settings,
+// notifications, and everything else that would otherwise be in the top bar.
+// Otherwise the top bar (`design`, defaults to NavTopSample) renders alone.
+// `navMiddle` has no equivalent in the drawer (there's no middle slot in a
+// vertical rail) — it's simply unused whenever a drawer is present.
+// See useNavController.js for the drawerItems/settingsOverrides/notifications
+// props this accepts.
+//
+// `floatingSettings` (optional, default false): when true AND a drawer is in
+// use, the drawer's own bottom-pinned bell/settings are suppressed and
+// replaced by NavFloatingSettings — the same two controls floating in the
+// page's top-right corner instead. A no-op without a drawer: the plain
+// top-bar path already renders them inline at top-right (NavTopSample's
+// `.xeplr-nav-right`), so there's nothing to move there.
+function NavPageImpl({ design, logo, expandedLogo, navMiddle, drawerPromo, floatingSettings, ...props }) {
+  var controller = useNavController(props);
+  var ref = useDesignValidator('NavPage', NAV_RULES);
+  var TopBar = design || NavTopSample;
+  var hasDrawer = controller.drawerItems.length > 0;
+  var floating = floatingSettings && hasDrawer;
+  return (
+    <div ref={ref}>
+      {hasDrawer ? (
+        <NavDrawer
+          {...controller}
+          logo={logo}
+          expandedLogo={expandedLogo}
+          drawerPromo={drawerPromo}
+          hideFooterIcons={floating}
+        />
+      ) : (
+        <TopBar
+          {...controller}
+          logo={logo}
+          navMiddle={navMiddle}
+        />
+      )}
+      {floating && <NavFloatingSettings {...controller} />}
+    </div>
+  );
 }
 
-export function TenantPickerPage(props) {
-  var controller = useTenantPickerController(props);
-  return <TenantPickerSample {...controller} />;
-}
+export var NavPage = memo(NavPageImpl);

package/src/returnTo.js

@@ -0,0 +1,24 @@
+const KEY = 'xeplr:returnTo';
+
+/**
+ * Where a redirect-driven gate (auth, or an app's own e.g. company gate)
+ * sends the user next, once whatever it was waiting for resolves. Tab-scoped
+ * (sessionStorage) — this is for "the token expired mid-session, send me
+ * back to what I was doing", not a link resurrected days later.
+ */
+export function saveReturnTo(location) {
+  try {
+    sessionStorage.setItem(KEY, location.pathname + location.search);
+  } catch (e) {}
+}
+
+/** Reads and clears in one step — call only at the point the user actually lands. */
+export function consumeReturnTo() {
+  try {
+    const value = sessionStorage.getItem(KEY);
+    sessionStorage.removeItem(KEY);
+    return value;
+  } catch (e) {
+    return null;
+  }
+}

package/src/useActivateController.js

@@ -1,32 +1,47 @@
 import { useState, useEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { raiseSnackbar } from '@xeplr/ui-utils';
 import { activateAccount } from './api.js';
 
 export function useActivateController() {
   var [searchParams] = useSearchParams();
   var token = searchParams.get('token');
+  // Put there by @xeplr/auth's register() when the registration was one step
+  // of a workflow. Handed back untouched so the server can release the step
+  // that was waiting — this page never interprets it.
+  var workflowKey = searchParams.get('workflowKey');
   var [error, setError] = useState('');
   var [success, setSuccess] = useState('');
   var [loading, setLoading] = useState(false);
   var called = useRef(false);
 
   useEffect(function() {
-    if (!token || called.current) return;
+    if (!token) {
+      if (!called.current) {
+        called.current = true;
+        raiseSnackbar('Invalid activation link', { design: 'error' });
+      }
+      return;
+    }
+    if (called.current) return;
     called.current = true;
     setLoading(true);
     setError('');
     setSuccess('');
-    activateAccount(token)
+    activateAccount(token, workflowKey)
       .then(function(result) {
-        setSuccess(result.message || 'Account activated successfully');
+        var message = result.message || 'Account activated successfully';
+        setSuccess(message);
+        raiseSnackbar(message, { design: 'success' });
       })
       .catch(function(err) {
         setError(err.message);
+        raiseSnackbar(err.message, { design: 'error' });
       })
       .finally(function() {
         setLoading(false);
       });
-  }, [token]);
+  }, [token, workflowKey]);
 
   return {
     token,

package/src/useChangePasswordController.js

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { raiseSnackbar } from '@xeplr/ui-utils';
 import { changePassword } from './api.js';
 
 export function useChangePasswordController(options = {}) {
@@ -17,20 +18,25 @@ export function useChangePasswordController(options = {}) {
     setSuccess('');
 
     if (newPassword !== confirmPassword) {
-      setError('Passwords do not match');
+      var mismatchMessage = 'Passwords do not match';
+      setError(mismatchMessage);
+      raiseSnackbar(mismatchMessage, { design: 'error' });
       return;
     }
 
     setLoading(true);
     try {
       var result = await changePassword({ currentPassword, newPassword });
-      setSuccess('Password changed successfully');
+      var message = 'Password changed successfully';
+      setSuccess(message);
+      raiseSnackbar(message, { design: 'success' });
       setCurrentPassword('');
       setNewPassword('');
       setConfirmPassword('');
       if (onSuccess) onSuccess(result);
     } catch (err) {
       setError(err.message);
+      raiseSnackbar(err.message, { design: 'error' });
     } finally {
       setLoading(false);
     }

package/src/useForgotPasswordController.js

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { raiseSnackbar } from '@xeplr/ui-utils';
 import { forgotPassword } from './api.js';
 
 export function useForgotPasswordController() {
@@ -15,8 +16,10 @@ export function useForgotPasswordController() {
     try {
       const result = await forgotPassword({ email });
       setSuccess(result.message);
+      raiseSnackbar(result.message, { design: 'success' });
     } catch (err) {
       setError(err.message);
+      raiseSnackbar(err.message, { design: 'error' });
     } finally {
       setLoading(false);
     }

package/src/useLoginController.js

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { raiseSnackbar } from '@xeplr/ui-utils';
 import { loginUser } from './api.js';
 import { setToken, setRefreshToken } from './token.js';
 import { useAccess } from './AccessContext.jsx';
+import { consumeReturnTo } from './returnTo.js';
 
 export function useLoginController(options = {}) {
   const [email, setEmail] = useState('');
@@ -14,7 +16,11 @@ export function useLoginController(options = {}) {
   // Safe — returns null if no AccessProvider wraps the app
   const accessCtx = useAccess();
 
-  const onSuccess = options.onSuccess || (() => navigate('/'));
+  // Default: back to wherever a gate (ProtectedRoute, or an app's own gate)
+  // sent the user here from, not always home — see returnTo.js. A caller
+  // that supplies its own onSuccess owns navigation entirely; this default
+  // only applies when they don't.
+  const onSuccess = options.onSuccess || (() => navigate(consumeReturnTo() || '/'));
   const notActivatedPath = options.notActivatedPath || '/auth/not-activated';
 
   async function handleSubmit(e) {
@@ -37,6 +43,7 @@ export function useLoginController(options = {}) {
         navigate(notActivatedPath);
       } else {
         setError(err.message);
+        raiseSnackbar(err.message, { design: 'error' });
       }
     } finally {
       setLoading(false);

package/src/useNavController.js

@@ -0,0 +1,224 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useAccessStrict } from './AccessContext.jsx';
+import { authPath } from './authRoutes.jsx';
+
+// The built-in settings-dropdown items — seeded via auth's migrations (menus
+// table, see migrations/0006_seed_catalog.sql), not hardcoded here. Maps a
+// seeded menu NAME to the authRoutes key it links to. "Admin" is deliberately
+// NOT here — the framework's builtin section is Profile/Change Password only;
+// an app that wants an Admin link adds it to its own settingsOverrides. Only
+// names present in access.menus (role-filtered, computed at login) render.
+var BUILTIN_SETTINGS_ITEMS = [
+  { menuName: 'Profile', authKey: 'profile' },
+  { menuName: 'Change Password', authKey: 'changePassword' }
+];
+var NOTIFICATIONS_MENU_NAME = 'Notifications';
+
+// ── drawer width ────────────────────────────────────────────────────────
+// Only the EXPANDED drawer is resizable. Collapsed is a 60px icon rail whose
+// width is the icon's, not a preference — there is nothing in it to give room
+// to, so nav.css keeps owning that number.
+//
+// The width is remembered because re-dragging it on every page load is the
+// whole reason a fixed width was annoying enough to change. Kept per browser
+// (localStorage) rather than on the user record: it is a property of the
+// screen you are sitting at, and the same account on a laptop and a wide
+// monitor wants two different answers.
+var DRAWER_WIDTH_KEY = 'xeplr-nav-drawer-width';
+var DRAWER_WIDTH_DEFAULT = 240;
+// Floors and ceilings, not taste. Below MIN the labels this width exists to
+// show start truncating, so the expanded state stops being different from the
+// collapsed one; past MAX the nav is competing with the page for the screen.
+var DRAWER_WIDTH_MIN = 180;
+var DRAWER_WIDTH_MAX = 480;
+// What an arrow key moves. Big enough to get somewhere, small enough to land.
+var DRAWER_WIDTH_STEP = 16;
+
+// Frozen module constant, so the identity is stable across renders and a
+// memoized View is not re-rendered by a fresh object every time.
+var DRAWER_WIDTH_BOUNDS = {
+  min: DRAWER_WIDTH_MIN,
+  max: DRAWER_WIDTH_MAX,
+  step: DRAWER_WIDTH_STEP,
+  default: DRAWER_WIDTH_DEFAULT
+};
+
+// Only NaN falls back to the default — ±Infinity is deliberately allowed
+// through, because Math.min/max turn it into exactly the near/far stop, which
+// is what the Home/End keys pass in.
+function clampDrawerWidth(px) {
+  if (typeof px !== 'number' || isNaN(px)) return DRAWER_WIDTH_DEFAULT;
+  return Math.min(DRAWER_WIDTH_MAX, Math.max(DRAWER_WIDTH_MIN, Math.round(px)));
+}
+
+// Wrapped because localStorage THROWS rather than returning null in Safari
+// private mode and under a blocked-cookies policy — an unguarded read here
+// would take the whole nav down at first render.
+function readStoredDrawerWidth() {
+  try {
+    var raw = window.localStorage.getItem(DRAWER_WIDTH_KEY);
+    if (!raw) return DRAWER_WIDTH_DEFAULT;
+    return clampDrawerWidth(parseInt(raw, 10));
+  } catch (err) {
+    return DRAWER_WIDTH_DEFAULT;
+  }
+}
+
+/**
+ * Nav is self-contained by design: it reads access/user from context (which only
+ * changes on login/logout/access updates) and owns its OWN open/closed UI state.
+ * It never depends on — and never forces a re-render of — whatever page is
+ * currently mounted in the app's <Outlet/>. Keep it that way when extending:
+ * don't lift this state into the app's layout component.
+ *
+ * @param {object} props
+ * @param {Array<{name:string, icon?:string, clickHandler?:Function, group?:string}>} [props.drawerItems] —
+ *   the app's own drawer catalog (each `name` must match a `menus.name` row in
+ *   the auth DB). Passing a non-empty array auto-activates the drawer rail —
+ *   there's no separate flag. `group` is optional; ungrouped items render
+ *   first, grouped ones under their section header (see NavDrawer.jsx).
+ *   Role-filtered via access.menus, same mechanism as the settings items.
+ * @param {Array<{name:string, path:string}>} [props.settingsOverrides] — the app's
+ *   OWN items rendered ABOVE the builtin (Profile/Change Password) section in
+ *   the settings dropdown — this is where an "Admin" link belongs now. Each
+ *   `name` must match a `menus.name` row you've seeded (in YOUR app's
+ *   migrations-auth, not auth's own) — role-filtered via access.menus.
+ * @param {{count?:number, onClick?:Function}} [props.notifications] — the app's feed
+ *   config. Only takes effect if the user's role grants the "Notifications" menu
+ *   (seeded basic-tier, visible to everyone by default) — otherwise the bell is
+ *   hidden regardless of what's passed here.
+ */
+export function useNavController(props) {
+  props = props || {};
+  var accessCtx = useAccessStrict();
+  var access = accessCtx.access || {};
+  var allowedMenus = access.menus || [];
+
+  var [accountOpen, setAccountOpen] = useState(false);
+  var [drawerOpen, setDrawerOpen] = useState(false);
+
+  // Lazy initialiser (function, not value) so localStorage is read ONCE on
+  // mount instead of on every render.
+  var [drawerWidth, setDrawerWidth] = useState(readStoredDrawerWidth);
+  var [drawerResizing, setDrawerResizing] = useState(false);
+
+  var accountRef = useRef(null);
+
+  var toggleAccount = useCallback(function() { setAccountOpen(function(v) { return !v; }); }, []);
+  var closeAccount = useCallback(function() { setAccountOpen(false); }, []);
+  var toggleDrawer = useCallback(function() { setDrawerOpen(function(v) { return !v; }); }, []);
+  var closeDrawer = useCallback(function() { setDrawerOpen(false); }, []);
+
+  // ── resizing ──────────────────────────────────────────────────────────
+  // The handle only starts the gesture; the move/end listeners go on the
+  // DOCUMENT (below), not the handle, because a drag routinely outruns a 6px
+  // strip — listening on the handle alone would drop the gesture the moment
+  // the pointer got ahead of the edge, which is most of the time.
+  var startDrawerResize = useCallback(function(e) {
+    // Stops the browser starting a text/image selection drag instead, which
+    // would leave the page blue-highlighted for the whole gesture.
+    if (e && e.preventDefault) e.preventDefault();
+    setDrawerResizing(true);
+  }, []);
+
+  var resetDrawerWidth = useCallback(function() {
+    setDrawerWidth(DRAWER_WIDTH_DEFAULT);
+  }, []);
+
+  // Keyboard equivalent of the drag — the handle is focusable, so a resize
+  // must be reachable without a pointer at all.
+  var nudgeDrawerWidth = useCallback(function(delta) {
+    setDrawerWidth(function(w) { return clampDrawerWidth(w + delta); });
+  }, []);
+
+  useEffect(function() {
+    if (!drawerResizing) return;
+    // The drawer is `position: fixed; left: 0`, so the pointer's viewport x IS
+    // the width being dragged to — no offset bookkeeping needed.
+    function onMove(e) { setDrawerWidth(clampDrawerWidth(e.clientX)); }
+    function onUp() { setDrawerResizing(false); }
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+    // pointercancel fires when the browser takes the gesture away (touch
+    // scroll taking over, window losing focus). Without it the drag would
+    // never end and every later mouse move would keep resizing.
+    document.addEventListener('pointercancel', onUp);
+    // Suppresses selection + forces the col-resize cursor everywhere for the
+    // duration, so the cursor doesn't flicker back to a caret whenever the
+    // pointer outruns the handle.
+    document.body.classList.add('xeplr-nav-resizing');
+    return function() {
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      document.removeEventListener('pointercancel', onUp);
+      document.body.classList.remove('xeplr-nav-resizing');
+    };
+  }, [drawerResizing]);
+
+  // Written once the gesture SETTLES, not on every pointermove — a drag fires
+  // these by the hundred, and localStorage is synchronous.
+  useEffect(function() {
+    if (drawerResizing) return;
+    try {
+      window.localStorage.setItem(DRAWER_WIDTH_KEY, String(drawerWidth));
+    } catch (err) {
+      // Storage unavailable (see readStoredDrawerWidth) — the width still
+      // works for this session, it just won't be remembered.
+    }
+  }, [drawerWidth, drawerResizing]);
+
+  // Click-outside for the settings menu only — the drawer closes via its own overlay.
+  useEffect(function() {
+    if (!accountOpen) return;
+    function onDocClick(e) {
+      if (accountRef.current && !accountRef.current.contains(e.target)) closeAccount();
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return function() { document.removeEventListener('mousedown', onDocClick); };
+  }, [accountOpen, closeAccount]);
+
+  // Settings dropdown, in render order: app overrides first, then the fixed
+  // builtin section — role-filtered the same way for both.
+  var accountItems = useMemo(function() {
+    var overrides = (props.settingsOverrides || [])
+      .filter(function(item) { return allowedMenus.indexOf(item.name) !== -1; });
+    var builtin = BUILTIN_SETTINGS_ITEMS
+      .filter(function(item) { return allowedMenus.indexOf(item.menuName) !== -1; })
+      .map(function(item) { return { name: item.menuName, path: authPath(item.authKey) }; });
+    return overrides.concat(builtin);
+  }, [allowedMenus, props.settingsOverrides]);
+
+  var notificationsAllowed = allowedMenus.indexOf(NOTIFICATIONS_MENU_NAME) !== -1;
+
+  // Role-filter the app's own drawer catalog down to what this user can actually see.
+  var drawerItems = useMemo(function() {
+    var catalog = props.drawerItems || [];
+    return catalog.filter(function(m) { return allowedMenus.indexOf(m.name) !== -1; });
+  }, [props.drawerItems, allowedMenus]);
+
+  return {
+    user: accessCtx.user,
+    accountItems: accountItems,
+    notifications: notificationsAllowed ? (props.notifications || null) : null,
+    logout: accessCtx.logout,
+
+    accountOpen: accountOpen,
+    toggleAccount: toggleAccount,
+    closeAccount: closeAccount,
+    accountRef: accountRef,
+
+    drawerOpen: drawerOpen,
+    toggleDrawer: toggleDrawer,
+    closeDrawer: closeDrawer,
+    drawerItems: drawerItems,
+
+    drawerWidth: drawerWidth,
+    drawerResizing: drawerResizing,
+    startDrawerResize: startDrawerResize,
+    resetDrawerWidth: resetDrawerWidth,
+    nudgeDrawerWidth: nudgeDrawerWidth,
+    // Handed out so the View can fill in aria-valuemin/max and its own key
+    // handling without re-declaring the numbers and drifting from them.
+    drawerWidthBounds: DRAWER_WIDTH_BOUNDS
+  };
+}

package/src/useProfileController.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { raiseSnackbar } from '@xeplr/ui-utils';
 import { getProfile, updateProfile } from './api.js';
 
 export function useProfileController(options = {}) {
@@ -25,6 +26,7 @@ export function useProfileController(options = {}) {
       });
     } catch (err) {
       setError(err.message);
+      raiseSnackbar(err.message, { design: 'error' });
     } finally {
       setFetching(false);
     }
@@ -41,10 +43,13 @@ export function useProfileController(options = {}) {
     setLoading(true);
     try {
       var result = await updateProfile(form);
-      setSuccess('Profile updated successfully');
+      var message = 'Profile updated successfully';
+      setSuccess(message);
+      raiseSnackbar(message, { design: 'success' });
       if (onSuccess) onSuccess(result);
     } catch (err) {
       setError(err.message);
+      raiseSnackbar(err.message, { design: 'error' });
     } finally {
       setLoading(false);
     }

package/src/useRegisterController.js

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { raiseSnackbar } from '@xeplr/ui-utils';
 import { registerUser } from './api.js';
 
 export function useRegisterController(options = {}) {
@@ -20,11 +21,14 @@ export function useRegisterController(options = {}) {
     setLoading(true);
     try {
       const result = await registerUser(form);
-      setSuccess('Registration successful. Please wait, someone will activate you.');
+      const message = 'Registration successful. Please wait, someone will activate you.';
+      setSuccess(message);
+      raiseSnackbar(message, { design: 'success' });
       setForm({ name: '', email: '', phoneNumber: '', password: '' });
       if (onSuccess) onSuccess(result);
     } catch (err) {
       setError(err.message);
+      raiseSnackbar(err.message, { design: 'error' });
     } finally {
       setLoading(false);
     }

package/src/useResetPasswordController.js

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { raiseSnackbar } from '@xeplr/ui-utils';
 import { resetPassword } from './api.js';
 
 export function useResetPasswordController() {
@@ -9,6 +10,14 @@ export function useResetPasswordController() {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
   const [loading, setLoading] = useState(false);
+  const warnedNoToken = useRef(false);
+
+  useEffect(function() {
+    if (!token && !warnedNoToken.current) {
+      warnedNoToken.current = true;
+      raiseSnackbar('Invalid or expired reset link', { design: 'error' });
+    }
+  }, [token]);
 
   async function handleSubmit(e) {
     e.preventDefault();
@@ -18,8 +27,10 @@ export function useResetPasswordController() {
     try {
       const result = await resetPassword({ token, newPassword: password });
       setSuccess(result.message);
+      raiseSnackbar(result.message, { design: 'success' });
     } catch (err) {
       setError(err.message);
+      raiseSnackbar(err.message, { design: 'error' });
     } finally {
       setLoading(false);
     }