create-nara 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nara",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "CLI to scaffold NARA projects",
   "type": "module",
   "bin": {

package/templates/features/uploads/app/controllers/AssetController.ts

@@ -0,0 +1,226 @@
+import { randomUUID } from "crypto";
+import type { NaraRequest, NaraResponse } from "@core";
+import { BaseController, jsonError, jsonServerError, jsonSuccess } from "@core";
+import fs from "fs";
+import path from "path";
+import sharp from "sharp";  
+import { Asset, User } from "@models";
+import Logger from "@services/Logger";
+import { Storage } from '@services';
+import { UPLOAD } from '@config/constants';
+
+
+
+// Cache object to store file contents in memory
+let cache: { [key: string]: Buffer } = {};
+
+class AssetController extends BaseController {
+    /**
+     * Serves assets from the dist folder (compiled assets)
+     * - Handles CSS and JS files with proper content types
+     * - Implements file caching for better performance
+     * - Sets appropriate cache headers for browser caching
+     */
+
+    public async uploadAsset(request: NaraRequest, response: NaraResponse) {
+        this.requireAuth(request);
+
+        // Store user reference for use in nested callbacks
+        const userId = request.user.id;
+        console.log('[AVATAR DEBUG] Upload started for user:', userId);
+
+        try { 
+            let isValidFile = true;
+
+            await request.multipart(async (field: any) => {
+                if (field.file) {
+                    if (!field.mime_type.includes("image")) {
+                        console.log('[AVATAR DEBUG] File mime_type:', field.mime_type);
+                        isValidFile = false;
+                        return;
+                    }
+
+                    const id = randomUUID();
+                    const fileName = `${id}.webp`; 
+
+                    // Create a buffer to store the image data
+                    const chunks: Buffer[] = [];
+                    const readable = field.file.stream;
+
+                    readable.on('data', (chunk: Buffer) => {
+                        chunks.push(chunk);
+                    });
+
+                    readable.on('end', async () => {
+                        const buffer = Buffer.concat(chunks);
+                        console.log('[AVATAR DEBUG] Total buffer length received:', buffer.length);
+
+                        try {
+                            // Process image with Sharp and get buffer
+                            const processedBuffer = await sharp(buffer)
+                                .webp({ quality: 80 }) // Convert to WebP with 80% quality
+                                .resize(1200, 1200, { // Resize to max 1200x1200 while maintaining aspect ratio
+                                    fit: 'inside',
+                                    withoutEnlargement: true
+                                })
+                                .toBuffer();
+                            console.log('[AVATAR DEBUG] Processed buffer length (WebP):', processedBuffer.length);
+
+                            // Store processed image using Storage service
+                            const storedFile = await Storage.put(processedBuffer, {
+                                directory: UPLOAD.AVATAR_DIR,
+                                name: id,
+                                extension: 'webp'
+                            console.log('[AVATAR DEBUG] File stored at:', storedFile.url);
+                            });
+
+                            // Build public URL for the saved file
+                            const publicUrl = storedFile.url;
+
+                            // Save to assets table with local file reference
+                            await Asset.create({
+                                id,
+                                type: 'image',
+                                url: publicUrl,
+                                mime_type: 'image/webp',
+                                name: fileName,
+                                size: processedBuffer.length,
+                                user_id: userId,
+                            });
+
+                            // Update user avatar in users table
+                            await User.updateAvatar(userId, publicUrl);
+
+                            // Return success response with public URL
+                            console.log('[AVATAR DEBUG] Returning public URL:', publicUrl);
+                            jsonSuccess(response, 'Avatar berhasil diupload', { url: publicUrl });
+                        } catch (err) {
+                            Logger.error('Error processing and uploading image', err as Error);
+                            jsonServerError(response, 'Gagal memproses dan mengupload gambar');
+                        }
+                    });
+                }
+            });
+
+            if (!isValidFile) {
+                return jsonError(response, "Invalid file type. Only images are allowed.", 400, "INVALID_FILE_TYPE");
+            }
+
+        } catch (error) {
+            Logger.error('Error uploading asset', error as Error);
+            return jsonServerError(response, "Internal server error");
+        }
+    }
+
+    public async distFolder(request: NaraRequest, response: NaraResponse) {
+        const file = request.params.file;
+
+        try {
+            const filePath = `dist/assets/${file}`;
+
+            // Set appropriate content type based on file extension
+            if (file.endsWith(".css")) {
+                response.setHeader("Content-Type", "text/css");
+            } else if (file.endsWith(".js")) {
+                response.setHeader("Content-Type", "application/javascript");
+            } else {
+                response.setHeader("Content-Type", "application/octet-stream");
+            }
+
+            // Set cache control header for browser caching (1 year)
+            response.setHeader("Cache-Control", "public, max-age=31536000");
+
+            // Return cached content if available
+            if (cache[file]) {
+                return response.send(cache[file]);
+            }
+
+            // Check if file exists and serve it
+            if (await fs.promises.access(filePath).then(() => true).catch(() => false)) {
+                const fileContent = await fs.promises.readFile(filePath);
+                
+                // Cache the file content
+                cache[file] = fileContent;
+
+                return response.send(fileContent);
+            }
+
+            return response.status(404).send("File not found");
+        } catch (error) {
+            Logger.error('Error serving dist file', error as Error);
+            return response.status(500).send("Internal server error");
+        }
+    }
+
+    /**
+     * Serves static files from the public folder
+     * - Implements security by checking allowed file extensions
+     * - Prevents directory traversal attacks
+     * - Handles various file types (images, fonts, documents, etc.)
+     */
+    public async publicFolder(request: NaraRequest, response: NaraResponse) {
+        // List of allowed file extensions for security
+        const allowedExtensions = [
+            '.ico', '.png', '.jpeg', '.jpg', '.gif', '.svg', '.webp',
+            '.txt', '.pdf', '.css', '.js',
+            '.woff', '.woff2', '.ttf', '.eot',
+            '.mp4', '.webm', '.mp3', '.wav'
+        ];
+
+        // Get the requested path and decode URL encoding
+        const requestedPath = decodeURIComponent(request.path);
+
+        // Security: Remove leading slash and normalize
+        const relativePath = requestedPath.replace(/^\/+/, '');
+
+        // Security: Check for path traversal attempts BEFORE any path operations
+        // Block any path containing .. or encoded variants
+        if (relativePath.includes('..') ||
+            relativePath.includes('%2e') ||
+            relativePath.includes('%2E') ||
+            relativePath.includes('\0')) {
+            Logger.logSecurity('Path traversal attempt blocked', {
+                requestedPath,
+                ip: request.ip
+            });
+            return response.status(403).send('Access denied');
+        }
+
+        // Check if the path has any extension
+        if (!relativePath.includes('.')) {
+            return response.status(404).send('Page not found');
+        }
+
+        // Security check: validate file extension
+        if (!allowedExtensions.some(ext => relativePath.toLowerCase().endsWith(ext))) {
+            return response.status(403).send('File type not allowed');
+        }
+
+        // Resolve the absolute path and verify it's within public directory
+        const publicDir = path.resolve(process.cwd(), 'public');
+        const storageDir = path.resolve(process.cwd(), 'storage');
+        const resolvedPath = path.resolve(process.cwd(), relativePath);
+
+        // Security: Ensure the resolved path is within the public or storage directory
+        if (!resolvedPath.startsWith(publicDir) && !resolvedPath.startsWith(storageDir)) {
+            Logger.logSecurity('Path traversal attempt blocked (resolved path escape)', {
+                requestedPath,
+                resolvedPath,
+                publicDir,
+                storageDir,
+                ip: request.ip
+            });
+            return response.status(403).send('Access denied');
+        }
+
+        // Check if file exists
+        if (!fs.existsSync(resolvedPath)) {
+            return response.status(404).send('File not found');
+        }
+
+        // Serve the file
+        return response.download(resolvedPath);
+    }
+}
+
+export default new AssetController();

package/templates/svelte/resources/js/pages/profile.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { fly } from 'svelte/transition';
-  import Header from "../components/Header.svelte";
-  import { Toast } from "../components/helper";
+  import axios from "axios";
+  import Header from "../Components/Header.svelte";
+  import { api, Toast } from "../Components/helper";
 
   interface User {
     id: string;
@@ -21,104 +22,64 @@
   let isLoading: boolean = false;
   let previewUrl: string | null = user.avatar || null;
 
-  async function handleAvatarChange(event: Event): Promise<void> {
+  function handleAvatarChange(event: Event): void {
     const target = event.target as HTMLInputElement;
     const file = target.files?.[0];
+    if (file) console.log('[AVATAR DEBUG] Uploading file:', file.name, 'Size:', file.size, 'Type:', file.type);
     if (file) {
       const formData = new FormData();
       formData.append("file", file);
       isLoading = true;
-
-      try {
-        const response = await fetch('/api/profile/avatar', {
-          method: 'POST',
-          body: formData
+      console.log('[AVATAR DEBUG] Sending request to /assets/avatar');
+      axios
+        .post("/assets/avatar", formData)
+        .then((response) => {
+          console.log('[AVATAR DEBUG] Upload response:', response.data);
+          setTimeout(() => {
+            isLoading = false;
+            previewUrl = response.data.data.url + "?v=" + Date.now();
+            console.log('[AVATAR DEBUG] previewUrl set to:', previewUrl);
+          }, 500);
+          user.avatar = response.data.data.url + "?v=" + Date.now();
+          Toast("Avatar berhasil diupload", "success");
+        })
+        .catch((error) => {
+          console.log('[AVATAR DEBUG] Upload failed:', error);
+          isLoading = false;
+          Toast("Gagal mengupload avatar", "error");
         });
-        const result = await response.json();
-
-        if (result.success) {
-          previewUrl = result.data?.url + "?v=" + Date.now();
-          user.avatar = result.data?.url;
-          Toast(result.message || "Avatar uploaded successfully", "success");
-        } else {
-          Toast(result.message || "Failed to upload avatar", "error");
-        }
-      } catch (err: unknown) {
-        const errorMessage = err instanceof Error ? err.message : 'Network error';
-        Toast(errorMessage, "error");
-      } finally {
-        isLoading = false;
-      }
     }
   }
 
   async function changeProfile(): Promise<void> {
     isLoading = true;
-    try {
-      const response = await fetch('/api/profile/update', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: user.name, email: user.email, phone: user.phone })
-      });
-      const result = await response.json();
-
-      if (result.success) {
-        Toast(result.message || 'Profile updated successfully', 'success');
-      } else {
-        if (result.errors) {
-          const errorMessages = Object.values(result.errors).flat() as string[];
-          Toast(errorMessages[0] || result.message || 'Failed to update profile', 'error');
-        } else {
-          Toast(result.message || 'Failed to update profile', 'error');
-        }
-      }
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : 'Network error';
-      Toast(errorMessage, 'error');
-    } finally {
-      isLoading = false;
-    }
+    await api(() => axios.post("/change-profile", user));
+    isLoading = false;
   }
 
   async function changePassword(): Promise<void> {
-    if (new_password !== confirm_password) {
-      Toast("Passwords do not match", "error");
+    if (new_password != confirm_password) {
+      Toast("Password tidak cocok", "error");
       return;
     }
 
     if (!current_password || !new_password || !confirm_password) {
-      Toast("Please fill in all fields", "error");
+      Toast("Mohon isi semua field", "error");
       return;
     }
 
     isLoading = true;
-    try {
-      const response = await fetch('/api/profile/password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ current_password, new_password })
-      });
-      const result = await response.json();
-
-      if (result.success) {
-        Toast(result.message || 'Password changed successfully', 'success');
-        current_password = "";
-        new_password = "";
-        confirm_password = "";
-      } else {
-        if (result.errors) {
-          const errorMessages = Object.values(result.errors).flat() as string[];
-          Toast(errorMessages[0] || result.message || 'Failed to change password', 'error');
-        } else {
-          Toast(result.message || 'Failed to change password', 'error');
-        }
-      }
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : 'Network error';
-      Toast(errorMessage, 'error');
-    } finally {
-      isLoading = false;
+    const result = await api(() => axios.post("/change-password", {
+      current_password,
+      new_password,
+    }));
+
+    if (result.success) {
+      current_password = "";
+      new_password = "";
+      confirm_password = "";
     }
+    isLoading = false;
   }
 </script>