@xeplr/ui-account 1.0.0

package/src/useTenantPickerController.js

@@ -0,0 +1,97 @@
+import { useState, useEffect } from 'react';
+import { getMyTenants, logoutUser } from './api.js';
+import { clearAuth } from './token.js';
+
+var STORAGE_KEY = 'xeplr:activeTenant';
+var COUNT_KEY = 'xeplr:tenantCount';
+
+/**
+ * Get the currently selected tenant from localStorage.
+ */
+export function getActiveTenant() {
+  try {
+    var raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Set the active tenant in localStorage.
+ */
+export function setActiveTenant(tenant) {
+  if (tenant) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(tenant));
+  } else {
+    localStorage.removeItem(STORAGE_KEY);
+  }
+}
+
+/**
+ * Clear the active tenant (on logout).
+ */
+export function clearActiveTenant() {
+  localStorage.removeItem(STORAGE_KEY);
+  localStorage.removeItem(COUNT_KEY);
+}
+
+/**
+ * Check if the user has multiple tenants (show switch option).
+ */
+export function hasMultipleTenants() {
+  try {
+    return parseInt(localStorage.getItem(COUNT_KEY) || '0') > 1;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Controller for the tenant picker screen shown after login.
+ */
+export function useTenantPickerController(options = {}) {
+  var [tenants, setTenants] = useState([]);
+  var [loading, setLoading] = useState(true);
+  var [error, setError] = useState('');
+  var level = options.level || 1;
+  var label = options.label || 'Company';
+
+  useEffect(function() {
+    setLoading(true);
+    getMyTenants()
+      .then(function(data) {
+        setTenants(data);
+        try { localStorage.setItem(COUNT_KEY, String(data.length)); } catch(e) {}
+        // Auto-select if only one tenant
+        if (data.length === 1) {
+          setActiveTenant(data[0]);
+          if (options.onSelect) options.onSelect(data[0]);
+        }
+      })
+      .catch(function(err) { setError(err.message); })
+      .finally(function() { setLoading(false); });
+  }, [level]);
+
+  function handleSelect(tenant) {
+    setActiveTenant(tenant);
+    if (options.onSelect) options.onSelect(tenant);
+  }
+
+  function handleLogout() {
+    clearActiveTenant();
+    logoutUser();
+    clearAuth();
+    if (options.onLogout) options.onLogout();
+    else window.location.href = '/login';
+  }
+
+  return {
+    tenants,
+    loading,
+    error,
+    label,
+    handleSelect,
+    onLogout: handleLogout
+  };
+}

package/src/useUserRolesController.js

@@ -0,0 +1,81 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { getUsers, getRoles, toggleUserRole } from './adminApi.js';
+
+export function useUserRolesController() {
+  var [users, setUsers] = useState([]);
+  var [roles, setRoles] = useState([]);
+  var [search, setSearch] = useState('');
+  var [loading, setLoading] = useState(true);
+  var [error, setError] = useState('');
+  var [saving, setSaving] = useState({});
+
+  useEffect(function() {
+    loadData();
+  }, []);
+
+  async function loadData() {
+    setLoading(true);
+    setError('');
+    try {
+      var [usersData, rolesData] = await Promise.all([getUsers(), getRoles()]);
+      setUsers(usersData);
+      setRoles(rolesData.filter(function(r) { return r.name !== 'Super Admin'; }));
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  var filteredUsers = useMemo(function() {
+    if (!search.trim()) return users;
+    var q = search.toLowerCase();
+    return users.filter(function(u) {
+      return (u.name && u.name.toLowerCase().includes(q)) ||
+             (u.email && u.email.toLowerCase().includes(q));
+    });
+  }, [users, search]);
+
+  var handleToggle = useCallback(async function(userId, roleId, currentlyAssigned) {
+    var key = userId + ':' + roleId;
+    setSaving(function(prev) { var next = { ...prev }; next[key] = true; return next; });
+
+    try {
+      await toggleUserRole({ userId, roleId, assign: !currentlyAssigned });
+      setUsers(function(prev) {
+        return prev.map(function(u) {
+          if (u.id !== userId) return u;
+          var newRoles;
+          if (currentlyAssigned) {
+            newRoles = u.roles.filter(function(r) { return r.id !== roleId; });
+          } else {
+            var role = roles.find(function(r) { return r.id === roleId; });
+            newRoles = u.roles.concat(role ? [role] : []);
+          }
+          return { ...u, roles: newRoles };
+        });
+      });
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSaving(function(prev) { var next = { ...prev }; delete next[key]; return next; });
+    }
+  }, [roles]);
+
+  function isAssigned(user, roleId) {
+    return user.roles && user.roles.some(function(r) { return r.id === roleId; });
+  }
+
+  return {
+    users: filteredUsers,
+    roles,
+    search,
+    setSearch,
+    loading,
+    error,
+    saving,
+    handleToggle,
+    isAssigned,
+    reload: loadData,
+  };
+}

package/src/validateDesign.js

@@ -0,0 +1,101 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Validates that required elements exist in the rendered design.
+ * Throws a visible error if any required element is missing.
+ *
+ * @param {string} componentName - Name of the page (for error messages)
+ * @param {Array<{id?: string, role?: string, selector?: string, label: string}>} requiredElements
+ */
+export function useDesignValidator(componentName, requiredElements) {
+  var containerRef = useRef(null);
+
+  useEffect(function() {
+    if (!containerRef.current) return;
+
+    // Delay validation to allow async data to render
+    var timer = setTimeout(function() {
+      if (!containerRef.current) return;
+
+      var missing = [];
+      for (var i = 0; i < requiredElements.length; i++) {
+        var rule = requiredElements[i];
+        var found = false;
+
+        if (rule.id) {
+          found = !!containerRef.current.querySelector('#' + rule.id);
+        } else if (rule.role) {
+          found = !!containerRef.current.querySelector('[role="' + rule.role + '"]');
+        } else if (rule.selector) {
+          found = !!containerRef.current.querySelector(rule.selector);
+        }
+
+        if (!found) {
+          missing.push(rule.label + (rule.id ? ' (id="' + rule.id + '")' : '') + (rule.selector ? ' (' + rule.selector + ')' : ''));
+        }
+      }
+
+      if (missing.length > 0 && process.env.NODE_ENV !== 'production') {
+        console.warn(
+          '[xeplr-ui-account] ' + componentName + ' design is missing required elements:\n' +
+          missing.map(function(m) { return '  - ' + m; }).join('\n')
+        );
+      }
+    }, 3000);
+
+    return function() { clearTimeout(timer); };
+  }, []);
+
+  return containerRef;
+}
+
+export var LOGIN_RULES = [
+  { id: 'xeplr-email', label: 'Email input' },
+  { id: 'xeplr-password', label: 'Password input' },
+  { selector: 'button[type="submit"]', label: 'Submit button' }
+];
+
+export var REGISTER_RULES = [
+  { id: 'xeplr-name', label: 'Name input' },
+  { id: 'xeplr-email', label: 'Email input' },
+  { id: 'xeplr-password', label: 'Password input' },
+  { selector: 'button[type="submit"]', label: 'Submit button' }
+];
+
+export var FORGOT_PASSWORD_RULES = [
+  { id: 'xeplr-email', label: 'Email input' },
+  { selector: 'button[type="submit"]', label: 'Submit button' }
+];
+
+export var RESET_PASSWORD_RULES = [
+  { id: 'xeplr-password', label: 'Password input' },
+  { selector: 'button[type="submit"]', label: 'Submit button' }
+];
+
+export var CHANGE_PASSWORD_RULES = [
+  { id: 'xeplr-current-password', label: 'Current password input' },
+  { id: 'xeplr-new-password', label: 'New password input' },
+  { id: 'xeplr-confirm-password', label: 'Confirm password input' },
+  { selector: 'button[type="submit"]', label: 'Submit button' }
+];
+
+export var PROFILE_RULES = [
+  { id: 'xeplr-profile-name', label: 'Name input' },
+  { id: 'xeplr-profile-email', label: 'Email input' },
+  { selector: 'button[type="submit"]', label: 'Submit button' }
+];
+
+export var USER_ROLES_MATRIX_RULES = [
+  { id: 'xeplr-admin-user-search', label: 'User search input' },
+  { role: 'grid', label: 'Matrix grid table' }
+];
+
+export var ACCESS_MATRIX_RULES = [
+  { id: 'xeplr-admin-access-search', label: 'Access search input' },
+  { role: 'tablist', label: 'Tab list for Modules/Uncategorized' }
+];
+
+export var MASTER_SETTINGS_RULES = [
+  { id: 'xeplr-admin-master-search', label: 'Master search input' },
+  { role: 'tablist', label: 'Tab list for master types' }
+];