create-nara 1.0.8 → 1.0.10

package/package.json

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

package/templates/features/auth/app/controllers/AuthController.ts

@@ -4,14 +4,13 @@ import bcrypt from 'bcrypt';
 import jwt from 'jsonwebtoken';
 
 const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key';
-const JWT_EXPIRES_IN = process.env.JWT_EXPIRES_IN || '7d';
+const JWT_EXPIRES_SECONDS = 7 * 24 * 60 * 60; // 7 days in seconds
 
 // Cookie options for auth token
 const COOKIE_OPTIONS = {
   httpOnly: true,
   secure: process.env.NODE_ENV === 'production',
   sameSite: 'lax' as const,
-  maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days in milliseconds
   path: '/',
 };
 
@@ -33,11 +32,11 @@ export class AuthController extends BaseController {
     const token = jwt.sign(
       { userId: 1, email, name: 'Demo User' },
       JWT_SECRET,
-      { expiresIn: JWT_EXPIRES_IN }
+      { expiresIn: JWT_EXPIRES_SECONDS }
     );
 
-    // Set auth cookie for web routes
-    res.cookie('auth_token', token, COOKIE_OPTIONS);
+    // Set auth cookie for web routes (maxAge in ms)
+    res.cookie('auth_token', token, JWT_EXPIRES_SECONDS * 1000, COOKIE_OPTIONS);
 
     return jsonSuccess(res, {
       user: { id: 1, email, name: 'Demo User' },
@@ -66,11 +65,11 @@ export class AuthController extends BaseController {
     const token = jwt.sign(
       { userId: 1, email, name },
       JWT_SECRET,
-      { expiresIn: JWT_EXPIRES_IN }
+      { expiresIn: JWT_EXPIRES_SECONDS }
     );
 
-    // Set auth cookie for web routes
-    res.cookie('auth_token', token, COOKIE_OPTIONS);
+    // Set auth cookie for web routes (maxAge in ms)
+    res.cookie('auth_token', token, JWT_EXPIRES_SECONDS * 1000, COOKIE_OPTIONS);
 
     return jsonSuccess(res, {
       user: { id: 1, email, name },
@@ -89,8 +88,8 @@ export class AuthController extends BaseController {
   }
 
   async logout(req: NaraRequest, res: NaraResponse) {
-    // Clear auth cookie
-    res.cookie('auth_token', '', { ...COOKIE_OPTIONS, maxAge: 0 });
+    // Clear auth cookie (set maxAge to 0)
+    res.cookie('auth_token', '', 0, COOKIE_OPTIONS);
 
     return jsonSuccess(res, { redirect: '/login' }, 'Logged out successfully');
   }

package/templates/features/auth/app/middlewares/auth.ts

@@ -49,7 +49,7 @@ export function webAuthMiddleware(req: NaraRequest, res: NaraResponse, next: ()
     next();
   } catch (error) {
     // Clear invalid token
-    res.cookie('auth_token', '', { maxAge: 0 });
+    res.cookie('auth_token', '', 0);
     if (req.headers['x-inertia']) {
       res.status(409).setHeader('X-Inertia-Location', '/login').send('');
     } else {
@@ -77,7 +77,7 @@ export function guestMiddleware(req: NaraRequest, res: NaraResponse, next: () =>
       return;
     } catch {
       // Invalid token, clear it and continue
-      res.cookie('auth_token', '', { maxAge: 0 });
+      res.cookie('auth_token', '', 0);
     }
   }
 

package/templates/svelte/resources/js/pages/auth/forgot-password.svelte

@@ -2,20 +2,18 @@
     import { inertia, router } from "@inertiajs/svelte";
     import NaraIcon from "../../components/NaraIcon.svelte";
     import DarkModeToggle from "../../components/DarkModeToggle.svelte";
-    import axios from "axios";
-    import { api, Toast } from "../../components/helper";
+    import { Toast } from "../../components/helper";
 
     interface ForgotPasswordForm {
         email: string;
-        phone: string;
     }
 
     let form: ForgotPasswordForm = {
         email: "",
-        phone: "",
     };
 
     let success: boolean = $state(false);
+    let loading: boolean = $state(false);
     let { error }: { error?: string } = $props();
 
     $effect(() => {
@@ -23,12 +21,29 @@
     });
 
     async function submitForm(): Promise<void> {
-        const result = await api(() => axios.post("/forgot-password", form));
-        
-        if (result.success) {
-            success = true;
-            form.email = "";
-            form.phone = "";
+        loading = true;
+        try {
+            const response = await fetch('/api/auth/forgot-password', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: form.email })
+            });
+            const result = await response.json();
+
+            if (result.success) {
+                success = true;
+                form.email = "";
+                Toast(result.message || 'Reset link sent!', 'success');
+            } else {
+                const errorMsg = result.errors
+                    ? Object.values(result.errors).flat().join(', ')
+                    : result.message || 'Failed to send reset link';
+                Toast(errorMsg, 'error');
+            }
+        } catch (err) {
+            Toast('An error occurred. Please try again.', 'error');
+        } finally {
+            loading = false;
         }
     }
 </script>
@@ -62,7 +77,7 @@
 
                 {#if success}
                     <div class="p-4 mb-4 text-sm text-green-400 rounded-lg bg-green-900/50" role="alert">
-                        Link reset password telah dikirim ke email atau nomor telepon Anda.
+                        Password reset link has been sent to your email.
                     </div>
                 {/if}
 
@@ -71,24 +86,24 @@
                     on:submit|preventDefault={submitForm}
                 >
                     <div>
-                        <label for="email" class="block mb-2 text-sm font-medium text-slate-200">Email atau Nomor Telepon</label>
+                        <label for="email" class="block mb-2 text-sm font-medium text-slate-200">Email</label>
                         <input
                             bind:value={form.email}
-                            type="text"
+                            type="email"
                             name="email"
                             id="email"
                             class="bg-slate-900/70 border border-slate-700 text-slate-50 sm:text-sm rounded-lg focus:ring-2 focus:ring-primary-400 focus:border-primary-400 focus:outline-none block w-full py-2.5 px-3 placeholder-slate-500"
-                            placeholder="email@example.com atau 08xxxxxxxxxx"
+                            placeholder="email@example.com"
                             required
                         />
                     </div>
 
-                    <button type="submit" class="w-full text-sm font-medium rounded-full px-5 py-2.5 text-slate-950 bg-primary-400 hover:bg-primary-300 focus:ring-4 focus:outline-none focus:ring-primary-300">
-                        Kirim Link Reset Password
+                    <button type="submit" disabled={loading} class="w-full text-sm font-medium rounded-full px-5 py-2.5 text-slate-950 bg-primary-400 hover:bg-primary-300 focus:ring-4 focus:outline-none focus:ring-primary-300 disabled:opacity-50">
+                        {loading ? 'Sending...' : 'Send Reset Link'}
                     </button>
 
                     <p class="text-sm font-light text-slate-400">
-                        Ingat password Anda? <a href="/login" use:inertia class="font-medium text-primary-400 hover:underline">Login disini</a>
+                        Remember your password? <a href="/login" use:inertia class="font-medium text-primary-400 hover:underline">Login here</a>
                     </p>
                 </form>
             </div>

package/templates/svelte/resources/js/pages/auth/login.svelte

@@ -19,14 +19,37 @@
     password: '',
   }
 
+  let loading = $state(false);
   let { error }: { error?: string } = $props();
 
   $effect(() => {
     if (error) Toast(error, 'error');
   });
 
-  function submitForm(): void {
-    router.post("/login", { email: form.email, password: form.password })
+  async function submitForm(): Promise<void> {
+    loading = true;
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: form.email, password: form.password })
+      });
+      const result = await response.json();
+
+      if (result.success) {
+        Toast(result.message || 'Login successful', 'success');
+        router.visit(result.data?.redirect || '/dashboard');
+      } else {
+        const errorMsg = result.errors
+          ? Object.values(result.errors).flat().join(', ')
+          : result.message || 'Login failed';
+        Toast(errorMsg, 'error');
+      }
+    } catch (err) {
+      Toast('An error occurred. Please try again.', 'error');
+    } finally {
+      loading = false;
+    }
   }
 </script>
 

package/templates/svelte/resources/js/pages/auth/register.svelte

@@ -13,38 +13,57 @@
     email: string;
     password: string;
     name: string;
-    phone: string;
-    password_confirmation: string;
   }
 
   let form: RegisterForm = {
     email: '',
     password: '',
     name: '',
-    phone: '',
-    password_confirmation: '', 
   }
 
+  let password_confirmation = $state('');
+  let loading = $state(false);
   let { error }: { error?: string } = $props();
 
   $effect(() => {
     if (error) Toast(error, 'error');
   });
 
-  function submitForm(): void {
-    if (form.password != form.password_confirmation) {
-      Toast("Password dan konfirmasi password harus sama", "error");
+  async function submitForm(): Promise<void> {
+    if (form.password !== password_confirmation) {
+      Toast("Password and confirmation must match", "error");
       return;
     }
- 
-    form.phone = form.phone.toString()
-    router.post("/register", form as any)
+
+    loading = true;
+    try {
+      const response = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: form.name, email: form.email, password: form.password })
+      });
+      const result = await response.json();
+
+      if (result.success) {
+        Toast(result.message || 'Registration successful', 'success');
+        router.visit(result.data?.redirect || '/dashboard');
+      } else {
+        const errorMsg = result.errors
+          ? Object.values(result.errors).flat().join(', ')
+          : result.message || 'Registration failed';
+        Toast(errorMsg, 'error');
+      }
+    } catch (err) {
+      Toast('An error occurred. Please try again.', 'error');
+    } finally {
+      loading = false;
+    }
   }
 
-  function generatePassword(): void { 
-    const retVal = password_generator(10); 
+  function generatePassword(): void {
+    const retVal = password_generator(10);
     form.password = retVal
-    form.password_confirmation = retVal
+    password_confirmation = retVal
   }
 </script>
 
@@ -144,7 +163,7 @@
                   </div>
                   <div class="space-y-1">
                       <label for="confirm-password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 ml-1">Confirm</label>
-                      <input bind:value={form.password_confirmation} type="password" name="confirm-password" id="confirm-password" 
+                      <input bind:value={password_confirmation} type="password" name="confirm-password" id="confirm-password" 
                           placeholder="••••••••" 
                           class="w-full px-5 py-3 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl focus:ring-2 focus:ring-info-500/50 focus:border-info-500 outline-none transition-all dark:text-white placeholder:text-slate-400" >
                   </div>

package/templates/svelte/resources/js/pages/auth/reset-password.svelte

@@ -6,11 +6,10 @@
 
   interface ResetPasswordForm {
     password: string;
-    password_confirmation: string;
-    id: string;
+    token: string;
   }
 
-  let { id, error }: { id: string, error?: string } = $props();
+  let { token, error }: { token: string, error?: string } = $props();
 
   $effect(() => {
     if (error) Toast(error, 'error');
@@ -18,23 +17,47 @@
 
   let form: ResetPasswordForm = {
     password: '',
-    password_confirmation: '',
-    id
+    token
   }
- 
-  function generatePassword(): void { 
-    const retVal = password_generator(10); 
+
+  let password_confirmation = $state('');
+  let loading = $state(false);
+
+  function generatePassword(): void {
+    const retVal = password_generator(10);
     form.password = retVal
-    form.password_confirmation = retVal
+    password_confirmation = retVal
   }
 
-  function submitForm(): void {
-    if (form.password != form.password_confirmation) {
-      Toast("Password dan konfirmasi password harus sama", "error")
+  async function submitForm(): Promise<void> {
+    if (form.password !== password_confirmation) {
+      Toast("Password and confirmation must match", "error")
       return;
     }
 
-    router.post(`/reset-password`, form as any)
+    loading = true;
+    try {
+      const response = await fetch('/api/auth/reset-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ password: form.password, token: form.token })
+      });
+      const result = await response.json();
+
+      if (result.success) {
+        Toast(result.message || 'Password reset successful', 'success');
+        router.visit('/login');
+      } else {
+        const errorMsg = result.errors
+          ? Object.values(result.errors).flat().join(', ')
+          : result.message || 'Password reset failed';
+        Toast(errorMsg, 'error');
+      }
+    } catch (err) {
+      Toast('An error occurred. Please try again.', 'error');
+    } finally {
+      loading = false;
+    }
   }
 </script>
 
@@ -67,7 +90,7 @@
 
         <form class="space-y-4 md:space-y-6" on:submit|preventDefault={submitForm}>
           <div>
-            <label for="password" class="block mb-2 text-sm font-medium text-slate-200">Password Baru</label>
+            <label for="password" class="block mb-2 text-sm font-medium text-slate-200">New Password</label>
             <input 
               bind:value={form.password}
               type="password" 
@@ -80,9 +103,9 @@
             <button type="button" on:click={generatePassword} class="text-xs text-slate-400 mt-1">Generate Password</button>
           </div>
           <div>
-            <label for="confirm-password" class="block mb-2 text-sm font-medium text-slate-200">Konfirmasi Password</label>
+            <label for="confirm-password" class="block mb-2 text-sm font-medium text-slate-200">Confirm Password</label>
             <input 
-              bind:value={form.password_confirmation}
+              bind:value={password_confirmation}
               type="password" 
               name="confirm-password" 
               id="confirm-password" 
@@ -97,7 +120,7 @@
           </button>
 
           <p class="text-sm font-light text-slate-400">
-            Ingat password Anda? <a href="/login" use:inertia class="font-medium text-primary-400 hover:underline">Login disini</a>
+            Remember your password? <a href="/login" use:inertia class="font-medium text-primary-400 hover:underline">Login here</a>
           </p>
         </form>
       </div>