@nextsparkjs/core 0.1.0-beta.81 → 0.1.0-beta.83

package/templates/app/(auth)/forgot-password/page.tsx

@@ -1,216 +0,0 @@
-'use client';
-
-import { resetPasswordSchema, type ResetPasswordFormData } from '@nextsparkjs/core/lib/validation';
-import { useAuth } from '@nextsparkjs/core/hooks/useAuth';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { AlertCircle, ArrowLeft, CheckCircle, Loader2, Mail } from 'lucide-react';
-import Link from 'next/link';
-import { useState, useCallback } from 'react';
-import { sel } from '@nextsparkjs/core/selectors';
-import { useTranslations } from 'next-intl';
-import { useForm } from 'react-hook-form';
-import { Button } from '@nextsparkjs/core/components/ui/button';
-import { Input } from '@nextsparkjs/core/components/ui/input';
-import { Label } from '@nextsparkjs/core/components/ui/label';
-import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card';
-import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-
-
-function ForgotPasswordPage() {
-  const { resetPassword } = useAuth();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-  const [statusMessage, setStatusMessage] = useState('');
-  const t = useTranslations('auth');
-
-  const form = useForm<ResetPasswordFormData>({
-    resolver: zodResolver(resetPasswordSchema),
-    defaultValues: {
-      email: '',
-    },
-  });
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    watch,
-  } = form;
-
-  const email = watch('email');
-
-  const onSubmit = useCallback(async (data: ResetPasswordFormData) => {
-    setLoading(true);
-    setError(null);
-    setStatusMessage(t('forgotPassword.messages.sending'));
-
-    try {
-      const result = await resetPassword(data.email);
-
-      if (!result.success) {
-        const errorMsg = result.error || 'Failed to send reset email';
-        setError(errorMsg);
-        setStatusMessage(`Error: ${errorMsg}`);
-      } else {
-        setSuccess(true);
-        setStatusMessage(t('forgotPassword.messages.sent'));
-      }
-    } catch {
-      setError('An unexpected error occurred');
-      setStatusMessage(t('forgotPassword.messages.error'));
-    } finally {
-      setLoading(false);
-    }
-  }, [resetPassword, t]);
-
-  if (success) {
-    return (
-      <>
-        <div aria-live="polite" className="sr-only">
-          {statusMessage}
-        </div>
-        <Card
-          className="w-full max-w-md"
-          data-cy={sel('auth.forgotPassword.successMessage')}
-        >
-          <CardContent className="pt-6">
-          <div className="text-center space-y-4">
-            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
-              <CheckCircle className="w-8 h-8 text-green-600" />
-            </div>
-            <div className="space-y-2">
-              <h1 className="text-2xl font-bold">{t('forgotPassword.success.title')}</h1>
-              <p className="text-muted-foreground">
-                We&apos;ve sent a password reset link to <strong>{email}</strong>
-              </p>
-              <p className="text-muted-foreground">
-                Please check your inbox and click the link to reset your password.
-              </p>
-            </div>
-
-            <Alert>
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription>
-                <strong>Didn&apos;t receive the email?</strong>
-                <br />
-                • Check your spam folder
-                <br />
-                • Make sure you entered the correct email address
-                <br />• Wait a few minutes and try again
-              </AlertDescription>
-            </Alert>
-
-            <div className="flex gap-2">
-              <Button variant="outline" asChild className="flex-1" data-cy={sel('auth.forgotPassword.successBack')}>
-                <Link href="/login">
-                  <ArrowLeft className="w-4 h-4 mr-2" />
-                  Back to Login
-                </Link>
-              </Button>
-              <Button
-                onClick={() => {
-                  setSuccess(false);
-                  setError(null);
-                  form.reset();
-                }}
-                className="flex-1"
-                data-cy={sel('auth.forgotPassword.retryButton')}
-              >
-                Try Again
-              </Button>
-            </div>
-          </div>
-          </CardContent>
-        </Card>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <div aria-live="polite" className="sr-only">
-        {statusMessage}
-      </div>
-      <Card className="w-full max-w-md" data-cy={sel('auth.forgotPassword.form')}>
-        <CardHeader className="space-y-1">
-          <CardTitle className="text-2xl font-bold" id="forgot-password-heading">
-            {t('forgotPassword.title')}
-          </CardTitle>
-          <CardDescription>
-            {t('forgotPassword.description')}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-        {error && (
-          <Alert variant="destructive" className="mb-4" data-cy={sel('auth.forgotPassword.error')}>
-            <AlertCircle className="h-4 w-4" />
-            <AlertDescription>
-              {error}
-              <div className="mt-1 text-sm">
-                Please check your email address and try again.
-              </div>
-            </AlertDescription>
-          </Alert>
-        )}
-
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
-            <div className="relative">
-              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-              <Input
-                {...register('email')}
-                id="email"
-                type="email"
-                autoComplete="email"
-                placeholder="email@example.com"
-                className="pl-9"
-                data-cy={sel('auth.forgotPassword.email')}
-              />
-            </div>
-            {errors.email && (
-              <p className="text-sm text-destructive">
-                {errors.email.message}
-              </p>
-            )}
-          </div>
-
-          <Button
-            type="submit"
-            disabled={loading}
-            className="w-full"
-            data-cy={sel('auth.forgotPassword.submitButton')}
-          >
-            {loading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Sending reset link...
-              </>
-            ) : (
-              'Send Reset Link'
-            )}
-          </Button>
-        </form>
-
-        <div className="text-center mt-4">
-          <Link
-            href="/login"
-            className="inline-flex items-center text-sm text-primary hover:underline"
-            data-cy={sel('auth.forgotPassword.backToLogin')}
-          >
-            <ArrowLeft className="w-4 h-4 mr-1" />
-            Back to Login
-          </Link>
-        </div>
-        </CardContent>
-      </Card>
-    </>
-  );
-}
-
-// Opt out of static generation due to client-side state
-export const dynamic = 'force-dynamic';
-
-export default getTemplateOrDefaultClient('app/(auth)/forgot-password/page.tsx', ForgotPasswordPage)

package/templates/app/(auth)/layout.tsx

@@ -1,51 +0,0 @@
-import type { Metadata } from 'next'
-import { AuthWrapper } from '@nextsparkjs/core/components/auth/layouts/AuthWrapper'
-import { getTemplateOrDefault, getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
-
-const defaultMetadata: Metadata = {
-  title: {
-    default: 'Authentication | Boilerplate',
-    template: '%s | Boilerplate',
-  },
-  description: 'Sign in or create an account to access our platform',
-  robots: {
-    index: false,
-    follow: false,
-  },
-}
-
-export const metadata: Metadata = getMetadataOrDefault(
-  'app/(auth)/layout.tsx',
-  defaultMetadata
-)
-
-function AuthLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20 flex items-center justify-center p-4">
-      <div className="w-full max-w-md">
-        <div className="bg-card rounded-lg shadow-lg border border-border p-8">
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-foreground mb-2">
-              Boilerplate
-            </h1>
-            <p className="text-sm text-muted-foreground">
-              Modern Full-Stack Application
-            </p>
-          </div>
-
-          <AuthWrapper>
-            {children}
-          </AuthWrapper>
-        </div>
-
-        <div className="mt-6 text-center">
-          <p className="text-xs text-muted-foreground">
-            Protected with enterprise-grade encryption
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default getTemplateOrDefault('app/(auth)/layout.tsx', AuthLayout)

package/templates/app/(auth)/login/page.tsx

@@ -1,21 +0,0 @@
-import type { Metadata } from 'next'
-import { LoginForm } from '@nextsparkjs/core/components/auth/forms/LoginForm'
-import { getTemplateOrDefault, getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
-
-const defaultMetadata: Metadata = {
-  title: 'Sign In',
-  description: 'Sign in to your account to access the platform',
-}
-
-export const metadata: Metadata = getMetadataOrDefault(
-  'app/(auth)/login/page.tsx',
-  defaultMetadata
-)
-
-function LoginPage() {
-  return <LoginForm />
-}
-
-export const dynamic = 'force-dynamic'
-
-export default getTemplateOrDefault('app/(auth)/login/page.tsx', LoginPage)

package/templates/app/(auth)/reset-password/page.tsx

@@ -1,212 +0,0 @@
-"use client";
-
-import { newPasswordSchema, type NewPasswordFormData } from "@nextsparkjs/core/lib/validation";
-import { useAuth } from "@nextsparkjs/core/hooks/useAuth";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  AlertCircle,
-  CheckCircle,
-  Loader2
-} from "lucide-react";
-import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { Suspense, useEffect, useState, useCallback } from "react";
-import { useForm } from "react-hook-form";
-
-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 { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-import { sel } from '@nextsparkjs/core/selectors'
-
-function ResetPasswordContent() {
-  const searchParams = useSearchParams();
-  const token = searchParams.get("token") || "";
-  const { updatePassword } = useAuth();
-
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-
-  const form = useForm<NewPasswordFormData>({
-    resolver: zodResolver(newPasswordSchema),
-    defaultValues: {
-      password: "",
-      confirmPassword: "",
-    },
-  });
-
-  const {
-    register,
-    handleSubmit,
-    watch,
-    formState: { errors },
-  } = form;
-
-  const password = watch("password");
-
-  useEffect(() => {
-    // If no token is present, this is not a valid reset link
-    if (!token) {
-      setError("Invalid or missing reset token. Please request a new password reset.");
-    }
-  }, [token]);
-
-  const onSubmit = useCallback(async (data: NewPasswordFormData) => {
-    if (!token) {
-      setError("Token de recuperación inválido");
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-    console.log('Actualizando contraseña...');
-
-    try {
-      const result = await updatePassword(data.password, token);
-
-      if (!result.success) {
-        const errorMsg = result.error || "Failed to reset password";
-        setError(errorMsg);
-      } else {
-        setSuccess(true);
-        console.log('Contraseña actualizada exitosamente');
-      }
-    } catch {
-      setError('Error inesperado al actualizar contraseña');
-    } finally {
-      setLoading(false);
-    }
-  }, [token, updatePassword]);
-
-  if (success) {
-    return (
-      <Card className="w-full max-w-md" data-cy={sel('auth.resetPassword.success')}>
-        <CardContent className="pt-6">
-          <div className="text-center space-y-4">
-            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
-              <CheckCircle className="w-8 h-8 text-green-600" />
-            </div>
-            <div className="space-y-2">
-              <h1 className="text-2xl font-bold">Password Reset Successful!</h1>
-              <p className="text-muted-foreground">
-                Your password has been successfully reset. You can now sign in with your new password.
-              </p>
-            </div>
-            <Button asChild className="w-full" data-cy={sel('auth.resetPassword.loginLink')}>
-              <Link href="/login">
-                Sign In Now
-              </Link>
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className="w-full max-w-md" data-cy={sel('auth.resetPassword.form')}>
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl font-bold">Set New Password</CardTitle>
-        <CardDescription>
-          Choose a strong password for your account.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        {error && (
-          <Alert variant="destructive" className="mb-4" data-cy={sel('auth.resetPassword.error')}>
-            <AlertCircle className="h-4 w-4" />
-            <AlertDescription>
-              {error}
-              {error.includes("token") && (
-                <div className="mt-1">
-                  <Link href="/forgot-password" className="underline">
-                    Request a new password reset
-                  </Link>
-                </div>
-              )}
-            </AlertDescription>
-          </Alert>
-        )}
-
-        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="password">New Password</Label>
-            <PasswordInput
-              {...register("password")}
-              id="password"
-              autoComplete="new-password"
-              placeholder="Create a strong password"
-              showRequirements={true}
-              password={password || ""}
-              data-cy={sel('auth.resetPassword.passwordInput')}
-            />
-            {errors.password && (
-              <p className="text-sm text-destructive">{errors.password.message}</p>
-            )}
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="confirmPassword">Confirm New Password</Label>
-            <PasswordInput
-              {...register("confirmPassword")}
-              id="confirmPassword"
-              autoComplete="new-password"
-              placeholder="Confirm your new password"
-              data-cy={sel('auth.resetPassword.confirmInput')}
-            />
-            {errors.confirmPassword && (
-              <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>
-            )}
-          </div>
-
-          <Button
-            type="submit"
-            disabled={loading || !token}
-            className="w-full"
-            data-cy={sel('auth.resetPassword.submit')}
-          >
-            {loading ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Resetting password...
-              </>
-            ) : (
-              "Reset Password"
-            )}
-          </Button>
-        </form>
-
-        <div className="text-center mt-4">
-          <Link
-            href="/login"
-            className="text-sm text-primary hover:underline"
-            data-cy={sel('auth.resetPassword.back')}
-          >
-            Back to Login
-          </Link>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-function ResetPasswordPage() {
-  return (
-    <Suspense fallback={
-      <div className="flex items-center justify-center">
-        <Loader2 className="w-6 h-6 animate-spin" />
-      </div>
-    }>
-      <ResetPasswordContent />
-    </Suspense>
-  );
-}
-
-// Opt out of static generation due to client-side state
-export const dynamic = 'force-dynamic';
-
-export default getTemplateOrDefaultClient('app/(auth)/reset-password/page.tsx', ResetPasswordPage)

package/templates/app/(auth)/signup/page.tsx

@@ -1,21 +0,0 @@
-import type { Metadata } from 'next'
-import { SignupForm } from '@nextsparkjs/core/components/auth/forms/SignupForm'
-import { getTemplateOrDefault, getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
-
-const defaultMetadata: Metadata = {
-  title: 'Create Account',
-  description: 'Create your account to start using our platform',
-}
-
-export const metadata: Metadata = getMetadataOrDefault(
-  'app/(auth)/signup/page.tsx',
-  defaultMetadata
-)
-
-function SignupPage() {
-  return <SignupForm />
-}
-
-export const dynamic = 'force-dynamic'
-
-export default getTemplateOrDefault('app/(auth)/signup/page.tsx', SignupPage)