create-elit 3.2.6 → 3.2.8

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

@@ -0,0 +1,342 @@
+import { div, h2, h3, p, button, span, input, label } from 'elit/el';
+import { createState, reactive, reactiveAs } from 'elit/state';
+import type { Router } from 'elit';
+
+export function ProfilePage(router: Router) {
+  const isEditing = createState(false);
+  const name = createState('');
+  const email = createState('');
+  const bio = createState('');
+  const location = createState('');
+  const website = createState('');
+  const isLoading = createState(false);
+  const isLoaded = createState(false);
+  const error = createState('');
+
+  const stats = {
+    projects: 0,
+    followers: 0,
+    following: 0,
+    stars: 0
+  };
+
+  // Load profile data
+  const loadProfile = async () => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      router.push('/login');
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/profile', {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          localStorage.removeItem('token');
+          localStorage.removeItem('user');
+          router.push('/login');
+          return;
+        }
+        throw new Error('Failed to load profile');
+      }
+
+      const data = await response.json();
+      const user = data.user;
+
+      name.value = user.name;
+      email.value = user.email;
+      bio.value = user.bio;
+      location.value = user.location;
+      website.value = user.website;
+      stats.projects = user.stats.projects;
+      stats.followers = user.stats.followers;
+      stats.following = user.stats.following;
+      stats.stars = user.stats.stars;
+
+      isLoaded.value = true;
+    } catch (err) {
+      error.value = 'Failed to load profile';
+      isLoaded.value = true;
+    }
+  };
+
+  // Load profile on mount
+  loadProfile();
+
+  const handleSave = async () => {
+    isLoading.value = true;
+    error.value = '';
+
+    const token = localStorage.getItem('token');
+    if (!token) {
+      error.value = 'Not authenticated';
+      isLoading.value = false;
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/profile', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          name: name.value,
+          bio: bio.value,
+          location: location.value,
+          website: website.value
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to update profile');
+      }
+
+      const data = await response.json();
+      const updatedUser = data.user;
+
+      // Update local storage
+      localStorage.setItem('user', JSON.stringify(updatedUser));
+
+      isLoading.value = false;
+      isEditing.value = false;
+    } catch (err) {
+      error.value = 'Failed to save profile';
+      isLoading.value = false;
+    }
+  };
+
+  const handleCancel = () => {
+    // Reset to original values from localStorage
+    const user = JSON.parse(localStorage.getItem('user') || '{}');
+    if (user.name) {
+      name.value = user.name;
+    }
+    if (user.email) {
+      email.value = user.email;
+    }
+    if (user.bio) {
+      bio.value = user.bio;
+    }
+    if (user.location) {
+      location.value = user.location;
+    }
+    if (user.website) {
+      website.value = user.website;
+    }
+    isEditing.value = false;
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    // Dispatch custom event to notify Header
+    window.dispatchEvent(new Event('elit:storage'));
+    router.push('/');
+  };
+
+  return div({ className: 'profile-page' },
+    // Error display
+    reactive(error, (err) => err ? div({ className: 'auth-error' }, err) : null),
+
+    // Profile Header
+    div({ className: 'profile-header-section' },
+      div({ className: 'profile-cover' }),
+      div({ className: 'profile-avatar-section' },
+        div({ className: 'profile-avatar' },
+          reactive(name, (nm) => nm ? nm.charAt(0).toUpperCase() : '?')
+        ),
+        button({ className: 'avatar-edit-button' }, '📷')
+      ),
+    ),
+
+    // Profile Content
+    reactive(isLoaded, (loaded) => {
+      if (!loaded) {
+        return div({ className: 'profile-content' }, p('Loading...'));
+      }
+
+      return div({ className: 'profile-content' },
+        // Left column
+        div({ className: 'profile-sidebar' },
+          div({ className: 'profile-card' },
+            reactive(isEditing, (editing) => {
+              if (editing) {
+                return div({ className: 'edit-form' },
+                  div({ className: 'form-group' },
+                    label({ className: 'form-label' }, 'Display Name'),
+                    input({
+                      type: 'text',
+                      className: 'form-input',
+                      value: name.value,
+                      oninput: (e: Event) => { name.value = (e.target as HTMLInputElement).value; }
+                    })
+                  ),
+                  div({ className: 'form-group' },
+                    label({ className: 'form-label' }, 'Email'),
+                    input({
+                      type: 'email',
+                      className: 'form-input',
+                      value: email.value,
+                      disabled: true
+                    })
+                  )
+                );
+              }
+              return div({ className: 'profile-info-display' },
+                reactive(name, (nm) => h3({ className: 'profile-name' }, nm)),
+                reactive(email, (em) => p({ className: 'profile-email' }, em))
+              );
+            }),
+
+            div({ className: 'profile-meta' },
+              div({ className: 'meta-item' },
+                span({ className: 'meta-icon' }, '📍'),
+                reactive(isEditing, (editing) => {
+                  if (editing) {
+                    return input({
+                      type: 'text',
+                      className: 'form-input form-input-sm',
+                      value: location.value,
+                      oninput: (e: Event) => { location.value = (e.target as HTMLInputElement).value; }
+                    });
+                  }
+                  return span({ className: 'meta-text' }, location.value || 'No location');
+                })
+              ),
+              div({ className: 'meta-item' },
+                span({ className: 'meta-icon' }, '🔗'),
+                reactive(isEditing, (editing) => {
+                  if (editing) {
+                    return input({
+                      type: 'url',
+                      className: 'form-input form-input-sm',
+                      value: website.value,
+                      oninput: (e: Event) => { website.value = (e.target as HTMLInputElement).value; }
+                    });
+                  }
+                  return span({ className: 'meta-text' }, website.value || 'No website')
+                })
+              )
+            ),
+
+            // Use reactiveAs with a stable div wrapper to handle structure changes
+            reactiveAs('div', isEditing, (editing) => {
+              if (editing) {
+                return div({ className: 'edit-actions' },
+                  button({
+                    className: 'btn btn-secondary',
+                    onclick: () => {
+                      console.log('Cancel button clicked');
+                      const user = JSON.parse(localStorage.getItem('user') || '{}');
+                      console.log('User from localStorage:', user);
+                      name.value = user.name || '';
+                      email.value = user.email || '';
+                      bio.value = user.bio || '';
+                      location.value = user.location || '';
+                      website.value = user.website || '';
+                      console.log('States reset, setting isEditing to false');
+                      isEditing.value = false;
+                      console.log('isEditing.value:', isEditing.value);
+                    },
+                    disabled: isLoading.value
+                  }, 'Cancel'),
+                  button({
+                    className: 'btn btn-primary',
+                    onclick: handleSave,
+                    disabled: isLoading.value
+                  }, isLoading.value ? 'Saving...' : 'Save Changes')
+                );
+              }
+              return button({
+                className: 'btn btn-primary btn-block',
+                onclick: () => isEditing.value = true
+              }, 'Edit Profile');
+            }, { className: 'profile-action-wrapper' })
+          )
+        ),
+
+        // Right column
+        div({ className: 'profile-main' },
+          // Stats Card
+          div({ className: 'stats-grid' },
+            div({ className: 'stat-card' },
+              span({ className: 'stat-icon' }, '📁'),
+              div({ className: 'stat-info' },
+                span({ className: 'stat-value' }, stats.projects.toString()),
+                span({ className: 'stat-label' }, 'Projects')
+              )
+            ),
+            div({ className: 'stat-card' },
+              span({ className: 'stat-icon' }, '⭐'),
+              div({ className: 'stat-info' },
+                span({ className: 'stat-value' }, stats.stars.toString()),
+                span({ className: 'stat-label' }, 'Stars')
+              )
+            ),
+            div({ className: 'stat-card' },
+              span({ className: 'stat-icon' }, '👥'),
+              div({ className: 'stat-info' },
+                span({ className: 'stat-value' }, stats.followers.toString()),
+                span({ className: 'stat-label' }, 'Followers')
+              )
+            ),
+            div({ className: 'stat-card' },
+              span({ className: 'stat-icon' }, '👣'),
+              div({ className: 'stat-info' },
+                span({ className: 'stat-value' }, stats.following.toString()),
+                span({ className: 'stat-label' }, 'Following')
+              )
+            )
+          ),
+
+          // About Card
+          div({ className: 'profile-card' },
+            h3({ className: 'card-title' }, 'About'),
+            reactive(isEditing, (editing) => {
+              if (editing) {
+                return div({ className: 'form-group' },
+                  label({ className: 'form-label' }, 'Bio'),
+                  input({
+                    type: 'text',
+                    className: 'form-input',
+                    value: bio.value,
+                    oninput: (e: Event) => { bio.value = (e.target as HTMLInputElement).value; }
+                  })
+                );
+              }
+              return reactive(bio, (b) => p({ className: 'profile-bio' }, b || 'No bio yet'));
+            })
+          ),
+
+          // Activity Card
+          div({ className: 'profile-card' },
+            h3({ className: 'card-title' }, 'Recent Activity'),
+            div({ className: 'activity-list' },
+              div({ className: 'activity-item' },
+                span({ className: 'activity-icon' }, '🚀'),
+                div({ className: 'activity-content' },
+                  p({ className: 'activity-title' }, 'Account created'),
+                  p({ className: 'activity-time' }, 'Just now')
+                )
+              )
+            )
+          ),
+
+          // Actions
+          div({ className: 'profile-actions' },
+            button({ className: 'btn btn-outline btn-block' }, 'View Public Profile'),
+            button({ className: 'btn btn-secondary btn-block', onclick: handleLogout }, 'Logout')
+          )
+        )
+      );
+    })
+  );
+}

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

@@ -0,0 +1,230 @@
+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 RegisterPage(router: Router) {
+  // Check if already logged in
+  const token = localStorage.getItem('token');
+  if (token) {
+    router.push('/profile');
+  }
+
+  const name = createState('');
+  const email = createState('');
+  const password = createState('');
+  const confirmPassword = createState('');
+  const error = createState('');
+  const isLoading = createState(false);
+
+  const handleRegister = async (e: Event) => {
+    e.preventDefault();
+
+    if (!name.value || !email.value || !password.value || !confirmPassword.value) {
+      error.value = 'Please fill in all fields';
+      return;
+    }
+
+    if (!email.value.includes('@')) {
+      error.value = 'Please enter a valid email';
+      return;
+    }
+
+    if (password.value.length < 6) {
+      error.value = 'Password must be at least 6 characters';
+      return;
+    }
+
+    if (password.value !== confirmPassword.value) {
+      error.value = 'Passwords do not match';
+      return;
+    }
+
+    isLoading.value = true;
+    error.value = '';
+
+    try {
+      const response = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          name: name.value,
+          email: email.value,
+          password: password.value
+        })
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        error.value = data.error || 'Registration 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' }, 'Join Us Today'),
+          p({ className: 'branding-description' },
+            'Create your account and start building amazing applications in minutes.'
+          ),
+          div({ className: 'branding-features' },
+            div({ className: 'branding-feature' },
+              span({ className: 'feature-icon' }, '✓'),
+              span({ className: 'feature-text' }, 'Free forever for personal projects')
+            ),
+            div({ className: 'branding-feature' },
+              span({ className: 'feature-icon' }, '✓'),
+              span({ className: 'feature-text' }, 'No credit card required')
+            ),
+            div({ className: 'branding-feature' },
+              span({ className: 'feature-icon' }, '✓'),
+              span({ className: 'feature-text' }, 'Instant setup & deployment')
+            )
+          )
+        )
+      ),
+
+      // Right side - form
+      div({ className: 'auth-form-wrapper' },
+        div({ className: 'auth-form-card' },
+          div({ className: 'auth-header' },
+            h2({ className: 'auth-title' }, 'Create Account'),
+            p({ className: 'auth-subtitle' }, 'Sign up to get started with your free account')
+          ),
+
+          reactive(error, (err) => err ? div({ className: 'auth-error' }, err) : null),
+
+          form({ onsubmit: handleRegister },
+            div({ className: 'form-group' },
+              label({ htmlFor: 'name', className: 'form-label' }, 'Full Name'),
+              div({ className: 'input-wrapper' },
+                span({ className: 'input-icon' }, '👤'),
+                input({
+                  type: 'text',
+                  id: 'name',
+                  className: 'form-input',
+                  placeholder: 'John Doe',
+                  value: name.value,
+                  oninput: (e: Event) => {
+                    name.value = (e.target as HTMLInputElement).value;
+                    error.value = '';
+                  }
+                })
+              )
+            ),
+
+            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-group' },
+              label({ htmlFor: 'confirmPassword', className: 'form-label' }, 'Confirm Password'),
+              div({ className: 'input-wrapper' },
+                span({ className: 'input-icon' }, '🔒'),
+                input({
+                  type: 'password',
+                  id: 'confirmPassword',
+                  className: 'form-input',
+                  placeholder: '••••••••',
+                  value: confirmPassword.value,
+                  oninput: (e: Event) => {
+                    confirmPassword.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' }, 'I agree to the Terms of Service and Privacy Policy')
+              )
+            ),
+
+            button({
+              type: 'submit',
+              className: 'btn btn-primary btn-block btn-lg',
+              disabled: isLoading.value
+            }, isLoading.value ? 'Creating account...' : 'Create Account')
+          ),
+
+          div({ className: 'auth-divider' }, 'OR'),
+
+          div({ className: 'social-login' },
+            button({ className: 'social-button' },
+              span({ className: 'social-icon' }, 'G'),
+              'Sign up with Google'
+            ),
+            button({ className: 'social-button' },
+              span({ className: 'social-icon' }, 'Gh'),
+              'Sign up with GitHub'
+            )
+          ),
+
+          div({ className: 'auth-footer' },
+            p({ className: 'footer-text' },
+              'Already have an account? ',
+              button({
+                className: 'link-button-inline',
+                onclick: () => router.push('/login')
+              }, 'Sign in')
+            )
+          )
+        )
+      )
+    )
+  );
+}

package/dist/templates/src/router.ts

@@ -0,0 +1,30 @@
+import { createRouter, createRouterView, type RouteParams, type Router } from 'elit';
+import { HomePage } from './pages/HomePage';
+import { LoginPage } from './pages/LoginPage';
+import { RegisterPage } from './pages/RegisterPage';
+import { ProfilePage } from './pages/ProfilePage';
+import { ForgotPasswordPage } from './pages/ForgotPasswordPage';
+import { ChatPage } from './pages/ChatPage';
+import { ChatListPage } from './pages/ChatListPage';
+import { PrivateChatPage } from './pages/PrivateChatPage';
+
+// Initialize router
+export const router = createRouter({
+  mode: 'hash',
+  base: '/',
+  routes: []
+});
+
+// Define routes
+const routes = [
+  { path: '/', component: () => HomePage(router) },
+  { path: '/login', component: () => LoginPage(router) },
+  { path: '/register', component: () => RegisterPage(router) },
+  { path: '/profile', component: () => ProfilePage(router) },
+  { path: '/forgot-password', component: () => ForgotPasswordPage(router) },
+  { path: '/chat', component: () => ChatPage(router) },
+  { path: '/chat/list', component: () => ChatListPage(router) },
+  { path: '/chat/dm/:userId', component: (params: RouteParams) => PrivateChatPage(router, params.userId as string) }
+];
+
+export const RouterView = createRouterView(router, { mode: 'hash', routes });