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

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

@@ -1,92 +0,0 @@
-'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

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

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

@@ -1,306 +0,0 @@
-"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

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

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

@@ -1,40 +0,0 @@
-'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

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