create-nara 0.1.0

package/templates/svelte/resources/js/components/UserModal.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+  import { fly, fade, scale } from 'svelte/transition';
+  import { backOut } from 'svelte/easing';
+  import type { UserForm } from '../types';
+  import { createEventDispatcher } from 'svelte';
+
+  export let show: boolean = false;
+  export let mode: 'create' | 'edit' = 'create';
+  export let form: UserForm;
+  export let isSubmitting: boolean = false;
+
+  const dispatch = createEventDispatcher<{
+    close: void;
+    submit: UserForm;
+  }>();
+
+  function handleClose(): void {
+    dispatch('close');
+  }
+
+  function handleSubmit(): void {
+    dispatch('submit', form);
+  }
+
+  function handleBackdropClick(e: MouseEvent): void {
+    if (e.target === e.currentTarget) {
+      handleClose();
+    }
+  }
+</script>
+
+{#if show}
+  <!-- Backdrop -->
+  <div 
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
+    on:click={handleBackdropClick}
+    on:keydown={(e) => e.key === 'Escape' && handleClose()}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="modal-title"
+    tabindex="-1"
+    transition:fade={{ duration: 300 }}
+  >
+    <!-- Background Blur & Overlay -->
+    <div class="absolute inset-0 bg-black/70 backdrop-blur-md"></div>
+    
+    <!-- Decorative Elements -->
+    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-accent-500/10 rounded-full blur-3xl pointer-events-none"></div>
+    <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-primary-500/10 rounded-full blur-3xl pointer-events-none"></div>
+
+    <!-- Modal Container -->
+    <div 
+      class="relative w-full max-w-lg"
+      transition:fly={{ y: 50, duration: 500, easing: backOut }}
+    >
+      <!-- Glowing Border Effect -->
+      <div class="absolute -inset-px bg-gradient-to-br from-accent-500/50 via-transparent to-primary-500/50 rounded-3xl blur-sm opacity-60"></div>
+      
+      <!-- Modal Content -->
+      <div class="relative bg-white dark:bg-surface-dark rounded-3xl border border-slate-200 dark:border-white/10 overflow-hidden shadow-2xl">
+        
+        <!-- Header -->
+        <div class="relative px-8 pt-8 pb-6 border-b border-slate-100 dark:border-white/5">
+          <!-- Decorative Line -->
+          <div class="absolute top-0 left-8 right-8 h-px bg-gradient-to-r from-transparent via-accent-500/50 to-transparent"></div>
+          
+          <div class="flex items-start justify-between">
+            <div>
+              <p class="text-[10px] font-bold uppercase tracking-[0.3em] text-accent-600 dark:text-accent-400 mb-2">
+                {mode === 'create' ? 'New Entry' : 'Edit Entry'}
+              </p>
+              <h3 id="modal-title" class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">
+                {mode === 'create' ? 'Create User' : 'Update User'}
+              </h3>
+            </div>
+            
+            <!-- Close Button -->
+            <button
+              class="group w-10 h-10 flex items-center justify-center rounded-full border border-slate-200 dark:border-white/10 hover:border-red-500/50 hover:bg-red-500/5 transition-all duration-300"
+              on:click={handleClose}
+              disabled={isSubmitting}
+              aria-label="Close modal"
+            >
+              <svg class="w-4 h-4 text-slate-400 group-hover:text-red-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Form -->
+        <form class="p-8 space-y-6" on:submit|preventDefault={handleSubmit}>
+          
+          <!-- Name Field -->
+          <div class="group">
+            <label for="user-name" class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-3">
+              Full Name
+            </label>
+            <div class="relative">
+              <input
+                id="user-name"
+                class="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-slate-200 dark:border-white/10 text-lg text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-slate-600 focus:border-accent-500 dark:focus:border-accent-400 focus:ring-0 outline-none transition-colors"
+                type="text"
+                bind:value={form.name}
+                placeholder="Enter full name"
+              />
+              <div class="absolute bottom-0 left-0 w-0 h-0.5 bg-accent-500 group-focus-within:w-full transition-all duration-500"></div>
+            </div>
+          </div>
+
+          <!-- Email Field -->
+          <div class="group">
+            <label for="user-email" class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-3">
+              Email Address
+            </label>
+            <div class="relative">
+              <input
+                id="user-email"
+                class="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-slate-200 dark:border-white/10 text-lg text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-slate-600 focus:border-accent-500 dark:focus:border-accent-400 focus:ring-0 outline-none transition-colors"
+                type="email"
+                bind:value={form.email}
+                placeholder="user@example.com"
+              />
+            </div>
+          </div>
+
+          <!-- Phone Field -->
+          <div class="group">
+            <label for="user-phone" class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-3">
+              Phone Number
+              <span class="text-slate-400 dark:text-slate-600 font-normal normal-case tracking-normal ml-1">(optional)</span>
+            </label>
+            <div class="relative">
+              <input
+                id="user-phone"
+                class="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-slate-200 dark:border-white/10 text-lg text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-slate-600 focus:border-purple-500 dark:focus:border-purple-400 focus:ring-0 outline-none transition-colors font-mono"
+                type="text"
+                bind:value={form.phone}
+                placeholder="+62 xxx xxxx xxxx"
+              />
+            </div>
+          </div>
+
+          <!-- Role & Status Toggles -->
+          <div class="grid grid-cols-2 gap-4 pt-2">
+            <!-- Admin Toggle -->
+            <label class="group relative flex items-center gap-4 p-4 rounded-2xl border border-slate-200 dark:border-white/10 hover:border-accent-500/30 cursor-pointer transition-all duration-300 {form.is_admin ? 'bg-accent-500/5 border-accent-500/30' : ''}">
+              <div class="relative">
+                <input
+                  type="checkbox"
+                  class="sr-only peer"
+                  bind:checked={form.is_admin}
+                />
+                <div class="w-12 h-7 bg-slate-200 dark:bg-white/10 rounded-full peer-checked:bg-accent-500 transition-colors"></div>
+                <div class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full shadow-md transform peer-checked:translate-x-5 transition-transform"></div>
+              </div>
+              <div>
+                <p class="text-sm font-bold text-slate-900 dark:text-white">Admin</p>
+                <p class="text-[10px] text-slate-400 dark:text-slate-500">Full access</p>
+              </div>
+            </label>
+
+            <!-- Verified Toggle -->
+            <label class="group relative flex items-center gap-4 p-4 rounded-2xl border border-slate-200 dark:border-white/10 hover:border-primary-500/30 cursor-pointer transition-all duration-300 {form.is_verified ? 'bg-primary-500/5 border-primary-500/30' : ''}">
+              <div class="relative">
+                <input
+                  type="checkbox"
+                  class="sr-only peer"
+                  bind:checked={form.is_verified}
+                />
+                <div class="w-12 h-7 bg-slate-200 dark:bg-white/10 rounded-full peer-checked:bg-primary-500 transition-colors"></div>
+                <div class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full shadow-md transform peer-checked:translate-x-5 transition-transform"></div>
+              </div>
+              <div>
+                <p class="text-sm font-bold text-slate-900 dark:text-white">Verified</p>
+                <p class="text-[10px] text-slate-400 dark:text-slate-500">Email confirmed</p>
+              </div>
+            </label>
+          </div>
+
+          <!-- Password Field -->
+          <div class="group pt-2">
+            <label for="user-password" class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400 mb-3">
+              {mode === 'create' ? 'Password' : 'New Password'}
+              <span class="text-slate-400 dark:text-slate-600 font-normal normal-case tracking-normal ml-1">(optional)</span>
+            </label>
+            <div class="relative">
+              <input
+                id="user-password"
+                class="w-full px-0 py-3 bg-transparent border-0 border-b-2 border-slate-200 dark:border-white/10 text-lg text-slate-900 dark:text-white placeholder-slate-300 dark:placeholder-slate-600 focus:border-accent-500 dark:focus:border-accent-400 focus:ring-0 outline-none transition-colors"
+                type="password"
+                bind:value={form.password}
+                placeholder={mode === 'create' ? 'Leave empty to use email' : 'Leave empty to keep current'}
+              />
+            </div>
+          </div>
+
+          <!-- Actions -->
+          <div class="flex items-center justify-end gap-4 pt-6 border-t border-slate-100 dark:border-white/5">
+            <button
+              type="button"
+              class="px-6 py-3 text-xs font-bold uppercase tracking-wider text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors disabled:opacity-50"
+              on:click={handleClose}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              class="group relative px-8 py-3 bg-slate-900 dark:bg-white text-white dark:text-black text-xs font-bold uppercase tracking-wider rounded-full overflow-hidden hover:scale-105 active:scale-95 transition-transform disabled:opacity-50 disabled:hover:scale-100"
+              disabled={isSubmitting}
+            >
+              <span class="relative z-10 flex items-center gap-2">
+                {#if isSubmitting}
+                  <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                  </svg>
+                  Saving...
+                {:else}
+                  {mode === 'create' ? 'Create User' : 'Save Changes'}
+                  <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                {/if}
+              </span>
+              <div class="absolute inset-0 bg-gradient-to-r from-accent-500 to-primary-500 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+{/if}

package/templates/svelte/resources/js/components/helper.ts

@@ -0,0 +1,300 @@
+/**
+ * Svelte action return type
+ */
+interface ActionReturn {
+  destroy(): void;
+}
+
+/**
+ * Get CSRF token from cookie
+ * Used for protecting state-changing requests (POST, PUT, DELETE)
+ * 
+ * @returns CSRF token string or undefined if not found
+ * 
+ * @example
+ * const token = getCSRFToken();
+ * fetch('/api/data', {
+ *   method: 'POST',
+ *   headers: {
+ *     'X-CSRF-Token': token || '',
+ *     'Content-Type': 'application/json',
+ *   },
+ *   body: JSON.stringify(data),
+ * });
+ */
+export function getCSRFToken(): string | undefined {
+  return document.cookie.match(/csrf_token=([^;]+)/)?.[1];
+}
+
+/**
+ * Configure axios instance with CSRF token
+ * Call this once at app initialization to automatically include CSRF token in all requests
+ * 
+ * @param axiosInstance - Axios instance to configure
+ * 
+ * @example
+ * import axios from 'axios';
+ * import { configureAxiosCSRF } from '$lib/helper';
+ * 
+ * configureAxiosCSRF(axios);
+ */
+export function configureAxiosCSRF(axiosInstance: { interceptors: { request: { use: (fn: (config: any) => any) => void } } }): void {
+  axiosInstance.interceptors.request.use((config: any) => {
+    const token = getCSRFToken();
+    if (token && ['post', 'put', 'patch', 'delete'].includes(config.method?.toLowerCase() || '')) {
+      config.headers = config.headers || {};
+      config.headers['X-CSRF-Token'] = token;
+    }
+    return config;
+  });
+}
+
+/**
+ * API response type
+ */
+export interface ApiResponse<T = unknown> {
+  success: boolean;
+  message: string;
+  data?: T;
+  code?: string;
+  errors?: Record<string, string[]>;
+}
+
+/**
+ * API options type
+ */
+interface ApiOptions {
+  showSuccessToast?: boolean;
+  showErrorToast?: boolean;
+}
+
+/** 
+ * Creates a click outside event listener for a DOM node
+ */
+export function clickOutside(node: HTMLElement): ActionReturn {
+  const handleClick = (event: MouseEvent): void => {
+    if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent('click_outside'));
+    }
+  };
+
+  document.addEventListener('click', handleClick, true);
+  
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    }
+  };
+}
+
+/**
+ * Generates a random password with a mix of letters, numbers and special characters
+ */
+export function password_generator(pLength: number): string {
+  const keyListAlpha = "abcdefghijklmnopqrstuvwxyz";
+  const keyListInt = "123456789";
+  const keyListSpec = "!@#_";
+  let password = '';
+  let len = Math.ceil(pLength / 2);
+  len = len - 1;
+  const lenSpec = pLength - 2 * len;
+
+  for (let i = 0; i < len; i++) {
+    password += keyListAlpha.charAt(Math.floor(Math.random() * keyListAlpha.length));
+    password += keyListInt.charAt(Math.floor(Math.random() * keyListInt.length));
+  }
+
+  for (let i = 0; i < lenSpec; i++) {
+    password += keyListSpec.charAt(Math.floor(Math.random() * keyListSpec.length));
+  }
+
+  password = password.split('').sort(() => 0.5 - Math.random()).join('');
+
+  return password;
+}
+
+/**
+ * Creates a debounced version of a function that delays its execution
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  func: T, 
+  timeout: number = 300
+): (...args: Parameters<T>) => void {
+  let timer: ReturnType<typeof setTimeout>;
+  return (...args: Parameters<T>): void => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func(...args);
+    }, timeout);
+  };
+}
+
+/**
+ * Format validation errors object into a readable string
+ */
+function formatValidationErrors(errors: Record<string, string[]> | undefined): string {
+  if (!errors || typeof errors !== 'object') return '';
+  
+  const messages: string[] = [];
+  for (const [field, fieldErrors] of Object.entries(errors)) {
+    if (Array.isArray(fieldErrors) && fieldErrors.length > 0) {
+      messages.push(`${field}: ${fieldErrors[0]}`);
+    }
+  }
+  return messages.join('; ');
+}
+
+/**
+ * Standardized API call wrapper that handles JSON responses from backend
+ */
+export async function api<T = unknown>(
+  axiosCall: () => Promise<{ data: ApiResponse<T> }>,
+  options: ApiOptions = {}
+): Promise<ApiResponse<T>> {
+  const { showSuccessToast = true, showErrorToast = true } = options;
+  
+  try {
+    const response = await axiosCall();
+    const result = response.data;
+    
+    if (result.success) {
+      if (showSuccessToast && result.message) {
+        Toast(result.message, 'success');
+      }
+      return { success: true, message: result.message, data: result.data };
+    } else {
+      if (showErrorToast) {
+        const errorMsg = result.errors 
+          ? formatValidationErrors(result.errors) || result.message 
+          : result.message;
+        if (errorMsg) Toast(errorMsg, 'error');
+      }
+      return { success: false, message: result.message, code: result.code, errors: result.errors };
+    }
+  } catch (error: unknown) {
+    const axiosError = error as { response?: { data?: ApiResponse } };
+    const message = axiosError?.response?.data?.message || 'Terjadi kesalahan, coba lagi';
+    const code = axiosError?.response?.data?.code;
+    const errors = axiosError?.response?.data?.errors;
+    
+    if (showErrorToast) {
+      const errorMsg = errors 
+        ? formatValidationErrors(errors) || message 
+        : message;
+      Toast(errorMsg, 'error');
+    }
+    
+    return { success: false, message, code, errors };
+  }
+}
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+/**
+ * Displays a toast notification message
+ */
+export function Toast(text: string, type: ToastType = "success", duration: number = 3000): void {
+    // Create toast container if it doesn't exist
+    let container = document.getElementById('toast-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'toast-container';
+        container.style.cssText = `
+            position: fixed;
+            bottom: 24px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 9999;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+        `;
+        document.body.appendChild(container);
+    }
+
+    // Create toast element
+    const toast = document.createElement('div');
+    toast.style.cssText = `
+        min-width: 300px;
+        max-width: 90vw;
+        margin: 0;
+        padding: 12px 16px;
+        border-radius: 8px;
+        color: white;
+        font-size: 14px;
+        font-weight: 500;
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+        transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.1);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        backdrop-filter: blur(8px);
+    `;
+
+    // Define icons for different types with refined styling
+    const icons: Record<ToastType, string> = {
+        success: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`,
+        error: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`,
+        warning: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`,
+        info: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>`
+    };
+
+    // Set background color based on type with refined colors
+    let iconType: ToastType = type;
+    switch(type) {
+        case 'success':
+            toast.style.backgroundColor = 'rgba(34, 197, 94, 0.95)';
+            break;
+        case 'error':
+            toast.style.backgroundColor = 'rgba(239, 68, 68, 0.95)';
+            break;
+        case 'warning':
+            toast.style.backgroundColor = 'rgba(245, 158, 11, 0.95)';
+            break;
+        default:
+            toast.style.backgroundColor = 'rgba(59, 130, 246, 0.95)';
+            iconType = 'info';
+    }
+
+    // Add icon and text with improved styling
+    const iconWrapper = document.createElement('div');
+    iconWrapper.style.cssText = `
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    `;
+    iconWrapper.innerHTML = icons[iconType];
+
+    const textWrapper = document.createElement('div');
+    textWrapper.style.cssText = `
+        flex-grow: 1;
+        line-height: 1.4;
+    `;
+    textWrapper.textContent = text;
+
+    toast.appendChild(iconWrapper);
+    toast.appendChild(textWrapper);
+    container.appendChild(toast);
+
+    // Enhanced animation
+    requestAnimationFrame(() => {
+        toast.style.opacity = '1';
+        toast.style.transform = 'translateY(0) scale(1)';
+    });
+
+    // Remove toast after duration with smooth exit animation
+    setTimeout(() => {
+        toast.style.opacity = '0';
+        toast.style.transform = 'translateY(-20px) scale(0.95)';
+        setTimeout(() => {
+            container.removeChild(toast);
+            if (container.children.length === 0) {
+                document.body.removeChild(container);
+            }
+        }, 200);
+    }, duration);
+}

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+    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";
+
+    interface ForgotPasswordForm {
+        email: string;
+        phone: string;
+    }
+
+    let form: ForgotPasswordForm = {
+        email: "",
+        phone: "",
+    };
+
+    let success: boolean = $state(false);
+    let { error }: { error?: string } = $props();
+
+    $effect(() => {
+        if (error) Toast(error, 'error');
+    });
+
+    async function submitForm(): Promise<void> {
+        const result = await api(() => axios.post("/forgot-password", form));
+        
+        if (result.success) {
+            success = true;
+            form.email = "";
+            form.phone = "";
+        }
+    }
+</script>
+
+<section class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-slate-50">
+    <!-- Header with dark mode toggle -->
+    <header class="fixed inset-x-0 top-0 z-40 border-b border-slate-800/60 bg-slate-950/80 backdrop-blur-xl">
+        <div class="max-w-6xl mx-auto flex h-16 items-center justify-between px-4 sm:h-20 sm:px-6 lg:px-8">
+            <a href="/" use:inertia class="flex items-center gap-2">
+                <img src="/public/nara.png" alt="Nara logo" class="h-7 w-7 rounded-lg object-cover" />
+                <div class="flex flex-col leading-tight">
+                    <span class="text-sm font-semibold tracking-tight text-slate-50">Nara</span>
+                    <span class="text-[10px] uppercase tracking-[0.22em] text-slate-500">TypeScript framework</span>
+                </div>
+            </a>
+            <div class="flex items-center gap-3">
+                <DarkModeToggle />
+            </div>
+        </div>
+    </header>
+
+    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto min-h-screen lg:py-0">
+        <div class="flex items-center mb-6 text-2xl font-semibold text-slate-50">
+            <NaraIcon></NaraIcon>
+        </div>
+        <div class="w-full max-w-md rounded-3xl border border-slate-800/80 bg-slate-900/70 backdrop-blur-xl shadow-[0_24px_80px_rgba(15,23,42,0.8)] md:mt-0 sm:max-w-md xl:p-0">
+            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+                <h1 class="text-xl font-bold leading-tight tracking-tight text-slate-50 md:text-2xl">
+                    Reset Password
+                </h1>
+
+                {#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.
+                    </div>
+                {/if}
+
+                <form
+                    class="space-y-4 md:space-y-6"
+                    on:submit|preventDefault={submitForm}
+                >
+                    <div>
+                        <label for="email" class="block mb-2 text-sm font-medium text-slate-200">Email atau Nomor Telepon</label>
+                        <input
+                            bind:value={form.email}
+                            type="text"
+                            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"
+                            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>
+
+                    <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>
+                    </p>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>