create-velox-app 0.6.31 → 0.6.51

package/src/templates/source/rsc-auth/app/pages/auth/login.tsx

@@ -0,0 +1,198 @@
+/**
+ * Login Page
+ *
+ * Client component for authentication using server actions.
+ * Tokens are stored in httpOnly cookies automatically by the server action.
+ */
+'use client';
+
+import { useState } from 'react';
+
+import { login } from '@/app/actions/auth';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      // Call server action - tokens are stored in httpOnly cookies automatically
+      const result = await login({ email, password });
+
+      if (!result.success) {
+        throw new Error(result.error.message);
+      }
+
+      // Redirect to dashboard (cookies are already set by server action)
+      window.location.href = '/dashboard';
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      <style>{`
+        .auth-container {
+          max-width: 450px;
+          margin: 0 auto;
+        }
+
+        .auth-card {
+          background: #111;
+          padding: 2rem;
+          border-radius: 8px;
+          border: 1px solid #222;
+        }
+
+        .auth-card h1 {
+          font-size: 1.5rem;
+          font-weight: 700;
+          margin-bottom: 1.5rem;
+          text-align: center;
+          color: #ededed;
+        }
+
+        .auth-form {
+          margin-top: 1.5rem;
+        }
+
+        .form-group {
+          margin-bottom: 1.25rem;
+        }
+
+        .form-label {
+          display: block;
+          margin-bottom: 0.5rem;
+          color: #ededed;
+          font-weight: 500;
+          font-size: 0.875rem;
+        }
+
+        .form-input {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border-radius: 4px;
+          border: 1px solid #222;
+          background: #0a0a0a;
+          color: #ededed;
+          font-size: 0.875rem;
+          transition: border-color 0.2s, background 0.2s;
+        }
+
+        .form-input:focus {
+          outline: none;
+          border-color: #00d9ff;
+          background: #111;
+        }
+
+        .form-input:hover {
+          border-color: #333;
+        }
+
+        .btn {
+          width: 100%;
+          padding: 0.75rem 1.25rem;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-weight: 500;
+          font-size: 0.875rem;
+          transition: background 0.2s, opacity 0.2s;
+        }
+
+        .btn-primary {
+          background: #00d9ff;
+          color: #000;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+          background: rgba(0, 217, 255, 0.8);
+        }
+
+        .btn-primary:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .error-message {
+          padding: 0.75rem;
+          background: #2a1111;
+          color: #ff6666;
+          border-radius: 4px;
+          margin-bottom: 1rem;
+          border: 1px solid #ff4444;
+          font-size: 0.875rem;
+        }
+
+        .auth-footer {
+          margin-top: 1.5rem;
+          text-align: center;
+          color: #888;
+          font-size: 0.875rem;
+        }
+
+        .auth-footer a {
+          color: #00d9ff;
+          font-weight: 500;
+        }
+
+        .auth-footer a:hover {
+          opacity: 0.8;
+        }
+      `}</style>
+
+      <div className="auth-card">
+        <h1>Login</h1>
+
+        <form onSubmit={handleSubmit} className="auth-form">
+          {error && <div className="error-message">{error}</div>}
+
+          <div className="form-group">
+            <label htmlFor="email" className="form-label">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="form-input"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password" className="form-label">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="form-input"
+            />
+          </div>
+
+          <button type="submit" disabled={loading} className="btn btn-primary">
+            {loading ? 'Signing in...' : 'Sign In'}
+          </button>
+        </form>
+
+        <p className="auth-footer">
+          Don't have an account? <a href="/auth/register">Register</a>
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/templates/source/rsc-auth/app/pages/auth/register.tsx

@@ -0,0 +1,225 @@
+/**
+ * Registration Page
+ *
+ * Client component for user registration using server actions.
+ * Tokens are stored in httpOnly cookies automatically by the server action.
+ */
+'use client';
+
+import { useState } from 'react';
+
+import { register } from '@/app/actions/auth';
+
+export default function RegisterPage() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      // Call server action - tokens are stored in httpOnly cookies automatically
+      const result = await register({ name, email, password });
+
+      if (!result.success) {
+        throw new Error(result.error.message);
+      }
+
+      // Redirect to dashboard (cookies are already set by server action)
+      window.location.href = '/dashboard';
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Registration failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      <style>{`
+        .auth-container {
+          max-width: 450px;
+          margin: 0 auto;
+        }
+
+        .auth-card {
+          background: #111;
+          padding: 2rem;
+          border-radius: 8px;
+          border: 1px solid #222;
+        }
+
+        .auth-card h1 {
+          font-size: 1.5rem;
+          font-weight: 700;
+          margin-bottom: 1.5rem;
+          text-align: center;
+          color: #ededed;
+        }
+
+        .auth-form {
+          margin-top: 1.5rem;
+        }
+
+        .form-group {
+          margin-bottom: 1.25rem;
+        }
+
+        .form-label {
+          display: block;
+          margin-bottom: 0.5rem;
+          color: #ededed;
+          font-weight: 500;
+          font-size: 0.875rem;
+        }
+
+        .form-input {
+          width: 100%;
+          padding: 0.75rem 1rem;
+          border-radius: 4px;
+          border: 1px solid #222;
+          background: #0a0a0a;
+          color: #ededed;
+          font-size: 0.875rem;
+          transition: border-color 0.2s, background 0.2s;
+        }
+
+        .form-input:focus {
+          outline: none;
+          border-color: #00d9ff;
+          background: #111;
+        }
+
+        .form-input:hover {
+          border-color: #333;
+        }
+
+        .form-hint {
+          display: block;
+          color: #888;
+          font-size: 0.75rem;
+          margin-top: 0.5rem;
+        }
+
+        .btn {
+          width: 100%;
+          padding: 0.75rem 1.25rem;
+          border: none;
+          border-radius: 4px;
+          cursor: pointer;
+          font-weight: 500;
+          font-size: 0.875rem;
+          transition: background 0.2s, opacity 0.2s;
+        }
+
+        .btn-primary {
+          background: #00d9ff;
+          color: #000;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+          background: rgba(0, 217, 255, 0.8);
+        }
+
+        .btn-primary:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .error-message {
+          padding: 0.75rem;
+          background: #2a1111;
+          color: #ff6666;
+          border-radius: 4px;
+          margin-bottom: 1rem;
+          border: 1px solid #ff4444;
+          font-size: 0.875rem;
+        }
+
+        .auth-footer {
+          margin-top: 1.5rem;
+          text-align: center;
+          color: #888;
+          font-size: 0.875rem;
+        }
+
+        .auth-footer a {
+          color: #00d9ff;
+          font-weight: 500;
+        }
+
+        .auth-footer a:hover {
+          opacity: 0.8;
+        }
+      `}</style>
+
+      <div className="auth-card">
+        <h1>Create Account</h1>
+
+        <form onSubmit={handleSubmit} className="auth-form">
+          {error && <div className="error-message">{error}</div>}
+
+          <div className="form-group">
+            <label htmlFor="name" className="form-label">
+              Name
+            </label>
+            <input
+              id="name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              minLength={2}
+              className="form-input"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="email" className="form-label">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="form-input"
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password" className="form-label">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              minLength={12}
+              className="form-input"
+            />
+            <small className="form-hint">
+              At least 12 characters with uppercase, lowercase, and number
+            </small>
+          </div>
+
+          <button type="submit" disabled={loading} className="btn btn-primary">
+            {loading ? 'Creating account...' : 'Create Account'}
+          </button>
+        </form>
+
+        <p className="auth-footer">
+          Already have an account? <a href="/auth/login">Login</a>
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/templates/source/rsc-auth/app/pages/dashboard/index.tsx

@@ -0,0 +1,267 @@
+/**
+ * Dashboard Page
+ *
+ * Protected page that requires authentication.
+ * Uses httpOnly cookie-based authentication (tokens stored in cookies by server actions).
+ */
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { logout } from '@/app/actions/auth';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  roles: string[];
+}
+
+export default function DashboardPage() {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        // Cookies are sent automatically with credentials: 'include'
+        const response = await fetch('/api/auth/me', {
+          credentials: 'include',
+        });
+
+        if (!response.ok) {
+          // Token invalid, expired, or not present - redirect to login
+          window.location.href = '/auth/login';
+          return;
+        }
+
+        const userData = await response.json();
+        setUser(userData);
+      } catch {
+        setError('Failed to load user data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchUser();
+  }, []);
+
+  const handleLogout = async () => {
+    try {
+      // Call server action to clear auth cookies
+      await logout();
+    } catch {
+      // Ignore errors - we're redirecting anyway
+    }
+
+    // Redirect to home
+    window.location.href = '/';
+  };
+
+  if (loading) {
+    return (
+      <div className="dashboard-loading">
+        <style>{`
+          .dashboard-loading {
+            padding: 2rem;
+            text-align: center;
+            color: #888;
+          }
+        `}</style>
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="dashboard-error">
+        <style>{`
+          .dashboard-error {
+            padding: 2rem;
+            text-align: center;
+            color: #ff6666;
+          }
+        `}</style>
+        {error}
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <div className="dashboard">
+      <style>{`
+        .dashboard {
+          max-width: 800px;
+          margin: 0 auto;
+        }
+
+        .dashboard-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 2rem;
+        }
+
+        .dashboard-header h1 {
+          font-size: 1.75rem;
+          font-weight: 700;
+          color: #ededed;
+          margin: 0;
+        }
+
+        .btn-logout {
+          padding: 0.5rem 1rem;
+          background: transparent;
+          color: #ff6666;
+          border: 1px solid #ff6666;
+          border-radius: 4px;
+          cursor: pointer;
+          font-weight: 500;
+          font-size: 0.875rem;
+          transition: background 0.2s, color 0.2s;
+        }
+
+        .btn-logout:hover {
+          background: #ff6666;
+          color: #000;
+        }
+
+        .user-card {
+          padding: 1.5rem;
+          background: #111;
+          border: 1px solid #222;
+          border-radius: 8px;
+          margin-bottom: 1.5rem;
+        }
+
+        .user-card h2 {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: #ededed;
+          margin: 0 0 1rem 0;
+        }
+
+        .user-info {
+          color: #888;
+          font-size: 0.875rem;
+          line-height: 1.8;
+        }
+
+        .user-info strong {
+          color: #ededed;
+        }
+
+        .actions-card {
+          padding: 1.5rem;
+          background: #0d1a26;
+          border: 1px solid #1a3a5c;
+          border-radius: 8px;
+          margin-bottom: 1.5rem;
+        }
+
+        .actions-card h3 {
+          font-size: 1rem;
+          font-weight: 600;
+          color: #00d9ff;
+          margin: 0 0 0.75rem 0;
+        }
+
+        .actions-card p {
+          color: #888;
+          font-size: 0.875rem;
+          margin: 0 0 1rem 0;
+        }
+
+        .actions-list {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        .actions-list li {
+          color: #888;
+          font-size: 0.875rem;
+          padding: 0.5rem 0;
+          border-bottom: 1px solid #1a3a5c;
+        }
+
+        .actions-list li:last-child {
+          border-bottom: none;
+        }
+
+        .admin-tag {
+          display: inline-block;
+          padding: 0.125rem 0.5rem;
+          background: #00d9ff;
+          color: #000;
+          border-radius: 4px;
+          font-size: 0.75rem;
+          font-weight: 600;
+          margin-right: 0.5rem;
+        }
+
+        .back-link {
+          display: inline-block;
+          color: #00d9ff;
+          font-size: 0.875rem;
+          text-decoration: none;
+        }
+
+        .back-link:hover {
+          opacity: 0.8;
+        }
+      `}</style>
+
+      <div className="dashboard-header">
+        <h1>Dashboard</h1>
+        <button type="button" onClick={handleLogout} className="btn-logout">
+          Logout
+        </button>
+      </div>
+
+      <div className="user-card">
+        <h2>Welcome, {user.name || 'User'}!</h2>
+        <div className="user-info">
+          <p>
+            <strong>Email:</strong> {user.email}
+          </p>
+          <p>
+            <strong>Roles:</strong> {user.roles.join(', ')}
+          </p>
+        </div>
+      </div>
+
+      <div className="actions-card">
+        <h3>Your Actions</h3>
+        <p>As an authenticated user, you can:</p>
+        <ul className="actions-list">
+          <li>View your profile</li>
+          <li>Update your settings</li>
+          {user.roles.includes('admin') && (
+            <>
+              <li>
+                <span className="admin-tag">Admin</span>
+                Manage users
+              </li>
+              <li>
+                <span className="admin-tag">Admin</span>
+                View all data
+              </li>
+            </>
+          )}
+        </ul>
+      </div>
+
+      <a href="/" className="back-link">
+        ← Back to Home
+      </a>
+    </div>
+  );
+}