@assistkick/create 1.0.0

package/templates/product-system/packages/frontend/src/pages/accept_invitation_page.tsx

@@ -0,0 +1,167 @@
+/**
+ * Accept Invitation Page — invited user sets password to complete registration.
+ * Token and email are extracted from URL query parameters.
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { useTheme } from '../hooks/useTheme';
+import { apiClient } from '../api/client';
+import { validatePassword } from '../utils/auth_validation';
+
+interface AcceptInvitationPageProps {
+  onSuccess: () => void;
+}
+
+export function AcceptInvitationPage({ onSuccess }: AcceptInvitationPageProps) {
+  const { theme, toggleTheme } = useTheme();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get('token') || '';
+  const email = searchParams.get('email') || '';
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [fieldError, setFieldError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [validating, setValidating] = useState(true);
+  const [valid, setValid] = useState(false);
+
+  useEffect(() => {
+    if (!token || !email) {
+      setValidating(false);
+      return;
+    }
+
+    apiClient.validateInvitation(token, email)
+      .then(data => {
+        setValid(data.valid);
+        setValidating(false);
+      })
+      .catch(() => {
+        setValid(false);
+        setValidating(false);
+      });
+  }, [token, email]);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setFieldError('');
+
+    const passErr = validatePassword(password);
+    if (passErr) {
+      setFieldError(passErr);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setFieldError('Passwords do not match');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await apiClient.acceptInvitation(token, email, password);
+      onSuccess();
+    } catch (err: any) {
+      setError(err.message || 'Failed to accept invitation');
+    } finally {
+      setSubmitting(false);
+    }
+  }, [token, email, password, confirmPassword, onSuccess]);
+
+  if (validating) {
+    return (
+      <div className="auth-page">
+        <div className="auth-card">
+          <div className="auth-header">
+            <h1 className="auth-title">Validating Invitation...</h1>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!token || !email || !valid) {
+    return (
+      <div className="auth-page">
+        <div className="auth-card">
+          <div className="auth-header">
+            <h1 className="auth-title">Invalid Invitation</h1>
+          </div>
+          <div className="auth-success-message">
+            <p>This invitation link is invalid or has expired.</p>
+            <Link to="/login" className="auth-back-link">Go to login</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-header">
+          <h1 className="auth-title">Accept Invitation</h1>
+          <p className="auth-subtitle">Set your password for {email}</p>
+        </div>
+
+        <form className="auth-form" onSubmit={handleSubmit} noValidate>
+          {error && <div className="auth-error-banner">{error}</div>}
+
+          <div className="auth-field">
+            <label className="auth-label" htmlFor="invite-password">Password</label>
+            <input
+              id="invite-password"
+              className={`auth-input${fieldError ? ' auth-input-error' : ''}`}
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              placeholder="Min 8 characters"
+              autoComplete="new-password"
+              autoFocus
+              disabled={submitting}
+            />
+          </div>
+
+          <div className="auth-field">
+            <label className="auth-label" htmlFor="invite-confirm-password">Confirm Password</label>
+            <input
+              id="invite-confirm-password"
+              className={`auth-input${fieldError ? ' auth-input-error' : ''}`}
+              type="password"
+              value={confirmPassword}
+              onChange={e => setConfirmPassword(e.target.value)}
+              placeholder="Repeat password"
+              autoComplete="new-password"
+              disabled={submitting}
+            />
+            {fieldError && <span className="auth-field-error">{fieldError}</span>}
+          </div>
+
+          <button
+            className="auth-submit"
+            type="submit"
+            disabled={submitting}
+          >
+            {submitting ? 'Creating account...' : 'Create Account'}
+          </button>
+        </form>
+
+        <p className="auth-login-link">
+          <Link to="/login">Already have an account? Sign in</Link>
+        </p>
+
+        <button
+          className="auth-theme-toggle"
+          onClick={toggleTheme}
+          type="button"
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+        >
+          {theme === 'dark' ? 'light' : 'dark'} theme
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/product-system/packages/frontend/src/pages/forgot_password_page.tsx

@@ -0,0 +1,100 @@
+/**
+ * Forgot Password Page — user enters email to request a password reset link.
+ * Always shows success message to prevent user enumeration.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import { useTheme } from '../hooks/useTheme';
+import { apiClient } from '../api/client';
+import { validateEmail } from '../utils/auth_validation';
+
+export function ForgotPasswordPage() {
+  const { theme, toggleTheme } = useTheme();
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    const emailErr = validateEmail(email);
+    if (emailErr) {
+      setError(emailErr);
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await apiClient.forgotPassword(email.trim());
+      setSent(true);
+    } catch (err: any) {
+      setError(err.message || 'Failed to send reset email');
+    } finally {
+      setSubmitting(false);
+    }
+  }, [email]);
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-header">
+          <h1 className="auth-title">Reset Password</h1>
+          <p className="auth-subtitle">Enter your email to receive a reset link</p>
+        </div>
+
+        {sent ? (
+          <div className="auth-success-message">
+            <p>If an account with that email exists, a reset link has been sent.</p>
+            <p>Check your inbox and follow the link to reset your password.</p>
+            <Link to="/login" className="auth-back-link">Back to login</Link>
+          </div>
+        ) : (
+          <>
+            <form className="auth-form" onSubmit={handleSubmit} noValidate>
+              {error && <div className="auth-error-banner">{error}</div>}
+
+              <div className="auth-field">
+                <label className="auth-label" htmlFor="forgot-email">Email</label>
+                <input
+                  id="forgot-email"
+                  className={`auth-input${error ? ' auth-input-error' : ''}`}
+                  type="email"
+                  value={email}
+                  onChange={e => setEmail(e.target.value)}
+                  placeholder="user@example.com"
+                  autoComplete="email"
+                  autoFocus
+                  disabled={submitting}
+                />
+              </div>
+
+              <button
+                className="auth-submit"
+                type="submit"
+                disabled={submitting}
+              >
+                {submitting ? 'Sending...' : 'Send Reset Link'}
+              </button>
+            </form>
+
+            <p className="auth-login-link">
+              Remember your password? <Link to="/login">Sign in</Link>
+            </p>
+          </>
+        )}
+
+        <button
+          className="auth-theme-toggle"
+          onClick={toggleTheme}
+          type="button"
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+        >
+          {theme === 'dark' ? 'light' : 'dark'} theme
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/product-system/packages/frontend/src/pages/register_page.tsx

@@ -0,0 +1,137 @@
+/**
+ * Registration Page — first-user-is-admin flow.
+ * Only accessible when no users exist in the system.
+ * Email + password form with inline validation.
+ * On success, redirects to the main app.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+import { useTheme } from '../hooks/useTheme';
+import { apiClient } from '../api/client';
+import { validateEmail, validatePassword } from '../utils/auth_validation';
+
+interface RegisterPageProps {
+  onSuccess: () => void;
+}
+
+interface FormErrors {
+  email?: string;
+  password?: string;
+  general?: string;
+}
+
+export function RegisterPage({ onSuccess }: RegisterPageProps) {
+  const { theme, toggleTheme } = useTheme();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [submitting, setSubmitting] = useState(false);
+
+  const validate = useCallback((): FormErrors => {
+    const errs: FormErrors = {};
+    const emailErr = validateEmail(email);
+    if (emailErr) errs.email = emailErr;
+    const passErr = validatePassword(password);
+    if (passErr) errs.password = passErr;
+    return errs;
+  }, [email, password]);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    const errs = validate();
+    setErrors(errs);
+    if (Object.keys(errs).length > 0) return;
+
+    setSubmitting(true);
+    setErrors({});
+
+    try {
+      await apiClient.register(email.trim(), password);
+      onSuccess();
+    } catch (err: any) {
+      setErrors({ general: err.message || 'Registration failed' });
+    } finally {
+      setSubmitting(false);
+    }
+  }, [email, password, validate, onSuccess]);
+
+  const handleEmailChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+    if (errors.email) setErrors(prev => ({ ...prev, email: undefined }));
+  }, [errors.email]);
+
+  const handlePasswordChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+    if (errors.password) setErrors(prev => ({ ...prev, password: undefined }));
+  }, [errors.password]);
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-header">
+          <h1 className="auth-title">Create Admin Account</h1>
+          <p className="auth-subtitle">Set up the first user for this system</p>
+        </div>
+
+        <form className="auth-form" onSubmit={handleSubmit} noValidate>
+          {errors.general && (
+            <div className="auth-error-banner">{errors.general}</div>
+          )}
+
+          <div className="auth-field">
+            <label className="auth-label" htmlFor="register-email">Email</label>
+            <input
+              id="register-email"
+              className={`auth-input${errors.email ? ' auth-input-error' : ''}`}
+              type="email"
+              value={email}
+              onChange={handleEmailChange}
+              placeholder="admin@example.com"
+              autoComplete="email"
+              autoFocus
+              disabled={submitting}
+            />
+            {errors.email && <span className="auth-field-error">{errors.email}</span>}
+          </div>
+
+          <div className="auth-field">
+            <label className="auth-label" htmlFor="register-password">Password</label>
+            <input
+              id="register-password"
+              className={`auth-input${errors.password ? ' auth-input-error' : ''}`}
+              type="password"
+              value={password}
+              onChange={handlePasswordChange}
+              placeholder="Min 8 characters"
+              autoComplete="new-password"
+              disabled={submitting}
+            />
+            {errors.password && <span className="auth-field-error">{errors.password}</span>}
+          </div>
+
+          <button
+            className="auth-submit"
+            type="submit"
+            disabled={submitting}
+          >
+            {submitting ? 'Creating account...' : 'Create Account'}
+          </button>
+        </form>
+
+        <p className="auth-login-link">
+          Already have an account? <Link to="/login">Sign in</Link>
+        </p>
+
+        <button
+          className="auth-theme-toggle"
+          onClick={toggleTheme}
+          type="button"
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+        >
+          {theme === 'dark' ? 'light' : 'dark'} theme
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/product-system/packages/frontend/src/pages/reset_password_page.tsx

@@ -0,0 +1,146 @@
+/**
+ * Reset Password Page — user enters new password after clicking reset link.
+ * Token is extracted from URL query parameter.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+import { useTheme } from '../hooks/useTheme';
+import { apiClient } from '../api/client';
+import { validatePassword } from '../utils/auth_validation';
+
+export function ResetPasswordPage() {
+  const { theme, toggleTheme } = useTheme();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get('token') || '';
+
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [fieldError, setFieldError] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setFieldError('');
+
+    if (!token) {
+      setError('Missing reset token. Please use the link from your email.');
+      return;
+    }
+
+    const passErr = validatePassword(password);
+    if (passErr) {
+      setFieldError(passErr);
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setFieldError('Passwords do not match');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await apiClient.resetPassword(token, password);
+      setSuccess(true);
+    } catch (err: any) {
+      setError(err.message || 'Failed to reset password');
+    } finally {
+      setSubmitting(false);
+    }
+  }, [token, password, confirmPassword]);
+
+  if (!token) {
+    return (
+      <div className="auth-page">
+        <div className="auth-card">
+          <div className="auth-header">
+            <h1 className="auth-title">Invalid Link</h1>
+          </div>
+          <div className="auth-success-message">
+            <p>This reset link is invalid or missing a token.</p>
+            <Link to="/forgot-password" className="auth-back-link">Request a new reset link</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <div className="auth-header">
+          <h1 className="auth-title">Set New Password</h1>
+          <p className="auth-subtitle">Enter your new password below</p>
+        </div>
+
+        {success ? (
+          <div className="auth-success-message">
+            <p>Your password has been reset successfully.</p>
+            <Link to="/login" className="auth-back-link">Sign in with your new password</Link>
+          </div>
+        ) : (
+          <>
+            <form className="auth-form" onSubmit={handleSubmit} noValidate>
+              {error && <div className="auth-error-banner">{error}</div>}
+
+              <div className="auth-field">
+                <label className="auth-label" htmlFor="reset-password">New Password</label>
+                <input
+                  id="reset-password"
+                  className={`auth-input${fieldError ? ' auth-input-error' : ''}`}
+                  type="password"
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  placeholder="Min 8 characters"
+                  autoComplete="new-password"
+                  autoFocus
+                  disabled={submitting}
+                />
+              </div>
+
+              <div className="auth-field">
+                <label className="auth-label" htmlFor="reset-confirm-password">Confirm Password</label>
+                <input
+                  id="reset-confirm-password"
+                  className={`auth-input${fieldError ? ' auth-input-error' : ''}`}
+                  type="password"
+                  value={confirmPassword}
+                  onChange={e => setConfirmPassword(e.target.value)}
+                  placeholder="Repeat password"
+                  autoComplete="new-password"
+                  disabled={submitting}
+                />
+                {fieldError && <span className="auth-field-error">{fieldError}</span>}
+              </div>
+
+              <button
+                className="auth-submit"
+                type="submit"
+                disabled={submitting}
+              >
+                {submitting ? 'Resetting...' : 'Reset Password'}
+              </button>
+            </form>
+
+            <p className="auth-login-link">
+              <Link to="/login">Back to login</Link>
+            </p>
+          </>
+        )}
+
+        <button
+          className="auth-theme-toggle"
+          onClick={toggleTheme}
+          type="button"
+          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
+        >
+          {theme === 'dark' ? 'light' : 'dark'} theme
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/product-system/packages/frontend/src/routes/ProtectedRoute.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../hooks/useAuth';
+
+export function ProtectedRoute() {
+  const { user, loading } = useAuth();
+
+  if (loading) return null;
+  if (!user) return <Navigate to="/login" replace />;
+
+  return <Outlet />;
+}

package/templates/product-system/packages/frontend/src/routes/accept_invitation.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { AcceptInvitationPage } from '../pages/accept_invitation_page';
+import { useAuth } from '../hooks/useAuth';
+
+export function AcceptInvitationRoute() {
+  const { user, loading } = useAuth();
+  const navigate = useNavigate();
+
+  if (loading) return null;
+  if (user) return <Navigate to="/" replace />;
+
+  return <AcceptInvitationPage onSuccess={() => navigate('/', { replace: true })} />;
+}