@maka/maka-cli 5.3.0 → 5.3.2

package/bundle/typescript/src/templates/react/kit/frames/workspace-manager.tsx

@@ -0,0 +1,166 @@
+import './<%= fileName %>.css';
+import * as React from 'react';
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { WorkspaceManager, WorkspaceStore } from 'meteor/maka:maka-frames';
+
+interface <%= className %>Props {
+  currentWorkspaceId: string;
+  allWorkspaces: any[];
+  user?: any;
+  onWorkspaceSwitch?: (workspaceId: string) => void;
+}
+
+/**
+ * <%= className %> Component
+ *
+ * UI component for managing workspaces in the maka-frames package.
+ * Provides controls for creating, switching, renaming, and deleting workspaces.
+ */
+class <%= className %>Component extends Component<<%= className %>Props> {
+  static propTypes = {
+    currentWorkspaceId: PropTypes.string.isRequired,
+    allWorkspaces: PropTypes.array.isRequired,
+    user: PropTypes.object,
+    onWorkspaceSwitch: PropTypes.func
+  };
+
+  handleCreateWorkspace = () => {
+    const { user, onWorkspaceSwitch } = this.props;
+
+    const workspaceName = prompt('Enter workspace name:', `Workspace ${new Date().toLocaleTimeString()}`);
+    if (!workspaceName) return;
+
+    const workspaceId = `workspace-${Date.now()}`;
+    const workspaceData = {
+      id: workspaceId,
+      name: workspaceName,
+      frames: [],
+      createdAt: new Date(),
+      updatedAt: new Date()
+    };
+
+    // Use WorkspaceManager for logged-in users, WorkspaceStore for anonymous
+    if (user) {
+      WorkspaceManager.createWorkspace(workspaceData.id, workspaceData.name)
+        .then(() => {
+          console.log('Workspace created:', workspaceData.id);
+          if (onWorkspaceSwitch) onWorkspaceSwitch(workspaceData.id);
+        })
+        .catch((error: any) => {
+          console.error('Error creating workspace:', error);
+        });
+    } else {
+      WorkspaceStore.setWorkspace(workspaceData);
+      if (onWorkspaceSwitch) onWorkspaceSwitch(workspaceData.id);
+    }
+  }
+
+  handleDeleteWorkspace = (workspaceId: string) => {
+    const { user, allWorkspaces, onWorkspaceSwitch } = this.props;
+
+    const workspace = allWorkspaces.find(ws => ws.id === workspaceId);
+    if (!workspace) return;
+
+    const confirmed = confirm(`Are you sure you want to delete "${workspace.name}"?`);
+    if (!confirmed) return;
+
+    // Use WorkspaceManager for logged-in users, WorkspaceStore for anonymous
+    if (user) {
+      WorkspaceManager.deleteWorkspace(workspaceId)
+        .then(() => {
+          console.log('Workspace deleted:', workspaceId);
+          // Switch to first available workspace
+          const remainingWorkspaces = allWorkspaces.filter(ws => ws.id !== workspaceId);
+          if (remainingWorkspaces.length > 0 && onWorkspaceSwitch) {
+            onWorkspaceSwitch(remainingWorkspaces[0].id);
+          }
+        })
+        .catch((error: any) => {
+          // Handle error (e.g., last workspace can't be deleted)
+          alert(error.message || 'Cannot delete workspace');
+          console.error('Error deleting workspace:', error);
+        });
+    } else {
+      const success = WorkspaceStore.deleteWorkspace(workspaceId);
+      if (success) {
+        // Switch to first available workspace
+        const remainingWorkspaces = allWorkspaces.filter(ws => ws.id !== workspaceId);
+        if (remainingWorkspaces.length > 0 && onWorkspaceSwitch) {
+          onWorkspaceSwitch(remainingWorkspaces[0].id);
+        }
+      } else {
+        alert('Cannot delete the last workspace');
+      }
+    }
+  }
+
+  handleRenameWorkspace = (workspaceId: string) => {
+    const { user, allWorkspaces } = this.props;
+
+    const workspace = allWorkspaces.find(ws => ws.id === workspaceId);
+    if (!workspace) return;
+
+    const newName = prompt('Enter new workspace name:', workspace.name);
+    if (!newName || newName === workspace.name) return;
+
+    // Use WorkspaceManager for logged-in users, WorkspaceStore for anonymous
+    if (user) {
+      WorkspaceManager.updateWorkspace(workspaceId, { name: newName });
+    } else {
+      const localWorkspace = WorkspaceStore.getWorkspace(workspaceId);
+      if (localWorkspace) {
+        localWorkspace.name = newName;
+        localWorkspace.updatedAt = new Date();
+        WorkspaceStore.setWorkspace(localWorkspace);
+      }
+    }
+  }
+
+  render() {
+    const { currentWorkspaceId, allWorkspaces, onWorkspaceSwitch } = this.props;
+
+    return (
+      <div className="<%= fileName %>">
+        <div className="workspace-selector">
+          <select
+            value={currentWorkspaceId}
+            onChange={(e) => onWorkspaceSwitch && onWorkspaceSwitch(e.target.value)}
+            className="workspace-select"
+          >
+            {allWorkspaces.map(ws => (
+              <option key={ws.id} value={ws.id}>{ws.name}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="workspace-actions">
+          <button
+            onClick={this.handleCreateWorkspace}
+            className="workspace-btn workspace-create-btn"
+          >
+            + New Workspace
+          </button>
+
+          <button
+            onClick={() => this.handleRenameWorkspace(currentWorkspaceId)}
+            className="workspace-btn workspace-rename-btn"
+          >
+            Rename Workspace
+          </button>
+
+          {allWorkspaces.length > 1 && (
+            <button
+              onClick={() => this.handleDeleteWorkspace(currentWorkspaceId)}
+              className="workspace-btn workspace-delete-btn"
+            >
+              Delete Workspace
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export { <%= className %>Component };

package/bundle/typescript/src/templates/react/kit/mui/auth/forgot-password/basic-forgot-password-page.js.jsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+export const BasicForgotPasswordPage = () => {
+  const { forgotPassword } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const { email } = event.target;
+    await forgotPassword(email.value);
+    navigate('/');
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px' }}>
+        <Typography component="h1" variant="h5">Forgot Password</Typography>
+        <form onSubmit={handleSubmit}>
+          {/* Form Field */}
+          <TextField id="email" type="email" label="Email*" fullWidth autoFocus margin="normal" />
+          <Button type="submit" fullWidth variant="contained" color="primary" style={{ margin: '20px 0' }}>
+            Send Password Reset Email
+          </Button>
+          <Button onClick={() => navigate('/login')} fullWidth>
+            Back to Login
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+};
+

package/bundle/typescript/src/templates/react/kit/mui/auth/forgot-password/basic-forgot-password-page.js.tsx

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+export const BasicForgotPasswordPage = () => {
+  const { forgotPassword } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const { email } = event.target;
+    await forgotPassword(email.value);
+    navigate('/');
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px' }}>
+        <Typography component="h1" variant="h5">Forgot Password</Typography>
+        <form onSubmit={handleSubmit}>
+          {/* Form Field */}
+          <TextField id="email" type="email" label="Email*" fullWidth autoFocus margin="normal" />
+          <Button type="submit" fullWidth variant="contained" color="primary" style={{ margin: '20px 0' }}>
+            Send Password Reset Email
+          </Button>
+          <Button onClick={() => navigate('/login')} fullWidth>
+            Back to Login
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth/login/basic-login-page.js.jsx

@@ -0,0 +1,53 @@
+import React, { useContext, useEffect } from 'react';
+import { Container, Paper, Typography, TextField, Button, Grid, Link } from '@mui/material';
+import { useNavigate } from 'react-router-dom';<% if (isSsr) { %>
+import { AuthContext } from '/imports/startup/lib/authentication-provider';<% } else { %>
+import { AuthContext } from '/imports/startup/client/authentication-provider';<% } %>
+
+export const BasicLoginPage = () => {
+  const { currentUser, login } = useContext(AuthContext);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (currentUser) {
+      navigate('/logout');
+    }
+  });
+
+  const handleLogin = async (event) => {
+    event.preventDefault();
+    const { email, password } = event.target;
+    const user = await login({ username: email.value, password: password.value });
+
+    if (user) {
+      navigate('/');
+    }
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px' }}>
+        <Typography component="h1" variant="h5">Sign in</Typography>
+        <form onSubmit={handleLogin}>
+          {/* Form Fields */}
+          <TextField id="email" type="email" label="Email Address*" fullWidth autoFocus margin="normal" />
+          <TextField id="password" label="Password*" type="password" fullWidth margin="normal" />
+          <Button type="submit" fullWidth variant="contained" color="primary" style={{ margin: '20px 0' }}>
+            Sign In
+          </Button>
+          <Grid container>
+            <Grid item xs>
+              <Link href="#" onClick={() => navigate('/forgot-password')} variant="body2">
+                Forgot password?
+              </Link>
+            </Grid>
+            <Grid item>
+              <Link href="#" onClick={() => navigate('/register')} variant="body2">
+                Don't have an account? Sign Up
+              </Link>
+            </Grid>
+          </Grid>
+        </form>
+      </Paper>
+    </Container>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth/login/basic-login-page.js.tsx

@@ -0,0 +1,53 @@
+import React, { useContext, useEffect } from 'react';
+import { Container, Paper, Typography, TextField, Button, Grid, Link } from '@mui/material';
+import { useNavigate } from 'react-router-dom';<% if (isSsr) { %>
+import { AuthContext } from '/imports/startup/lib/authentication-provider';<% } else { %>
+import { AuthContext } from '/imports/startup/client/authentication-provider';<% } %>
+
+export const BasicLoginPage = () => {
+  const { currentUser, login } = useContext(AuthContext);
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (currentUser) {
+      navigate('/logout');
+    }
+  });
+
+  const handleLogin = async (event) => {
+    event.preventDefault();
+    const { email, password } = event.target;
+    const user = await login({ username: email.value, password: password.value });
+
+    if (user) {
+      navigate('/');
+    }
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px' }}>
+        <Typography component="h1" variant="h5">Sign in</Typography>
+        <form onSubmit={handleLogin}>
+          {/* Form Fields */}
+          <TextField id="email" type="email" label="Email Address*" fullWidth autoFocus margin="normal" />
+          <TextField id="password" label="Password*" type="password" fullWidth margin="normal" />
+          <Button type="submit" fullWidth variant="contained" color="primary" style={{ margin: '20px 0' }}>
+            Sign In
+          </Button>
+          <Grid container>
+            <Grid item xs>
+              <Link href="#" onClick={() => navigate('/forgot-password')} variant="body2">
+                Forgot password?
+              </Link>
+            </Grid>
+            <Grid item>
+              <Link href="#" onClick={() => navigate('/register')} variant="body2">
+                Don't have an account? Sign Up
+              </Link>
+            </Grid>
+          </Grid>
+        </form>
+      </Paper>
+    </Container>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth/logout/basic-logout-page.js.jsx

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Button, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+export const BasicLogoutPage = () => {
+  const { logout } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleLogout = async (event) => {
+    event.preventDefault();
+    await logout();
+    navigate('/');
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px', textAlign: 'center' }}>
+        <Typography variant="h5">You are logged in</Typography>
+        <Button onClick={handleLogout} variant="contained" color="primary" style={{ marginTop: '20px' }}>
+          Logout
+        </Button>
+      </Paper>
+    </Container>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth/logout/basic-logout-page.js.tsx

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Button, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+export const BasicLogoutPage = () => {
+  const { logout } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleLogout = async (event) => {
+    event.preventDefault();
+    await logout();
+    navigate('/');
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px', textAlign: 'center' }}>
+        <Typography variant="h5">You are logged in</Typography>
+        <Button onClick={handleLogout} variant="contained" color="primary" style={{ marginTop: '20px' }}>
+          Logout
+        </Button>
+      </Paper>
+    </Container>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth/password-reset/basic-password-reset-page.js.jsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button } from '@mui/material';
+import { useNavigate, useParams } from 'react-router-dom'; // Import useParams
+
+export const BasicPasswordResetPage = () => {
+  const { token } = useParams(); // Access the 'token' directly from the URL
+  const { resetPassword } = useContext(AuthContext);
+  const navigate = useNavigate();
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const password = event.target.password.value;
+    await resetPassword(token, password);
+    navigate('/');
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px' }}>
+        <Typography component="h1" variant="h5">Password Reset</Typography>
+        <form onSubmit={handleSubmit}>
+          <TextField
+            id="password"
+            label="Password*"
+            type="password"
+            fullWidth
+            margin="normal"
+            name="password" // Added name attribute for better form handling
+          />
+          <Button type="submit" fullWidth variant="contained" color="primary" style={{ margin: '20px 0' }}>
+            Reset Password
+          </Button>
+          <Button onClick={() => navigate('/login')} fullWidth>
+            Back to Login
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+};
+

package/bundle/typescript/src/templates/react/kit/mui/auth/password-reset/basic-password-reset-page.js.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+export const BasicPasswordResetPage = (props) => {
+  const { params = {} } = props;
+  const { token } = params;
+
+  const { resetPassword } = useContext(AuthContext);
+  const navigate = useNavigate();
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const { password } = event.target;
+    await resetPassword(token, password.value);
+    navigate('/');
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px' }}>
+        <Typography component="h1" variant="h5">Password Reset</Typography>
+        <form onSubmit={handleSubmit}>
+          {/* Form Field */}
+          <TextField id="password" label="Password*" type="password" fullWidth margin="normal" />
+          <Button type="submit" fullWidth variant="contained" color="primary" style={{ margin: '20px 0' }}>
+            Reset Password
+          </Button>
+          <Button onClick={() => navigate('/login')} fullWidth>
+            Back to Login
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth/register/basic-register-page.js.jsx

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button, Link } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+export const BasicRegisterPage = () => {
+  const { register } = useContext(AuthContext);
+  const navigate = useNavigate();
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const { email, password } = event.target;
+    await register(email.value, password.value);
+    navigate('/');
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px' }}>
+        <Typography component="h1" variant="h5">Register</Typography>
+        <form onSubmit={handleSubmit}>
+          {/* Form Fields */}
+          <TextField id="email" type="email" label="Email*" fullWidth autoFocus margin="normal" />
+          <TextField id="password" label="Password*" type="password" fullWidth margin="normal" />
+          <Button type="submit" fullWidth variant="contained" color="primary" style={{ margin: '20px 0' }}>
+            Register
+          </Button>
+          <Link href="#" onClick={() => navigate('/login')} variant="body2">
+            Already have an account? Log in
+          </Link>
+        </form>
+      </Paper>
+    </Container>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth/register/basic-register-page.js.tsx

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button, Link } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+export const BasicRegisterPage = () => {
+  const { register } = useContext(AuthContext);
+  const navigate = useNavigate();
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const { email, password } = event.target;
+    await register(email.value, password.value);
+    navigate('/');
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Paper elevation={3} style={{ marginTop: '8vh', padding: '20px' }}>
+        <Typography component="h1" variant="h5">Register</Typography>
+        <form onSubmit={handleSubmit}>
+          {/* Form Fields */}
+          <TextField id="email" type="email" label="Email*" fullWidth autoFocus margin="normal" />
+          <TextField id="password" label="Password*" type="password" fullWidth margin="normal" />
+          <Button type="submit" fullWidth variant="contained" color="primary" style={{ margin: '20px 0' }}>
+            Register
+          </Button>
+          <Link href="#" onClick={() => navigate('/login')} variant="body2">
+            Already have an account? Log in
+          </Link>
+        </form>
+      </Paper>
+    </Container>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth0/auth-callback.js.jsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, CircularProgress, Typography, Alert } from '@mui/material';
+import AuthService from '<%= authServicePath %>';
+
+/**
+ * Auth0 Callback Component
+ *
+ * This component handles the OAuth callback from Auth0.
+ * It exchanges the authorization code for tokens and logs the user into Meteor.
+ */
+export const AuthCallback = () => {
+  const navigate = useNavigate();
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      try {
+        // Handle the Auth0 callback and login to Meteor
+        await AuthService.handleAuth0Callback();
+
+        // Redirect to home page after successful login
+        navigate('/', { replace: true });
+      } catch (err) {
+        console.error('Auth0 callback error:', err);
+        setError(err instanceof Error ? err.message : 'Authentication failed');
+
+        // Redirect to login page after a delay
+        setTimeout(() => {
+          navigate('/login', { replace: true });
+        }, 3000);
+      }
+    };
+
+    handleCallback();
+  }, [navigate]);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        gap: 2,
+      }}
+    >
+      {error ? (
+        <>
+          <Alert severity="error" sx={{ maxWidth: 600 }}>
+            {error}
+          </Alert>
+          <Typography variant="body2" color="text.secondary">
+            Redirecting to login page...
+          </Typography>
+        </>
+      ) : (
+        <>
+          <CircularProgress size={60} />
+          <Typography variant="h6" sx={{ mt: 2 }}>
+            Completing authentication...
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            Please wait while we log you in.
+          </Typography>
+        </>
+      )}
+    </Box>
+  );
+};