@maka/maka-cli 5.3.1 → 5.3.2

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

@@ -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<string | null>(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>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth0/auth0-account-settings.js.jsx

@@ -0,0 +1,123 @@
+import React, { useContext, useState } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Alert,
+  CircularProgress,
+} from '@mui/material';
+import { Meteor } from 'meteor/meteor';
+import { AuthContext } from '<%= authContextPath %>';
+
+/**
+ * Auth0 Account Settings Component
+ *
+ * Displays Auth0 account status and allows linking/unlinking
+ * Auth0 account to/from the current Meteor user.
+ */
+export const Auth0AccountSettings = () => {
+  const auth = useContext(AuthContext);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState(null);
+
+  if (!auth?.currentUser) {
+    return null;
+  }
+
+  const user = Meteor.user();
+  const hasAuth0Account = Boolean(user?.services?.auth0);
+
+  const handleLinkAccount = async () => {
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      const success = await auth.linkAuth0Account?.();
+      if (success) {
+        setMessage({ type: 'success', text: 'Auth0 account linked successfully!' });
+      }
+    } catch (error) {
+      setMessage({
+        type: 'error',
+        text: error instanceof Error ? error.message : 'Failed to link Auth0 account',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUnlinkAccount = async () => {
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      const success = await auth.unlinkAuth0Account?.();
+      if (success) {
+        setMessage({ type: 'success', text: 'Auth0 account unlinked successfully!' });
+      }
+    } catch (error) {
+      setMessage({
+        type: 'error',
+        text: error instanceof Error ? error.message : 'Failed to unlink Auth0 account',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Auth0 Integration
+        </Typography>
+
+        {message && (
+          <Alert severity={message.type} sx={{ mb: 2 }}>
+            {message.text}
+          </Alert>
+        )}
+
+        {hasAuth0Account ? (
+          <Box>
+            <Alert severity="success" sx={{ mb: 2 }}>
+              Your account is linked with Auth0
+            </Alert>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Email: {user?.services?.auth0?.email || 'N/A'}
+            </Typography>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Name: {user?.services?.auth0?.name || 'N/A'}
+            </Typography>
+            <Button
+              variant="outlined"
+              color="error"
+              onClick={handleUnlinkAccount}
+              disabled={loading}
+              sx={{ mt: 2 }}
+              startIcon={loading ? <CircularProgress size={20} /> : undefined}
+            >
+              {loading ? 'Unlinking...' : 'Unlink Auth0 Account'}
+            </Button>
+          </Box>
+        ) : (
+          <Box>
+            <Alert severity="info" sx={{ mb: 2 }}>
+              Link your account with Auth0 for easier login
+            </Alert>
+            <Button
+              variant="contained"
+              onClick={handleLinkAccount}
+              disabled={loading}
+              startIcon={loading ? <CircularProgress size={20} /> : undefined}
+            >
+              {loading ? 'Linking...' : 'Link Auth0 Account'}
+            </Button>
+          </Box>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth0/auth0-account-settings.js.tsx

@@ -0,0 +1,123 @@
+import React, { useContext, useState } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Button,
+  Alert,
+  CircularProgress,
+} from '@mui/material';
+import { Meteor } from 'meteor/meteor';
+import { AuthContext } from '<%= authContextPath %>';
+
+/**
+ * Auth0 Account Settings Component
+ *
+ * Displays Auth0 account status and allows linking/unlinking
+ * Auth0 account to/from the current Meteor user.
+ */
+export const Auth0AccountSettings: React.FC = () => {
+  const auth = useContext(AuthContext);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  if (!auth?.currentUser) {
+    return null;
+  }
+
+  const user = Meteor.user();
+  const hasAuth0Account = Boolean(user?.services?.auth0);
+
+  const handleLinkAccount = async () => {
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      const success = await auth.linkAuth0Account?.();
+      if (success) {
+        setMessage({ type: 'success', text: 'Auth0 account linked successfully!' });
+      }
+    } catch (error) {
+      setMessage({
+        type: 'error',
+        text: error instanceof Error ? error.message : 'Failed to link Auth0 account',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUnlinkAccount = async () => {
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      const success = await auth.unlinkAuth0Account?.();
+      if (success) {
+        setMessage({ type: 'success', text: 'Auth0 account unlinked successfully!' });
+      }
+    } catch (error) {
+      setMessage({
+        type: 'error',
+        text: error instanceof Error ? error.message : 'Failed to unlink Auth0 account',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          Auth0 Integration
+        </Typography>
+
+        {message && (
+          <Alert severity={message.type} sx={{ mb: 2 }}>
+            {message.text}
+          </Alert>
+        )}
+
+        {hasAuth0Account ? (
+          <Box>
+            <Alert severity="success" sx={{ mb: 2 }}>
+              Your account is linked with Auth0
+            </Alert>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Email: {user?.services?.auth0?.email || 'N/A'}
+            </Typography>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              Name: {user?.services?.auth0?.name || 'N/A'}
+            </Typography>
+            <Button
+              variant="outlined"
+              color="error"
+              onClick={handleUnlinkAccount}
+              disabled={loading}
+              sx={{ mt: 2 }}
+              startIcon={loading ? <CircularProgress size={20} /> : undefined}
+            >
+              {loading ? 'Unlinking...' : 'Unlink Auth0 Account'}
+            </Button>
+          </Box>
+        ) : (
+          <Box>
+            <Alert severity="info" sx={{ mb: 2 }}>
+              Link your account with Auth0 for easier login
+            </Alert>
+            <Button
+              variant="contained"
+              onClick={handleLinkAccount}
+              disabled={loading}
+              startIcon={loading ? <CircularProgress size={20} /> : undefined}
+            >
+              {loading ? 'Linking...' : 'Link Auth0 Account'}
+            </Button>
+          </Box>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth0/auth0-login-button.js.jsx

@@ -0,0 +1,56 @@
+import React, { useContext, useState } from 'react';
+import { Button, CircularProgress } from '@mui/material';
+import { AuthContext } from '<%= authContextPath %>';
+
+/**
+ * Auth0 Login Button Component
+ *
+ * A reusable button component for Auth0 authentication.
+ * Supports both redirect and popup login flows.
+ */
+export const Auth0LoginButton = ({
+  method = 'redirect',
+  onLoginSuccess,
+  onLoginError,
+  children = 'Login with Auth0',
+  ...buttonProps
+}) => {
+  const auth = useContext(AuthContext);
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async () => {
+    if (!auth) {
+      console.error('Auth context not available');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      if (method === 'popup') {
+        await auth.loginWithAuth0Popup?.();
+        onLoginSuccess?.();
+      } else {
+        // Redirect method - user will leave the page
+        await auth.loginWithAuth0Redirect?.();
+      }
+    } catch (error) {
+      console.error('Auth0 login error:', error);
+      onLoginError?.(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      variant="contained"
+      onClick={handleLogin}
+      disabled={loading || auth?.loading}
+      startIcon={loading ? <CircularProgress size={20} /> : undefined}
+      {...buttonProps}
+    >
+      {loading ? 'Logging in...' : children}
+    </Button>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/auth0/auth0-login-button.js.tsx

@@ -0,0 +1,74 @@
+import React, { useContext, useState } from 'react';
+import { Button, ButtonProps, CircularProgress } from '@mui/material';
+import { AuthContext } from '<%= authContextPath %>';
+
+interface Auth0LoginButtonProps extends ButtonProps {
+  /**
+   * Login method to use: 'redirect' or 'popup'
+   * Default is 'redirect'
+   */
+  method?: 'redirect' | 'popup';
+
+  /**
+   * Optional callback after successful login (only for popup method)
+   */
+  onLoginSuccess?: () => void;
+
+  /**
+   * Optional callback on error
+   */
+  onLoginError?: (error: Error) => void;
+}
+
+/**
+ * Auth0 Login Button Component
+ *
+ * A reusable button component for Auth0 authentication.
+ * Supports both redirect and popup login flows.
+ */
+export const Auth0LoginButton: React.FC<Auth0LoginButtonProps> = ({
+  method = 'redirect',
+  onLoginSuccess,
+  onLoginError,
+  children = 'Login with Auth0',
+  ...buttonProps
+}) => {
+  const auth = useContext(AuthContext);
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async () => {
+    if (!auth) {
+      console.error('Auth context not available');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      if (method === 'popup') {
+        await auth.loginWithAuth0Popup?.();
+        onLoginSuccess?.();
+      } else {
+        // Redirect method - user will leave the page
+        await auth.loginWithAuth0Redirect?.();
+      }
+    } catch (error) {
+      console.error('Auth0 login error:', error);
+      onLoginError?.(error as Error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      variant="contained"
+      onClick={handleLogin}
+      disabled={loading || auth?.loading}
+      startIcon={loading ? <CircularProgress size={20} /> : undefined}
+      {...buttonProps}
+    >
+      {loading ? 'Logging in...' : children}
+    </Button>
+  );
+};

package/bundle/typescript/src/templates/react/kit/mui/frame/app-bars/basic-app-bar.js.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import { useNavigate } from 'react-router-dom';
+
+import { Session } from 'meteor/session';
+
+function BasicAppBar() {
+  const handleDrawerToggle = () => {
+    Session.set('drawerOpen', !Session.get('drawerOpen'));
+  };
+  const navigate = useNavigate();
+
+  return (
+    <Box id="app-bar" sx={{ flexGrow: 1 }}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+            onClick={handleDrawerToggle}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography onClick={() => navigate('/')} variant="h6" component="div" sx={{ flexGrow: 1, cursor: 'pointer' }}>
+            <%= name %>
+          </Typography>
+          <Button onClick={() => navigate('/login')} color="inherit">Login</Button>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}
+
+export { BasicAppBar };

package/bundle/typescript/src/templates/react/kit/mui/frame/app-bars/basic-app-bar.js.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
+import { useNavigate } from 'react-router-dom';
+
+import { Session } from 'meteor/session';
+
+function BasicAppBar() {
+  const handleDrawerToggle = () => {
+    Session.set('drawerOpen', !Session.get('drawerOpen'));
+  };
+  const navigate = useNavigate();
+
+  return (
+    <Box id="app-bar" sx={{ flexGrow: 1 }}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            size="large"
+            edge="start"
+            color="inherit"
+            aria-label="menu"
+            sx={{ mr: 2 }}
+            onClick={handleDrawerToggle}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography onClick={() => navigate('/')} variant="h6" component="div" sx={{ flexGrow: 1, cursor: 'pointer' }}>
+            <%= name %>
+          </Typography>
+          <Button onClick={() => navigate('/login')} color="inherit">Login</Button>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  );
+}
+
+export { BasicAppBar };

package/bundle/typescript/src/templates/react/kit/mui/frame/drawers/basic-drawer.js.jsx

@@ -0,0 +1,121 @@
+import { Meteor } from 'meteor/meteor';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MailIcon from '@mui/icons-material/Mail';
+import Toolbar from '@mui/material/Toolbar';
+
+const drawerWidth = 240;
+
+import { Session } from 'meteor/session';
+import { useTracker } from 'meteor/maka:react-tracker';
+function BasicDrawer(props) {
+
+  const { drawerOpen } = useTracker(() => {
+    let drawerState = false;
+    if (Meteor.isClient) {
+      Meteor.subscribe('drawerState', { drawerOpen: Session.get('drawerOpen') });
+      drawerState = Session.get('drawerOpen');
+    }
+    return { drawerOpen: drawerState };
+  });
+
+  const { window } = props;
+
+  const handleDrawerToggle = () => {
+    Session.set('drawerOpen', !Session.get('drawerOpen'));
+  };
+
+  const drawer = (
+    <div>
+      <Toolbar />
+      <Divider />
+      <List>
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+          <ListItem key={text} disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {['All mail', 'Trash', 'Spam'].map((text, index) => (
+          <ListItem key={text} disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+
+  const container = window !== undefined ? () => window().document.body : undefined;
+
+  return (
+    <Box sx={{ display: 'flex' }}
+      onClick={handleDrawerToggle}
+      onKeyDown={handleDrawerToggle}
+    >
+      <Box
+        component="nav"
+        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+        aria-label="mailbox folders"
+      >
+        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+        <Drawer
+          container={container}
+          variant="temporary"
+          open={drawerOpen}
+          onClose={handleDrawerToggle}
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+          sx={{
+            display: { xs: 'block', sm: 'none' },
+            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+          }}
+        >
+          {drawer}
+        </Drawer>
+        <Drawer
+          sx={{
+            display: { xs: 'none', sm: 'block' },
+            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+          }}
+          open={drawerOpen}
+        >
+          {drawer}
+        </Drawer>
+      </Box>
+    </Box>
+  );
+}
+
+
+BasicDrawer.propTypes = {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * You won't need it on your project.
+   */
+  // eslint-disable-next-line react/require-default-props
+  window: PropTypes.func,
+};
+
+export { BasicDrawer };