create-nextjs-cms 0.5.8

package/templates/default/components/NavbarAlt.tsx

@@ -0,0 +1,182 @@
+import React from 'react'
+import classNames from 'classnames'
+import { MoonIcon, SunIcon, BellIcon, HamburgerMenuIcon } from '@radix-ui/react-icons'
+import { useTheme } from 'next-themes'
+import Link from 'next/link'
+import getString from 'nextjs-cms/translations'
+import ProtectedImage from '@/components/ProtectedImage'
+import Image from 'next/image'
+import { LogOut, Settings } from 'lucide-react'
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useToast } from '@/components/ui/use-toast'
+import { logout, useSession } from 'nextjs-cms/auth/react'
+type Props = {
+    /**
+     * Allows the parent component to modify the state when the
+     * menu button is clicked.
+     */
+    onMenuButtonClick(): void
+}
+
+export default function Navbar(props: Props) {
+    const { theme, setTheme } = useTheme()
+    const session = useSession()
+    const { toast } = useToast()
+    const handleLogout = async (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        try {
+            await logout()
+        } catch (error: any) {
+            toast({
+                variant: 'destructive',
+                title: getString('logoutError'),
+                description: error.message,
+            })
+        }
+    }
+
+    return (
+        <>
+            <nav
+                className={classNames({
+                    'sticky top-0 h-[65px] bg-white text-zinc-500 drop-shadow dark:bg-slate-800': true, // colors
+                    'top-0 z-10 w-full px-4 shadow-sm md:w-full': true, //positioning & styling
+                })}
+            >
+                <div className='mx-auto px-0 lg:px-2'>
+                    <div className='flex h-16 items-center justify-between'>
+                        <div className='flex items-center'>
+                            <div className='flex-shrink-0'>
+                                <div className='flex md:hidden'>
+                                    {/* Mobile menu button */}
+                                    <button
+                                        onClick={props.onMenuButtonClick}
+                                        className='relative inline-flex items-center justify-center rounded-md border border-foreground p-2 text-foreground hover:text-foreground/90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800'
+                                    >
+                                        <span className='absolute -inset-0.5' />
+                                        <span className='sr-only'>Open main menu</span>
+                                        <HamburgerMenuIcon className='block h-6 w-6' aria-hidden='true' />
+                                    </button>
+                                </div>
+                            </div>
+
+                            {/*<div className=''>
+                                <div className='flex items-baseline space-x-4'>
+                                    <input
+                                        type='text'
+                                        className='h-full w-full border-0 bg-transparent text-amber-500 outline-0 ring-0'
+                                        placeholder='Search...'
+                                    />
+                                </div>
+                            </div>*/}
+                        </div>
+                        <div className=''>
+                            <div className='ml-4 flex items-center md:ml-6'>
+                                <div className='flex flex-row items-center gap-3'>
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger
+                                            asChild
+                                            className='cursor-pointer text-foreground hover:text-foreground/90'
+                                        >
+                                            <BellIcon className='h-6 w-6' />
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent className='mt-2 w-[300px]'>
+                                            <DropdownMenuLabel>{getString('notifications')}</DropdownMenuLabel>
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuGroup></DropdownMenuGroup>
+                                            <DropdownMenuSeparator />
+
+                                            <Link href='/log'>
+                                                <DropdownMenuItem className='cursor-pointer'>
+                                                    <span>{getString('seeAll')}</span>
+                                                </DropdownMenuItem>
+                                            </Link>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                    <button
+                                        onClick={() => {
+                                            setTheme(theme === 'dark' ? 'light' : 'dark')
+                                        }}
+                                        type='button'
+                                        className='relative rounded-full p-1 text-foreground hover:text-foreground/90 focus:outline-none'
+                                    >
+                                        <span className='absolute -inset-1.5' />
+                                        <span className='sr-only'>Theme</span>
+                                        {theme === 'dark' ? (
+                                            <SunIcon className='h-6 w-6' aria-hidden='true' />
+                                        ) : (
+                                            <MoonIcon className='h-6 w-6' aria-hidden='true' />
+                                        )}
+                                    </button>
+                                    {/* Profile dropdown */}
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger
+                                            asChild
+                                            className='relative ms-2 flex max-w-xs cursor-pointer items-center rounded-full bg-gray-800 text-sm hover:ring focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800'
+                                        >
+                                            <div>
+                                                <span className='absolute -inset-1.5' />
+                                                <span className='sr-only'>Open user menu</span>
+                                                {session?.data?.user.image ? (
+                                                    <ProtectedImage
+                                                        section={'admins'}
+                                                        photo={session.data.user.image}
+                                                        isThumb={true}
+                                                        alt={session.data.user.name}
+                                                        width={40}
+                                                        height={40}
+                                                        // fill={true}
+                                                        className='rounded-full'
+                                                    />
+                                                ) : (
+                                                    <Image
+                                                        src='/blank_avatar.png'
+                                                        height={36}
+                                                        width={36}
+                                                        alt='profile image'
+                                                        className='rounded-full ring-2 ring-inset ring-amber-300'
+                                                    />
+                                                )}
+                                            </div>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent className='w-56'>
+                                            <DropdownMenuLabel>{session.data?.user.name}</DropdownMenuLabel>
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuGroup>
+                                                <Link href='/settings'>
+                                                    <DropdownMenuItem className='cursor-pointer'>
+                                                        <Settings className='mr-2 h-4 w-4' />
+                                                        <span>{getString('accountSettings')}</span>
+                                                        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+                                                    </DropdownMenuItem>
+                                                </Link>
+                                            </DropdownMenuGroup>
+                                            <DropdownMenuSeparator />
+
+                                            <DropdownMenuItem className='cursor-pointer' onClick={handleLogout}>
+                                                <LogOut className='mr-2 h-4 w-4' />
+                                                <span>{getString('logout')}</span>
+                                                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </>
+    )
+}

package/templates/default/components/NewAdminForm.tsx

@@ -0,0 +1,172 @@
+import getString from 'nextjs-cms/translations'
+import React from 'react'
+import useModal from '@/hooks/useModal'
+import InfoCard from '@/components/InfoCard'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import AdminRoleCard from '@/components/AdminPrivilegeCard'
+import { Button } from '@/components/ui/button'
+import { RouterOutputs } from 'nextjs-cms/api'
+
+export default function NewAdminForm({
+    privileges,
+    action,
+}: {
+    privileges: RouterOutputs['admins']['list']['privileges']
+    action: any
+}) {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const { toast } = useToast()
+    const formRef = React.useRef<HTMLFormElement>(null)
+    const [allChecked, setAllChecked] = React.useState<boolean | 'edited' | null>(null)
+    const usernameRef = React.useRef<HTMLInputElement>(null)
+    const passwordRef = React.useRef<HTMLInputElement>(null)
+
+    const mutation = trpc.admins.create.useMutation({
+        onError: (error) => {
+            setModal({
+                title: getString('create_new_admin'),
+                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) => {
+            setModal(null)
+            setModalResponse(null)
+            setAllChecked(false)
+            action()
+
+            /**
+             * Empty the form
+             */
+            if (formRef.current) {
+                formRef.current.reset()
+            }
+
+            /**
+             * Show a success toast
+             */
+            toast({
+                variant: 'success',
+                title: getString('create_new_admin'),
+                description: getString('itemCreatedSuccessfully'),
+            })
+        },
+    })
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        /**
+         * Check username and password
+         */
+        if (!usernameRef.current?.value || !passwordRef.current?.value) {
+            setModal({
+                title: getString('create_new_admin'),
+                body: <div className='p-4'>{getString('usernamePasswordRequired')}</div>,
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+            return
+        }
+
+        const data = new FormData(e.currentTarget)
+        const values = Object.fromEntries(data.entries())
+        values.form_type = 'new'
+
+        // Convert the privileges to an array of objects
+        const privileges = Object.entries(values).filter(([key]) => key.includes('privileges'))
+        const privilegesArray = privileges.map(([key, value]) => JSON.parse(value as string))
+
+        mutation.mutate({
+            username: usernameRef.current.value,
+            password: passwordRef.current.value,
+            privileges: privilegesArray,
+        })
+    }
+
+    return (
+        <form ref={formRef} onSubmit={handleSubmit} className='flex flex-col gap-2'>
+            <div>
+                <label htmlFor='email' className='block text-sm font-medium leading-6 text-foreground'>
+                    {getString('username')}
+                </label>
+                <div className=''>
+                    <input
+                        ref={usernameRef}
+                        id='username'
+                        name='username'
+                        type='text'
+                        // required
+                        className='block w-full rounded-md border-0 bg-input p-3 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='password' className='block text-sm font-medium leading-6 text-foreground'>
+                    {getString('password')}
+                </label>
+                <div className=''>
+                    <input
+                        ref={passwordRef}
+                        id='password'
+                        name='password'
+                        type='text'
+                        // required
+                        className='block w-full rounded-md border-0 bg-input p-3 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>
+            {privileges && privileges.length > 0 && (
+                <>
+                    <div className='mt-5 w-full font-semibold'>{getString('admin_privileges')}</div>
+                    <div className='flex'>
+                        <Button
+                            className='border border-foreground'
+                            type='button'
+                            variant={allChecked === true ? 'default' : 'secondary'}
+                            onClick={(event) => {
+                                event.preventDefault()
+                                event.stopPropagation()
+                                if (allChecked === true) {
+                                    setAllChecked(false)
+                                } else {
+                                    setAllChecked(true)
+                                }
+                            }}
+                        >
+                            {allChecked === true ? getString('removeAll') : getString('checkAll')}
+                        </Button>
+                    </div>
+                    <div className='mt-2 grid w-full grid-cols-1 gap-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-3 xl-sidebar:grid-cols-4 2xl-sidebar:grid-cols-5'>
+                        {privileges.map((privilege, index: number) => {
+                            return (
+                                <AdminRoleCard
+                                    key={index}
+                                    privilege={privilege}
+                                    allChecked={allChecked}
+                                    setAllChecked={setAllChecked}
+                                />
+                            )
+                        })}
+                    </div>
+                </>
+            )}
+
+            <div className='mt-4'>
+                <button type='submit' className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
+                    {getString('submit_new_admin')}
+                </button>
+            </div>
+        </form>
+    )
+}

package/templates/default/components/NewEmailForm.tsx

@@ -0,0 +1,131 @@
+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 NewEmailForm({ action }: { action: any }) {
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const formRef = React.useRef<HTMLFormElement>(null)
+    const { toast } = useToast()
+    const newEmailMutation = trpc.cpanel.createEmail.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()
+            toast({
+                variant: 'success',
+                title: getString('success'),
+                description: data.message,
+            })
+
+            // Empty the form
+            if (formRef.current) {
+                formRef.current.reset()
+            }
+        },
+    })
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        newEmailMutation.mutate({
+            email: e.currentTarget.username.value,
+            password: e.currentTarget.password.value,
+            quota: e.currentTarget.quota.value,
+        })
+
+        /*const data = new FormData(e.currentTarget)
+        const values = Object.fromEntries(data.entries())
+        values.operationType = 'newEmail'
+        const response = await handleEmailSubmission(values, axiosPrivate, controller)
+        if (response.error) {
+            setModal({
+                title: getString('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: response.error.message, status: false }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        } else if (response.code === 200) {
+            action()
+            toast({
+                variant: 'success',
+                title: getString('success'),
+                description: response.message,
+            })
+        }*/
+    }
+
+    return (
+        <form ref={formRef} onSubmit={handleSubmit} className='flex flex-col gap-2'>
+            <div>
+                <label htmlFor='username' className='block text-sm font-medium leading-6 text-foreground'>
+                    {getString('email')}
+                </label>
+                <div className=''>
+                    <input
+                        id='username'
+                        name='username'
+                        type='text'
+                        autoComplete='username'
+                        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='password' className='block text-sm font-medium leading-6 text-foreground'>
+                    {getString('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='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('create')}</button>
+            </div>
+        </form>
+    )
+}