create-elit 3.2.7 → 3.2.9

package/dist/templates/src/pages/ForgotPasswordPage.ts

@@ -0,0 +1,110 @@
+import { div, h1, h2, p, input, label, button, form, span, h3 } from 'elit/el';
+import { createState, reactive } from 'elit/state';
+import type { Router } from 'elit';
+
+export function ForgotPasswordPage(router: Router) {
+  const email = createState('');
+  const error = createState('');
+  const success = createState(false);
+  const isLoading = createState(false);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+
+    if (!email.value) {
+      error.value = 'Please enter your email address';
+      return;
+    }
+
+    if (!email.value.includes('@')) {
+      error.value = 'Please enter a valid email address';
+      return;
+    }
+
+    isLoading.value = true;
+    error.value = '';
+
+    // Simulate API call
+    setTimeout(() => {
+      isLoading.value = false;
+      success.value = true;
+      console.log('Password reset requested for:', email.value);
+    }, 1000);
+  };
+
+  return div({ className: 'auth-page' },
+    div({ className: 'auth-container auth-container-single' },
+      // Form side
+      div({ className: 'auth-form-wrapper auth-form-wrapper-full' },
+        div({ className: 'auth-form-card' },
+          div({ className: 'auth-header' },
+            button({
+              className: 'back-button',
+              onclick: () => router.push('/login')
+            }, '←'),
+            h2({ className: 'auth-title' }, 'Forgot Password?'),
+            p({ className: 'auth-subtitle' }, 'Enter your email address and we\'ll send you a link to reset your password')
+          ),
+
+          reactive(error, (err) => err ? div({ className: 'auth-error' }, err) : null),
+
+          reactive(success, (succ) => {
+            if (succ) {
+              return div({ className: 'success-message' },
+                div({ className: 'success-icon' }, '✓'),
+                h3({ className: 'success-title' }, 'Check your email'),
+                p({ className: 'success-text' },
+                  'We\'ve sent a password reset link to ',
+                  span({ className: 'success-email' }, email.value)
+                ),
+                p({ className: 'success-description' },
+                  'Didn\'t receive the email? Check your spam folder or try again.'
+                ),
+                button({
+                  className: 'btn btn-primary btn-block btn-lg',
+                  onclick: () => router.push('/login')
+                }, 'Back to Login')
+              );
+            }
+
+            return form({ onsubmit: handleSubmit },
+              div({ className: 'form-group' },
+                label({ htmlFor: 'email', className: 'form-label' }, 'Email Address'),
+                div({ className: 'input-wrapper' },
+                  span({ className: 'input-icon' }, '📧'),
+                  input({
+                    type: 'email',
+                    id: 'email',
+                    className: 'form-input',
+                    placeholder: 'your@email.com',
+                    value: email.value,
+                    oninput: (e: Event) => {
+                      email.value = (e.target as HTMLInputElement).value;
+                      error.value = '';
+                    }
+                  })
+                )
+              ),
+
+              button({
+                type: 'submit',
+                className: 'btn btn-primary btn-block btn-lg',
+                disabled: isLoading.value
+              }, isLoading.value ? 'Sending...' : 'Send Reset Link'),
+
+              div({ className: 'auth-footer' },
+                p({ className: 'footer-text' },
+                  'Remember your password? ',
+                  button({
+                    className: 'link-button-inline',
+                    onclick: () => router.push('/login')
+                  }, 'Sign in')
+                )
+              )
+            );
+          })
+        )
+      )
+    )
+  );
+}

package/dist/templates/src/pages/HomePage.ts

@@ -0,0 +1,166 @@
+import { div, h1, h2, h3, p, button, span, img } from 'elit/el';
+import { createState, reactive } from 'elit/state';
+import type { Router } from 'elit';
+
+export function HomePage(router: Router) {
+  // Check if user is logged in
+  const isLoggedIn = createState(!!localStorage.getItem('token'));
+  const user = createState(() => {
+    const userStr = localStorage.getItem('user');
+    return userStr ? JSON.parse(userStr) : null;
+  });
+
+  // Listen for storage changes
+  const handleStorageChange = () => {
+    isLoggedIn.value = !!localStorage.getItem('token');
+    const userStr = localStorage.getItem('user');
+    user.value = userStr ? JSON.parse(userStr) : null;
+  };
+
+  window.addEventListener('storage', handleStorageChange);
+  window.addEventListener('elit:storage', handleStorageChange);
+
+  return div({ className: 'home-page' },
+    // Hero Section
+    div({ className: 'hero-section' },
+      div({ className: 'hero-content' },
+        div({ className: 'hero-badge' }, '✨ New Features Available'),
+        reactive(isLoggedIn, (loggedIn) => {
+          if (loggedIn) {
+            return [
+              h1({ className: 'hero-title' },
+                'Welcome back, ',
+                span({ className: 'hero-highlight' }, user.value?.name || 'User')
+              ),
+              p({ className: 'hero-description' },
+                'Continue building amazing applications with your team.'
+              ),
+              div({ className: 'hero-buttons' },
+                button({
+                  className: 'btn btn-primary btn-lg',
+                  onclick: () => router.push('/chat/list')
+                }, 'Go to Messages'),
+                button({
+                  className: 'btn btn-outline btn-lg',
+                  onclick: () => router.push('/profile')
+                }, 'View Profile')
+              )
+            ];
+          }
+          return [
+            h1({ className: 'hero-title' },
+              'Build Amazing Apps ',
+              span({ className: 'hero-highlight' }, 'Faster')
+            ),
+            p({ className: 'hero-description' },
+              'A modern full-stack TypeScript framework designed for developers who love beautiful code and stunning interfaces.'
+            ),
+            div({ className: 'hero-buttons' },
+              button({
+                className: 'btn btn-primary btn-lg',
+                onclick: () => router.push('/register')
+              }, 'Get Started'),
+              button({
+                className: 'btn btn-outline btn-lg',
+                onclick: () => router.push('/login')
+              }, 'Sign In')
+            )
+          ];
+        }),
+        div({ className: 'hero-stats' },
+          div({ className: 'hero-stat' },
+            span({ className: 'hero-stat-number' }, '10K+'),
+            span({ className: 'hero-stat-label' }, 'Developers')
+          ),
+          div({ className: 'hero-stat' }),
+          div({ className: 'hero-stat' },
+            span({ className: 'hero-stat-number' }, '50K+'),
+            span({ className: 'hero-stat-label' }, 'Projects')
+          ),
+          div({ className: 'hero-stat' }),
+          div({ className: 'hero-stat' },
+            span({ className: 'hero-stat-number' }, '99.9%'),
+            span({ className: 'hero-stat-label' }, 'Uptime')
+          )
+        )
+      ),
+      div({ className: 'hero-visual' },
+        div({ className: 'hero-card-preview' },
+          div({ className: 'preview-header' },
+            div({ className: 'preview-dots' },
+              span({ className: 'preview-dot preview-dot-red' }),
+              span({ className: 'preview-dot preview-dot-yellow' }),
+              span({ className: 'preview-dot preview-dot-green' })
+            )
+          ),
+          div({ className: 'preview-body' },
+            div({ className: 'preview-line preview-line-long' }),
+            div({ className: 'preview-line preview-line-medium' }),
+            div({ className: 'preview-line preview-line-short' }),
+            div({ className: 'preview-grid' },
+              div({ className: 'preview-grid-item' }),
+              div({ className: 'preview-grid-item' }),
+              div({ className: 'preview-grid-item' }),
+              div({ className: 'preview-grid-item' })
+            )
+          )
+        )
+      )
+    ),
+
+    // Features Section
+    div({ className: 'features-section' },
+      h2({ className: 'section-title' }, 'Everything You Need'),
+      p({ className: 'section-subtitle' }, 'Powerful features to help you build better applications'),
+      div({ className: 'features-grid' },
+        div({ className: 'feature-item' },
+          div({ className: 'feature-icon' }, '⚡'),
+          h3({ className: 'feature-title' }, 'Lightning Fast'),
+          p({ className: 'feature-description' }, 'Optimized performance with cutting-edge rendering technology')
+        ),
+        div({ className: 'feature-item' },
+          div({ className: 'feature-icon' }, '🔒'),
+          h3({ className: 'feature-title' }, 'Secure'),
+          p({ className: 'feature-description' }, 'Built-in security features to protect your applications')
+        ),
+        div({ className: 'feature-item' },
+          div({ className: 'feature-icon' }, '📱'),
+          h3({ className: 'feature-title' }, 'Responsive'),
+          p({ className: 'feature-description' }, 'Beautiful interfaces that work perfectly on any device')
+        ),
+        div({ className: 'feature-item' },
+          div({ className: 'feature-icon' }, '🎨'),
+          h3({ className: 'feature-title' }, 'Customizable'),
+          p({ className: 'feature-description' }, 'Flexible theming system for unlimited design possibilities')
+        ),
+        div({ className: 'feature-item' },
+          div({ className: 'feature-icon' }, '🔧'),
+          h3({ className: 'feature-title' }, 'Developer Friendly'),
+          p({ className: 'feature-description' }, 'TypeScript-first with excellent tooling and DX')
+        ),
+        div({ className: 'feature-item' },
+          div({ className: 'feature-icon' }, '🚀'),
+          h3({ className: 'feature-title' }, 'Easy Deployment'),
+          p({ className: 'feature-description' }, 'Deploy anywhere with minimal configuration required')
+        )
+      )
+    ),
+
+    // CTA Section
+    reactive(isLoggedIn, (loggedIn) => {
+      if (loggedIn) {
+        return null; // Don't show CTA for logged in users
+      }
+      return div({ className: 'cta-section' },
+        div({ className: 'cta-content' },
+          h2({ className: 'cta-title' }, 'Ready to Get Started?'),
+          p({ className: 'cta-description' }, 'Join thousands of developers building amazing applications'),
+          button({
+            className: 'btn btn-primary btn-lg cta-button',
+            onclick: () => router.push('/register')
+          }, 'Start Building Now')
+        )
+      );
+    })
+  );
+}

package/dist/templates/src/pages/LoginPage.ts

@@ -0,0 +1,182 @@
+import { div, h1, h2, p, input, label, button, form, span } from 'elit/el';
+import { createState, reactive } from 'elit/state';
+import type { Router } from 'elit';
+
+export function LoginPage(router: Router) {
+  // Check if already logged in
+  const token = localStorage.getItem('token');
+  if (token) {
+    router.push('/profile');
+  }
+
+  const email = createState('');
+  const password = createState('');
+  const error = createState('');
+  const isLoading = createState(false);
+
+  const handleLogin = async (e: Event) => {
+    e.preventDefault();
+
+    if (!email.value || !password.value) {
+      error.value = 'Please fill in all fields';
+      return;
+    }
+
+    if (!email.value.includes('@')) {
+      error.value = 'Please enter a valid email';
+      return;
+    }
+
+    isLoading.value = true;
+    error.value = '';
+
+    try {
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          email: email.value,
+          password: password.value
+        })
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        error.value = data.error || 'Login failed';
+        isLoading.value = false;
+        return;
+      }
+
+      // Store token and user data
+      localStorage.setItem('token', data.token);
+      localStorage.setItem('user', JSON.stringify(data.user));
+
+      // Dispatch custom event to notify other components (like Header)
+      window.dispatchEvent(new Event('elit:storage'));
+
+      isLoading.value = false;
+      router.push('/profile');
+    } catch (err) {
+      isLoading.value = false;
+      error.value = 'Network error. Please try again.';
+    }
+  };
+
+  return div({ className: 'auth-page' },
+    div({ className: 'auth-container' },
+      // Left side - branding
+      div({ className: 'auth-branding' },
+        div({ className: 'branding-content' },
+          h1({ className: 'branding-title' }, 'Welcome Back'),
+          p({ className: 'branding-description' },
+            'Sign in to continue to your account and access all features.'
+          ),
+          div({ className: 'branding-features' },
+            div({ className: 'branding-feature' },
+              span({ className: 'feature-icon' }, '✓'),
+              span({ className: 'feature-text' }, 'Lightning fast performance')
+            ),
+            div({ className: 'branding-feature' },
+              span({ className: 'feature-icon' }, '✓'),
+              span({ className: 'feature-text' }, 'Secure and reliable')
+            ),
+            div({ className: 'branding-feature' },
+              span({ className: 'feature-icon' }, '✓'),
+              span({ className: 'feature-text' }, '24/7 support available')
+            )
+          )
+        )
+      ),
+
+      // Right side - form
+      div({ className: 'auth-form-wrapper' },
+        div({ className: 'auth-form-card' },
+          div({ className: 'auth-header' },
+            h2({ className: 'auth-title' }, 'Sign In'),
+            p({ className: 'auth-subtitle' }, 'Enter your credentials to access your account')
+          ),
+
+          reactive(error, (err) => err ? div({ className: 'auth-error' }, err) : null),
+
+          form({ onsubmit: handleLogin },
+            div({ className: 'form-group' },
+              label({ htmlFor: 'email', className: 'form-label' }, 'Email Address'),
+              div({ className: 'input-wrapper' },
+                span({ className: 'input-icon' }, '📧'),
+                input({
+                  type: 'email',
+                  id: 'email',
+                  className: 'form-input',
+                  placeholder: 'your@email.com',
+                  value: email.value,
+                  oninput: (e: Event) => {
+                    email.value = (e.target as HTMLInputElement).value;
+                    error.value = '';
+                  }
+                })
+              )
+            ),
+
+            div({ className: 'form-group' },
+              label({ htmlFor: 'password', className: 'form-label' }, 'Password'),
+              div({ className: 'input-wrapper' },
+                span({ className: 'input-icon' }, '🔒'),
+                input({
+                  type: 'password',
+                  id: 'password',
+                  className: 'form-input',
+                  placeholder: '••••••••',
+                  value: password.value,
+                  oninput: (e: Event) => {
+                    password.value = (e.target as HTMLInputElement).value;
+                    error.value = '';
+                  }
+                })
+              )
+            ),
+
+            div({ className: 'form-options' },
+              label({ className: 'checkbox-label' },
+                input({ type: 'checkbox', className: 'checkbox' }),
+                span({ className: 'checkbox-text' }, 'Remember me')
+              ),
+              button({ type: 'button', className: 'link-button', onclick: () => router.push('/forgot-password') }, 'Forgot password?')
+            ),
+
+            button({
+              type: 'submit',
+              className: 'btn btn-primary btn-block btn-lg',
+              disabled: isLoading.value
+            }, isLoading.value ? 'Signing in...' : 'Sign In')
+          ),
+
+          div({ className: 'auth-divider' }, 'OR'),
+
+          div({ className: 'social-login' },
+            button({ className: 'social-button' },
+              span({ className: 'social-icon' }, 'G'),
+              'Continue with Google'
+            ),
+            button({ className: 'social-button' },
+              span({ className: 'social-icon' }, 'Gh'),
+              'Continue with GitHub'
+            )
+          ),
+
+          div({ className: 'auth-footer' },
+            p({ className: 'footer-text' },
+              "Don't have an account? ",
+              button({
+                className: 'link-button-inline',
+                onclick: () => router.push('/register')
+              }, 'Sign up')
+            )
+          )
+        )
+      )
+    )
+  );
+}