@maka/maka-cli 4.10.2 → 4.11.0

package/bundle/obf/src/templates/react/kit/auth/provider/authentication-provider.js.tsx

@@ -0,0 +1,318 @@
+import { Meteor } from 'meteor/meteor';
+import React, { createContext, useState, useEffect, ReactNode, useMemo } from 'react';
+import { Alert } from '@mui/material';
+
+// Define types for user and credentials
+// These are just placeholders to demonstrate the concept.
+// TODO: Define a user for your application
+interface User {
+  name: string;
+  id: string;
+}
+
+interface Credentials {
+  username?: string;
+  password?: string;
+  token?: string;
+}
+
+// Define type for the AuthProvider's props
+interface AuthProviderProps {
+  children: ReactNode;
+  timeoutDuration?: number;
+}
+
+// Authorization Context
+export const AuthContext = createContext<{
+  currentUser: User | null;
+  userAuthorizations: string[];
+  login: (credentials: Credentials) => Promise<void>;
+  logout: () => void;
+  loading: boolean;
+} | null>({});
+
+/**
+ * Maka-CLI will replace the contents of these functions with
+ * a template that you can customize to fit your application's needs.
+ */
+const authenticateUser = async (username: string, password: string): Promise<User> => {
+  // Replace these with your actual authentication logic
+  // and define what constitutes as a valid user and permissions.
+  // These are just placeholders to demonstrate the concept.
+
+  // TODO: Remove this once you've implemented your own authentication logic
+  if (Meteor.isProduction) {
+    throw new Error('You must implement your own authentication logic');
+  }
+  // Simulated user authentication
+  // Replace with API call or other logic
+  if (username === 'test' && password === 'password') {
+    localStorage.setItem('token', 'valid-token');
+    return { name: 'Test User', id: '12345' };
+  }
+  throw new Error('Invalid credentials');
+};
+
+const authenticateToken = async (): Promise<User> => {
+  // TODO: Remove this once you've implemented your own authentication logic
+  if (Meteor.isProduction) {
+    throw new Error('You must implement your own authentication logic');
+  }
+
+  // A token should either already exist as a result of the login process
+  // or another sso style login
+  const token = localStorage.getItem('token');
+  // Simulated token validation
+  // Replace with token validation logic
+  //
+  // Note: This is a very basic example of token validation.
+  // You should add additional logic to validate the token
+  // as well as handle token expiration, renewal, etc.
+  if (token === 'valid-token') {
+    return { name: 'Token User', id: '67890' };
+  }
+  throw new Error('Invalid token');
+};
+
+const getUserAuthorizations = async (user: User): Promise<string[]> => {
+  // Placeholder function to simulate fetching user permissions
+
+  // TODO: Remove this once you've implemented your own authentication logic
+  if (Meteor.isProduction) {
+    throw new Error('You must implement your own permission logic');
+  }
+  // Simulate an API call to fetch permissions, or other logic
+  // such as parsing a JWT token to retrieve permissions
+  // Replace with your actual logic
+  if (user.id === '12345') {
+    return ['read', 'write', 'edit'];
+  }
+  return [];
+};
+
+const deauthenticateUser = async (): Promise<boolean> => {
+  // Placeholder function to simulate deauthorizing a user
+  // TODO: Remove this once you've implemented your own authentication logic
+  if (Meteor.isProduction) {
+    throw new Error('You must implement your own deauthorization logic');
+  }
+
+  // Simulate an API call to deauthorize a user
+  // Replace with your actual logic
+  // Note: This is a very basic example of deauthorization.
+  // You should add additional logic to deauthorize the user
+  // and handle any errors that may occur.
+  return true;
+};
+
+const sendForgotPasswordEmail = async (email: string) => {
+  // Placeholder function to simulate sending a password reset email
+  // TODO: Remove this once you've implemented your own authentication logic
+  if (Meteor.isProduction) {
+    throw new Error('You must implement your own send forgot email logic');
+  }
+
+  // Simulate an API call to send a password reset email
+  // Replace with your actual logic
+  // Note: This is a very basic example of sending a password reset email.
+  // You should add additional logic to send the email
+  // and handle any errors that may occur.
+  console.log(`Sending password reset email to ${email}`);
+  return true;
+};
+
+const registerNewUser = async (email: string, password: string) => {
+  // Placeholder function to simulate registering a new user
+  // TODO: Remove this once you've implemented your own authentication logic
+  if (Meteor.isProduction) {
+    throw new Error('You must implement your own registration logic');
+  }
+
+  console.log(`Registering new user with email ${email}`);
+  console.log(`Registering new user with password ${password.length} characters`);
+  return true;
+};
+
+const resetPasswordWithToken = async (token: string, password: string) => {
+  // Placeholder function to simulate resetting a password with a token
+  // TODO: Remove this once you've implemented your own authentication logic
+  if (Meteor.isProduction) {
+    throw new Error('You must implement your own password reset logic');
+  }
+
+  console.log(`Resetting password with token ${token}`);
+  console.log(`Resetting password with password ${password.length} characters`);
+  return true;
+};
+
+
+// Authorization Provider
+export const AuthProvider = ({ children, timeoutDuration = 3600000 }: AuthProviderProps) => {
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [userAuthorizations, setUserAuthorizations] = useState<string[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [alert, setAlert] = useState({ show: false, message: '', severity: '' });
+
+  const setAlertMessage = (message: string, severity: string) => {
+    setAlert({ show: true, message, severity });
+    setTimeout(() => setAlert({ show: false, message: '', severity: '' }), 5000); // Auto-hide after 5 seconds
+  };
+
+  const logout = async () => {
+    try {
+      if (currentUser) {
+        await deauthenticateUser();
+        setCurrentUser(null);
+        setLoading(false);
+        setAlertMessage('Logout successful!', 'success');
+      }
+    } catch (error) {
+      setAlertMessage('Logout failed: ' + error.message, 'error');
+    }
+  };
+
+  const loginUserWithUsernameAndPassword = async (username: string, password: string) => {
+    // Add logic for username/password authentication
+    // E.g., call a backend API and validate the credentials
+    try {
+      const user = await authenticateUser(username, password);
+      setCurrentUser(user);
+      setLoading(false);
+      setAlertMessage('Login successful!', 'success');
+      return user;
+    } catch (error) {
+      setLoading(false);
+      setCurrentUser(null);
+      setAlertMessage('Login failed: ' + error.message, 'error');
+      return null;
+    }
+  };
+
+  const login = async (credentials: Credentials) => {
+    // Check the type of credentials provided and call the appropriate method
+    if (credentials.username && credentials.password) {
+      // Handle username/password authentication
+      return loginUserWithUsernameAndPassword(credentials.username, credentials.password);
+    } else {
+      setLoading(false);
+      throw new Error('Invalid login credentials');
+    }
+  };
+
+  const loginUserWithToken = async () => {
+    // Add logic for token-based authentication
+    // E.g., validate the token with your backend or a third-party service
+    try {
+      const user = await authenticateToken();
+      setCurrentUser(user);
+      setLoading(false);
+      return user;
+    } catch (error) {
+      setLoading(false);
+      setCurrentUser(null);
+      setAlertMessage('Login failed: ' + error.message, 'error');
+      return null;
+    }
+  };
+
+  const fetchUserAuthorizations = async (user: User) => {
+    // Placeholder function to fetch user permissions
+    // Replace this with your actual logic to retrieve permissions
+    const authorizations = await getUserAuthorizations(user);
+    setUserAuthorizations(authorizations);
+  };
+
+  const forgotPassword = async (email: string) => {
+    try {
+      await sendForgotPasswordEmail(email);
+      setAlertMessage('Please check your email.', 'success');
+      return true;
+    } catch (error) {
+      setAlertMessage('Error sending email: ' + error.message, 'error');
+      return false;
+    }
+  };
+
+  const register = async (email: string, password: string) => {
+    try {
+      const user = await registerNewUser(email, password);
+      setCurrentUser(user);
+      fetchUserAuthorizations(user); // Fetch permissions when a user logs in
+      setAlertMessage('Registration sucess, welcome!', 'success');
+      setLoading(false);
+      return user;
+    } catch (error) {
+      setAlertMessage('Register failed: ' + error.message, 'error');
+      return null;
+    }
+  };
+
+  const resetPassword = async (token, password) => {
+    try {
+      const user = await resetPasswordWithToken(token, password);
+      setCurrentUser(user);
+      fetchUserAuthorizations(user); // Fetch permissions when a user logs in
+      setAlertMessage('Password reset!', 'success');
+      setLoading(false);
+      return true;
+    } catch (error) {
+      setAlertMessage('Password reset failed: ' + error.message, 'error');
+      return false;
+    }
+  };
+
+  useEffect(() => {
+    let logoutTimer: NodeJS.Timeout;
+
+    const setLogoutTimer = () => {
+      if (logoutTimer) {
+        clearTimeout(logoutTimer);
+      }
+      logoutTimer = setTimeout(logout, timeoutDuration);
+    };
+
+    if (currentUser) {
+      setLogoutTimer();
+      fetchUserAuthorizations(currentUser); // Fetch permissions when a user logs in
+    } else {
+      setLoading(true);
+      // attempt to re-authenticate the user
+      const renewedUser = loginUserWithToken();
+      if (currentUser) {
+        setCurrentUser(renewedUser);
+        setLogoutTimer();
+        fetchUserAuthorizations(renewedUser); // Fetch permissions when a user logs in
+      } else {
+        setUserAuthorizations([]); // Clear permissions when logged out
+      }
+    }
+
+    return () => {
+      clearTimeout(logoutTimer);
+    };
+  }, [currentUser, timeoutDuration]);
+
+  const contextValue = useMemo(() => ({
+    currentUser,
+    userAuthorizations,
+    login,
+    logout,
+    loading,
+    forgotPassword,
+    resetPassword,
+    register,
+  }), [currentUser, userAuthorizations, login, logout, loading, forgotPassword, resetPassword, register]);
+
+  return (
+    <AuthContext.Provider value={contextValue}>
+      {alert.show && (
+        <Alert severity={alert.severity} style={{ position: 'fixed', bottom: 20, right: 20, zIndex: 100000 }}>
+          {alert.message}
+        </Alert>
+      )}
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+

package/bundle/obf/src/templates/react/kit/auth/service/meteor-auth-service.js.jsx

@@ -0,0 +1,136 @@
+import { Meteor } from 'meteor/meteor';
+import { Roles } from 'meteor/alanning:roles';
+import { Accounts } from 'meteor/accounts-base';
+
+class AuthService {
+  static getUserQuerySelector(username) {
+    // if the username is an email address, use the email field
+    if (username.indexOf('@') > -1) {
+      return { email: username };
+    } else {
+      return { username };
+    }
+  }
+
+  static async authenticateUser(username, password) {
+    // Implement Meteor-specific login logic
+    try {
+      const selector = AuthService.getUserQuerySelector(username);
+      return new Promise((resolve, reject) => {
+        Meteor.loginWithPassword(selector, password, (error) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(Meteor.user());
+          }
+        });
+      });
+
+    } catch (error) {
+      console.error('Meteor authentication failed:', error);
+      throw error;
+    }
+  }
+
+  static async authenticateToken() {
+    // Implement token validation logic using Meteor
+    try {
+      return new Promise((resolve, reject) => {
+        const token = localStorage.getItem('Meteor.loginToken');
+        if (token) {
+          Meteor.loginWithToken(token, (error) => {
+            if (error) {
+              reject(error);
+            }
+            resolve(Meteor.user());
+          })
+        }
+        resolve(null);
+      });
+    } catch (error) {
+      console.error('Token validation failed:', error);
+      throw error;
+    }
+  }
+
+  static async getUserAuthorizations(userId) {
+    // Implement logic to fetch user permissions from Meteor
+    try {
+      return new Promise((resolve) => {
+        const roles = Roles.getRolesForUser(userId);
+        resolve(roles);
+      });
+    } catch (error) {
+      console.error('Failed to fetch user permissions:', error);
+      throw error;
+    }
+  }
+
+  static async deauthenticateUser() {
+    // Implement logout logic using Meteor
+    try {
+      return new Promise((resolve, reject) => {
+        Meteor.logout((error) => {
+          if (error) {
+            reject(error);
+          }
+          resolve(true);
+        });
+      });
+    } catch (error) {
+      console.error('Logout failed:', error);
+    }
+  }
+
+  static async registerNewUser(username, password) {
+    try {
+      const selector = AuthService.getUserQuerySelector(username);
+      selector.password = password;
+
+      // Implement user registration logic using Meteor
+      await Accounts.createUserAsync(selector);
+      return Meteor.user();
+    } catch (error) {
+      console.error('Registration failed:', error);
+      throw error;
+    }
+  }
+
+  static async sendForgotPasswordEmail(email) {
+    try {
+      // Implement password reset logic using Meteor
+      return new Promise ((resolve, reject) => {
+        Accounts.forgotPassword({ email }, (error) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve();
+          }
+        });
+      });
+    } catch (error) {
+      console.error('Password reset failed:', error);
+      throw error;
+    }
+  }
+
+  static async resetPasswordWithToken(token, password) {
+    try {
+      // Implement password reset logic using Meteor
+      return new Promise ((resolve, reject) => {
+        Accounts.resetPassword(token, password, (error) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(Meteor.user());
+          }
+        });
+      });
+    } catch (error) {
+      console.error('Password reset failed:', error);
+      throw error;
+    }
+  }
+}
+
+export default AuthService;

package/bundle/obf/src/templates/react/kit/auth/service/meteor-auth-service.js.tsx

@@ -0,0 +1,136 @@
+import { Meteor } from 'meteor/meteor';
+import { Roles } from 'meteor/alanning:roles';
+import { Accounts } from 'meteor/accounts-base';
+
+class AuthService {
+  static getUserQuerySelector(username) {
+    // if the username is an email address, use the email field
+    if (username.indexOf('@') > -1) {
+      return { email: username };
+    } else {
+      return { username };
+    }
+  }
+
+  static async authenticateUser(username, password) {
+    // Implement Meteor-specific login logic
+    try {
+      const selector = AuthService.getUserQuerySelector(username);
+      return new Promise((resolve, reject) => {
+        Meteor.loginWithPassword(selector, password, (error) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(Meteor.user());
+          }
+        });
+      });
+
+    } catch (error) {
+      console.error('Meteor authentication failed:', error);
+      throw error;
+    }
+  }
+
+  static async authenticateToken() {
+    // Implement token validation logic using Meteor
+    try {
+      return new Promise((resolve, reject) => {
+        const token = localStorage.getItem('Meteor.loginToken');
+        if (token) {
+          Meteor.loginWithToken(token, (error) => {
+            if (error) {
+              reject(error);
+            }
+            resolve(Meteor.user());
+          })
+        }
+        resolve(null);
+      });
+    } catch (error) {
+      console.error('Token validation failed:', error);
+      throw error;
+    }
+  }
+
+  static async getUserAuthorizations(userId) {
+    // Implement logic to fetch user permissions from Meteor
+    try {
+      return new Promise((resolve) => {
+        const roles = Roles.getRolesForUser(userId);
+        resolve(roles);
+      });
+    } catch (error) {
+      console.error('Failed to fetch user permissions:', error);
+      throw error;
+    }
+  }
+
+  static async deauthenticateUser() {
+    // Implement logout logic using Meteor
+    try {
+      return new Promise((resolve, reject) => {
+        Meteor.logout((error) => {
+          if (error) {
+            reject(error);
+          }
+          resolve(true);
+        });
+      });
+    } catch (error) {
+      console.error('Logout failed:', error);
+    }
+  }
+
+  static async registerNewUser(username: string, password: string) {
+    try {
+      const selector = AuthService.getUserQuerySelector(username);
+      selector.password = password;
+
+      // Implement user registration logic using Meteor
+      const user = await Accounts.createUserAsync(selector);
+      return user;
+    } catch (error) {
+      console.error('Registration failed:', error);
+      throw error;
+    }
+  }
+
+  static async sendForgotPasswordEmail(email: string) {
+    try {
+      // Implement password reset logic using Meteor
+      return new Promise ((resolve, reject) => {
+        Accounts.forgotPassword({ email }, (error) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(true);
+          }
+        });
+      });
+    } catch (error) {
+      console.error('Password reset failed:', error);
+      throw error;
+    }
+  }
+
+  static async resetPasswordWithToken(token: string, password: string) {
+    try {
+      // Implement password reset logic using Meteor
+      return new Promise ((resolve, reject) => {
+        Accounts.resetPassword(token, password, (error) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(true);
+          }
+        });
+      });
+    } catch (error) {
+      console.error('Password reset failed:', error);
+      throw error;
+    }
+  }
+}
+
+export default AuthService;

package/bundle/obf/src/templates/react/kit/esri/map/basic-map.js.jsx

@@ -10,10 +10,12 @@ const <%= componentName %> = () => {
 
     // Check if an element with id "app-bar" exists
     const appBar = document.getElementById('app-bar');
+    const footer = document.getElementById('footer');
     if (appBar) {
-      const appBarHeight = appBar.getBoundingClientRect().height;
+      const appBarHeight = appBar ? appBar.getBoundingClientRect().height : 0;
+      const footerHeight = footer ? footer.getBoundingClientRect().height : 0;
       const windowHeight = window.innerHeight;
-      const adjustedHeight = windowHeight - appBarHeight;
+      const adjustedHeight = windowHeight - appBarHeight - footerHeight;
       setMapHeight(`${adjustedHeight}px`);
     }
   }, []); // Empty dependency array means this useEffect runs once, similar to componentDidMount

package/bundle/obf/src/templates/react/kit/esri/map/basic-map.js.tsx

@@ -14,10 +14,12 @@ const <%= componentName %> = () => {
 
     // Check if an element with id "app-bar" exists
     const appBar = document.getElementById('app-bar');
+    const footer = document.getElementById('footer');
     if (appBar) {
-      const appBarHeight = appBar.getBoundingClientRect().height;
+      const appBarHeight = appBar ? appBar.getBoundingClientRect().height : 0;
+      const footerHeight = footer ? footer.getBoundingClientRect().height : 0;
       const windowHeight = window.innerHeight;
-      const adjustedHeight = windowHeight - appBarHeight;
+      const adjustedHeight = windowHeight - appBarHeight - footerHeight;
       setMapHeight(`${adjustedHeight}px`);
     }
   }, []); // Empty dependency array means this useEffect runs once, similar to componentDidMount
@@ -27,4 +29,4 @@ const <%= componentName %> = () => {
   );
 };
 
-export { <%= componentName %> }
+export { <%= componentName %> }

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

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button } from '@mui/material';
+import { browserHistory } from 'react-router';
+
+export const BasicForgotPasswordPage = () => {
+  const { forgotPassword } = useContext(AuthContext);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const { email } = event.target;
+    await forgotPassword(email.value);
+    browserHistory.push('/');
+  };
+
+  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={() => browserHistory.push('/login')} fullWidth>
+            Back to Login
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+};
+

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

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import { Container, Paper, Typography, TextField, Button } from '@mui/material';
+import { browserHistory } from 'react-router';
+
+export const BasicForgotPasswordPage = () => {
+  const { forgotPassword } = useContext(AuthContext);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const { email } = event.target;
+    await forgotPassword(email.value);
+    browserHistory.push('/');
+  };
+
+  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={() => browserHistory.push('/login')} fullWidth>
+            Back to Login
+          </Button>
+        </form>
+      </Paper>
+    </Container>
+  );
+};