@nextsparkjs/core 0.1.0-beta.84 → 0.1.0-beta.85

package/templates/app/dashboard/settings/page.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { sel } from '@nextsparkjs/core/selectors'
+import { useTranslations } from 'next-intl'
+import Link from 'next/link'
+import { useMemo } from 'react'
+import { getEnabledSettingsPages } from '@nextsparkjs/core/lib/config'
+import {
+  User,
+  Lock,
+  Shield,
+  Bell,
+  CreditCard,
+  Key,
+  type LucideIcon
+} from 'lucide-react'
+
+// Icon mapping for settings pages
+const SETTINGS_ICONS: Record<string, LucideIcon> = {
+  profile: User,
+  password: Lock,
+  security: Shield,
+  notifications: Bell,
+  'api-keys': Key,
+  billing: CreditCard,
+}
+
+function SettingsPage() {
+  const t = useTranslations('settings')
+
+  // Get enabled settings pages from config
+  const enabledPages = useMemo(() => {
+    return getEnabledSettingsPages()
+  }, [])
+
+  return (
+    <div
+      className="max-w-2xl"
+      data-cy={sel('settings.overview.container')}
+    >
+      <div className="space-y-6">
+        <header>
+          <h2
+            className="text-2xl font-bold"
+            id="settings-overview-heading"
+          >
+            {t('overview.title')}
+          </h2>
+          <p
+            className="text-muted-foreground mt-2"
+          >
+            {t('overview.description')}
+          </p>
+        </header>
+
+        <section
+          aria-labelledby="settings-overview-heading"
+          className="space-y-4"
+        >
+          {enabledPages.map((page) => {
+            const Icon = SETTINGS_ICONS[page.key] || User
+
+            return (
+              <Link
+                key={page.key}
+                href={`/dashboard/settings/${page.key}`}
+                className="block p-6 rounded-lg border border-border bg-card hover:bg-accent transition-colors group"
+                data-cy={sel('settings.overview.card', { key: page.key })}
+              >
+                <div className="flex items-start gap-4">
+                  <div className="flex-shrink-0">
+                    <Icon className="h-5 w-5 text-muted-foreground group-hover:text-accent-foreground transition-colors" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-semibold mb-1">
+                      {t(`navigation.${page.key}`)}
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      {t(`overview.${page.key}Description`)}
+                    </p>
+                  </div>
+                </div>
+              </Link>
+            )
+          })}
+        </section>
+      </div>
+    </div>
+  )
+}
+
+export default SettingsPage

package/templates/app/dashboard/settings/password/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonPasswordPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function PasswordLoading() {
+  return <SkeletonPasswordPage />
+}

package/templates/app/dashboard/settings/password/page.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import { changePasswordSchema, type ChangePasswordFormData } from "@nextsparkjs/core/lib/validation";
+import { useAuth } from "@nextsparkjs/core/hooks/useAuth";
+import { useUserProfile } from "@nextsparkjs/core/hooks/useUserProfile";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { 
+  AlertCircle, 
+  CheckCircle, 
+  Loader2
+} from "lucide-react";
+import { useState, useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@nextsparkjs/core/components/ui/button";
+import { Label } from "@nextsparkjs/core/components/ui/label";
+import { PasswordInput } from "@nextsparkjs/core/components/ui/password-input";
+import { Alert, AlertDescription } from "@nextsparkjs/core/components/ui/alert";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
+import { Checkbox } from "@nextsparkjs/core/components/ui/checkbox";
+import { sel } from '@nextsparkjs/core/selectors';
+import { useTranslations } from 'next-intl';
+import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
+
+function UpdatePasswordPage() {
+  const { changePassword, user } = useAuth();
+  const { hasPassword, isLoading: profileLoading } = useUserProfile();
+  const router = useRouter();
+  const t = useTranslations('settings');
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<ChangePasswordFormData>({
+    resolver: zodResolver(changePasswordSchema),
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+      revokeOtherSessions: false,
+    },
+  });
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = form;
+
+  const newPassword = watch("newPassword");
+
+  const onSubmit = useCallback(async (data: ChangePasswordFormData) => {
+    setLoading(true);
+    setError(null);
+    setStatusMessage(t('password.messages.updating'));
+
+    try {
+      const result = await changePassword(
+        data.currentPassword, 
+        data.newPassword, 
+        data.revokeOtherSessions
+      );
+
+      if (!result.success) {
+        const errorMsg = result.error || t('password.messages.updateError');
+        setError(errorMsg);
+        setStatusMessage(`${t('common.status.error')}: ${errorMsg}`);
+      } else {
+        setSuccess(true);
+        setStatusMessage(t('password.messages.updateSuccess'));
+      }
+    } catch {
+      const errorMsg = t('password.messages.unexpectedError');
+      setError(errorMsg);
+      setStatusMessage(`${t('common.status.error')}: ${errorMsg}`);
+    } finally {
+      setLoading(false);
+    }
+  }, [changePassword, t]);
+
+  if (!user) {
+    router.push('/login');
+    return null;
+  }
+
+  // Redirect Google users - they can't change password
+  if (!profileLoading && !hasPassword) {
+    router.push('/dashboard/settings/profile');
+    return null;
+  }
+
+  if (profileLoading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <span className="sr-only">{t('password.loading.verifying')}</span>
+      </div>
+    );
+  }
+
+  if (success) {
+    return (
+      <>
+        {/* MANDATORY: Screen reader announcements */}
+        <div
+          aria-live="polite"
+          aria-atomic="true"
+          className="sr-only"
+        >
+          {statusMessage}
+        </div>
+
+        <div
+          className="max-w-4xl"
+          data-cy={sel('settings.password.successMessage')}
+        >
+          <div className="space-y-6">
+            <div
+              className="text-center space-y-4"
+              role="status"
+              aria-live="polite"
+            >
+              <div
+                className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto"
+                role="img"
+                aria-label={t('password.success.aria')}
+              >
+                <CheckCircle className="w-8 h-8 text-green-600" aria-hidden="true" />
+              </div>
+              <div className="space-y-2">
+                <h1
+                  className="text-2xl font-bold"
+                >
+                  {t('password.success.title')}
+                </h1>
+                <p
+                  className="text-muted-foreground"
+                >
+                  {t('password.success.description')}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {/* MANDATORY: Screen reader announcements */}
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {statusMessage}
+      </div>
+
+      <div
+        className="max-w-4xl"
+        data-cy={sel('settings.password.container')}
+      >
+        <div className="space-y-6">
+          {/* Header */}
+          <header>
+            <h1
+              className="text-2xl font-bold"
+              id="password-heading"
+            >
+              {t('password.title')}
+            </h1>
+            <p
+              className="text-muted-foreground mt-1"
+            >
+              {t('password.description')}
+            </p>
+          </header>
+
+          <Card
+            data-cy={sel('settings.password.form')}
+          >
+            <CardHeader>
+              <CardTitle
+                id="password-form-title"
+              >
+                {t('password.form.title')}
+              </CardTitle>
+              <CardDescription>
+                {t('password.form.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {error && (
+                <Alert
+                  variant="destructive"
+                  className="mb-4"
+                  role="alert"
+                  aria-live="assertive"
+                >
+                  <AlertCircle className="h-4 w-4" aria-hidden="true" />
+                  <AlertDescription>{error}</AlertDescription>
+                </Alert>
+              )}
+
+              <form
+                onSubmit={handleSubmit(onSubmit)}
+                className="space-y-6"
+                aria-labelledby="password-form-title"
+              >
+              <div className="space-y-2">
+                <Label htmlFor="currentPassword">{t('password.form.currentPassword')}</Label>
+                  <PasswordInput
+                    {...register("currentPassword")}
+                    id="currentPassword"
+                    autoComplete="current-password"
+                    placeholder={t('password.form.currentPasswordPlaceholder')}
+                    aria-required="true"
+                    aria-describedby={errors.currentPassword ? "currentPassword-error" : undefined}
+                    data-cy={sel('settings.password.currentPassword')}
+                  />
+                {errors.currentPassword && (
+                  <p className="text-sm text-destructive">{errors.currentPassword.message}</p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="newPassword">{t('password.form.newPassword')}</Label>
+                <PasswordInput
+                  {...register("newPassword")}
+                  id="newPassword"
+                  autoComplete="new-password"
+                  placeholder={t('password.form.newPasswordPlaceholder')}
+                  showRequirements={true}
+                  password={newPassword || ""}
+                />
+                {errors.newPassword && (
+                  <p className="text-sm text-destructive">{errors.newPassword.message}</p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">{t('password.form.confirmPassword')}</Label>
+                <PasswordInput
+                  {...register("confirmPassword")}
+                  id="confirmPassword"
+                  autoComplete="new-password"
+                  placeholder={t('password.form.confirmPasswordPlaceholder')}
+                />
+                {errors.confirmPassword && (
+                  <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>
+                )}
+              </div>
+
+              {/* Action Section - Checkbox and Button */}
+              <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 pt-2">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="revokeOtherSessions"
+                    {...register("revokeOtherSessions")}
+                  />
+                  <Label
+                    htmlFor="revokeOtherSessions"
+                    className="text-sm font-normal cursor-pointer"
+                  >
+                    {t('password.form.revokeOtherSessions')}
+                  </Label>
+                </div>
+
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  aria-describedby="submit-help"
+                  className="w-full md:w-auto"
+                  data-cy={sel('settings.password.submitButton')}
+                >
+                  {loading ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+                      {t('password.form.updating')}
+                    </>
+                  ) : (
+                    t('password.form.updateButton')
+                  )}
+                </Button>
+                <div id="submit-help" className="sr-only">
+                  {loading ? t('password.form.submitHelpUpdating') : t('password.form.submitHelp')}
+                </div>
+              </div>
+            </form>
+          </CardContent>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
+}
+
+// Opt out of static generation due to client-side state
+export const dynamic = 'force-dynamic';
+
+export default getTemplateOrDefaultClient('app/dashboard/settings/password/page.tsx', UpdatePasswordPage)

package/templates/app/dashboard/settings/plans/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonPlansPage } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function PlansLoading() {
+  return <SkeletonPlansPage />
+}

package/templates/app/dashboard/settings/plans/page.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
+import { PricingTable } from '@nextsparkjs/core/components/billing'
+import { useRouter } from 'next/navigation'
+
+/**
+ * Plans Settings Page
+ *
+ * Displays the pricing table with plan comparison.
+ * Users can select a plan to initiate checkout.
+ */
+function PlansPage() {
+  const t = useTranslations('settings')
+  const router = useRouter()
+
+  const handleSelectPlan = useCallback((planSlug: string) => {
+    // Redirect to checkout API with selected plan
+    router.push(`/api/v1/billing/checkout?plan=${planSlug}`)
+  }, [router])
+
+  return (
+    <div className="max-w-6xl" data-cy="plans-settings-main">
+      {/* Header */}
+      <header data-cy="plans-settings-header">
+        <h1 className="text-2xl font-bold">{t('plans.title')}</h1>
+        <p className="text-muted-foreground mt-1">{t('plans.description')}</p>
+      </header>
+
+      {/* Pricing Table */}
+      <div className="mt-8" data-cy="plans-settings-table">
+        <PricingTable onSelectPlan={handleSelectPlan} />
+      </div>
+    </div>
+  )
+}
+
+export default getTemplateOrDefaultClient('app/dashboard/settings/plans/page.tsx', PlansPage)

package/templates/app/dashboard/settings/profile/loading.tsx

@@ -0,0 +1,5 @@
+import { SkeletonProfileForm } from '@nextsparkjs/core/components/ui/skeleton-settings'
+
+export default function ProfileLoading() {
+  return <SkeletonProfileForm />
+}