@dudousxd/adonis-authkit-server 0.1.0

package/build/stubs/ui/react/pages/login.tsx

@@ -0,0 +1,171 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/login.tsx') })
+}}}
+import AuthShell, { type AuthBrand } from '../../components/auth_shell'
+
+const inputClass =
+  'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-transparent focus:ring-2'
+
+export default function AuthkitLogin({
+  uid,
+  csrfToken,
+  step = 'identifier',
+  email,
+  account,
+  error,
+  brand,
+}: {
+  uid: string
+  csrfToken: string
+  step?: 'identifier' | 'password'
+  email?: string
+  account?: { fullName: string | null; globalRoles: string[] } | null
+  error?: string
+  brand?: AuthBrand
+}) {
+  const accent = brand?.accent ?? '#111827'
+  const focusStyle = { ['--tw-ring-color' as any]: accent }
+
+  if (step === 'identifier') {
+    return (
+      <AuthShell brand={brand}>
+        <form method="POST" action={'/auth/interaction/' + uid + '/identifier'}>
+          <input type="hidden" name="_csrf" value={csrfToken} />
+          <h1 className="text-xl font-semibold text-gray-900">Entrar</h1>
+          <p className="mt-1 text-sm text-gray-500">Informe seu e-mail para continuar.</p>
+
+          {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+          <div className="mt-6">
+            <label htmlFor="email" className="mb-1 block text-sm font-medium text-gray-700">
+              E-mail
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              required
+              autoFocus
+              className={inputClass}
+              style={focusStyle}
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="mt-6 w-full rounded-lg py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+            style={{ backgroundColor: accent }}
+          >
+            Continuar
+          </button>
+
+          <div className="mt-4 flex justify-between text-sm text-gray-600">
+            <a href={'/auth/interaction/' + uid + '/signup'} className="hover:underline">
+              Criar conta
+            </a>
+            <a href="/auth/forgot-password" className="hover:underline">
+              Esqueci a senha
+            </a>
+          </div>
+        </form>
+
+        <div className="my-6 flex items-center gap-3 text-xs text-gray-400">
+          <span className="h-px flex-1 bg-gray-200" />
+          ou
+          <span className="h-px flex-1 bg-gray-200" />
+        </div>
+
+        <a
+          href={'/auth/google/redirect/' + uid}
+          className="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white py-2.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+        >
+          <svg className="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              fill="#4285F4"
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1Z"
+            />
+            <path
+              fill="#34A853"
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z"
+            />
+            <path
+              fill="#EA4335"
+              d="M12 4.75c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 1.46 14.97.5 12 .5A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.3 9.14 4.75 12 4.75Z"
+            />
+          </svg>
+          Entrar com Google
+        </a>
+      </AuthShell>
+    )
+  }
+
+  // step === 'password'
+  const isAdmin = account?.globalRoles?.includes('ADMIN') ?? false
+
+  return (
+    <AuthShell brand={brand}>
+      <form method="POST" action={'/auth/interaction/' + uid + '/login'}>
+        <input type="hidden" name="_csrf" value={csrfToken} />
+
+        {account?.fullName ? (
+          <h1 className="text-xl font-semibold text-gray-900">
+            Olá, {account.fullName}
+            {isAdmin && (
+              <span className="ml-2 inline-block rounded bg-amber-100 px-1.5 py-0.5 align-middle text-xs font-semibold uppercase text-amber-800">
+                ADMIN
+              </span>
+            )}
+          </h1>
+        ) : (
+          <h1 className="text-xl font-semibold text-gray-900">Entrar</h1>
+        )}
+
+        <div className="mt-1 flex items-center gap-2">
+          <span className="text-sm text-gray-500">{email}</span>
+          <a
+            href={'/auth/interaction/' + uid + '/switch'}
+            className="text-xs font-medium hover:underline"
+            style={{ color: accent }}
+          >
+            Trocar de conta
+          </a>
+        </div>
+
+        {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+        <div className="mt-6">
+          <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
+            Senha
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            autoFocus
+            className={inputClass}
+            style={focusStyle}
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="mt-6 w-full rounded-lg py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+          style={{ backgroundColor: accent }}
+        >
+          Entrar
+        </button>
+
+        <div className="mt-4 flex justify-end text-sm text-gray-600">
+          <a href="/auth/forgot-password" className="hover:underline">
+            Esqueci a senha
+          </a>
+        </div>
+      </form>
+    </AuthShell>
+  )
+}

package/build/stubs/ui/react/pages/mfa-challenge.tsx

@@ -0,0 +1,72 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/mfa-challenge.tsx') })
+}}}
+import AuthShell from '../components/auth_shell'
+
+const inputClass =
+  'w-full rounded-lg border border-gray-300 px-3 py-2 text-center text-lg tracking-[0.4em] outline-none transition focus:border-transparent focus:ring-2 focus:ring-gray-800'
+
+export default function AuthkitMfaChallenge({
+  uid,
+  csrfToken,
+  error,
+}: {
+  uid: string
+  csrfToken: string
+  error?: string
+}) {
+  return (
+    <AuthShell>
+      <form method="POST" action={`/auth/interaction/${uid}/mfa`}>
+        <input type="hidden" name="_csrf" value={csrfToken} />
+        <h1 className="text-xl font-semibold text-gray-900">Verificação em duas etapas</h1>
+        <p className="mt-1 text-sm text-gray-500">
+          Abra seu app autenticador e informe o código de 6 dígitos.
+        </p>
+
+        {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+        <div className="mt-6">
+          <label htmlFor="code" className="mb-1 block text-sm font-medium text-gray-700">
+            Código
+          </label>
+          <input
+            id="code"
+            name="code"
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            pattern="[0-9]*"
+            maxLength={6}
+            autoFocus
+            className={inputClass}
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="mt-6 w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+        >
+          Verificar
+        </button>
+      </form>
+
+      <details className="mt-6 text-sm text-gray-600">
+        <summary className="cursor-pointer hover:underline">Usar um código de recuperação</summary>
+        <form method="POST" action={`/auth/interaction/${uid}/mfa`} className="mt-3">
+          <input type="hidden" name="_csrf" value={csrfToken} />
+          <input
+            name="recoveryCode"
+            placeholder="xxxxx-xxxxx"
+            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-gray-900"
+          />
+          <button
+            type="submit"
+            className="mt-3 w-full rounded-lg border border-gray-300 py-2.5 text-sm font-semibold text-gray-700 transition hover:bg-gray-50"
+          >
+            Entrar com código de recuperação
+          </button>
+        </form>
+      </details>
+    </AuthShell>
+  )
+}

package/build/stubs/ui/react/pages/reset.tsx

@@ -0,0 +1,58 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/reset.tsx') })
+}}}
+import AuthShell from '../../components/auth_shell'
+
+const inputClass =
+  'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-transparent focus:ring-2 focus:ring-gray-800'
+
+export default function AuthkitReset({
+  token,
+  csrfToken,
+  done,
+}: {
+  token: string
+  csrfToken: string
+  done?: boolean
+}) {
+  if (done) {
+    return (
+      <AuthShell>
+        <h1 className="text-xl font-semibold text-gray-900">Senha redefinida</h1>
+        <p className="mt-2 text-sm text-gray-600">Você já pode entrar com a nova senha.</p>
+      </AuthShell>
+    )
+  }
+
+  return (
+    <AuthShell>
+      <form method="POST" action="/auth/reset-password">
+        <input type="hidden" name="_csrf" value={csrfToken} />
+        <input type="hidden" name="token" value={token} />
+        <h1 className="text-xl font-semibold text-gray-900">Nova senha</h1>
+        <p className="mt-1 text-sm text-gray-500">Escolha uma nova senha para sua conta.</p>
+
+        <div className="mt-6">
+          <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
+            Senha
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            minLength={8}
+            className={inputClass}
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="mt-6 w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+        >
+          Redefinir
+        </button>
+      </form>
+    </AuthShell>
+  )
+}

package/build/stubs/ui/react/pages/signup.tsx

@@ -0,0 +1,78 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/signup.tsx') })
+}}}
+import AuthShell, { type AuthBrand } from '../../components/auth_shell'
+
+const inputClass =
+  'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-transparent focus:ring-2'
+
+export default function AuthkitSignup({
+  uid,
+  csrfToken,
+  error,
+  brand,
+}: {
+  uid: string
+  csrfToken: string
+  error?: string
+  brand?: AuthBrand
+}) {
+  const accent = brand?.accent ?? '#111827'
+  const focusStyle = { ['--tw-ring-color' as any]: accent }
+
+  return (
+    <AuthShell brand={brand}>
+      <form method="POST" action={'/auth/interaction/' + uid + '/signup'}>
+        <input type="hidden" name="_csrf" value={csrfToken} />
+        <h1 className="text-xl font-semibold text-gray-900">Criar conta</h1>
+        <p className="mt-1 text-sm text-gray-500">Preencha seus dados para começar.</p>
+
+        {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
+
+        <div className="mt-6">
+          <label htmlFor="fullName" className="mb-1 block text-sm font-medium text-gray-700">
+            Nome
+          </label>
+          <input id="fullName" name="fullName" type="text" required className={inputClass} style={focusStyle} />
+        </div>
+
+        <div className="mt-4">
+          <label htmlFor="email" className="mb-1 block text-sm font-medium text-gray-700">
+            E-mail
+          </label>
+          <input id="email" name="email" type="email" required className={inputClass} style={focusStyle} />
+        </div>
+
+        <div className="mt-4">
+          <label htmlFor="password" className="mb-1 block text-sm font-medium text-gray-700">
+            Senha
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            minLength={8}
+            className={inputClass}
+            style={focusStyle}
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="mt-6 w-full rounded-lg py-2.5 text-sm font-semibold text-white transition hover:opacity-90"
+          style={{ backgroundColor: accent }}
+        >
+          Criar conta
+        </button>
+
+        <a
+          href={'/auth/interaction/' + uid}
+          className="mt-4 block text-center text-sm text-gray-600 hover:underline"
+        >
+          Já tenho conta
+        </a>
+      </form>
+    </AuthShell>
+  )
+}

package/build/stubs/ui/react/pages/verify-email.tsx

@@ -0,0 +1,24 @@
+{{{
+  exports({ to: app.makePath('inertia/pages/authkit/verify-email.tsx') })
+}}}
+import AuthShell from '../../components/auth_shell'
+
+export default function AuthkitVerifyEmail({ verified }: { verified?: boolean }) {
+  if (verified) {
+    return (
+      <AuthShell>
+        <h1 className="text-xl font-semibold text-gray-900">E-mail verificado</h1>
+        <p className="mt-2 text-sm text-gray-600">Seu e-mail foi confirmado com sucesso.</p>
+      </AuthShell>
+    )
+  }
+
+  return (
+    <AuthShell>
+      <h1 className="text-xl font-semibold text-gray-900">Link inválido</h1>
+      <p className="mt-2 text-sm text-gray-600">
+        O link de verificação é inválido ou já foi utilizado.
+      </p>
+    </AuthShell>
+  )
+}

package/build/types.d.ts

@@ -0,0 +1,7 @@
+import type { OidcService } from './src/provider/oidc_service.js';
+declare module '@adonisjs/core/types' {
+    interface ContainerBindings {
+        'authkit.server': OidcService;
+    }
+}
+export type { OidcService };

package/build/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@dudousxd/adonis-authkit-server",
+  "version": "0.1.0",
+  "description": "AdonisJS OIDC/OAuth2 provider (Identity Provider) toolkit: ejectable auth server with sessions, rate-limiting, MFA/TOTP, audit log, federated logout and OpenTelemetry metrics.",
+  "license": "MIT",
+  "author": "dudousxd",
+  "homepage": "https://github.com/DavideCarvalho/streaming-educacao/tree/main/packages/authkit-server#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DavideCarvalho/streaming-educacao.git",
+    "directory": "packages/authkit-server"
+  },
+  "bugs": {
+    "url": "https://github.com/DavideCarvalho/streaming-educacao/issues"
+  },
+  "keywords": [
+    "adonisjs",
+    "oidc",
+    "oauth2",
+    "openid-connect",
+    "authentication",
+    "authkit",
+    "identity-provider",
+    "rate-limiting",
+    "mfa",
+    "totp"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
+  "files": [
+    "build",
+    "stubs"
+  ],
+  "exports": {
+    ".": "./build/index.js",
+    "./types": "./build/index.js",
+    "./authkit_server_provider": "./build/providers/authkit_server_provider.js",
+    "./commands": "./build/commands/main.js",
+    "./commands/configure": "./build/commands/configure.js"
+  },
+  "adonisjs": {
+    "types": "@dudousxd/adonis-authkit-server",
+    "providers": [
+      "@dudousxd/adonis-authkit-server/authkit_server_provider"
+    ],
+    "commands": [
+      "@dudousxd/adonis-authkit-server/commands"
+    ]
+  },
+  "peerDependencies": {
+    "@adonisjs/ally": "6.3.0",
+    "@adonisjs/core": "7.3.3",
+    "@adonisjs/lucid": "22.4.2",
+    "@adonisjs/session": "8.1.0",
+    "@adonisjs/shield": "9.0.0",
+    "edge.js": "6.5.1"
+  },
+  "peerDependenciesMeta": {
+    "edge.js": {
+      "optional": true
+    },
+    "@adonisjs/ally": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@simplewebauthn/server": "^13.3.1",
+    "@vinejs/vine": "4.4.0",
+    "jose": "^5.9.0",
+    "koa": "^3.2.1",
+    "koa-mount": "^4.2.0",
+    "oidc-provider": "^9.8.4",
+    "otplib": "^12.0.1",
+    "qrcode": "^1.5.4",
+    "@dudousxd/adonis-authkit-core": "0.1.0"
+  },
+  "devDependencies": {
+    "@adonisjs/ally": "6.3.0",
+    "@adonisjs/core": "7.3.3",
+    "@adonisjs/lucid": "22.4.2",
+    "@adonisjs/session": "8.1.0",
+    "@adonisjs/shield": "9.0.0",
+    "@adonisjs/tsconfig": "2.0.0",
+    "@japa/assert": "4.2.0",
+    "@japa/runner": "5.3.0",
+    "@poppinss/ts-exec": "1.4.4",
+    "@types/koa": "^2.15.2",
+    "@types/koa-mount": "^4.0.5",
+    "@types/luxon": "3.7.1",
+    "@types/node": "25.9.1",
+    "@types/qrcode": "^1.5.5",
+    "better-sqlite3": "^11.0.0",
+    "edge.js": "6.5.1",
+    "ioredis": "5.4.2",
+    "ioredis-mock": "^8.9.0",
+    "luxon": "3.7.2",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "tsc && node -e \"require('node:fs').cpSync('stubs','build/stubs',{recursive:true,filter:(s)=>!s.endsWith('.ts')})\" && node -e \"const fs=require('node:fs');if(fs.existsSync('assets'))fs.cpSync('assets','build/assets',{recursive:true})\" && node -e \"require('node:fs').cpSync('src/host/views','build/host/views',{recursive:true})\" && node -e \"require('node:fs').copyFileSync('commands/commands.json','build/commands/commands.json')\"",
+    "typecheck": "tsc --noEmit",
+    "test": "node --import=@poppinss/ts-exec bin/test.ts"
+  }
+}

package/stubs/config/authkit.stub

@@ -0,0 +1,29 @@
+{{{
+  exports({ to: app.configPath('authkit.ts') })
+}}}
+import env from '#start/env'
+import AuthUser from '#models/auth_user'
+import { defineConfig, adapters } from '@authkit/server'
+
+const authServerConfig = defineConfig({
+  issuer: env.get('AUTHKIT_ISSUER'),
+  adapter: adapters.redis({ connection: 'main' }),
+  jwks: { source: 'managed', algorithm: 'RS256' },
+  clients: [
+    // registre seus clients OIDC aqui
+  ],
+  ttl: { accessToken: '15m', refreshToken: '30d' },
+  globalRolesClaim: 'roles',
+  findAccount: async (sub) => {
+    const user = await AuthUser.find(sub)
+    if (!user) return null
+    return { id: user.id, email: user.email, globalRoles: user.globalRoles }
+  },
+  verifyCredentials: async (email, password) => {
+    const user = await AuthUser.query().where('email', email).first()
+    if (!user || !(await user.verifyPassword(password))) return null
+    return { id: user.id }
+  },
+})
+
+export default authServerConfig

package/stubs/main.ts

@@ -0,0 +1,2 @@
+import { fileURLToPath } from 'node:url'
+export const stubsRoot = fileURLToPath(new URL('./', import.meta.url))

package/stubs/models/auth_user.stub

@@ -0,0 +1,13 @@
+{{{
+  exports({ to: app.makePath('app/models/auth_user.ts') })
+}}}
+import { BaseModel, column } from '@adonisjs/lucid/orm'
+import { compose } from '@adonisjs/core/helpers'
+import { withAuthUser, withCredentials } from '@authkit/server'
+
+export default class AuthUser extends compose(BaseModel, withAuthUser(), withCredentials()) {
+  static connection = 'auth'
+
+  @column({ isPrimary: true })
+  declare id: string
+}

package/stubs/ui/edge/views/consent.edge

@@ -0,0 +1,13 @@
+{{{
+  exports({ to: app.makePath('resources/views/authkit/consent.edge') })
+}}}
+<!doctype html>
+<html lang="pt-br"><head><meta charset="utf-8"><title>Autorizar</title>
+<script src="https://cdn.tailwindcss.com"></script></head>
+<body class="min-h-screen flex items-center justify-center bg-gray-50">
+  <form method="POST" action="/auth/interaction/{{ uid }}/consent" class="w-full max-w-sm bg-white p-6 rounded-lg shadow">
+    <h1 class="text-lg font-semibold mb-2">Autorizar acesso</h1>
+    <p class="text-sm text-gray-600 mb-4">O app <strong>{{ params.client_id }}</strong> quer acessar sua conta.</p>
+    <button class="w-full bg-black text-white rounded py-2">Autorizar</button>
+  </form>
+</body></html>

package/stubs/ui/edge/views/login.edge

@@ -0,0 +1,19 @@
+{{{
+  exports({ to: app.makePath('resources/views/authkit/login.edge') })
+}}}
+<!doctype html>
+<html lang="pt-br"><head><meta charset="utf-8"><title>Entrar</title>
+<script src="https://cdn.tailwindcss.com"></script></head>
+<body class="min-h-screen flex items-center justify-center bg-gray-50">
+  <form method="POST" action="/auth/interaction/{{ uid }}/login" class="w-full max-w-sm bg-white p-6 rounded-lg shadow">
+    <h1 class="text-lg font-semibold mb-4">Entrar</h1>
+    @if(error)
+      <p class="text-red-600 text-sm mb-3">{{ error }}</p>
+    @end
+    <label class="block text-sm mb-1">E-mail</label>
+    <input name="email" type="email" required class="w-full border rounded px-3 py-2 mb-3" />
+    <label class="block text-sm mb-1">Senha</label>
+    <input name="password" type="password" required class="w-full border rounded px-3 py-2 mb-4" />
+    <button class="w-full bg-black text-white rounded py-2">Entrar</button>
+  </form>
+</body></html>

package/stubs/ui/react/components/auth_shell.tsx

@@ -0,0 +1,67 @@
+{{{
+  exports({ to: app.makePath('inertia/components/auth_shell.tsx') })
+}}}
+import type { ReactNode } from 'react'
+
+export interface AuthBrand {
+  appName: string
+  accent: string
+  accentSoft?: string
+  company?: string
+  tagline?: string
+  audienceLabel?: string
+}
+
+const COMPANY_FALLBACK = 'educ(a)ção'
+
+/**
+ * Layout de duas colunas para as telas de autenticacao do IdP.
+ * Painel esquerdo: marca (empresa guarda-chuva + produto). Painel direito: formulario.
+ */
+export default function AuthShell({
+  brand,
+  children,
+}: {
+  brand?: AuthBrand
+  children: ReactNode
+}) {
+  const accent = brand?.accent ?? '#111827'
+  const accentSoft = brand?.accentSoft ?? accent
+  const company = brand?.company ?? COMPANY_FALLBACK
+  const appName = brand?.appName ?? 'Sua conta'
+  const tagline = brand?.tagline ?? 'Acesso unificado'
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100 p-4">
+      <div className="w-full max-w-4xl overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-black/5 grid md:grid-cols-2">
+        {/* Painel da marca */}
+        <div
+          className="relative flex flex-col justify-between p-8 text-white md:p-10"
+          style={{ backgroundImage: `linear-gradient(135deg, ${accent} 0%, ${accentSoft} 100%)` }}
+        >
+          <div
+            className="text-xs font-semibold uppercase tracking-[0.2em] text-white/80"
+            aria-label="Empresa"
+          >
+            {company}
+          </div>
+
+          <div className="mt-10 md:mt-0">
+            <h2 className="text-2xl font-bold leading-tight md:text-3xl">{appName}</h2>
+            <p className="mt-2 text-sm text-white/85">{tagline}</p>
+            {brand?.audienceLabel && (
+              <span className="mt-4 inline-block rounded-full bg-white/20 px-3 py-1 text-xs font-medium uppercase tracking-wide text-white ring-1 ring-white/30">
+                {brand.audienceLabel}
+              </span>
+            )}
+          </div>
+
+          <div className="mt-10 text-xs text-white/60">© {company}</div>
+        </div>
+
+        {/* Painel do formulario */}
+        <div className="p-8 md:p-10">{children}</div>
+      </div>
+    </div>
+  )
+}