sk1982/actaeon
2
5
Fork 3
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

add homepage setting

Browse Source
This commit is contained in:
sk1982 2024-03-27 20:34:41 -04:00
parent 1b79472e34
commit 7d164a2a12
11 changed files with 194 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules\\typescript\\lib"
}

10
next.config.mjs
View File

@ -17,10 +17,6 @@ const nextConfig = {
permanent: false,
basePath: false
}] : []), {
source: '/',
destination: '/dashboard',
permanent: false
}, {
source: '/chuni',
destination: '/chuni/dashboard',
permanent: false
@ -36,7 +32,11 @@ const nextConfig = {
experimental: {
instrumentationHook: true
},
productionBrowserSourceMaps: true
productionBrowserSourceMaps: true,
webpack: config => {
config.externals = [...config.externals, 'bcrypt'];
return config;
}
};
export default nextConfig;

25
package-lock.json generated
View File

@ -22,6 +22,7 @@
"mysql2": "^3.9.2",
"next": "14.1.4",
"next-auth": "^5.0.0-beta.15",
"next-client-cookies": "^1.1.0",
"next-themes": "^0.3.0",
"react": "^18",
"react-day-picker": "^8.10.0",
@ -227,7 +228,6 @@
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"optional": true,
"peer": true,
"dependencies": {
"@emotion/memoize": "0.7.4"
}
@ -236,8 +236,7 @@
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
"optional": true,
"peer": true
"optional": true
},
"node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0",
@ -7754,6 +7753,14 @@
"url": "https://github.com/sponsors/panva"
}
},
"node_modules/js-cookie": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
"engines": {
"node": ">=14"
}
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -8523,6 +8530,18 @@
}
}
},
"node_modules/next-client-cookies": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/next-client-cookies/-/next-client-cookies-1.1.0.tgz",
"integrity": "sha512-e/rqQTXHSFuvUJELMeCDgM7dWW6IUNOGr7noWyRSgE/5l033UaqseDrjShfRZYG45JnrYKoX653OdXTJ8cn+NA==",
"dependencies": {
"js-cookie": "^3.0.5"
},
"peerDependencies": {
"next": ">= 13.0.0",
"react": ">= 16.8.0"
}
},
"node_modules/next-themes": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",

1
package.json
View File

@ -28,6 +28,7 @@
"mysql2": "^3.9.2",
"next": "14.1.4",
"next-auth": "^5.0.0-beta.15",
"next-client-cookies": "^1.1.0",
"next-themes": "^0.3.0",
"react": "^18",
"react-day-picker": "^8.10.0",

28
src/auth.ts
View File

@ -1,7 +1,6 @@
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import { db, GeneratedDB } from '@/db';
import bcrypt from 'bcrypt';
import { DBUserPayload } from '@/types/user';
import { cache } from 'react';
import { SelectQueryBuilder, sql } from 'kysely';
@ -42,12 +41,15 @@ const nextAuth = NextAuth({
callbacks: {
async jwt({ token, user }) {
token.user ??= user;
const dbUser = await selectUserProps(db.selectFrom('aime_user as u')
.where('u.id', '=', (token.user as any).id));
if (dbUser) {
const { password, ...payload } = dbUser;
token.user = { ...(token.user as any), ...payload };
if (db) {
const dbUser = await selectUserProps(db.selectFrom('aime_user as u')
.where('u.id', '=', (token.user as any).id));
if (dbUser) {
const { password, ...payload } = dbUser;
token.user = { ...(token.user as any), ...payload };
}
}
return token;
@ -70,6 +72,13 @@ const nextAuth = NextAuth({
(user as any).visibility = 0;
}
const now = new Date();
(user as any).last_login_date = now;
await db.updateTable('aime_user')
.set({ last_login_date: now })
.where('id', '=', (user as any).id)
.executeTakeFirst();
return true;
}
},
@ -80,6 +89,8 @@ const nextAuth = NextAuth({
password: { label: 'Password', type: 'password' }
},
async authorize({ username, password }, req) {
const bcrypt = await import('bcrypt');
if (typeof username !== 'string' || typeof password !== 'string')
return null;
@ -97,10 +108,11 @@ const nextAuth = NextAuth({
})]
});
export const auth = cache(nextAuth.auth);
export const auth = process.env.NEXT_RUNTIME !== 'edge' ? cache(nextAuth.auth) : (null as never);
export const {
handlers: { GET, POST },
signIn,
signOut
signOut,
auth: uncachedAuth
} = nextAuth;

114
src/components/header-sidebar.tsx
View File

@ -1,40 +1,89 @@
'use client';
import { Button, Divider, Navbar } from '@nextui-org/react';
import { Button, Divider, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, Navbar } from '@nextui-org/react';
import { Bars3Icon, ChevronLeftIcon, XMarkIcon } from '@heroicons/react/20/solid';
import { Fragment, useState } from 'react';
import Link from 'next/link';
import { ThemeSwitcherDropdown, ThemeSwitcherSwitch } from '@/components/theme-switcher';
import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/solid';
import { login, logout } from '@/actions/auth';
import { usePathname, useSearchParams } from 'next/navigation';
import { usePathname, useRouter } from 'next/navigation';
import { UserPayload } from '@/types/user';
import { MAIN_ROUTES, ROUTES, UserOnly } from '@/routes';
import { MAIN_ROUTES, ROUTES, Subroute, UserOnly } from '@/routes';
import { useUser } from '@/helpers/use-user';
import { useBreakpoint } from '@/helpers/use-breakpoint';
import { useCookies } from 'next-client-cookies';
import { UserPermissions } from '@/types/permissions';
import { hasPermission } from '@/helpers/permissions';
import { ChevronDownIcon } from '@heroicons/react/24/outline';
export type HeaderSidebarProps = {
children?: React.ReactNode
children?: React.ReactNode,
};
const filterUserOnly = (user: UserPayload | null | undefined, { userOnly }: { userOnly?: UserOnly }) => {
if (!userOnly) return true;
if (typeof userOnly === 'string') return user?.[userOnly];
return user;
const filterRoute = (user: UserPayload | null | undefined, { userOnly, permissions }: { userOnly?: UserOnly, permissions?: (UserPermissions | UserPermissions[])[] }) => {
if (typeof userOnly === 'string' && !user?.[userOnly])
return false;
if (typeof userOnly === 'boolean' && !user)
return false;
if (permissions?.length && !hasPermission(user?.permissions, ...permissions))
return false;
return true;
};
export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
const user = useUser();
const path = usePathname();
const params = useSearchParams();
const pathname = usePathname();
const [isMenuOpen, setMenuOpen] = useState(false);
const breakpoint = useBreakpoint();
const cookies = useCookies();
const router = useRouter();
const from = params?.get('from');
const filter = filterUserOnly.bind(null, user);
const path = pathname === '/' ? (user?.homepage ?? '/dashboard') : pathname;
const from = cookies.get('actaeon-navigated-from');
const filter = filterRoute.bind(null, user);
const routeGroup = ROUTES.find(route => route.title === from || path?.startsWith(route.url))!;
const renderHeaderLink = (route: Subroute) => {
const linkStyle = path?.startsWith(route.url) ?
'font-semibold text-primary' : 'hover:text-secondary';
if (route.routes?.length)
return (<Dropdown key={route.url}>
<DropdownTrigger>
<Button className="bg-transparent p-0 m-0 min-h-0 min-w-0 h-auto overflow-visible" disableRipple>
<div className={`flex items-center cursor-pointer mr-4 transition text-lg ${linkStyle}`} >
{route.name}
<ChevronDownIcon className="h-5 ml-1 mt-1" />
</div>
</Button>
</DropdownTrigger>
<DropdownMenu>
{route.routes.filter(filter)
.map(route => (<DropdownItem key={route.url} className="[&:hover_*]:text-secondary"
onPress={() => {
router.push(route.url);
cookies.set('actaeon-navigated-from', routeGroup.title);
}}
onMouseEnter={() => router.prefetch(route.url)}>
<span className={`transition text-medium ${path?.startsWith(route.url) ? 'font-semibold text-primary' : ''}`}>{route.name}</span>
</DropdownItem>))}
</DropdownMenu>
</Dropdown>);
return (<Link
onClick={() => {
cookies.set('actaeon-navigated-from', routeGroup.title);
}}
href={`${route.url}`} key={route.url}
className={`mr-4 transition ${linkStyle}`}>
{route.name}
</Link>);
}
return (<>
{/* begin sidebar */}
<div className={`fixed inset-0 w-full h-full z-[49] ${isMenuOpen ? '' : 'pointer-events-none'}`}>
<div className={`transition bg-black z-[49] absolute inset-0 w-full h-full ${isMenuOpen ? 'bg-opacity-25' : 'bg-opacity-0 pointer-events-none'}`} onClick={() => setMenuOpen(false)} />
<div className={`dark flex flex-col text-white absolute p-6 top-0 h-full max-w-full w-96 bg-gray-950 z-[49] transition-all ${isMenuOpen ? 'left-0 shadow-2xl' : '-left-full'}`}>
@ -53,16 +102,31 @@ export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
<div>
{!filter(route) ? <div className={`select-none text-2xl ${route === routeGroup ? 'font-bold' : 'font-semibold'}`}>
{route.name}
</div> : <Link href={route.url} onClick={() => setMenuOpen(false)}
</div> : <Link href={route.url} onClick={() => {
setMenuOpen(false);
cookies.remove('actaeon-navigated-from');
}}
className={`text-2xl transition hover:text-secondary ${route === routeGroup ? 'font-bold' : 'font-semibold'}`}>
{route.name}
</Link>}
<div className="ml-2 mt-2">
{route.routes?.filter(filter)?.map(subroute => <div className="mb-1" key={subroute.url}>
<Link href={subroute.url} onClick={() => setMenuOpen(false)}
className={`text-xl transition hover:text-secondary ${path?.startsWith(subroute.url) ? 'font-semibold' : ''}`}>
{subroute.routes?.length ? <div
className={`text-xl`}>
{subroute.name}
</Link>
<div className="flex flex-col ml-1.5 pl-3 border-l border-gray-500/25 mt-0.5">
{subroute.routes.filter(filter).map(route => (<Link href={route.url} key={route.url}
className={`text-[1.075rem] transition ${path?.startsWith(route.url) ? 'font-semibold text-primary' : 'hover:text-secondary'}`}>
{route.name}
</Link>))}
</div>
</div> : <Link href={subroute.url} onClick={() => {
setMenuOpen(false);
cookies.remove('actaeon-navigated-from');
}}
className={`text-xl transition ${path?.startsWith(subroute.url) ? 'font-semibold text-primary' : 'hover:text-secondary'}`}>
{subroute.name}
</Link>}
</div>)}
</div>
</div>
@ -83,6 +147,9 @@ export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
</Button>
</div>
</div>
{/* end sidebar */}
{/* begin top navbar */}
<div className="flex flex-col flex-grow">
<Navbar className="w-full fixed" classNames={{ wrapper: 'max-w-full p-0' }} shouldHideOnScroll={breakpoint === undefined} height="5.5rem">
<div className="flex p-6 items-center flex-shrink-0 w-full z-[48]">
@ -92,18 +159,10 @@ export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
<span>{ routeGroup.title }</span>
</Button>
<div className="mr-auto mt-1 hidden md:flex text-lg">
{routeGroup.routes?.filter(filter).map(route =>
<Link href={route.url} key={route.url} className={`mr-4 transition ${path?.startsWith(route.url) ? 'font-semibold text-primary' : 'hover:text-secondary'}`}>
{route.name}
</Link>)
}
{routeGroup.routes?.filter(filter).map(renderHeaderLink)}
</div>
{routeGroup !== MAIN_ROUTES && <div className="mr-4 mt-1 hidden lg:flex text-lg transition hover:text-secondary">
{MAIN_ROUTES.routes.filter(filter).map(route => <Link
href={`${route.url}?from=${encodeURIComponent(routeGroup.title)}`} key={route.url}
className={`mr-4 transition ${path?.startsWith(route.url) ? 'font-semibold text-primary' : 'hover:text-secondary'}`}>
{route.name}
</Link>)}
{routeGroup !== MAIN_ROUTES && <div className="mr-4 mt-1 hidden [@media(min-width:1080px)]:flex text-lg">
{MAIN_ROUTES.routes.filter(filter).map(renderHeaderLink)}
</div>}
<div className="hidden md:flex">
<Link href={routeGroup === MAIN_ROUTES ? '/settings' : `/settings?from=${encodeURIComponent(routeGroup.title)}`}>
@ -123,5 +182,6 @@ export const HeaderSidebar = ({ children }: HeaderSidebarProps) => {
{children}
</div>
</div>
{/* end top navbar */}
</>)
};

5
src/components/providers.tsx
View File

@ -1,9 +1,12 @@
import { ReactNode } from 'react';
import { auth } from '@/auth';
import { SessionProvider } from 'next-auth/react';
import { CookiesProvider } from 'next-client-cookies/server';
export async function Providers({ children }: { children: ReactNode }) {
return (<SessionProvider session={(await auth())} basePath={process.env.NEXT_PUBLIC_BASE_PATH + '/api/auth'}>
{children}
<CookiesProvider>
{children}
</CookiesProvider>
</SessionProvider>);
}

5
src/db.ts
View File

@ -3,6 +3,9 @@ import { createPool } from 'mysql2';
import { Generated, Kysely, MysqlDialect } from 'kysely';
const createDb = () => {
if (process.env.NEXT_RUNTIME === 'edge')
return null;
if ((globalThis as any).db)
return (globalThis as any).db as Kysely<GeneratedDB>;
@ -26,4 +29,4 @@ export type GeneratedDB = {
}
};
export const db = createDb();
export const db = createDb()!;

23
src/middleware.ts
View File

@ -1,9 +1,24 @@
import { NextRequest, NextResponse } from 'next/server';
import { uncachedAuth } from '@/auth';
export function middleware(request: NextRequest) {
export const middleware = uncachedAuth((request: NextRequest) => {
const headers = new Headers(request.headers);
headers.set('x-path', request.nextUrl.basePath + request.nextUrl.pathname);
return NextResponse.next({
const options: ResponseInit & { request: { headers: Headers; }; } = {
request: { headers }
});
}
};
if (request.nextUrl.pathname === '/') {
const newUrl = request.nextUrl.clone();
newUrl.pathname = request.auth?.user?.homepage ?? '/dashboard';
return NextResponse.rewrite(newUrl, options);
}
if (request.nextUrl.pathname === '/forbidden')
options.status = 403;
else if (request.nextUrl.pathname === '/auth/login' && request.nextUrl.searchParams.get('error'))
options.status = 401;
return NextResponse.next(options);
});

23
src/routes.ts
View File

@ -1,18 +1,22 @@
import { UserPayload } from '@/types/user';
import { UserPermissions } from '@/types/permissions';
export type UserOnly = boolean | keyof UserPayload;
type Subroute = {
export type Subroute = {
url: string,
name: string,
userOnly?: UserOnly
userOnly?: UserOnly,
permissions?: (UserPermissions | UserPermissions[])[],
routes?: Omit<Subroute, 'routes'>[]
};
type Route = {
export type Route = {
url: string,
name: string,
title: string,
userOnly?: UserOnly,
permissions?: (UserPermissions | UserPermissions[])[],
routes: Subroute[]
};
@ -26,6 +30,19 @@ export const MAIN_ROUTES: Route = {
}, {
url: '/arcade',
name: 'Arcades'
}, {
url: '/admin',
name: 'Admin',
permissions: [[UserPermissions.USERMOD, UserPermissions.SYSADMIN]],
routes: [{
url: '/admin/users',
name: 'Users',
permissions: [UserPermissions.USERMOD]
}, {
url: '/admin/system-config',
name: 'System Config',
permissions: [UserPermissions.SYSADMIN]
}]
}]
};

9
src/types/next-auth/index.d.ts vendored
View File

@ -14,3 +14,12 @@ declare module 'next-auth' {
}
}
}
declare module 'next/server' {
interface NextRequest {
auth: {
user: UserPayload,
expires: string
} | null
}
}