+ {children}
+
+
+
+
+
+
+
+ {t('auth.or-continue-with')}
+
+
+ -
+ {
+ providers.map((provider: any) =>
+
- + + + ) + } +
+
+ )
+}
diff --git a/app/[locale]/(auth)/forgot/[token]/error.tsx b/app/[locale]/(auth)/forgot/[token]/error.tsx
new file mode 100644
index 0000000..f84be78
--- /dev/null
+++ b/app/[locale]/(auth)/forgot/[token]/error.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { useTranslations } from 'next-intl'
+
+import aLogo from '@/assets/logo.webp'
+
+export default function Error() {
+ const t = useTranslations('auth')
+
+ return (
+
+
+
+
+ + {t('update-your-password')} +
+
+
+
+
+
+
+
+
+ + {email} +
+
+
+
+
+ ← {t('sign-in-to-a-different-account')}
+
+
+
+
+ )
+}
diff --git a/app/[locale]/(auth)/forgot/[token]/page.tsx b/app/[locale]/(auth)/forgot/[token]/page.tsx
new file mode 100644
index 0000000..1117d51
--- /dev/null
+++ b/app/[locale]/(auth)/forgot/[token]/page.tsx
@@ -0,0 +1,23 @@
+import jwt from 'jsonwebtoken'
+
+import prisma from '@/prisma/client'
+
+import Reset from './Reset'
+
+export default async function Page({ params: { token } }: { params: { token: string } }) {
+
+ if (!process.env.NEXTAUTH_SECRET) throw new Error('Internal server error, please try again later.')
+
+ let { email }: any = jwt.decode(token)
+
+ jwt.verify(token, process.env.NEXTAUTH_SECRET)
+
+ const { passwordResetToken }: any = await prisma.user.findUnique({ where: { email } })
+
+ if (token != passwordResetToken) throw new Error('The password reset has reached its expiration date.')
+
+ return
+
+
+
+ + {t('password-reset-has-expired')} +
+
+
+
+
+
+
+ + {t('the-password-reset-has-reached-its-expiration-date')} +
+ + + {t('reset-your-password-again')} + + + + {t('sign-up-for-a-new-account')} + +
+
+ ← {t('sign-in-to-a-different-account')}
+
+
+
+
+ )
+}
diff --git a/app/[locale]/(auth)/layout.tsx b/app/[locale]/(auth)/layout.tsx
new file mode 100644
index 0000000..9cdd388
--- /dev/null
+++ b/app/[locale]/(auth)/layout.tsx
@@ -0,0 +1,8 @@
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+ + {t('reset-your-password')} +
+
+
+
+ {
+ hasBeenSent
+ ?
+
+
+
+ :
+ }
+ + {formEmail} +
+ ++ {t('we-have-sent-you-an-email-to-reset-your-password')} +
+
+
+ ← {t('sign-in-to-your-account')}
+
+
+
+ {children}
+
+ )
+}
diff --git a/app/[locale]/(auth)/login/Credentials.tsx b/app/[locale]/(auth)/login/Credentials.tsx
new file mode 100644
index 0000000..5edc9c5
--- /dev/null
+++ b/app/[locale]/(auth)/login/Credentials.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import { z } from "zod"
+import Link from "next/link"
+import { useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { signIn } from "next-auth/react"
+import { useTranslations } from "next-intl"
+
+import Form from '@/components/Form'
+
+const callbackUrl = '/dashboard'
+
+export default function Component() {
+ const t = useTranslations('auth')
+ const router = useRouter()
+
+ async function onSubmit({ email, password }: { email: string, password: string }) {
+ const { error }: any = await signIn('credentials', { email, password, redirect: false })
+ if (error) return new Error(t('invalid-credentials-try-again-or-reset-your-password'))
+
+ router.refresh()
+ router.push(callbackUrl)
+ }
+
+ // Already load the dashboard to make the signin feel swift.
+ useEffect(() => { router.prefetch(callbackUrl) }, [router])
+
+ return (
+ <>
+
+
+
+
+
+ )
+}
diff --git a/app/[locale]/(auth)/login/page.tsx b/app/[locale]/(auth)/login/page.tsx
new file mode 100644
index 0000000..8461914
--- /dev/null
+++ b/app/[locale]/(auth)/login/page.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { useTranslations } from 'next-intl'
+
+import OAuth from '../OAuth'
+import Credentials from './Credentials'
+
+import aLogo from '@/assets/logo.webp'
+
+export default function Page() {
+ const t = useTranslations('auth')
+
+ return (
+
+
+ {t('forgot-password')}
+
+
+
+
+ {t('create-an-account')}
+
+
+
+
+ )
+}
diff --git a/app/[locale]/(auth)/register/[token]/error.tsx b/app/[locale]/(auth)/register/[token]/error.tsx
new file mode 100644
index 0000000..5f334f9
--- /dev/null
+++ b/app/[locale]/(auth)/register/[token]/error.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { useTranslations } from 'next-intl'
+
+import aLogo from '@/assets/logo.webp'
+
+export default function Error() {
+ const t = useTranslations('auth')
+
+ return (
+
+
+
+
+ + {t('sign-in-to-your-account')} +
+
+
+
+
+
+
+
+ ← {t('back-to-homepage')}
+
+
+
+
+ )
+}
diff --git a/app/[locale]/(auth)/register/[token]/page.tsx b/app/[locale]/(auth)/register/[token]/page.tsx
new file mode 100644
index 0000000..f5c70f5
--- /dev/null
+++ b/app/[locale]/(auth)/register/[token]/page.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { z } from 'zod'
+import Link from 'next/link'
+import Image from 'next/image'
+import jwt from 'jsonwebtoken'
+import { signIn } from 'next-auth/react'
+import { useTranslations } from 'next-intl'
+
+import gravatar from '@/helpers/gravatar'
+
+import Form from '@/components/Form'
+
+import aLogo from '@/assets/logo.webp'
+
+const callbackUrl = '/dashboard'
+
+export default function Page({ params: { token } }: { params: { token: string } }) {
+ const t = useTranslations('auth')
+
+ let { email } = jwt.decode(token) as { email: string | undefined }
+ if (!email) throw new Error(t('the-registration-has-reached-its-expiration-date'))
+
+ const onSubmit = async ({ name, password }: any) => {
+ const { ok, status } = await fetch('/api/auth/register/create', { method: 'POST', body: JSON.stringify({ name, password, token }) })
+
+ if (status == 409) return new Error(t('an-account-with-this-email-address-has-already-been-registered'))
+ if (status == 401) return new Error(t('the-provided-token-has-expired'))
+ if (!ok) return new Error(t('sorry-something-unexpected-happened'))
+
+ signIn('credentials', { email, password, callbackUrl })
+ }
+
+ return (
+
+
+
+
+ + {t('registration-has-expired')} +
+
+
+
+
+
+ + {t('the-registration-has-reached-its-expiration-date')} +
+ + + {t('sign-up-for-a-new-account')} + +
+
+ ← {t('sign-in-to-a-different-account')}
+
+
+
+
+ )
+}
diff --git a/app/[locale]/(auth)/register/error.tsx b/app/[locale]/(auth)/register/error.tsx
new file mode 100644
index 0000000..e54d3db
--- /dev/null
+++ b/app/[locale]/(auth)/register/error.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { useTranslations } from 'next-intl'
+
+import aLogo from '@/assets/logo.webp'
+
+export default function Error({ reset }: { reset: Function }) {
+ const t = useTranslations('auth')
+
+ return (
+
+
+
+
+ + {t('complete-your-registration')} +
+
+
+
+
+
+
+
+
+ + {email} +
+
+
+ ← {t('sign-in-to-a-different-account')}
+
+
+
+
+ )
+}
diff --git a/app/[locale]/(auth)/register/page.tsx b/app/[locale]/(auth)/register/page.tsx
new file mode 100644
index 0000000..faf2a36
--- /dev/null
+++ b/app/[locale]/(auth)/register/page.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { z } from 'zod'
+import Link from 'next/link'
+import Image from 'next/image'
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+
+import gravatar from '@/helpers/gravatar'
+
+import Form from '@/components/Form'
+import OAuth from '../OAuth'
+
+import aLogo from '@/assets/logo.webp'
+
+export default function Page() {
+ const t = useTranslations('auth')
+
+ const [formEmail, setFormEmail] = useState
+
+
+
+ + {t('user-already-exists')} +
+
+
+
+
+
+
+ + {t('this-email-address-has-already-been-taken')} +
+ + +
+
+ ← {t('sign-in-to-a-different-account')}
+
+
+
+
+ )
+}
diff --git a/source/components/Builder.tsx b/app/[locale]/Builder.tsx
similarity index 86%
rename from source/components/Builder.tsx
rename to app/[locale]/Builder.tsx
index b07ec13..c21009c 100644
--- a/source/components/Builder.tsx
+++ b/app/[locale]/Builder.tsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react"
-import * as shade from '@/resources/shade'
+import * as shade from '@/helpers/shade'
export default function Builder() {
const [hex, setHex] = useState
+
+
+
+ + {t('sign-up-for-an-account')} +
+
+
+
+ {
+ hasBeenSent
+ ?
+
+
+
+ : <>
+
+
+ + {formEmail} +
+ ++ {t('we-have-sent-you-an-email-to-create-an-account')} +
+
+
+ ← {t('already-have-an-account')}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/[locale]/dashboard/account/Name.tsx b/app/[locale]/dashboard/account/Name.tsx
new file mode 100644
index 0000000..bd62264
--- /dev/null
+++ b/app/[locale]/dashboard/account/Name.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { z } from 'zod'
+import { useTranslations } from 'next-intl'
+import { useSession } from 'next-auth/react'
+
+import Form from '@/components/Form'
+
+export default function Component() {
+ const t = useTranslations()
+ const { data: session, update } = useSession()
+
+ const onSubmit = async ({ name }: any) => {
+ const { ok } = await fetch('/api/auth/account/name/update', { method: 'POST', body: JSON.stringify({ name }) })
+
+ if (!ok) return new Error(t('dashboard.sorry-something-unexpected-happened'))
+
+ await update()
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {status == 'loading'
+ ?
+
+
+
+ )
+}
diff --git a/app/[locale]/dashboard/account/Token.tsx b/app/[locale]/dashboard/account/Token.tsx
new file mode 100644
index 0000000..a7aafd5
--- /dev/null
+++ b/app/[locale]/dashboard/account/Token.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import Link from "next/link"
+
+import DeleteToken from "./token/Delete"
+
+import { useTranslations } from "next-intl"
+
+import type { ApiToken } from "@prisma/client"
+
+export default function Page({ tokens }: { tokens: Array
+
+
+ + {t('dashboard.profile')} +
++ {t('dashboard.information-related-to-your-account')} +
+
+
+
+
+
+ )
+}
diff --git a/app/[locale]/dashboard/account/page.tsx b/app/[locale]/dashboard/account/page.tsx
new file mode 100644
index 0000000..e040071
--- /dev/null
+++ b/app/[locale]/dashboard/account/page.tsx
@@ -0,0 +1,18 @@
+import { getServerSession } from 'next-auth'
+
+import Name from './Name'
+import Token from './Token'
+
+export default async function Page() {
+
+ const session = await getServerSession()
+
+ const tokens = session?.user.email ? await prisma.apiToken.findMany({ where: { owner: session.user.email } }) : []
+
+ return (
+
+
+
+
+
+
+
+ {t('generate-new-token')}
+
+ + API Tokens +
++ {t('private-authorization-tokens-to-request-data-from-our-endpoint')} +
+
+
+ -
+ {
+ tokens.length > 0 && tokens.map((token: ApiToken) =>
+
-
+ ++++
+ {token.name} +
++++ {t('created-on')} {new Date(token.createdOn).toLocaleString('en', { month: "long", day: "numeric", year: "numeric" })} +
++++
+ )
+ }
+
+
+ )
+}
diff --git a/app/[locale]/dashboard/account/token/Delete.tsx b/app/[locale]/dashboard/account/token/Delete.tsx
new file mode 100644
index 0000000..581757f
--- /dev/null
+++ b/app/[locale]/dashboard/account/token/Delete.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { TrashIcon } from "@heroicons/react/24/outline"
+
+export default function Component({ id }: { id: string }) {
+ const router = useRouter()
+
+ const [isLoading, setIsLoading] = useState
+
+
+ :
+}
diff --git a/app/[locale]/dashboard/account/token/page.tsx b/app/[locale]/dashboard/account/token/page.tsx
new file mode 100644
index 0000000..4026743
--- /dev/null
+++ b/app/[locale]/dashboard/account/token/page.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { z } from 'zod'
+import Link from 'next/link'
+import { useState } from "react"
+
+import { useTranslations } from 'next-intl'
+import { DocumentDuplicateIcon } from "@heroicons/react/24/outline"
+
+import Form from '@/components/Form'
+
+export default function Page() {
+ const t = useTranslations()
+
+ const [token, setToken] = useState
+
+ )
+}
diff --git a/app/[locale]/dashboard/example/Client.tsx b/app/[locale]/dashboard/example/Client.tsx
new file mode 100644
index 0000000..1ebffba
--- /dev/null
+++ b/app/[locale]/dashboard/example/Client.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { useSession } from "next-auth/react"
+
+export default function Page() {
+
+ const { data: session } = useSession()
+
+ return (
+
+
+
+
+
+ + API Tokens +
++ {t('dashboard.private-authorization-tokens-to-request-data-from-our-endpoint')} +
+
+ {token
+ ? <>
+
+
+
+
+
+ + {token} +
+ ++ {t('dashboard.please-ensure-to-save-this-token-in-a-secure-location-as-once-you-close-this-window-it-will-no-longer-be-visible-to-you')} +
+ +
+
+ {t('dashboard.return-to-overview')}
+
+
+
+ : }
+
+
+ )
+}
diff --git a/app/[locale]/dashboard/example/Server.tsx b/app/[locale]/dashboard/example/Server.tsx
new file mode 100644
index 0000000..122b0f8
--- /dev/null
+++ b/app/[locale]/dashboard/example/Server.tsx
@@ -0,0 +1,23 @@
+import { getServerSession } from "next-auth"
+
+import options from "@/auth/options"
+
+export default async function Page() {
+
+ const session = await getServerSession(options)
+
+ return (
+ -
+
-
+
+ Client +
++ {session?.user.name} ({session?.user.role}) +
+
+
+
+ )
+}
diff --git a/app/[locale]/dashboard/example/page.tsx b/app/[locale]/dashboard/example/page.tsx
new file mode 100644
index 0000000..5e1e655
--- /dev/null
+++ b/app/[locale]/dashboard/example/page.tsx
@@ -0,0 +1,12 @@
+import Client from "./Client"
+import Server from "./Server"
+
+export default async function Page() {
+
+ return (
+ -
+
-
+
+ Server +
++ {session?.user.name} ({session?.user.role}) +
+
+
+
+ )
+}
diff --git a/app/[locale]/dashboard/layout.tsx b/app/[locale]/dashboard/layout.tsx
new file mode 100644
index 0000000..5ad530e
--- /dev/null
+++ b/app/[locale]/dashboard/layout.tsx
@@ -0,0 +1,11 @@
+import Sidebar from "./Sidebar"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/app/[locale]/dashboard/page.tsx b/app/[locale]/dashboard/page.tsx
new file mode 100644
index 0000000..c583d06
--- /dev/null
+++ b/app/[locale]/dashboard/page.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import { useTranslations } from "next-intl"
+
+export default function Page() {
+ const t = useTranslations('dashboard')
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
new file mode 100644
index 0000000..74141e6
--- /dev/null
+++ b/app/[locale]/error.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import Link from "next/link"
+import Image from 'next/image'
+import { useTranslations } from "next-intl"
+
+import aLogo from '@/assets/logo.webp'
+
+export default function Error({ reset }: { reset: () => void }) {
+ const t = useTranslations('next-leaflet')
+
+ return (
+ -
+
-
+
{t('welcome-to-the-dashboard-of-next-leaflet')}
+{t('an-optimized-tech-stack-for-efficiency-an-all-in-one-solution-to-quickly-build-modern-web-apps')}
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
new file mode 100644
index 0000000..ea77aaf
--- /dev/null
+++ b/app/[locale]/layout.tsx
@@ -0,0 +1,56 @@
+import { Inter } from 'next/font/google'
+import { notFound } from 'next/navigation'
+import { NextIntlClientProvider as Localizer } from 'next-intl'
+
+import Session from './Session'
+
+import { locales } from '../../middleware'
+
+import '@/styles/globals.css'
+
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+ title: 'next-leaflet',
+ description: 'An optimized tech stack for efficiency.'
+}
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default async function Layout({ children, params: { locale } }: { children: React.ReactNode, params: { locale: string } }) {
+
+ locales.some(cur => cur === locale) ?? notFound()
+
+ let messages
+ try { messages = (await import(`../../src/locales/${locale}.json`)).default }
+ catch (error) { notFound() }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ 500
++ {t('an-error-occurred')} +
++ {t('sorry-something-unexpected-happened')} +
+
+
+
+ {t('contribute')}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
new file mode 100644
index 0000000..b5f9ea5
--- /dev/null
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import Link from "next/link"
+import Image from 'next/image'
+import { useTranslations } from 'next-intl'
+
+import aLogo from '@/assets/logo.webp'
+import Switcher from "@/components/locale/Switcher"
+
+import Builder from './Builder'
+import Community from './Community'
+import Footer from './Footer'
+import Navbar from './Navbar'
+
+export default function Page() {
+ const t = useTranslations('next-leaflet')
+
+ return (
+
+
+
+
+
+
+
+
+ 404
++ {t('page-not-found')} +
++ {t('sorry-we-could-not-find-the-page-you-are-looking-for')} +
+
+
+ {t('back-to-homepage')}
+
+
+ {t('contribute')}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/api/auth/[...nextauth]/options.ts b/app/api/auth/[...nextauth]/options.ts
new file mode 100644
index 0000000..f513bef
--- /dev/null
+++ b/app/api/auth/[...nextauth]/options.ts
@@ -0,0 +1,60 @@
+import prisma from '@/prisma/client'
+
+import providers from './providers'
+
+import type { Roles, User } from '@prisma/client'
+import type { NextAuthOptions } from 'next-auth'
+
+declare module 'next-auth/jwt' {
+ interface JWT {
+ id: string
+ name: string
+ email: string
+ role: Roles
+ }
+}
+
+declare module "next-auth" {
+ interface Session {
+ user: User
+ }
+}
+
+const options: NextAuthOptions = {
+ providers,
+ callbacks: {
+ async jwt({ token }) {
+ const { id, name, email, role } = await prisma.user.findUnique({ where: { email: token.email } }) as User
+
+ return { id, name, email, role }
+ },
+ async session({ session, token }) {
+ token.name && (session.user.name = token.name)
+ token.role && (session.user.role = token.role)
+
+ return session
+ },
+ async signIn({ user: { name, email } }) {
+
+ if (!name || !email) return false
+
+ await prisma.user.upsert({
+ where: { email },
+ update: {},
+ create: {
+ name,
+ email
+ }
+ })
+
+ return true
+ }
+ },
+ pages: {
+ signIn: '/login',
+ signOut: '/login',
+ error: '/login'
+ }
+}
+
+export default options
\ No newline at end of file
diff --git a/app/api/auth/[...nextauth]/providers.ts b/app/api/auth/[...nextauth]/providers.ts
new file mode 100644
index 0000000..8db3a6d
--- /dev/null
+++ b/app/api/auth/[...nextauth]/providers.ts
@@ -0,0 +1,27 @@
+import bcrypt from 'bcrypt'
+
+import Credentials from 'next-auth/providers/credentials'
+
+import prisma from '@/prisma/client'
+
+const providers = [
+ Credentials({
+ name: "Credentials",
+ credentials: {
+ email: { label: "E-mail", type: "text" },
+ password: { label: "Password", type: "password" }
+ },
+ async authorize(credentials) {
+ if (!credentials || !credentials.email) throw new Error('Invalid credentials')
+
+ const user = await prisma.user.findUnique({ where: { email: credentials.email } })
+
+ if (!user || !user.password) throw new Error('Invalid credentials')
+ if (!await bcrypt.compare(credentials.password, user.password)) throw new Error('Invalid credentials')
+
+ return user
+ }
+ })
+]
+
+export default providers
\ No newline at end of file
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
new file mode 100644
index 0000000..fd8b88d
--- /dev/null
+++ b/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,7 @@
+import NextAuth from 'next-auth'
+
+import options from './options'
+
+const handler = NextAuth(options)
+
+export { handler as GET, handler as POST }
\ No newline at end of file
diff --git a/app/api/auth/account/name/update/route.ts b/app/api/auth/account/name/update/route.ts
new file mode 100644
index 0000000..321c909
--- /dev/null
+++ b/app/api/auth/account/name/update/route.ts
@@ -0,0 +1,32 @@
+import { z } from 'zod'
+import prisma from '@/prisma/client'
+import { getToken } from "next-auth/jwt"
+import { NextRequest, NextResponse } from "next/server"
+
+export async function POST(req: NextRequest) {
+
+ try {
+ const session = await getToken({ req })
+
+ if (!session) return NextResponse.json('You are not authorized to perform this action.', { status: 401 })
+
+ const { name } = await req.json()
+
+ if (!z.string()
+ .min(2)
+ .max(32)
+ .safeParse(name).success
+ ) return NextResponse.json('The provided name does not meet the criteria.', { status: 400 })
+
+ await prisma.user.update({
+ where: { email: session.email },
+ data: { name }
+ })
+
+ return NextResponse.json('Name of the user has succesfully been updated.', { status: 200 })
+ }
+
+ catch {
+ return NextResponse.json('Internal server error, try again later.', { status: 500 })
+ }
+}
diff --git a/app/api/auth/account/token/create/route.ts b/app/api/auth/account/token/create/route.ts
new file mode 100644
index 0000000..4c21b00
--- /dev/null
+++ b/app/api/auth/account/token/create/route.ts
@@ -0,0 +1,45 @@
+import { z } from "zod"
+import crypto from "crypto"
+import bcrypt from 'bcrypt'
+import jwt from 'jsonwebtoken'
+import { getToken } from "next-auth/jwt"
+import { NextRequest, NextResponse } from "next/server"
+
+import prisma from '@/prisma/client'
+
+export async function POST(req: NextRequest) {
+
+ if (!process.env.NEXTAUTH_SECRET) return NextResponse.json('Internal server error.', { status: 500 })
+
+ try {
+ const session = await getToken({ req })
+ if (!session) return NextResponse.json('You are not authorized to perform this action.', { status: 401 })
+
+ const { name } = await req.json()
+
+ if (!z.string()
+ .min(2, { message: "This name is too short" })
+ .max(32, { message: "This name is too long" })
+ .safeParse(name).success
+ ) return NextResponse.json('The provided token name is too long or short.', { status: 400 })
+
+ if (await prisma.apiToken.findFirst({ where: { name, owner: session.email } })) return NextResponse.json('An API token with the same name already exists.', { status: 409 })
+ if (await prisma.apiToken.count({ where: { owner: session.email } }) >= 25) return NextResponse.json('You have reached the maximum amount of API tokens allowed.', { status: 403 })
+
+ const token = crypto.randomBytes(20).toString()
+
+ await prisma.apiToken.create({
+ data: {
+ name,
+ token: await bcrypt.hash(token, 12),
+ owner: session.email
+ }
+ })
+
+ return NextResponse.json(jwt.sign({ name, owner: session.email, token }, process.env.NEXTAUTH_SECRET), { status: 200 })
+ }
+
+ catch {
+ return NextResponse.json('Internal server error, try again later.', { status: 500 })
+ }
+}
diff --git a/app/api/auth/account/token/delete/route.ts b/app/api/auth/account/token/delete/route.ts
new file mode 100644
index 0000000..110745d
--- /dev/null
+++ b/app/api/auth/account/token/delete/route.ts
@@ -0,0 +1,27 @@
+import { getToken } from "next-auth/jwt"
+import { NextRequest, NextResponse } from "next/server"
+
+import prisma from '@/prisma/client'
+
+export async function POST(req: NextRequest) {
+
+ if (!process.env.NEXTAUTH_SECRET) return NextResponse.json('Internal server error.', { status: 500 })
+
+ try {
+ const session = await getToken({ req })
+
+ if (!session) return NextResponse.json('You are not authorized to perform this action.', { status: 401 })
+
+ const { id } = await req.json()
+
+ if (!id) return NextResponse.json('A valid API-token ID must be provided.', { status: 400 })
+
+ await prisma.apiToken.delete({ where: { id, owner: session.email } })
+
+ return NextResponse.json('The API-token has succesfully been removed.', { status: 200 })
+ }
+
+ catch {
+ return NextResponse.json('Internal server error, try again later.', { status: 500 })
+ }
+}
diff --git a/app/api/auth/forgot/route.ts b/app/api/auth/forgot/route.ts
new file mode 100644
index 0000000..3a6a294
--- /dev/null
+++ b/app/api/auth/forgot/route.ts
@@ -0,0 +1,55 @@
+import { z } from 'zod'
+import jwt from 'jsonwebtoken'
+import { NextRequest, NextResponse } from "next/server"
+
+import prisma from '@/prisma/client'
+import Email from '@/emails/client'
+
+import eReset from '@/emails/Reset'
+
+export async function POST(req: NextRequest) {
+
+ if (!(
+ process.env.NEXTAUTH_URL &&
+ process.env.NEXTAUTH_SECRET
+ )) return NextResponse.json('Internal server error.', { status: 500 })
+
+ try {
+ const { email } = await req.json()
+
+ if (!z.string()
+ .min(2)
+ .max(64)
+ .email()
+ .safeParse(email).success
+ ) return NextResponse.json('The provided email does not meet the criteria of an email address.', { status: 400 })
+
+ const passwordResetToken = jwt.sign({ email }, process.env.NEXTAUTH_SECRET, { expiresIn: '45m' })
+
+ try {
+ await prisma.user.update({ where: { email }, data: { passwordResetToken } })
+
+ Email(
+ eReset({
+ email,
+ link: process.env.NEXTAUTH_URL + '/en/forgot/' + passwordResetToken,
+ assets: { logoUrl: process.env.NEXTAUTH_URL + '/logo.webp' }
+ }),
+ {
+ to: email,
+ subject: 'Reset your password'
+ }
+ )
+
+ return NextResponse.json('We have sent you an email to reset your password.', { status: 200 })
+ }
+
+ catch (error) {
+ return NextResponse.json('An account with this email address does not exists.', { status: 406 })
+ }
+ }
+
+ catch {
+ return NextResponse.json('Internal server error, try again later.', { status: 500 })
+ }
+}
diff --git a/app/api/auth/forgot/update/route.ts b/app/api/auth/forgot/update/route.ts
new file mode 100644
index 0000000..fdec42b
--- /dev/null
+++ b/app/api/auth/forgot/update/route.ts
@@ -0,0 +1,49 @@
+import { NextRequest, NextResponse } from "next/server"
+
+import { z } from "zod"
+import bcrypt from 'bcrypt'
+import jwt from 'jsonwebtoken'
+
+import prisma from '@/prisma/client'
+
+export async function POST(req: NextRequest) {
+
+ if (!(
+ process.env.NEXTAUTH_URL &&
+ process.env.NEXTAUTH_SECRET
+ )) return NextResponse.json('Internal server error.', { status: 500 })
+
+ try {
+ const { password, token } = await req.json()
+
+ if (!z.string()
+ .min(8)
+ .max(64)
+ .safeParse(password).success
+ ) return NextResponse.json('The provided password does not meet the required criteria.', { status: 400 })
+
+ let email
+ jwt.verify(token, process.env.NEXTAUTH_SECRET, (err: any, decoded: any) => {
+ if (err) return NextResponse.json('The provided token has expired.', { status: 401 })
+ email = decoded.email
+ })
+
+ const { passwordResetToken }: string | any = await prisma.user.findUnique({ where: { email } })
+
+ if (token != passwordResetToken) return NextResponse.json('The provided token has expired.', { status: 401 })
+
+ await prisma.user.update({
+ where: { email },
+ data: {
+ password: await bcrypt.hash(password, 12),
+ passwordResetToken: null
+ }
+ })
+
+ return NextResponse.json('The password has succesfully been updated to the one provided.', { status: 200 })
+ }
+
+ catch {
+ return NextResponse.json('Internal server error, try again later.', { status: 500 })
+ }
+}
diff --git a/app/api/auth/register/create/route.ts b/app/api/auth/register/create/route.ts
new file mode 100644
index 0000000..53f26af
--- /dev/null
+++ b/app/api/auth/register/create/route.ts
@@ -0,0 +1,59 @@
+import { z } from 'zod'
+import bcrypt from 'bcrypt'
+import jwt from 'jsonwebtoken'
+import { NextRequest, NextResponse } from "next/server"
+
+import prisma from '@/prisma/client'
+
+export async function POST(req: NextRequest) {
+
+ if (!(
+ process.env.NEXTAUTH_URL &&
+ process.env.NEXTAUTH_SECRET
+ )) return NextResponse.json('Internal server error.', { status: 500 })
+
+ try {
+ const { name, password, token } = await req.json()
+
+ if (!(
+ z.object({
+ name: z.string()
+ .min(2)
+ .max(32)
+ }).safeParse({ name }).success &&
+ z.object({
+ password: z.string()
+ .min(8)
+ .max(64)
+ }).safeParse({ password }).success
+ )) return NextResponse.json('The provided user details do not meet the criteria.', { status: 400 })
+
+ let email
+ jwt.verify(token, process.env.NEXTAUTH_SECRET, (err: any, decoded: any) => {
+ if (err) return NextResponse.json('The provided token has expired.', { status: 401 })
+ email = decoded.email
+ })
+
+ if (!email) return NextResponse.json('The provided token has expired.', { status: 401 })
+
+ try {
+ await prisma.user.create({
+ data: {
+ name,
+ email,
+ password: await bcrypt.hash(password, 12)
+ }
+ })
+
+ return NextResponse.json('A new account has succesfully been registered.', { status: 200 })
+ }
+
+ catch (error) {
+ return NextResponse.json('An account with this email address has already been registered.', { status: 409 })
+ }
+ }
+
+ catch {
+ return NextResponse.json('Internal server error, try again later.', { status: 500 })
+ }
+}
diff --git a/app/api/auth/register/route.ts b/app/api/auth/register/route.ts
new file mode 100644
index 0000000..bcbaf9b
--- /dev/null
+++ b/app/api/auth/register/route.ts
@@ -0,0 +1,50 @@
+import { z } from 'zod'
+import jwt from 'jsonwebtoken'
+import { NextRequest, NextResponse } from "next/server"
+
+import prisma from '@/prisma/client'
+import Email from '@/emails/client'
+
+import eRegister from '@/emails/Register'
+
+export async function POST(req: NextRequest) {
+
+ if (!(
+ process.env.NEXTAUTH_URL &&
+ process.env.NEXTAUTH_SECRET
+ )) return NextResponse.json('Internal server error.', { status: 500 })
+
+ try {
+ const { email } = await req.json()
+
+ if (!z.string()
+ .min(2)
+ .max(64)
+ .email()
+ .safeParse(email).success
+ ) return NextResponse.json('The provided address does not meet the criteria of an email address.', { status: 400 })
+
+ if (await prisma.user.findUnique({ where: { email } })) return NextResponse.json('The provided email address is already taken.', { status: 403 })
+
+ const token = jwt.sign({ email }, process.env.NEXTAUTH_SECRET, { expiresIn: '1d' })
+
+ Email(
+ eRegister({
+ email,
+ link: process.env.NEXTAUTH_URL + '/en/register/' + token,
+ assets: { logoUrl: process.env.NEXTAUTH_URL + '/logo.webp' }
+ }),
+ {
+ to: email,
+ subject: 'Complete your registration'
+ }
+ )
+
+ return NextResponse.json('We have sent you an email to complete your registration.', { status: 200 })
+ }
+
+ catch {
+ return NextResponse.json('Internal server error, try again later.', { status: 500 })
+ }
+
+}
diff --git a/app/api/example/session/route.ts b/app/api/example/session/route.ts
new file mode 100644
index 0000000..610f889
--- /dev/null
+++ b/app/api/example/session/route.ts
@@ -0,0 +1,30 @@
+import { getToken } from "next-auth/jwt"
+import { NextRequest, NextResponse } from "next/server"
+
+import prisma from '@/prisma/client'
+
+let apiSessionRequests = 0
+
+export async function GET(req: NextRequest) {
+
+ const session = await getToken({ req })
+ if (!session) return NextResponse.json('You are not authorized to perform this action.', { status: 401 })
+
+ apiSessionRequests++
+
+ return NextResponse.json({
+ users: {
+ total: await prisma.user.count()
+ },
+ api: {
+ requester: {
+ name: session.name,
+ owner: session.email
+ },
+ session: {
+ requests: apiSessionRequests
+ }
+ }
+ }, { status: 200 })
+
+}
diff --git a/app/api/example/token/route.tsx b/app/api/example/token/route.tsx
new file mode 100644
index 0000000..fa874c5
--- /dev/null
+++ b/app/api/example/token/route.tsx
@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server"
+
+import prisma from '@/prisma/client'
+
+import { getApiToken } from "@/helpers/api/token"
+
+let apiSessionRequests = 0
+
+export async function GET(req: NextRequest) {
+
+ const session = await getApiToken({ req })
+ if (!session) return NextResponse.json('You are not authorized to perform this action.', { status: 401 })
+
+ apiSessionRequests++
+
+ return NextResponse.json({
+ users: {
+ total: await prisma.user.count()
+ },
+ api: {
+ requester: {
+ name: session.name,
+ owner: session.owner
+ },
+ session: {
+ requests: apiSessionRequests
+ }
+ }
+ }, { status: 200 })
+
+}
diff --git a/docker-compose.yml b/docker-compose.yml
index ba5644d..99099fc 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,49 +1,23 @@
version: "3"
services:
- # v -- NextJS | Frontend, react based compiled webapp.
+ # ┏━ NextJS | A framework for the web.
app:
- ports: [$APP_PORT:3000]
-
- image: node:lts-alpine
+ image: node:18-alpine
restart: unless-stopped
+ command: ["yarn", "deploy"]
+ ports: [$APP_PORT:3000]
+ depends_on: [database]
working_dir: /usr/app
- env_file: .env
volumes: [.:/usr/app]
- command: ["yarn", "ci"]
profiles: ["prod"]
+ env_file: .env
-# # v -- Directus | Backend CMS solution, accessible via API.
-# endpoint:
-# ports: [$ENDPOINT_PORT:8055]
-
-# image: directus/directus:latest
-# restart: unless-stopped
-# networks: [endpoint]
-# env_file: .env
-# environment:
-# CORS_ENABLED: "true"
-# PUBLIC_URL: $CORS_ENDPOINT
-# DB_CLIENT: "pg"
-# DB_HOST: "database"
-# DB_PORT: "5432"
-# DB_DATABASE: "postgres"
-# DB_USER: "postgres"
-# DB_PASSWORD: $SECRET
-# volumes:
-# - ./data/uploads:/directus/uploads
-# - ./source/extensions:/directus/extensions
-
-# # v -- Postgres | Data storage as required by Directus.
-# database:
-# image: postgis/postgis:latest
-# restart: unless-stopped
-# depends_on: [endpoint]
-# networks: [endpoint]
-# env_file: .env
-# environment:
-# POSTGRES_PASSWORD: $SECRET
-# volumes: [./data/database:/var/lib/postgresql/data]
-
-# networks:
-# endpoint:
+ # ┏━ MySQL | An SQL based database.
+ database:
+ image: postgres:15
+ restart: unless-stopped
+ ports: [$DATABASE_PORT:5432]
+ volumes: [./data:/var/lib/postgresql/data]
+ environment:
+ POSTGRES_PASSWORD: $DATABASE_PASS
diff --git a/middleware.tsx b/middleware.tsx
new file mode 100644
index 0000000..44c47f1
--- /dev/null
+++ b/middleware.tsx
@@ -0,0 +1,30 @@
+import { NextRequest } from 'next/server'
+import { withAuth } from 'next-auth/middleware'
+import createIntlMiddleware from 'next-intl/middleware'
+
+export const defaultLocale = 'en'
+export const locales = ['en', 'nl'] // Also reflect changes in → src/components/locale/Switcher
+
+const publicPages = ['/', '/login', '/register', '/forgot']
+
+const intlMiddleware = createIntlMiddleware({ locales, defaultLocale })
+
+const authMiddleware = withAuth(
+ function onSuccess(req) { return intlMiddleware(req) },
+ {
+ callbacks: { authorized: ({ token }) => token != null },
+ pages: {
+ signIn: '/login'
+ }
+ }
+)
+
+export default function middleware(req: NextRequest) {
+ const publicPathnameRegex = RegExp(`^(/(${locales.join('|')}))?(${publicPages.join('|')})?/?$`, 'i')
+ const isPublicPage = publicPathnameRegex.test(req.nextUrl.pathname)
+ return isPublicPage ? intlMiddleware(req) : (authMiddleware as any)(req)
+}
+
+export const config = {
+ matcher: ['/((?!api|_next|.*\\..*).*)']
+}
diff --git a/next.config.js b/next.config.js
index 8a84914..f1e5df0 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,7 +1,6 @@
+
module.exports = {
- reactStrictMode: true,
- swcMinify: true,
- publicRuntimeConfig: { CORS_ENDPOINT: process.env.CORS_ENDPOINT },
- serverRuntimeConfig: { STATIC_TOKEN: process.env.STATIC_TOKEN },
- images: { domains: ['fastly.picsum.photos'] }
+ images: {
+ domains: ['www.gravatar.com']
+ }
}
diff --git a/package.json b/package.json
index f2220bf..3e8fb43 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,55 @@
{
- "name": "leaflet",
+ "name": "next-leaflet",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
- "lint": "tsc --noemit && next lint",
- "ci": "yarn && yarn build && yarn start",
- "test": "./node_modules/.bin/cypress open --project source/tests"
+ "lint": "next lint",
+ "deploy": "yarn && npx prisma generate && npx prisma db push && yarn build && yarn start",
+ "update-next": "yarn add next@latest react@latest react-dom@latest eslint-config-next@latest",
+ "email-dev": "email dev --dir src/emails --port 4000"
},
"dependencies": {
- "next": "13.0.3",
- "react": "18.2.0",
- "react-dom": "18.2.0",
- "typescript": "4.8.4"
+ "@headlessui/react": "^1.7.15",
+ "@heroicons/react": "^2.0.18",
+ "@hookform/resolvers": "^3.1.1",
+ "@prisma/client": "^5.0.0",
+ "@react-email/components": "^0.0.7",
+ "@tailwindcss/forms": "^0.5.4",
+ "@types/bcrypt": "^5.0.0",
+ "@types/crypto-js": "^4.1.1",
+ "@types/jsonwebtoken": "^9.0.2",
+ "@types/node": "20.4.2",
+ "@types/nodemailer": "^6.4.8",
+ "@types/react": "18.2.15",
+ "@types/react-dom": "18.2.7",
+ "autoprefixer": "10.4.14",
+ "bcrypt": "^5.1.0",
+ "crypto-js": "^4.1.1",
+ "eslint": "8.45.0",
+ "eslint-config-next": "^13.5.3",
+ "jsonwebtoken": "^9.0.1",
+ "next": "^13.5.3",
+ "next-auth": "^4.22.1",
+ "next-intl": "^2.20.2",
+ "nodemailer": "^6.9.4",
+ "postcss": "8.4.26",
+ "prisma": "^5.0.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-email": "1.9.4",
+ "react-hook-form": "^7.45.2",
+ "sharp": "^0.32.4",
+ "tailwindcss": "3.3.3",
+ "ts-node": "^10.9.1",
+ "typescript": "5.1.6",
+ "zod": "^3.21.4"
},
- "devDependencies": {
- "@directus/sdk": "^10.3.1",
- "@headlessui/react": "^1.7.14",
- "@types/node": "18.11.9",
- "@types/react": "18.0.25",
- "@types/react-dom": "18.0.8",
- "autoprefixer": "^10.4.13",
- "cypress": "^12.2.0",
- "eslint": "8.27.0",
- "eslint-config-next": "13.0.3",
- "postcss": "^8.4.19",
- "react-icons": "^4.6.0",
- "tailwindcss": "^3.2.4"
- }
+ "prisma": {
+ "schema": "src/prisma/schema.prisma",
+ "seed": "ts-node src/prisma/seed.ts"
+ },
+ "devDependencies": {}
}
diff --git a/pages/_app.tsx b/pages/_app.tsx
deleted file mode 100644
index 7ede57e..0000000
--- a/pages/_app.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Head from 'next/head'
-
-import '@/styles/globals.css'
-
-export default function App({ Component, pageProps }: any) {
-
- return (
- <>
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ + Theme Builder +
++ Transform Directus with a splash of color, streamlined for effortless use. +
+ +
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/postcss.config.js b/postcss.config.js
index 85f717c..33ad091 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
- autoprefixer: {}
- }
+ autoprefixer: {},
+ },
}
diff --git a/sample.env b/sample.env
deleted file mode 100644
index 8e7d680..0000000
--- a/sample.env
+++ /dev/null
@@ -1,34 +0,0 @@
-
-# --------------- Docker deploy modifier, adjust to deploy for production.
-# Options | "dev" or "prod", production deploys the app.
-COMPOSE_PROFILES= "dev"
-
-# ------------ Service ports exposed by docker, ensure to prevent conflicts.
-APP_PORT= "3000"
-ENDPOINT_PORT= "8055"
-
-# ------------ Define cors to ensure secure origins.
-# "ORIGIN" | An URL that points to the frontend.
-# "ENDPOINT" | The endpoint URL of Directus.
-CORS_ORIGIN= "http://localhost:3000"
-CORS_ENDPOINT= "http://localhost:8055"
-
-# ----- Ensure that these variables are randomized.
-KEY= "next-leaflet-b5b5-5996-9aa3-922530ec40b1"
-SECRET= "next-leaflet-cda1-52c2-5ea1-c8022c45e263"
-
-# ------------- Defined to supply Directus with default credentials.
-ADMIN_EMAIL= "admin@leaflet.app"
-ADMIN_PASSWORD= "admin"
-
-# ------------- Static Token to manipulate Directus from the API of Next.JS.
-# STATIC_TOKEN= ""
-
-# ------------------ SMTP credentials, settings are totally optional.
-# Docs: https://docs.directus.io/self-hosted/config-options.html#email
-# EMAIL_TRANSPORT= "smtp"
-# EMAIL_SMTP_PORT= "587"
-# EMAIL_SMTP_HOST= "mail.leaflet.app"
-# EMAIL_SMTP_USER= "admin@leaflet.app"
-# EMAIL_SMTP_PASSWORD= "admin"
-# EMAIL_FROM= "no-reply@leaflet.app"
diff --git a/source/extensions/displays/.gitkeep b/source/extensions/displays/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/source/extensions/endpoints/.gitkeep b/source/extensions/endpoints/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/source/extensions/hooks/.gitkeep b/source/extensions/hooks/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/source/extensions/interfaces/.gitkeep b/source/extensions/interfaces/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/source/extensions/layouts/.gitkeep b/source/extensions/layouts/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/source/extensions/modules/.gitkeep b/source/extensions/modules/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/source/extensions/operations/.gitkeep b/source/extensions/operations/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/source/extensions/panels/.gitkeep b/source/extensions/panels/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/source/resources/lib/directus.ts b/source/resources/lib/directus.ts
deleted file mode 100644
index 03eb5da..0000000
--- a/source/resources/lib/directus.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-
-import getConfig from "next/config"
-import { Directus } from "@directus/sdk"
-
-const { publicRuntimeConfig, serverRuntimeConfig } = getConfig()
-const { CORS_ENDPOINT } = publicRuntimeConfig
-const { STATIC_TOKEN } = serverRuntimeConfig
-
-interface Options {
- useAdmin?: boolean
- auth?: {
- email: string
- password: string
- }
-}
-
-export default async function (options?: Options) {
-
- // Construct Directus client
- const SDK = new Directus
-
-
-
-
-
-
-
-
-
-
-
-
- - Theme Builder - -
- v2.0 -
- -- Transform Directus with a splash of color, streamlined for effortless use. -
- -
+
+
+ )
+}
+
+function Options(props: iOption) {
+ const t = useTranslations('auth')
+
+ switch (props.id) {
+
+ case 'showPassword':
+ return (
+
+
+
+ {props.errors[props.id]?.message && (
+
+
+ {props.errors[props.id]?.message && (
+
+
+
)}
+ + {props.errors[props.id]?.message.toString()} +
)} +
+ props.setShowPassword(!props.showPassword)} className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary hover:cursor-pointer"
+ id="showPassword"
+ type="checkbox"
+ />
+
+
+ )
+
+ }
+}
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
new file mode 100644
index 0000000..ca9b79c
--- /dev/null
+++ b/src/components/Loader.tsx
@@ -0,0 +1,12 @@
+
+type iTypes = 'input' | 'avatar'
+
+export default function Component({ type, override }: { type: iTypes, override?: string }) {
+
+ switch (type) {
+ case 'input':
+ return
+ case 'avatar':
+ return
+ }
+}
diff --git a/src/components/locale/Switcher.tsx b/src/components/locale/Switcher.tsx
new file mode 100644
index 0000000..602da7c
--- /dev/null
+++ b/src/components/locale/Switcher.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { Fragment } from 'react'
+import Link from 'next-intl/link'
+import { useLocale } from 'next-intl'
+import { usePathname } from 'next-intl/client'
+import { CheckIcon } from '@heroicons/react/20/solid'
+import { Listbox, Transition } from '@headlessui/react'
+
+import { classNames } from '@/helpers/tailwind'
+
+const locales = [
+ 'en',
+ 'nl'
+]
+
+export default function Component() {
+ const locale = useLocale()
+ const pathname = usePathname()
+
+ return (
+
+
+ {locale.toUpperCase()}
+
+
+
+
+ {
+ locales.map((lang, index) => (
+
+ classNames(
+ active ? 'bg-primary text-white' : 'text-gray-900',
+ 'relative cursor-default select-none py-2 pl-8 pr-4 hover:cursor-pointer'
+ )
+ }
+ value={lang}
+ >
+ {({ selected, active }) => (
+ <>
+
+ {lang.toUpperCase()}
+
+
+ {
+ selected
+ ? (
+
+
+
+ )
+ : null
+ }
+
+ )}
+
+
+ ))
+ }
+
+
+
+ }
+ 
+
+