create-nextjs-cms 0.7.0 → 0.7.2

package/templates/default/components/SettingsPage.tsx

@@ -1,232 +1,232 @@
-'use client'
-
-import React, { useEffect, useState } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import useModal from '@/hooks/useModal'
-import InfoCard from '@/components/InfoCard'
-import LoadingSpinners from '@/components/LoadingSpinners'
-import { useToast } from '@/components/ui/use-toast'
-import { trpc } from '@/app/_trpc/client'
-import Form from '@/components/form/Form'
-
-export default function SettingsPage() {
-    const t = useI18n()
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const controller = new AbortController()
-    const { toast } = useToast()
-
-    const [data, {refetch}] = trpc.accountSettings.get.useSuspenseQuery()
-
-    const passwordChangeMutation = trpc.accountSettings.changePassword.useMutation({
-        onError: (error) => {
-            setIsSubmitting(false)
-            setModal({
-                title: t('error'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: error.message }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-
-        onSuccess: async (data) => {
-            setIsSubmitting(false)
-            if (data === true) {
-                // Refetch the page
-                await refetch()
-
-                toast({
-                    title: t('success'),
-                    description: t('success'),
-                    duration: 2000,
-                })
-            }
-        },
-    })
-
-    const saveMutation = trpc.accountSettings.save.useMutation({
-        onError: (error) => {
-            setIsSubmitting(false)
-            setModal({
-                title: t('error'),
-                body: (
-                    <div className='p-4'>
-                        <InfoCard result={{ key: 'danger', title: error.message }} />
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-
-        onSuccess: async (data) => {
-            setIsSubmitting(false)
-            if (data === true) {
-                // Refetch the page
-                await refetch()
-
-                toast({
-                    title: t('success'),
-                    description: t('success'),
-                    duration: 2000,
-                })
-            }
-        },
-    })
-
-    const handlePasswordChange = async (formData: FormData) => {
-        setIsSubmitting(true)
-        if (isSubmitting) return
-        passwordChangeMutation.mutate({
-            oldPassword: formData.get('oldPassword') as string,
-            newPassword: formData.get('newPassword') as string,
-            confirmPassword: formData.get('confirmPassword') as string,
-        })
-    }
-
-    const handleSubmit = async (formData: FormData) => {
-        setIsSubmitting(true)
-        if (isSubmitting) return
-        saveMutation.mutate({
-            emailAddress: formData.get('emailAddress') as string,
-            fullName: formData.get('name') as string,
-            phoneNumber: formData.get('phoneNumber') as string,
-        })
-    }
-
-    function cancelSubmit() {
-        controller.abort()
-        setIsSubmitting(false)
-    }
-
-    useEffect(() => {
-        return () => {
-            cancelSubmit()
-        }
-    }, [])
-
-    return (
-        <div>
-            <div className='bg-background w-full overflow-hidden'>
-                <div className='bg-linear-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
-                    <h1 className='text-3xl'>{t('accountSettings')}</h1>
-                </div>
-                <div className='flex w-full flex-col'>
-                    <div className='flex flex-col'>
-                                <Form
-                                    buttonType='small'
-                                    data={{
-                                        section: {
-                                            name: 'settings',
-                                        },
-
-                                        inputGroups: [
-                                            {
-                                                groupId: 1,
-                                                groupTitle: t('adminDetails'),
-                                                groupOrder: 1,
-                                                inputs: [
-                                                    {
-                                                        type: 'text',
-                                                        required: false,
-                                                        label: t('username'),
-                                                        name: 'username',
-                                                        value: data?.username,
-                                                        readonly: true,
-                                                        conditionalFields: [],
-                                                    },
-                                                    {
-                                                        type: 'text',
-                                                        required: false,
-                                                        label: t('name'),
-                                                        name: 'name',
-                                                        value: data?.fullName,
-                                                        readonly: false,
-                                                        conditionalFields: [],
-                                                    },
-                                                    {
-                                                        type: 'text',
-                                                        required: false,
-                                                        label: t('emailAddress'),
-                                                        name: 'emailAddress',
-                                                        value: data?.emailAddress,
-                                                        readonly: false,
-                                                        conditionalFields: [],
-                                                    },
-                                                    {
-                                                        type: 'text',
-                                                        required: false,
-                                                        label: t('phoneNumber'),
-                                                        name: 'phoneNumber',
-                                                        value: data?.phoneNumber,
-                                                        readonly: false,
-                                                        conditionalFields: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    }}
-                                    handleSubmit={handleSubmit}
-                                    isSubmitting={isSubmitting}
-                                />
-                                <hr />
-                                <Form
-                                    buttonType='small'
-                                    data={{
-                                        section: {
-                                            name: 'settings',
-                                        },
-
-                                        inputGroups: [
-                                            {
-                                                groupId: 1,
-                                                groupTitle: t('password'),
-                                                groupOrder: 1,
-                                                inputs: [
-                                                    {
-                                                        type: 'password',
-                                                        required: true,
-                                                        label: t('oldPassword'),
-                                                        name: 'oldPassword',
-                                                        value: undefined,
-                                                        readonly: false,
-                                                        conditionalFields: [],
-                                                    },
-                                                    {
-                                                        type: 'password',
-                                                        required: true,
-                                                        label: t('newPassword'),
-                                                        name: 'newPassword',
-                                                        value: undefined,
-                                                        readonly: false,
-                                                        conditionalFields: [],
-                                                    },
-                                                    {
-                                                        type: 'password',
-                                                        required: true,
-                                                        label: t('confirmNewPassword'),
-                                                        name: 'confirmPassword',
-                                                        value: undefined,
-                                                        readonly: false,
-                                                        conditionalFields: [],
-                                                    },
-                                                ],
-                                            },
-                                        ],
-                                    }}
-                                    handleSubmit={handlePasswordChange}
-                                    isSubmitting={isSubmitting}
-                                />
-                        
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import useModal from '@/hooks/useModal'
+import InfoCard from '@/components/InfoCard'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import Form from '@/components/form/Form'
+
+export default function SettingsPage() {
+    const t = useI18n()
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const controller = new AbortController()
+    const { toast } = useToast()
+
+    const [data, {refetch}] = trpc.accountSettings.get.useSuspenseQuery()
+
+    const passwordChangeMutation = trpc.accountSettings.changePassword.useMutation({
+        onError: (error) => {
+            setIsSubmitting(false)
+            setModal({
+                title: t('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            setIsSubmitting(false)
+            if (data === true) {
+                // Refetch the page
+                await refetch()
+
+                toast({
+                    title: t('success'),
+                    description: t('success'),
+                    duration: 2000,
+                })
+            }
+        },
+    })
+
+    const saveMutation = trpc.accountSettings.save.useMutation({
+        onError: (error) => {
+            setIsSubmitting(false)
+            setModal({
+                title: t('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            setIsSubmitting(false)
+            if (data === true) {
+                // Refetch the page
+                await refetch()
+
+                toast({
+                    title: t('success'),
+                    description: t('success'),
+                    duration: 2000,
+                })
+            }
+        },
+    })
+
+    const handlePasswordChange = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        passwordChangeMutation.mutate({
+            oldPassword: formData.get('oldPassword') as string,
+            newPassword: formData.get('newPassword') as string,
+            confirmPassword: formData.get('confirmPassword') as string,
+        })
+    }
+
+    const handleSubmit = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        saveMutation.mutate({
+            emailAddress: formData.get('emailAddress') as string,
+            fullName: formData.get('name') as string,
+            phoneNumber: formData.get('phoneNumber') as string,
+        })
+    }
+
+    function cancelSubmit() {
+        controller.abort()
+        setIsSubmitting(false)
+    }
+
+    useEffect(() => {
+        return () => {
+            cancelSubmit()
+        }
+    }, [])
+
+    return (
+        <div>
+            <div className='bg-background w-full overflow-hidden'>
+                <div className='bg-linear-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
+                    <h1 className='text-3xl'>{t('accountSettings')}</h1>
+                </div>
+                <div className='flex w-full flex-col'>
+                    <div className='flex flex-col'>
+                                <Form
+                                    buttonType='small'
+                                    data={{
+                                        section: {
+                                            name: 'settings',
+                                        },
+
+                                        inputGroups: [
+                                            {
+                                                groupId: 1,
+                                                groupTitle: t('adminDetails'),
+                                                groupOrder: 1,
+                                                inputs: [
+                                                    {
+                                                        type: 'text',
+                                                        required: false,
+                                                        label: t('username'),
+                                                        name: 'username',
+                                                        value: data?.username,
+                                                        readonly: true,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'text',
+                                                        required: false,
+                                                        label: t('name'),
+                                                        name: 'name',
+                                                        value: data?.fullName,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'text',
+                                                        required: false,
+                                                        label: t('emailAddress'),
+                                                        name: 'emailAddress',
+                                                        value: data?.emailAddress,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'text',
+                                                        required: false,
+                                                        label: t('phoneNumber'),
+                                                        name: 'phoneNumber',
+                                                        value: data?.phoneNumber,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    }}
+                                    handleSubmit={handleSubmit}
+                                    isSubmitting={isSubmitting}
+                                />
+                                <hr />
+                                <Form
+                                    buttonType='small'
+                                    data={{
+                                        section: {
+                                            name: 'settings',
+                                        },
+
+                                        inputGroups: [
+                                            {
+                                                groupId: 1,
+                                                groupTitle: t('password'),
+                                                groupOrder: 1,
+                                                inputs: [
+                                                    {
+                                                        type: 'password',
+                                                        required: true,
+                                                        label: t('oldPassword'),
+                                                        name: 'oldPassword',
+                                                        value: undefined,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'password',
+                                                        required: true,
+                                                        label: t('newPassword'),
+                                                        name: 'newPassword',
+                                                        value: undefined,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'password',
+                                                        required: true,
+                                                        label: t('confirmNewPassword'),
+                                                        name: 'confirmPassword',
+                                                        value: undefined,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    }}
+                                    handleSubmit={handlePasswordChange}
+                                    isSubmitting={isSubmitting}
+                                />
+                        
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}