@friggframework/devtools 2.0.0-next.60 → 2.0.0-next.62

package/management-ui/src/pages/Users.jsx

@@ -1,492 +0,0 @@
-import React, { useState } from 'react'
-import { useFrigg } from '../hooks/useFrigg'
-import SessionMonitor from '../components/SessionMonitor'
-
-const Users = () => {
-  const { users, createUser, updateUser, deleteUser, bulkCreateUsers, deleteAllUsers } = useFrigg()
-  const [showCreateForm, setShowCreateForm] = useState(false)
-  const [editingUser, setEditingUser] = useState(null)
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(null)
-  const [searchTerm, setSearchTerm] = useState('')
-  const [filterRole, setFilterRole] = useState('')
-  const [filterStatus, setFilterStatus] = useState('')
-  const [activeTab, setActiveTab] = useState('users')
-  const [formData, setFormData] = useState({
-    email: '',
-    firstName: '',
-    lastName: '',
-    role: 'user',
-    appUserId: '',
-    appOrgId: ''
-  })
-
-  const handleInputChange = (e) => {
-    const { name, value } = e.target
-    setFormData(prev => ({ ...prev, [name]: value }))
-  }
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    try {
-      if (editingUser) {
-        await updateUser(editingUser.id, formData)
-        setEditingUser(null)
-      } else {
-        await createUser(formData)
-      }
-      setFormData({ email: '', firstName: '', lastName: '', role: 'user', appUserId: '', appOrgId: '' })
-      setShowCreateForm(false)
-    } catch (error) {
-      console.error(editingUser ? 'Error updating user:' : 'Error creating user:', error)
-    }
-  }
-
-  const handleEdit = (user) => {
-    setEditingUser(user)
-    setFormData({
-      email: user.email,
-      firstName: user.firstName,
-      lastName: user.lastName,
-      role: user.role,
-      appUserId: user.appUserId || '',
-      appOrgId: user.appOrgId || ''
-    })
-    setShowCreateForm(true)
-  }
-
-  const handleDelete = async (userId) => {
-    try {
-      await deleteUser(userId)
-      setShowDeleteConfirm(null)
-    } catch (error) {
-      console.error('Error deleting user:', error)
-    }
-  }
-
-  const handleBulkCreate = async () => {
-    try {
-      await bulkCreateUsers(10)
-    } catch (error) {
-      console.error('Error creating bulk users:', error)
-    }
-  }
-
-  const handleDeleteAll = async () => {
-    if (window.confirm('Are you sure you want to delete all users? This action cannot be undone.')) {
-      try {
-        await deleteAllUsers()
-      } catch (error) {
-        console.error('Error deleting all users:', error)
-      }
-    }
-  }
-
-  const generateTestId = (user) => {
-    return `test_user_${user.email.split('@')[0].replace(/\./g, '_')}`
-  }
-
-  // Filter users based on search and filters
-  const filteredUsers = users.filter(user => {
-    const matchesSearch = searchTerm === '' || 
-      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      user.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      (user.appUserId && user.appUserId.toLowerCase().includes(searchTerm.toLowerCase())) ||
-      (user.appOrgId && user.appOrgId.toLowerCase().includes(searchTerm.toLowerCase()))
-    
-    const matchesRole = filterRole === '' || user.role === filterRole
-    const matchesStatus = filterStatus === '' || user.status === filterStatus
-    
-    return matchesSearch && matchesRole && matchesStatus
-  })
-
-  return (
-    <div>
-      <div className="mb-8">
-        <h2 className="text-3xl font-bold text-gray-900">Test User Management</h2>
-        <p className="mt-2 text-gray-600">Create and manage dummy users for testing integrations</p>
-      </div>
-
-      {/* Tab Navigation */}
-      <div className="mb-6 border-b border-gray-200">
-        <nav className="-mb-px flex space-x-8">
-          <button
-            onClick={() => setActiveTab('users')}
-            className={`py-2 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'users'
-                ? 'border-frigg-blue text-frigg-blue'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-            }`}
-          >
-            Users ({users.length})
-          </button>
-          <button
-            onClick={() => setActiveTab('sessions')}
-            className={`py-2 px-1 border-b-2 font-medium text-sm ${
-              activeTab === 'sessions'
-                ? 'border-frigg-blue text-frigg-blue'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-            }`}
-          >
-            Active Sessions
-          </button>
-        </nav>
-      </div>
-
-      {activeTab === 'users' ? (
-        <>
-          {/* Action Buttons */}
-          <div className="mb-6 flex space-x-4">
-        {!showCreateForm ? (
-          <>
-            <button
-              onClick={() => setShowCreateForm(true)}
-              className="px-4 py-2 bg-frigg-blue text-white rounded-md hover:bg-blue-700 transition-colors"
-            >
-              + Create Test User
-            </button>
-            <button
-              onClick={handleBulkCreate}
-              className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
-            >
-              Generate 10 Users
-            </button>
-            {users.length > 0 && (
-              <button
-                onClick={handleDeleteAll}
-                className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
-              >
-                Delete All Users
-              </button>
-            )}
-          </>
-        ) : (
-          <div className="bg-white shadow rounded-lg p-6">
-            <h3 className="text-lg font-medium text-gray-900 mb-4">
-              {editingUser ? 'Edit User' : 'Create New Test User'}
-            </h3>
-            <form onSubmit={handleSubmit}>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    First Name
-                  </label>
-                  <input
-                    type="text"
-                    name="firstName"
-                    required
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-                    value={formData.firstName}
-                    onChange={handleInputChange}
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Last Name
-                  </label>
-                  <input
-                    type="text"
-                    name="lastName"
-                    required
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-                    value={formData.lastName}
-                    onChange={handleInputChange}
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Email
-                  </label>
-                  <input
-                    type="email"
-                    name="email"
-                    required
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-                    value={formData.email}
-                    onChange={handleInputChange}
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Role
-                  </label>
-                  <select
-                    name="role"
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-                    value={formData.role}
-                    onChange={handleInputChange}
-                  >
-                    <option value="user">User</option>
-                    <option value="admin">Admin</option>
-                    <option value="developer">Developer</option>
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    App User ID
-                  </label>
-                  <input
-                    type="text"
-                    name="appUserId"
-                    placeholder="e.g., app_user_123"
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-                    value={formData.appUserId}
-                    onChange={handleInputChange}
-                  />
-                  <p className="text-xs text-gray-500 mt-1">Optional: External app user identifier</p>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    App Org ID
-                  </label>
-                  <input
-                    type="text"
-                    name="appOrgId"
-                    placeholder="e.g., app_org_456"
-                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-                    value={formData.appOrgId}
-                    onChange={handleInputChange}
-                  />
-                  <p className="text-xs text-gray-500 mt-1">Optional: External organization identifier</p>
-                </div>
-              </div>
-              <div className="mt-4 flex space-x-2">
-                <button
-                  type="submit"
-                  className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"
-                >
-                  {editingUser ? 'Update User' : 'Create User'}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowCreateForm(false)
-                    setEditingUser(null)
-                    setFormData({ email: '', firstName: '', lastName: '', role: 'user', appUserId: '', appOrgId: '' })
-                  }}
-                  className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
-                >
-                  Cancel
-                </button>
-              </div>
-            </form>
-          </div>
-        )}
-      </div>
-
-      {/* Search and Filters */}
-      <div className="mb-6 bg-white shadow rounded-lg p-4">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <div className="md:col-span-2">
-            <label className="block text-sm font-medium text-gray-700 mb-1">Search</label>
-            <input
-              type="text"
-              placeholder="Search by name, email, or IDs..."
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Filter by Role</label>
-            <select
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-              value={filterRole}
-              onChange={(e) => setFilterRole(e.target.value)}
-            >
-              <option value="">All Roles</option>
-              <option value="user">User</option>
-              <option value="admin">Admin</option>
-              <option value="developer">Developer</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Filter by Status</label>
-            <select
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-frigg-blue"
-              value={filterStatus}
-              onChange={(e) => setFilterStatus(e.target.value)}
-            >
-              <option value="">All Statuses</option>
-              <option value="active">Active</option>
-              <option value="inactive">Inactive</option>
-            </select>
-          </div>
-        </div>
-        {(searchTerm || filterRole || filterStatus) && (
-          <div className="mt-3 flex items-center text-sm text-gray-600">
-            <span>Showing {filteredUsers.length} of {users.length} users</span>
-            <button
-              onClick={() => {
-                setSearchTerm('')
-                setFilterRole('')
-                setFilterStatus('')
-              }}
-              className="ml-4 text-frigg-blue hover:text-blue-700"
-            >
-              Clear filters
-            </button>
-          </div>
-        )}
-      </div>
-
-      {/* Users List */}
-      <div className="bg-white shadow rounded-lg overflow-hidden">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
-            <tr>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                User
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                App User ID
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                App Org ID
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Role
-              </th>
-              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Connections
-              </th>
-              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
-            {filteredUsers.length === 0 ? (
-              <tr>
-                <td colSpan="6" className="px-6 py-12 text-center text-gray-500">
-                  {users.length === 0 ? 'No users created yet' : 'No users match your filters'}
-                </td>
-              </tr>
-            ) : (
-              filteredUsers.map((user) => (
-              <tr key={user.id || user.email}>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <div className="flex items-center">
-                    <div className="flex-shrink-0 h-10 w-10">
-                      <div className="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
-                        <span className="text-gray-600 font-medium">
-                          {user.firstName?.[0]}{user.lastName?.[0]}
-                        </span>
-                      </div>
-                    </div>
-                    <div className="ml-4">
-                      <div className="text-sm font-medium text-gray-900">
-                        {user.firstName} {user.lastName}
-                      </div>
-                      <div className="text-sm text-gray-500">
-                        {user.email}
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <code className="text-sm font-mono text-gray-600">{user.appUserId || generateTestId(user)}</code>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <code className="text-sm font-mono text-gray-600">{user.appOrgId || 'N/A'}</code>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap">
-                  <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                    {user.role}
-                  </span>
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                  {user.connections?.length || 0} active
-                </td>
-                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                  <button
-                    onClick={() => handleEdit(user)}
-                    className="text-frigg-blue hover:text-blue-700 mr-3"
-                  >
-                    Edit
-                  </button>
-                  <button
-                    onClick={() => setShowDeleteConfirm(user.id)}
-                    className="text-red-600 hover:text-red-900"
-                  >
-                    Delete
-                  </button>
-                </td>
-              </tr>
-              ))
-            )}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Delete Confirmation Modal */}
-      {showDeleteConfirm && (
-        <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg p-6 max-w-md w-full">
-            <h3 className="text-lg font-medium text-gray-900 mb-4">Confirm Delete</h3>
-            <p className="text-gray-600 mb-6">
-              Are you sure you want to delete this user? This action cannot be undone.
-            </p>
-            <div className="flex justify-end space-x-3">
-              <button
-                onClick={() => setShowDeleteConfirm(null)}
-                className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => handleDelete(showDeleteConfirm)}
-                className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700"
-              >
-                Delete User
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Info Box */}
-      <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <svg className="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-            </svg>
-          </div>
-          <div className="ml-3">
-            <p className="text-sm text-yellow-700">
-              Test users are for local development only. They simulate real users for testing integration flows 
-              without requiring actual authentication.
-            </p>
-          </div>
-        </div>
-      </div>
-        </>
-      ) : (
-        <>
-          {/* Sessions Tab Content */}
-          <SessionMonitor />
-          
-          {/* Sessions Info Box */}
-          <div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
-            <div className="flex">
-              <div className="flex-shrink-0">
-                <svg className="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
-                </svg>
-              </div>
-              <div className="ml-3">
-                <p className="text-sm text-blue-700">
-                  Sessions track user activity during development testing. Each session expires after 1 hour of inactivity
-                  and can be refreshed to extend the duration.
-                </p>
-              </div>
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
-
-export default Users

package/management-ui/src/services/api.js

@@ -1,41 +0,0 @@
-import axios from 'axios'
-
-const api = axios.create({
-  baseURL: import.meta.env.DEV ? 'http://localhost:3001' : '',
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
-
-// Request interceptor
-api.interceptors.request.use(
-  (config) => {
-    // Add any auth tokens here if needed
-    return config
-  },
-  (error) => {
-    return Promise.reject(error)
-  }
-)
-
-// Response interceptor
-api.interceptors.response.use(
-  (response) => {
-    return response
-  },
-  (error) => {
-    if (error.response) {
-      // Server responded with error status
-      console.error('API Error:', error.response.data)
-    } else if (error.request) {
-      // Request made but no response
-      console.error('Network Error:', error.request)
-    } else {
-      // Something else happened
-      console.error('Error:', error.message)
-    }
-    return Promise.reject(error)
-  }
-)
-
-export default api