axiodb 22.3.1 → 22.4.2

package/electron/src/components/auth/CreateUserModal.jsx

@@ -0,0 +1,131 @@
+import { useState } from 'react'
+import authApi from '../../api/authApi'
+import Modal from '../ui/Modal'
+import Button from '../ui/Button'
+import { Input } from '../ui/Field'
+import { Alert } from '../ui/Feedback'
+
+const MIN_PASSWORD_LENGTH = 4
+
+const CreateUserModal = ({ isOpen, onClose, onUserCreated, roles }) => {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [role, setRole] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleClose = () => {
+    setUsername('')
+    setPassword('')
+    setRole('')
+    setError('')
+    setIsSubmitting(false)
+    onClose()
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    if (!username.trim()) {
+      setError('Username is required')
+      return
+    }
+    if (!/^[a-zA-Z0-9_]+$/.test(username)) {
+      setError('Username can only contain letters, numbers, and underscores')
+      return
+    }
+    if (!password || password.length < MIN_PASSWORD_LENGTH) {
+      setError(`Password must be at least ${MIN_PASSWORD_LENGTH} characters`)
+      return
+    }
+    const selectedRole = role || roles?.[0]?.roleName
+    if (!selectedRole) {
+      setError('Role is required')
+      return
+    }
+
+    setIsSubmitting(true)
+    setError('')
+
+    try {
+      await authApi.createUser(username, password, selectedRole)
+      onUserCreated()
+      handleClose()
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to create user. Please try again.')
+      setIsSubmitting(false)
+    }
+  }
+
+  const UserIcon = (
+    <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
+      <path strokeLinecap='round' strokeLinejoin='round' d='M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z' />
+    </svg>
+  )
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title='Create user'
+      icon={UserIcon}
+      size='md'
+      footer={
+        <>
+          <Button variant='secondary' onClick={handleClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={isSubmitting} disabled={!username.trim() || !password}>
+            Create user
+          </Button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} className='space-y-4'>
+        <Input
+          label='Username'
+          value={username}
+          onChange={(event) => setUsername(event.target.value)}
+          placeholder='analyst'
+          mono
+          autoFocus
+          autoComplete='off'
+          hint='Letters, numbers and underscores only.'
+        />
+
+        <Input
+          label='Temporary password'
+          type='password'
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          autoComplete='new-password'
+          hint={`At least ${MIN_PASSWORD_LENGTH} characters. They must change it at first sign-in.`}
+        />
+
+        <div>
+          <label htmlFor='new-user-role' className='mb-1.5 block text-sm font-medium text-ink-700'>
+            Role
+          </label>
+          <select
+            id='new-user-role'
+            value={role || roles?.[0]?.roleName || ''}
+            onChange={(event) => setRole(event.target.value)}
+            className='w-full rounded-lg border border-ink-300 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm transition-all focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/25'
+          >
+            {(roles ?? []).map((entry) => (
+              <option key={entry.roleName} value={entry.roleName}>{entry.roleName}</option>
+            ))}
+          </select>
+          <p className='mt-1.5 text-xs text-ink-500'>
+            Determines what this account can reach across the Dashboard, TCP and MCP surfaces.
+          </p>
+        </div>
+
+        {error && <Alert tone='danger'>{error}</Alert>}
+        <button type='submit' className='hidden' aria-hidden='true' tabIndex={-1} />
+      </form>
+    </Modal>
+  )
+}
+
+export default CreateUserModal

package/electron/src/components/auth/ForcePasswordChangeModal.jsx

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import authApi from "../../api/authApi";
+import { useAuthStore } from "../../store/authStore";
+
+const MIN_PASSWORD_LENGTH = 4;
+
+const ForcePasswordChangeModal = ({ isOpen, onSuccess }) => {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const setSession = useAuthStore((state) => state.setSession);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!currentPassword || !newPassword || !confirmPassword) {
+      setError("All fields are required.");
+      return;
+    }
+    if (newPassword.length < MIN_PASSWORD_LENGTH) {
+      setError(`New password must be at least ${MIN_PASSWORD_LENGTH} characters.`);
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError("New password and confirmation do not match.");
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError("");
+
+    try {
+      const response = await authApi.changePassword(currentPassword, newPassword);
+      const { username, role, permissions, mustChangePassword } = response.data.data;
+      setSession({ username, role, permissions, mustChangePassword });
+      onSuccess();
+    } catch (err) {
+      setError(err.response?.data?.message || "Failed to update password. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm">
+        <motion.div
+          initial={{ scale: 0.95, opacity: 0, y: 10 }}
+          animate={{ scale: 1, opacity: 1, y: 0 }}
+          exit={{ scale: 0.95, opacity: 0 }}
+          className="w-full max-w-md rounded-2xl bg-white border border-slate-200 p-6 shadow-2xl relative overflow-hidden"
+        >
+          <div className="flex items-center gap-3 mb-5">
+            <div className="h-10 w-10 rounded-xl bg-amber-50 text-amber-600 border border-amber-200 flex items-center justify-center">
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+            </div>
+            <div>
+              <h2 className="text-base font-bold text-slate-900">Password Change Required</h2>
+              <p className="text-xs text-slate-500">For security, you must set a new password to continue.</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="block text-xs font-semibold text-slate-700 mb-1">Current Password</label>
+              <input
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                placeholder="Enter current password"
+                required
+                autoFocus
+                className="w-full px-3 py-2 rounded-lg bg-white border border-slate-300 text-slate-900 text-xs focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-semibold text-slate-700 mb-1">New Password</label>
+              <input
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder="At least 4 characters"
+                required
+                className="w-full px-3 py-2 rounded-lg bg-white border border-slate-300 text-slate-900 text-xs focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-semibold text-slate-700 mb-1">Confirm New Password</label>
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Re-enter new password"
+                required
+                className="w-full px-3 py-2 rounded-lg bg-white border border-slate-300 text-slate-900 text-xs focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20"
+              />
+            </div>
+
+            {error && (
+              <div className="p-3 rounded-lg bg-red-50 border border-red-200 text-red-700 text-xs flex items-center gap-2">
+                <svg className="w-4 h-4 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span>{error}</span>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full mt-2 py-2.5 rounded-xl bg-amber-600 hover:bg-amber-700 text-white font-semibold text-xs shadow-sm transition-all disabled:opacity-50 cursor-pointer"
+            >
+              {isSubmitting ? "Updating Password..." : "Update Password & Continue"}
+            </button>
+          </form>
+        </motion.div>
+      </div>
+    </AnimatePresence>
+  );
+};
+
+export default ForcePasswordChangeModal;

package/electron/src/components/auth/ProtectedRoute.jsx

@@ -0,0 +1,42 @@
+import { Navigate, useLocation } from 'react-router-dom'
+import { useAuthStore } from '../../store/authStore'
+
+const ForbiddenNotice = () => (
+  <div className='max-w-3xl mx-auto px-4 py-16 text-center'>
+    <h1 className='text-2xl font-bold text-ink-900 mb-2'>Access Denied</h1>
+    <p className='text-ink-600'>
+      Your role does not have permission to view this page.
+    </p>
+  </div>
+)
+
+const ProtectedRoute = ({ children, requiredPermission }) => {
+  const { isAuthenticated, isLoading, mustChangePassword, permissions } = useAuthStore(
+    (state) => state
+  )
+  const location = useLocation()
+
+  if (isLoading) {
+    return (
+      <div className='flex items-center justify-center min-h-[60vh]'>
+        <div className='animate-spin h-8 w-8 border-4 border-blue-600 border-t-transparent rounded-full' />
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to='/login' replace />
+  }
+
+  if (mustChangePassword && location.pathname !== '/force-password-change') {
+    return <Navigate to='/force-password-change' replace />
+  }
+
+  if (requiredPermission && !permissions.includes(requiredPermission)) {
+    return <ForbiddenNotice />
+  }
+
+  return children
+}
+
+export default ProtectedRoute

package/electron/src/components/auth/ResetPasswordModal.jsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import authApi from '../../api/authApi'
+import Modal from '../ui/Modal'
+import Button from '../ui/Button'
+import { Input } from '../ui/Field'
+import { Alert } from '../ui/Feedback'
+
+const MIN_PASSWORD_LENGTH = 4
+
+const ResetPasswordModal = ({ isOpen, username, onClose, onPasswordReset }) => {
+  const [newPassword, setNewPassword] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleClose = () => {
+    setNewPassword('')
+    setError('')
+    setIsSubmitting(false)
+    onClose()
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    if (!newPassword || newPassword.length < MIN_PASSWORD_LENGTH) {
+      setError(`New password must be at least ${MIN_PASSWORD_LENGTH} characters`)
+      return
+    }
+
+    setIsSubmitting(true)
+    setError('')
+
+    try {
+      await authApi.resetUserPassword(username, newPassword)
+      onPasswordReset()
+      handleClose()
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to reset password. Please try again.')
+      setIsSubmitting(false)
+    }
+  }
+
+  const KeyIcon = (
+    <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
+      <path strokeLinecap='round' strokeLinejoin='round' d='M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z' />
+    </svg>
+  )
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title='Reset password'
+      subtitle={username}
+      icon={KeyIcon}
+      size='md'
+      footer={
+        <>
+          <Button variant='secondary' onClick={handleClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={isSubmitting} disabled={!newPassword}>
+            Reset password
+          </Button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit}>
+        <Input
+          label='New password'
+          type='password'
+          value={newPassword}
+          onChange={(event) => setNewPassword(event.target.value)}
+          autoComplete='new-password'
+          autoFocus
+          error={error || undefined}
+          hint={`At least ${MIN_PASSWORD_LENGTH} characters.`}
+        />
+        <button type='submit' className='hidden' aria-hidden='true' tabIndex={-1} />
+      </form>
+
+      <Alert tone='warn' className='mt-4'>
+        Every active session for <strong>{username}</strong> is revoked immediately, and they
+        must change this password at next sign-in.
+      </Alert>
+    </Modal>
+  )
+}
+
+export default ResetPasswordModal

package/electron/src/components/auth/UserAvatarMenu.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useAuthStore } from '../../store/authStore'
+import authApi from '../../api/authApi'
+import { Badge } from '../ui/Feedback'
+
+/**
+ * Account menu in the header.
+ *
+ * Adds outside-click and Escape dismissal - previously the panel only closed on navigation
+ * or on a second click of the trigger, so it could sit open over the page indefinitely.
+ */
+const UserAvatarMenu = ({ isOpen, onToggle, onClose }) => {
+  const navigate = useNavigate()
+  const { username, role, clearSession } = useAuthStore((state) => state)
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    const onPointerDown = (event) => {
+      if (!containerRef.current?.contains(event.target)) onClose()
+    }
+    const onKeyDown = (event) => {
+      if (event.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('mousedown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [isOpen, onClose])
+
+  const handleLogout = async () => {
+    try {
+      await authApi.logout()
+    } finally {
+      clearSession()
+      onClose()
+      navigate('/login', { replace: true })
+    }
+  }
+
+  const handleChangePassword = () => {
+    onClose()
+    navigate('/force-password-change')
+  }
+
+  const itemClass =
+    'flex w-full items-center gap-2.5 px-4 py-2.5 text-left text-sm transition-colors'
+
+  return (
+    <div className='relative' ref={containerRef}>
+      <button
+        onClick={onToggle}
+        aria-haspopup='menu'
+        aria-expanded={isOpen}
+        className='flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-ink-300 transition-colors hover:bg-white/10 hover:text-white'
+      >
+        <span className='flex h-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-brand-400 to-brand-600 text-xs font-bold uppercase text-white'>
+          {username ? username.charAt(0) : '?'}
+        </span>
+        <span className='hidden sm:inline'>{username}</span>
+        <svg
+          className={`hidden h-3.5 w-3.5 transition-transform duration-200 sm:block ${isOpen ? 'rotate-180' : ''}`}
+          fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2.5} aria-hidden='true'
+        >
+          <path strokeLinecap='round' strokeLinejoin='round' d='M19 9l-7 7-7-7' />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div
+          role='menu'
+          className='animate-popIn absolute right-0 z-50 mt-2 w-60 overflow-hidden rounded-xl border border-ink-200 bg-white shadow-float'
+        >
+          <div className='border-b border-ink-100 px-4 py-3'>
+            <p className='truncate text-sm font-semibold text-ink-900'>{username}</p>
+            <Badge tone='brand' className='mt-1.5'>{role}</Badge>
+          </div>
+
+          <button onClick={handleChangePassword} role='menuitem' className={`${itemClass} text-ink-700 hover:bg-ink-50`}>
+            <svg className='h-4 w-4 text-ink-400' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2} aria-hidden='true'>
+              <path strokeLinecap='round' strokeLinejoin='round' d='M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z' />
+            </svg>
+            Change password
+          </button>
+
+          <button onClick={handleLogout} role='menuitem' className={`${itemClass} border-t border-ink-100 text-danger-600 hover:bg-danger-50`}>
+            <svg className='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2} aria-hidden='true'>
+              <path strokeLinecap='round' strokeLinejoin='round' d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1' />
+            </svg>
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default UserAvatarMenu

package/electron/src/components/collection/CreateCollectionModal.jsx

@@ -0,0 +1,116 @@
+import apiClient from '../../api/client'
+import { useState } from 'react'
+import Modal from '../ui/Modal'
+import Button from '../ui/Button'
+import { Input } from '../ui/Field'
+
+const CreateCollectionModal = ({
+  isOpen,
+  onClose,
+  onCollectionCreated,
+  databaseName
+}) => {
+  const [collectionName, setCollectionName] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  // Reset form state when modal is opened/closed
+  const handleClose = () => {
+    setCollectionName('')
+    setError('')
+    setIsSubmitting(false)
+    onClose()
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+
+    // Validate input
+    if (!collectionName.trim()) {
+      setError('Collection name is required')
+      return
+    }
+
+    // Alphanumeric validation (plus underscores)
+    if (!/^[a-zA-Z0-9_]+$/.test(collectionName)) {
+      setError(
+        'Collection name can only contain letters, numbers, and underscores'
+      )
+      return
+    }
+
+    setIsSubmitting(true)
+    setError('')
+
+    try {
+      const response = await apiClient.post('/api/collection/create-collection', {
+        dbName: databaseName,
+        collectionName
+      })
+
+      if (
+        response.data.statusCode === 200 ||
+        response.data.statusCode === 201
+      ) {
+        onCollectionCreated(collectionName)
+        handleClose()
+      } else {
+        throw new Error('Failed to create collection')
+      }
+    } catch (error) {
+      console.error('Error creating collection:', error)
+      setError(
+        error.response?.data?.message ||
+          'Failed to create collection. Please try again.'
+      )
+      setIsSubmitting(false)
+    }
+  }
+
+  const FolderIcon = (
+    <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
+      <path strokeLinecap='round' strokeLinejoin='round' d='M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z' />
+    </svg>
+  )
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title='Create collection'
+      subtitle={databaseName}
+      icon={FolderIcon}
+      size='md'
+      footer={
+        <>
+          <Button variant='secondary' onClick={handleClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} loading={isSubmitting} disabled={!collectionName.trim()}>
+            Create collection
+          </Button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} className='space-y-4'>
+        <Input label='Database' value={databaseName} disabled mono className='opacity-70' />
+
+        <Input
+          label='Collection name'
+          value={collectionName}
+          onChange={(event) => setCollectionName(event.target.value)}
+          placeholder='users'
+          mono
+          autoFocus
+          error={error || undefined}
+          hint='Letters, numbers and underscores only. AxioDB is schema-less, so there is nothing else to define.'
+        />
+
+        {/* Lets Enter submit the form without rendering a second visible button. */}
+        <button type='submit' className='hidden' aria-hidden='true' tabIndex={-1} />
+      </form>
+    </Modal>
+  )
+}
+
+export default CreateCollectionModal