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

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

@@ -1,686 +0,0 @@
-'use client'
-
-import { useUserProfile } from '@nextsparkjs/core/hooks/useUserProfile'
-import { useAuth } from '@nextsparkjs/core/hooks/useAuth'
-import { setUserLocaleClient } from '@nextsparkjs/core/lib/locale-client'
-import { I18N_CONFIG } from '@nextsparkjs/core/lib/config'
-import { useEffect, useState, useCallback } from 'react'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { Button } from '@nextsparkjs/core/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
-import { Input } from '@nextsparkjs/core/components/ui/input'
-import { Label } from '@nextsparkjs/core/components/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@nextsparkjs/core/components/ui/select'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@nextsparkjs/core/components/ui/popover'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@nextsparkjs/core/components/ui/command'
-import { Separator } from '@nextsparkjs/core/components/ui/separator'
-import { Alert, AlertDescription } from '@nextsparkjs/core/components/ui/alert'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@nextsparkjs/core/components/ui/dialog'
-import {
-  Loader2, 
-  User, 
-  Mail, 
-  Calendar,
-  Globe,
-  Clock,
-  Languages,
-  CheckCircle2,
-  AlertCircle,
-  ChevronDown,
-  ChevronRight,
-  Trash2,
-  Check,
-  ChevronsUpDown
-} from 'lucide-react'
-import { profileSchema, ProfileFormData } from '@nextsparkjs/core/lib/validation'
-import { countries, timezones } from '@nextsparkjs/core/lib/countries-timezones'
-import { sel } from '@nextsparkjs/core/selectors'
-import { useTranslations } from 'next-intl'
-import { getTemplateOrDefaultClient } from '@nextsparkjs/registries/template-registry.client'
-
-// Language options
-const languages = [
-  { value: 'en', label: 'English' },
-  { value: 'es', label: 'Español' },
-] as const
-
-function ProfilePage() {
-  const { profile, isLoading, error } = useUserProfile()
-  const { signOut } = useAuth()
-  const queryClient = useQueryClient()
-  const [updateSuccess, setUpdateSuccess] = useState(false)
-  const [advancedOpen, setAdvancedOpen] = useState(false)
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
-  const [statusMessage, setStatusMessage] = useState('')
-  const [timezoneOpen, setTimezoneOpen] = useState(false)
-  const [countryOpen, setCountryOpen] = useState(false)
-  const t = useTranslations('settings')
-
-  // Form setup
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    setValue,
-    watch,
-    reset
-  } = useForm<ProfileFormData>({
-    resolver: zodResolver(profileSchema),
-    defaultValues: {
-      firstName: '',
-      lastName: '',
-      country: '',
-      timezone: '',
-      language: I18N_CONFIG.defaultLocale,
-    },
-  })
-
-  // Update form when profile data loads
-  useEffect(() => {
-    if (profile) {
-      reset({
-        firstName: profile.firstName || '',
-        lastName: profile.lastName || '',
-        country: profile.country || '',
-        timezone: profile.timezone || '',
-        language: profile.language || I18N_CONFIG.defaultLocale,
-      })
-    }
-  }, [profile, reset])
-
-  // Update profile mutation
-  const updateProfileMutation = useMutation({
-    mutationFn: async (data: ProfileFormData) => {
-      const response = await fetch('/api/user/profile', {
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(data),
-      })
-
-      if (!response.ok) {
-        const errorData = await response.json()
-        throw new Error(errorData.error || 'Failed to update profile')
-      }
-
-      return response.json()
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['user-profile'] })
-      setUpdateSuccess(true)
-      setStatusMessage(t('profile.messages.updateSuccess'))
-      setTimeout(() => {
-        setUpdateSuccess(false)
-        setStatusMessage('')
-      }, 3000)
-    },
-    onError: (error) => {
-      setStatusMessage(t('profile.messages.updateError', { error: error.message }))
-    },
-  })
-
-  // Delete account mutation
-  const deleteAccountMutation = useMutation({
-    mutationFn: async () => {
-      const response = await fetch('/api/user/delete-account', {
-        method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      })
-
-      if (!response.ok) {
-        const errorData = await response.json()
-        throw new Error(errorData.error || 'Failed to delete account')
-      }
-
-      return response.json()
-    },
-    onSuccess: async () => {
-      setStatusMessage(t('profile.messages.deleteSuccess'))
-      // Clear all query data and sign out the user
-      queryClient.clear()
-      await signOut()
-      // Redirect will happen automatically after signOut
-    },
-    onError: (error) => {
-      setStatusMessage(t('profile.messages.deleteError', { error: error.message }))
-    },
-  })
-
-  const onSubmit = useCallback(async (data: ProfileFormData) => {
-    setStatusMessage(t('profile.messages.updating'))
-    
-    // Check if language changed
-    const languageChanged = profile?.language !== data.language
-    
-    try {
-      // Update profile with ALL fields (including language)
-      await updateProfileMutation.mutateAsync(data)
-      
-      // If language changed, update app language after successful profile update
-      if (languageChanged) {
-        try {
-          // Update cookie and reload to apply new language
-          setUserLocaleClient(data.language)
-          window.location.reload()
-        } catch (error) {
-          console.error('Error updating app language:', error)
-        }
-      }
-    } catch {
-      // Error handled by mutation onError
-    }
-  }, [updateProfileMutation, t, profile?.language])
-
-  const handleDeleteAccount = useCallback(() => {
-    setStatusMessage(t('profile.messages.deleting'))
-    deleteAccountMutation.mutate()
-    setDeleteDialogOpen(false)
-  }, [deleteAccountMutation, t])
-
-  const handleAdvancedToggle = useCallback(() => {
-    const newState = !advancedOpen
-    setAdvancedOpen(newState)
-    setStatusMessage(newState ? t('profile.messages.advancedOpen') : t('profile.messages.advancedClosed'))
-  }, [advancedOpen, t])
-
-
-
-  const countryValue = watch('country')
-  const timezoneValue = watch('timezone')
-  const languageValue = watch('language')
-
-  if (isLoading) {
-    return (
-      <div
-        className="flex items-center justify-center py-12"
-        role="status"
-        aria-label={t('profile.loading.aria')}
-      >
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" aria-hidden="true" />
-        <span className="sr-only">{t('profile.loading.text')}</span>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <Alert
-        className="max-w-md"
-        variant="destructive"
-        role="alert"
-      >
-        <AlertCircle className="h-4 w-4" aria-hidden="true" />
-        <AlertDescription>
-          {t('profile.error.message')}
-        </AlertDescription>
-      </Alert>
-    )
-  }
-
-  return (
-    <>
-      {/* MANDATORY: Screen reader announcements */}
-      <div
-        aria-live="polite"
-        aria-atomic="true"
-        className="sr-only"
-      >
-        {statusMessage}
-      </div>
-
-      <div
-        className="max-w-4xl space-y-6"
-        data-cy={sel('settings.profile.container')}
-      >
-        {/* Header */}
-        <header>
-          <h1
-            className="text-2xl font-bold"
-            id="profile-heading"
-          >
-            {t('profile.title')}
-          </h1>
-          <p className="text-muted-foreground mt-1">
-            {t('profile.description')}
-          </p>
-        </header>
-
-        {/* Success Alert */}
-        {updateSuccess && (
-          <Alert
-            className="border-green-200 bg-green-50 text-green-800"
-            role="status"
-            aria-live="polite"
-            data-cy={sel('settings.profile.successMessage')}
-          >
-            <CheckCircle2 className="h-4 w-4 text-green-600" aria-hidden="true" />
-            <AlertDescription>
-              {t('profile.success.message')}
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {/* Error Alert */}
-        {updateProfileMutation.error && (
-          <Alert
-            variant="destructive"
-            role="alert"
-            aria-live="assertive"
-          >
-            <AlertCircle className="h-4 w-4" aria-hidden="true" />
-            <AlertDescription>
-              {updateProfileMutation.error.message}
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {/* Single Column Layout */}
-        <Card
-          className="max-w-4xl"
-          data-cy={sel('settings.profile.form')}
-        >
-            <CardHeader>
-              <CardTitle
-                className="flex items-center gap-2"
-                id="profile-form-title"
-              >
-                <User className="h-5 w-5" aria-hidden="true" />
-                {t('profile.form.title')}
-              </CardTitle>
-              <CardDescription>
-                {t('profile.form.description')}
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form
-                onSubmit={handleSubmit(onSubmit)}
-                className="space-y-6"
-                aria-labelledby="profile-form-title"
-              >
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <Label htmlFor="firstName">{t('profile.form.firstName')}</Label>
-                  <Input
-                    id="firstName"
-                    {...register('firstName')}
-                    placeholder={t('profile.form.firstNamePlaceholder')}
-                  />
-                  {errors.firstName && (
-                    <p className="text-sm text-destructive">{errors.firstName.message}</p>
-                  )}
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="lastName">{t('profile.form.lastName')}</Label>
-                  <Input
-                    id="lastName"
-                    {...register('lastName')}
-                    placeholder={t('profile.form.lastNamePlaceholder')}
-                  />
-                  {errors.lastName && (
-                    <p className="text-sm text-destructive">{errors.lastName.message}</p>
-                  )}
-                </div>
-              </div>
-
-              {/* Email, Auth and Verification - 50%, 25%, 25% Layout */}
-              <div className="grid gap-4 grid-cols-1 md:grid-cols-4">
-                <div className="space-y-2 md:col-span-2">
-                  <Label>{t('profile.form.email')}</Label>
-                  <div className="relative">
-                    <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      value={profile?.email || ''}
-                      disabled
-                      className="pl-10 bg-muted"
-                    />
-                  </div>
-                  <p className="text-xs text-muted-foreground">
-                    {t('profile.form.emailNote')}
-                  </p>
-                </div>
-
-                <div className="space-y-2">
-                  <Label>{t('profile.form.authMethod')}</Label>
-                  <div className="flex items-center gap-3 py-2">
-                    {profile?.authMethod === 'Google' ? (
-                      <svg className="h-4 w-4" viewBox="0 0 24 24">
-                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                      </svg>
-                    ) : (
-                      <Mail className="h-4 w-4 text-muted-foreground" />
-                    )}
-                    <span className="text-sm font-medium">{profile?.authMethod}</span>
-                  </div>
-                </div>
-                
-                <div className="space-y-2">
-                  <Label>{t('profile.form.verificationStatus')}</Label>
-                  <div className="flex items-center gap-3 py-2">
-                    <CheckCircle2 className={`h-4 w-4 ${profile?.emailVerified ? 'text-green-600' : 'text-muted-foreground'}`} />
-                    <span className="text-sm font-medium">
-                      {profile?.emailVerified ? t('profile.form.verified') : t('profile.form.notVerified')}
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Location and Preferences - 20%, 30%, 50% Layout */}
-              <div className="grid gap-4 grid-cols-1 md:grid-cols-10">
-                <div className="space-y-2 md:col-span-2">
-                  <Label htmlFor="language">{t('profile.form.language')}</Label>
-                  <Select
-                    value={languageValue || ''}
-                    onValueChange={(value: string) => {
-                      if (value) {
-                        setValue('language', value)
-                      }
-                    }}
-                  >
-                    <SelectTrigger>
-                      <div className="flex items-center gap-2">
-                        <Languages className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-                        <SelectValue placeholder={t('profile.form.languagePlaceholder')} />
-                      </div>
-                    </SelectTrigger>
-                    <SelectContent>
-                      {languages.map((language) => (
-                        <SelectItem key={language.value} value={language.value}>
-                          {language.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  {errors.language && (
-                    <p className="text-sm text-destructive">{errors.language.message}</p>
-                  )}
-                </div>
-
-                <div className="space-y-2 md:col-span-3">
-                  <Label htmlFor="country">{t('profile.form.country')}</Label>
-                  <Popover open={countryOpen} onOpenChange={setCountryOpen}>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        aria-expanded={countryOpen}
-                        className="w-full justify-between"
-                      >
-                        <div className="flex items-center gap-2">
-                          <Globe className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-                          {countryValue
-                            ? countries.find((country) => country.value === countryValue)?.label
-                            : t('profile.form.countryPlaceholder')}
-                        </div>
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-[400px] p-0">
-                      <Command>
-                        <CommandInput placeholder="Buscar país..." className="h-9" />
-                        <CommandList>
-                          <CommandEmpty>No se encontraron países.</CommandEmpty>
-                          <CommandGroup>
-                            {countries.map((country) => (
-                              <CommandItem
-                                key={country.value}
-                                value={country.label}
-                                onSelect={() => {
-                                  setValue('country', country.value === countryValue ? '' : country.value)
-                                  setCountryOpen(false)
-                                }}
-                              >
-                                {country.label}
-                                <Check
-                                  className={`ml-auto h-4 w-4 ${
-                                    countryValue === country.value ? "opacity-100" : "opacity-0"
-                                  }`}
-                                />
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                  {errors.country && (
-                    <p className="text-sm text-destructive">{errors.country.message}</p>
-                  )}
-                </div>
-
-                <div className="space-y-2 md:col-span-5">
-                  <Label htmlFor="timezone">{t('profile.form.timezone')}</Label>
-                  <Popover open={timezoneOpen} onOpenChange={setTimezoneOpen}>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        aria-expanded={timezoneOpen}
-                        className="w-full justify-between"
-                      >
-                        <div className="flex items-center gap-2">
-                          <Clock className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-                          {timezoneValue
-                            ? timezones.find((timezone) => timezone.value === timezoneValue)?.label
-                            : t('profile.form.timezonePlaceholder')}
-                        </div>
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-[400px] p-0">
-                      <Command>
-                        <CommandInput placeholder="Buscar timezone..." className="h-9" />
-                        <CommandList>
-                          <CommandEmpty>No se encontraron timezones.</CommandEmpty>
-                          <CommandGroup>
-                            {timezones.map((timezone) => (
-                              <CommandItem
-                                key={timezone.value}
-                                value={timezone.label}
-                                onSelect={() => {
-                                  setValue('timezone', timezone.value === timezoneValue ? '' : timezone.value)
-                                  setTimezoneOpen(false)
-                                }}
-                              >
-                                {timezone.label}
-                                <Check
-                                  className={`ml-auto h-4 w-4 ${
-                                    timezoneValue === timezone.value ? "opacity-100" : "opacity-0"
-                                  }`}
-                                />
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                  {errors.timezone && (
-                    <p className="text-sm text-destructive">{errors.timezone.message}</p>
-                  )}
-                </div>
-              </div>
-
-              {/* Action Section - Button and Member Info */}
-              <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 pt-2">
-                <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                  <Calendar className="h-4 w-4" />
-                  <span className="font-medium">{t('profile.form.memberSince')}:</span>
-                  <span>
-                    {profile && new Date(profile.createdAt).toLocaleDateString('es-ES', {
-                      month: 'long',
-                      day: 'numeric',
-                      year: 'numeric'
-                    })}
-                  </span>
-                </div>
-
-                <Button
-                  type="submit"
-                  disabled={isSubmitting || updateProfileMutation.isPending}
-                  aria-describedby="submit-help"
-                  className="w-full md:w-auto"
-                  data-cy={sel('settings.profile.submitButton')}
-                >
-                  {(isSubmitting || updateProfileMutation.isPending) ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
-                      {t('profile.form.updating')}
-                    </>
-                  ) : (
-                    t('profile.form.updateButton')
-                  )}
-                </Button>
-                <div id="submit-help" className="sr-only">
-                  {(isSubmitting || updateProfileMutation.isPending) 
-                    ? t('profile.form.submitHelpUpdating')
-                    : t('profile.form.submitHelp')
-                  }
-                </div>
-              </div>
-
-              {/* Advanced Section */}
-              <div className="mt-6">
-                <Separator />
-                <div className="mt-4">
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      onClick={handleAdvancedToggle}
-                      className="w-full justify-between text-muted-foreground hover:text-foreground"
-                      aria-expanded={advancedOpen}
-                      aria-controls="advanced-options"
-                      aria-label={advancedOpen ? t('profile.advanced.closeLabel') : t('profile.advanced.openLabel')}
-                    >
-                      {t('profile.advanced.title')}
-                      {advancedOpen ? (
-                        <ChevronDown className="h-4 w-4" aria-hidden="true" />
-                      ) : (
-                        <ChevronRight className="h-4 w-4" aria-hidden="true" />
-                      )}
-                    </Button>
-                  
-                    {advancedOpen && (
-                      <div
-                        id="advanced-options"
-                        className="mt-4 space-y-4 border-t pt-4"
-                      >
-                        <div className="space-y-2">
-                          <h4
-                            className="text-sm font-medium text-destructive"
-                            id="danger-zone-heading"
-                          >
-                            {t('profile.danger.title')}
-                          </h4>
-                          <p className="text-xs text-muted-foreground">
-                            {t('profile.danger.warning')}
-                          </p>
-                        
-                        <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-                            <DialogTrigger asChild>
-                              <Button
-                                variant="destructive"
-                                className="w-full gap-2"
-                                disabled={deleteAccountMutation.isPending}
-                                aria-describedby="danger-zone-heading"
-                              >
-                                <Trash2 className="h-4 w-4" aria-hidden="true" />
-                                {t('profile.danger.deleteButton')}
-                              </Button>
-                            </DialogTrigger>
-                          <DialogContent>
-                            <DialogHeader>
-                              <DialogTitle className="flex items-center gap-2 text-destructive">
-                                <AlertCircle className="h-5 w-5" />
-                                {t('profile.danger.dialogTitle')}
-                              </DialogTitle>
-                              <DialogDescription asChild>
-                                <div className="space-y-2">
-                                  <div>
-                                    {t('profile.danger.dialogDescription')}
-                                  </div>
-                                  <div className="font-medium text-foreground">
-                                    {t('profile.danger.dialogWarning')}
-                                  </div>
-                                  <div>
-                                    {t('profile.danger.dialogDetail')}
-                                  </div>
-                                </div>
-                              </DialogDescription>
-                            </DialogHeader>
-                            <DialogFooter className="gap-2">
-                              <Button
-                                variant="outline"
-                                onClick={() => setDeleteDialogOpen(false)}
-                                disabled={deleteAccountMutation.isPending}
-                              >
-                                {t('profile.actions.cancel')}
-                              </Button>
-                              <Button
-                                variant="destructive"
-                                onClick={handleDeleteAccount}
-                                disabled={deleteAccountMutation.isPending}
-                                className="gap-2"
-                              >
-                                {deleteAccountMutation.isPending ? (
-                                  <>
-                                    <Loader2 className="h-4 w-4 animate-spin" />
-                                    {t('profile.danger.deleting')}
-                                  </>
-                                ) : (
-                                  <>
-                                    <Trash2 className="h-4 w-4" />
-                                    {t('profile.danger.confirmDelete')}
-                                  </>
-                                )}
-                              </Button>
-                            </DialogFooter>
-                          </DialogContent>
-                        </Dialog>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
-    </>
-  )
-}
-
-export default getTemplateOrDefaultClient('app/dashboard/settings/profile/page.tsx', ProfilePage)

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

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