@maka/maka-cli 5.123.1 → 5.124.0

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

@@ -1,53 +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>
-  );
-};
+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

@@ -1,25 +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>
-  );
-};
+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

@@ -1,25 +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>
-  );
-};
+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

@@ -1,41 +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>
-  );
-};
-
+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

@@ -1,34 +1,34 @@
-import React, { useContext } from 'react';
-import { Container, Paper, Typography, TextField, Button } from '@mui/material';
-import { useNavigate, useParams } from 'react-router-dom';
-
-export const BasicPasswordResetPage = () => {
-  const { token } = useParams();
-
-  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>
-  );
-};
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button } from '@mui/material';
+import { useNavigate, useParams } from 'react-router-dom';
+
+export const BasicPasswordResetPage = () => {
+  const { token } = useParams();
+
+  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

@@ -1,33 +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>
-  );
-};
+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

@@ -1,33 +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>
-  );
-};
+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

@@ -1,71 +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>
-  );
-};
+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>
+  );
+};