create-nextjs-cms 0.5.8

package/templates/default/components/EmailCard.tsx

@@ -0,0 +1,137 @@
+import getString from 'nextjs-cms/translations'
+import React from 'react'
+import { EmailItem } from 'nextjs-cms/core/types'
+import useModal from '@/hooks/useModal'
+import { useToast } from '@/components/ui/use-toast'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import ProgressBar from '@/components/ProgressBar'
+import EmailQuotaForm from '@/components/EmailQuotaForm'
+import EmailPasswordForm from '@/components/EmailPasswordForm'
+import { trpc } from '@/app/_trpc/client'
+
+export default function EmailCard({ email, action }: { email: EmailItem; action: any }) {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const { toast } = useToast()
+
+    const deleteMutation = trpc.cpanel.deleteEmail.useMutation({
+        onError: (error) => {
+            setModalResponse({
+                message: error.message,
+                messageColor: 'text-red-900',
+                borderColor: 'border-red-600',
+                bgColor: 'bg-red-200',
+            })
+        },
+        onSuccess: (data) => {
+            action()
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: getString('deleteEmailAccount'),
+                description: data.message,
+            })
+        },
+    })
+    const deleteEmail = async () => {
+        deleteMutation.mutate(email.user)
+    }
+
+    return (
+        <Card className='border border-gray-400 shadow-sm'>
+            <CardHeader>
+                <CardTitle>
+                    <div className='flex flex-row items-center'>
+                        <div className='flex flex-col break-all'>
+                            <div className='text-sm font-medium text-foreground'>
+                                <div className='me-2 font-bold'>{email.email}</div>
+                            </div>
+                        </div>
+                    </div>
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                {email.humandiskused} / {email.humandiskquota !== 'None' ? email.humandiskquota : email.diskquota}
+                <ProgressBar variant='determinate' value={parseInt(email.diskusedpercent)} />
+            </CardContent>
+            <CardFooter className='flex flex-wrap gap-1'>
+                <Button
+                    size='sm'
+                    variant='default'
+                    onClick={() => {
+                        setModal({
+                            title: getString('emailQuota'),
+                            body: (
+                                <div className='p-4'>
+                                    <EmailQuotaForm email={email.user} action={() => action()} />
+                                </div>
+                            ),
+                            headerColor: 'bg-sky-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                        })
+                    }}
+                >
+                    {getString('quota')}
+                </Button>
+                <Button
+                    size='sm'
+                    variant='default'
+                    onClick={() => {
+                        setModal({
+                            title: getString('change_password'),
+                            body: (
+                                <div className='p-4'>
+                                    <EmailPasswordForm email={email.user} action={() => action()} />
+                                </div>
+                            ),
+                            headerColor: 'bg-sky-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                        })
+                    }}
+                >
+                    {getString('password')}
+                </Button>
+                <Button
+                    size='sm'
+                    variant='destructive'
+                    onClick={() => {
+                        setModal({
+                            title: getString('delete'),
+                            body: (
+                                <div className='p-4'>
+                                    <div className='flex flex-col gap-4'>
+                                        <div>{getString('deleteEmailText')}</div>
+                                        <div className='flex gap-2'>
+                                            <button
+                                                className='rounded bg-green-600 px-2 py-1 text-white'
+                                                onClick={deleteEmail}
+                                            >
+                                                Yes
+                                            </button>
+                                            <button
+                                                className='rounded bg-red-800 px-2 py-1 text-white'
+                                                onClick={() => {
+                                                    setModal(null)
+                                                }}
+                                            >
+                                                No
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            ),
+                            headerColor: 'bg-red-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                        })
+                    }}
+                >
+                    {getString('delete')}
+                </Button>
+            </CardFooter>
+        </Card>
+    )
+}

package/templates/default/components/EmailPasswordForm.tsx

@@ -0,0 +1,84 @@
+import getString from 'nextjs-cms/translations'
+import React from 'react'
+import useModal from '@/hooks/useModal'
+import { useToast } from '@/components/ui/use-toast'
+import InfoCard from '@/components/InfoCard'
+import { trpc } from '@/app/_trpc/client'
+
+export default function EmailPasswordForm({ email, action }: { email: string; action: any }) {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+
+    const { toast } = useToast()
+    const quotaMutation = trpc.cpanel.passwordChange.useMutation({
+        onError: (error) => {
+            setModal({
+                title: getString('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+        onSuccess: (data) => {
+            action()
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: getString('success'),
+            })
+        },
+    })
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        quotaMutation.mutate({
+            email,
+            password: e.currentTarget.password.value,
+            passwordConfirm: e.currentTarget.passwordConfirm.value,
+        })
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
+            <div>
+                <label htmlFor='password' className='block text-sm font-medium leading-6 text-foreground'>
+                    {getString('new_password')}
+                </label>
+                <div className=''>
+                    <input
+                        id='password'
+                        name='password'
+                        type='text'
+                        autoComplete='password'
+                        required
+                        className='block w-full rounded-md border-0 bg-input p-2.5 text-foreground shadow-sm outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+                    />
+                </div>
+            </div>
+            <div>
+                <label htmlFor='passwordConfirm' className='block text-sm font-medium leading-6 text-foreground'>
+                    {getString('confirm_new_password')}
+                </label>
+                <div className=''>
+                    <input
+                        id='passwordConfirm'
+                        name='passwordConfirm'
+                        type='text'
+                        autoComplete='passwordConfirm'
+                        required
+                        className='block w-full rounded-md border-0 bg-input p-2.5 text-foreground shadow-sm outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+                    />
+                </div>
+            </div>
+            <div className='mt-4'>
+                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
+                    {getString('change_password')}
+                </button>
+            </div>
+        </form>
+    )
+}

package/templates/default/components/EmailQuotaForm.tsx

@@ -0,0 +1,72 @@
+import getString from 'nextjs-cms/translations'
+import React from 'react'
+import useModal from '@/hooks/useModal'
+import { Badge } from '@/components/ui/badge'
+import { useToast } from '@/components/ui/use-toast'
+import InfoCard from '@/components/InfoCard'
+import { trpc } from '@/app/_trpc/client'
+
+export default function EmailQuotaForm({ email, action }: { email: string; action: any }) {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const { toast } = useToast()
+
+    const quotaMutation = trpc.cpanel.quotaChange.useMutation({
+        onError: (error) => {
+            setModal({
+                title: getString('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message, status: false }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+        onSuccess: (data) => {
+            action()
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: getString('success'),
+            })
+        },
+    })
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        quotaMutation.mutate({
+            email,
+            quota: e.currentTarget.quota.value,
+        })
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className='flex flex-col gap-2'>
+            <div>
+                <label htmlFor='quota' className='block text-sm font-medium leading-6 text-foreground'>
+                    {getString('emailQuota')}
+                </label>
+                <div className=''>
+                    <input
+                        id='quota'
+                        name='quota'
+                        type='number'
+                        autoComplete='quota'
+                        required
+                        className='block rounded-md border-0 bg-input p-2.5 text-foreground shadow-sm outline-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+                    />
+                    <Badge className='rounded-sm border-muted-foreground text-muted-foreground' variant='secondary'>
+                        0 = {getString('unlimited')}
+                    </Badge>
+                </div>
+            </div>
+            <div className='mt-4'>
+                <button className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
+                    {getString('update_quota')}
+                </button>
+            </div>
+        </form>
+    )
+}

package/templates/default/components/EmailsPage.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import { EmailItem } from 'nextjs-cms/core/types'
+import getString from 'nextjs-cms/translations'
+import ContainerBox from '@/components/ContainerBox'
+import NewEmailForm from '@/components/NewEmailForm'
+import EmailCard from '@/components/EmailCard'
+import { trpc } from '@/app/_trpc/client'
+
+const EmailsPage = () => {
+    const controller = new AbortController()
+
+    const { isLoading, isError, data, error, refetch } = trpc.cpanel.getEmails.useQuery()
+
+    useEffect(() => {
+        return () => {
+            controller.abort()
+        }
+    }, [])
+
+    return (
+        <div className='bg-white dark:bg-slate-900'>
+            <div className='bg-gradient-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
+                <h1 className='text-3xl'>{getString('email_accounts')}</h1>
+            </div>
+
+            <div className='flex flex-col gap-2 p-4'>
+                <ContainerBox title={getString('create_new_email_account')}>
+                    <NewEmailForm action={() => refetch()} />
+                </ContainerBox>
+
+                {isLoading && <div>Loading...</div>}
+                {data && data.emails && data.emails.length > 0 && (
+                    <ContainerBox title={getString('admins_list')}>
+                        <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
+                            {data.emails.map((email: EmailItem) => (
+                                <EmailCard key={email.user} action={() => refetch()} email={email} />
+                            ))}
+                        </div>
+                    </ContainerBox>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default EmailsPage

package/templates/default/components/GalleryPhoto.tsx

@@ -0,0 +1,93 @@
+import { PhotoGalleryItem } from 'nextjs-cms/core/types'
+import getString from 'nextjs-cms/translations'
+import { MinusIcon } from '@radix-ui/react-icons'
+import ProtectedImage from '@/components/ProtectedImage'
+import React from 'react'
+import useModal from '@/hooks/useModal'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+
+const GalleryPhoto = ({ item, sectionName, action }: { item: PhotoGalleryItem; sectionName: string; action?: any }) => {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const deleteMutation = trpc.gallery.deletePhoto.useMutation({
+        onError: (error) => {
+            toast({
+                variant: 'destructive',
+                title: getString('delete_gallery_photo'),
+                description: error.message,
+            })
+        },
+
+        onSuccess: (data) => {
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: getString('gallery_photo_deleted'),
+            })
+            action()
+        },
+    })
+    const { toast } = useToast()
+    const handlePhotoDelete = async () => {
+        deleteMutation.mutate({
+            sectionName: sectionName,
+            photoName: item.photo,
+            referenceId: item.referenceId,
+        })
+    }
+    return (
+        <div className='relative'>
+            {/* Delete Button */}
+            <button
+                type='button'
+                className='absolute -end-2 -top-2 z-10 h-6 w-6 rounded-full bg-red-500 p-1'
+                onClick={() => {
+                    setModal({
+                        title: getString('delete_gallery_photo'),
+                        body: (
+                            <div className='p-4'>
+                                <div className='flex flex-col gap-4'>
+                                    <div>{getString('delete_gallery_photo_text')}</div>
+                                    <div className='flex gap-2'>
+                                        <button
+                                            className='rounded bg-green-600 px-2 py-1 text-white'
+                                            onClick={handlePhotoDelete}
+                                        >
+                                            Yes
+                                        </button>
+                                        <button
+                                            className='rounded bg-red-800 px-2 py-1 text-white'
+                                            onClick={() => {
+                                                setModal(null)
+                                            }}
+                                        >
+                                            No
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        ),
+                        headerColor: 'bg-red-700',
+                        titleColor: 'text-white',
+                        lang: 'en',
+                    })
+                }}
+            >
+                <MinusIcon className='text-white' />
+            </button>
+            <ProtectedImage
+                section={sectionName}
+                photo={item.photo}
+                isThumb={true}
+                alt={item.photo}
+                height={150}
+                width={150}
+                // fill={true}
+                className='mb-4 rounded p-1 ring ring-gray-400'
+            />
+        </div>
+    )
+}
+
+export default GalleryPhoto

package/templates/default/components/InfoCard.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import Link from 'next/link'
+import React from 'react'
+import { CheckCircle, OctagonIcon, TriangleIcon } from 'lucide-react'
+
+type result = {
+    key: string
+    title: string
+    status?: boolean
+    icon?: boolean
+    action?: {
+        text: string
+        link: string
+    }
+}
+
+export default function InfoCard({ result, className }: { result: result; className?: string }) {
+    let bgColor
+    let iconBgColor
+    let textColor
+    let buttonColor
+    switch (result.key) {
+        case 'success':
+            bgColor = 'bg-green-100'
+            iconBgColor = 'bg-green-200'
+            textColor = 'text-green-800'
+            buttonColor = 'bg-green-500 hover:bg-green-400'
+
+            break
+        case 'danger':
+            bgColor = 'bg-rose-100'
+            iconBgColor = 'bg-rose-200'
+            textColor = 'text-red-800'
+            buttonColor = 'bg-rose-600 hover:bg-red-500'
+
+            break
+        case 'warning':
+            bgColor = 'bg-orange-100'
+            iconBgColor = 'bg-orange-200'
+            textColor = 'text-orange-800'
+            buttonColor = 'bg-orange-500 hover:bg-orange-400'
+            break
+        case 'info':
+            bgColor = 'bg-sky-100'
+            iconBgColor = 'bg-sky-200'
+            textColor = 'text-blue-900'
+            buttonColor = 'bg-blue-500 hover:bg-blue-400'
+            break
+        default:
+            break
+    }
+    return (
+        <div className={className}>
+            <div className='col-span-full relative w-full overflow-hidden rounded-lg bg-white text-left border border-sky-700 transition-all'>
+                <div className=''>
+                    <div className=''>
+                        <div className={`w-full ${bgColor}`}>
+                            <div className={`flex items-center text-md font-semibold ${textColor} py-1 px-2`}>
+                                {result.icon && (
+                                    <div
+                                        className={` flex h-10 w-10 p-1 shrink-0 items-center justify-center rounded-full ${iconBgColor}`}
+                                    >
+                                        {result.key === 'success' ? (
+                                            <CheckCircle />
+                                        ) : result.key === 'danger' ? (
+                                            <OctagonIcon />
+                                        ) : result.key === 'warning' ? (
+                                            <TriangleIcon />
+                                        ) : (
+                                            <OctagonIcon />
+                                        )}
+                                    </div>
+                                )}
+                                <div className='ps-2 py-2'>
+                                    <div dangerouslySetInnerHTML={{ __html: result.title }}></div>
+                                    {result.action && (
+                                        <Link
+                                            href={result.action.link}
+                                            type='link'
+                                            className={`justify-center text-sm font-bold ms-2 text-blue-600`}
+                                        >
+                                            {result.action.text}
+                                        </Link>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}