Merge pull request #6 from rede5/codex/add-auth-context-and-private-route
Add dashboard auth flow and cloud integrations
This commit is contained in:
Tiago Yamamoto
GitHub
commit
b21a4ff715
15 changed files with 3026 additions and 32 deletions
|
|
@ -3,3 +3,6 @@ APPWRITE_PROJECT_ID=
|
|||
APPWRITE_API_KEY=
|
||||
APPWRITE_FUNCTIONS_ENDPOINT=
|
||||
APPWRITE_FUNCTIONS_API_KEY=
|
||||
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||
VITE_APPWRITE_PROJECT_ID=
|
||||
VITE_APPWRITE_DATABASE_ID=
|
||||
|
|
|
|||
71
README.md
71
README.md
|
|
@ -1 +1,70 @@
|
|||
# core
|
||||
# Core Platform Monorepo
|
||||
|
||||
Ambiente unificado com três camadas principais:
|
||||
|
||||
- **Appwrite** para autenticação, base de dados e funções (sync-github e check-cloudflare-status).
|
||||
- **Landing (Fresh + Deno)** para a página pública em `landing/`.
|
||||
- **Dashboard (React + Vite)** para o painel operacional em `dashboard/`.
|
||||
|
||||
## Pré-requisitos
|
||||
- Node.js 18+ e npm
|
||||
- Deno 1.39+ (para o app Fresh)
|
||||
- Docker e Docker Compose (para Appwrite local) ou um projeto Appwrite Cloud
|
||||
- Variáveis de ambiente configuradas a partir de [.env.example](.env.example)
|
||||
|
||||
## Variáveis de ambiente
|
||||
- **Backend/Appwrite:** use `APPWRITE_ENDPOINT`, `APPWRITE_PROJECT_ID`, `APPWRITE_API_KEY`, `APPWRITE_DATABASE_ID` e credenciais de funções conforme necessário.
|
||||
- **Dashboard (Vite):** use `VITE_APPWRITE_ENDPOINT`, `VITE_APPWRITE_PROJECT_ID` e `VITE_APPWRITE_DATABASE_ID`. O prefixo `VITE_` garante a leitura pelo Vite em tempo de build.
|
||||
- **Landing (Deno Fresh):** o arquivo `landing/main.ts` carrega automaticamente variáveis do `.env` via `$std/dotenv/load.ts`, então os mesmos valores de Appwrite podem ser reutilizados.
|
||||
|
||||
Sugestão rápida:
|
||||
```bash
|
||||
cp .env.example .env
|
||||
# Preencha IDs/projetos/chaves de acordo com seu ambiente Appwrite
|
||||
```
|
||||
|
||||
## Executando os ambientes
|
||||
### 1) Appwrite local
|
||||
1. Tenha Docker em execução.
|
||||
2. Inicie o stack Appwrite (CLI ou imagem oficial), por exemplo:
|
||||
```bash
|
||||
docker run -it --rm \
|
||||
-p 80:80 -p 443:443 \
|
||||
-v "$(pwd)/appwrite:/var/lib/appwrite" \
|
||||
appwrite/appwrite:latest install
|
||||
```
|
||||
3. Após provisionar o projeto, configure as variáveis (`APPWRITE_*` e `VITE_APPWRITE_*`) e implante as funções em `appwrite-functions/` conforme necessário.
|
||||
|
||||
### 2) Landing (Fresh + Deno)
|
||||
```bash
|
||||
npm run dev:landing
|
||||
# ou: cd landing && deno task start
|
||||
```
|
||||
- O servidor roda em `http://localhost:8000` por padrão.
|
||||
- As variáveis `.env` são lidas automaticamente no bootstrap do Deno.
|
||||
|
||||
### 3) Dashboard (React + Vite)
|
||||
```bash
|
||||
cd dashboard
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
- Usa os valores `VITE_APPWRITE_*` para client, database e funções.
|
||||
- Disponível em `http://localhost:5173`.
|
||||
|
||||
### 4) Landing + Dashboard em paralelo
|
||||
No diretório raiz:
|
||||
```bash
|
||||
npm run dev:web
|
||||
```
|
||||
O script usa `npm-run-all` para iniciar `landing` (Deno) e `dashboard` (Vite) lado a lado.
|
||||
|
||||
## Estrutura de pastas
|
||||
- `appwrite-functions/`: fontes das funções `sync-github` e `check-cloudflare-status`.
|
||||
- `landing/`: app Fresh (Deno) para a camada pública.
|
||||
- `dashboard/`: painel autenticado com React + Vite, Tailwind e integrações Appwrite.
|
||||
|
||||
## Notas finais
|
||||
- O dashboard valida a sessão Appwrite no carregamento inicial e protege rotas privadas.
|
||||
- O Appwrite Database precisa do ID configurado (`APPWRITE_DATABASE_ID`/`VITE_APPWRITE_DATABASE_ID`) para consultas de projetos, cloud_accounts e audit_logs.
|
||||
- O canal Realtime da coleção `audit_logs` é usado para o terminal de logs em tempo real.
|
||||
|
|
|
|||
|
|
@ -1,35 +1,30 @@
|
|||
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
|
||||
import DashboardLayout from './layouts/DashboardLayout'
|
||||
import { PrivateRoute } from './contexts/Auth'
|
||||
import Cloudflare from './pages/Cloudflare'
|
||||
import Github from './pages/Github'
|
||||
import Home from './pages/Home'
|
||||
import Login from './pages/Login'
|
||||
import Settings from './pages/Settings'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center p-6">
|
||||
<div className="w-full max-w-2xl rounded-2xl border border-slate-800/70 bg-slate-900/60 p-8 shadow-xl shadow-slate-900/60 backdrop-blur">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Fase 3 • Dashboard</p>
|
||||
<h1 className="mt-3 text-3xl font-semibold text-slate-50">React + Vite + Appwrite</h1>
|
||||
<p className="mt-3 text-sm leading-relaxed text-slate-300">
|
||||
Projeto inicializado com Vite (React + TypeScript), Tailwind CSS e dependências do SDK web do Appwrite. Os serviços de
|
||||
autenticação estão encapsulados em helpers reutilizáveis para login, logout e leitura segura da sessão atual.
|
||||
</p>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
|
||||
<div className="mt-6 grid gap-4 sm:grid-cols-2">
|
||||
<div className="rounded-xl border border-slate-800/60 bg-slate-900/80 p-4">
|
||||
<h2 className="text-sm font-semibold text-slate-100">Stack pronta para UI</h2>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
|
||||
<li>Tailwind configurado para <code className="rounded bg-slate-800 px-1">src</code> e <code className="rounded bg-slate-800 px-1">index.html</code>.</li>
|
||||
<li>Dependências instaladas: Appwrite SDK, React Router, Lucide Icons.</li>
|
||||
<li>Estilos base prontos para páginas do dashboard.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Route element={<PrivateRoute />}>
|
||||
<Route element={<DashboardLayout />}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path="/github" element={<Github />} />
|
||||
<Route path="/cloudflare" element={<Cloudflare />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
<div className="rounded-xl border border-slate-800/60 bg-slate-900/80 p-4">
|
||||
<h2 className="text-sm font-semibold text-slate-100">Appwrite pronto</h2>
|
||||
<ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
|
||||
<li>Client, Account e Databases inicializados em <code className="rounded bg-slate-800 px-1">src/lib/appwrite.ts</code>.</li>
|
||||
<li>Helpers para login, logout e recuperação da sessão atual.</li>
|
||||
<li>Tratamento de sessão expirada retornando <span className="font-semibold text-cyan-300">null</span> quando apropriado.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
82
dashboard/src/components/TerminalLogs.tsx
Normal file
82
dashboard/src/components/TerminalLogs.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { client, appwriteDatabaseId } from '../lib/appwrite'
|
||||
|
||||
const channel = appwriteDatabaseId
|
||||
? `databases.${appwriteDatabaseId}.collections.audit_logs.documents`
|
||||
: undefined
|
||||
|
||||
type TerminalLog = {
|
||||
id: string
|
||||
message: string
|
||||
timestamp: string
|
||||
userId?: string
|
||||
}
|
||||
|
||||
const formatTime = (timestamp: string) => {
|
||||
const date = new Date(timestamp)
|
||||
if (Number.isNaN(date.getTime())) return timestamp
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
||||
}
|
||||
|
||||
export function TerminalLogs() {
|
||||
const [open, setOpen] = useState(true)
|
||||
const [logs, setLogs] = useState<TerminalLog[]>([])
|
||||
|
||||
const logTitle = useMemo(() => (open ? 'Ocultar Terminal' : 'Mostrar Terminal'), [open])
|
||||
|
||||
useEffect(() => {
|
||||
if (!channel) return undefined
|
||||
|
||||
const unsubscribe = client.subscribe(channel, (response) => {
|
||||
const payload = (response as { payload?: Record<string, unknown> }).payload || {}
|
||||
const action = (payload.action as string) || 'evento'
|
||||
const timestamp = (payload.timestamp as string) || new Date().toISOString()
|
||||
const userId = (payload.userId as string) || undefined
|
||||
|
||||
setLogs((prev) => [
|
||||
{
|
||||
id: crypto.randomUUID(),
|
||||
message: action,
|
||||
timestamp,
|
||||
userId,
|
||||
},
|
||||
...prev,
|
||||
].slice(0, 120))
|
||||
})
|
||||
|
||||
return () => {
|
||||
unsubscribe()
|
||||
}
|
||||
}, [channel])
|
||||
|
||||
return (
|
||||
<div className="border-t border-slate-800 bg-slate-950/80 backdrop-blur">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((prev) => !prev)}
|
||||
className="flex w-full items-center justify-between px-4 py-2 text-left text-xs uppercase tracking-[0.2em] text-cyan-200"
|
||||
>
|
||||
<span>{logTitle}</span>
|
||||
<span className="text-[10px] font-mono text-slate-400">audit_logs realtime</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="max-h-56 overflow-y-auto bg-black/60 font-mono text-[12px] text-emerald-200">
|
||||
{logs.length === 0 ? (
|
||||
<p className="px-4 py-3 text-slate-400">Aguardando logs em tempo real...</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-slate-800/70">
|
||||
{logs.map((log) => (
|
||||
<li key={log.id} className="px-4 py-2">
|
||||
<span className="text-slate-500">[{formatTime(log.timestamp)}]</span>{' '}
|
||||
<span className="text-emerald-300">{log.message}</span>
|
||||
{log.userId ? <span className="text-slate-500"> • {log.userId}</span> : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
88
dashboard/src/contexts/Auth.tsx
Normal file
88
dashboard/src/contexts/Auth.tsx
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { AppwriteException, Models } from 'appwrite'
|
||||
import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'
|
||||
import { Navigate, Outlet, useLocation } from 'react-router-dom'
|
||||
import { account } from '../lib/appwrite'
|
||||
|
||||
type AuthContextValue = {
|
||||
user: Models.User<Models.Preferences> | null
|
||||
loading: boolean
|
||||
login: (email: string, password: string) => Promise<void>
|
||||
logout: () => Promise<void>
|
||||
refresh: () => Promise<void>
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | undefined>(undefined)
|
||||
|
||||
export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [user, setUser] = useState<Models.User<Models.Preferences> | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const fetchUser = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const current = await account.get()
|
||||
setUser(current)
|
||||
} catch (error) {
|
||||
const authError = error as AppwriteException
|
||||
if (authError?.code === 401) {
|
||||
setUser(null)
|
||||
} else {
|
||||
console.error('Erro ao buscar usuário atual', error)
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchUser()
|
||||
}, [])
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
await account.createEmailPasswordSession(email, password)
|
||||
await fetchUser()
|
||||
}
|
||||
|
||||
const logout = async () => {
|
||||
await account.deleteSession('current')
|
||||
setUser(null)
|
||||
}
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
user,
|
||||
loading,
|
||||
login,
|
||||
logout,
|
||||
refresh: fetchUser,
|
||||
}),
|
||||
[loading, user],
|
||||
)
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
|
||||
}
|
||||
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext)
|
||||
if (!context) throw new Error('useAuth deve ser usado dentro de AuthProvider')
|
||||
return context
|
||||
}
|
||||
|
||||
export const PrivateRoute: React.FC = () => {
|
||||
const { user, loading } = useAuth()
|
||||
const location = useLocation()
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="grid min-h-screen place-items-center bg-slate-950 text-slate-100">
|
||||
<p className="animate-pulse text-sm text-slate-400">Validando sessão...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return <Navigate to="/login" state={{ from: location }} replace />
|
||||
}
|
||||
|
||||
return <Outlet />
|
||||
}
|
||||
82
dashboard/src/layouts/DashboardLayout.tsx
Normal file
82
dashboard/src/layouts/DashboardLayout.tsx
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import { Cloud, Github, Home, LogOut, Settings } from 'lucide-react'
|
||||
import { NavLink, Outlet, useNavigate } from 'react-router-dom'
|
||||
import { TerminalLogs } from '../components/TerminalLogs'
|
||||
import { useAuth } from '../contexts/Auth'
|
||||
|
||||
const navItems = [
|
||||
{ label: 'Overview', to: '/', icon: Home },
|
||||
{ label: 'GitHub Repos', to: '/github', icon: Github },
|
||||
{ label: 'Cloudflare Zones', to: '/cloudflare', icon: Cloud },
|
||||
{ label: 'Settings', to: '/settings', icon: Settings },
|
||||
]
|
||||
|
||||
const activeClass =
|
||||
'flex items-center gap-2 rounded-lg bg-slate-800/60 px-3 py-2 text-slate-50 shadow-inner shadow-slate-900'
|
||||
const baseClass =
|
||||
'flex items-center gap-2 rounded-lg px-3 py-2 text-slate-300 hover:bg-slate-800/40 transition-colors duration-150'
|
||||
|
||||
export default function DashboardLayout() {
|
||||
const { user, logout } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout()
|
||||
navigate('/login')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-slate-950 text-slate-100">
|
||||
<aside className="fixed left-0 top-0 flex h-full w-64 flex-col border-r border-slate-800 bg-slate-900/80 px-4 py-6 shadow-2xl shadow-slate-900/80">
|
||||
<div className="mb-6 border-b border-slate-800 pb-4">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-cyan-400">Fase 3</p>
|
||||
<h1 className="text-lg font-semibold text-slate-50">Dashboard</h1>
|
||||
<p className="text-xs text-slate-400">Automação e DevOps</p>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-2">
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.to === '/'}
|
||||
className={({ isActive }) => (isActive ? activeClass : baseClass)}
|
||||
>
|
||||
<item.icon size={18} />
|
||||
<span className="text-sm">{item.label}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto space-y-2 border-t border-slate-800 pt-4 text-sm text-slate-300">
|
||||
<p className="truncate text-xs text-slate-500">{user?.email}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-slate-300 transition hover:bg-red-500/10 hover:text-red-200"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="ml-64 flex min-h-screen flex-1 flex-col">
|
||||
<header className="flex items-center justify-between border-b border-slate-800 bg-slate-900/60 px-6 py-4 backdrop-blur">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-cyan-300">Painel de Controle</p>
|
||||
<h2 className="text-xl font-semibold text-slate-50">DevOps Orchestration</h2>
|
||||
</div>
|
||||
<div className="rounded-lg bg-slate-800/60 px-4 py-2 text-xs text-slate-300 shadow-inner shadow-slate-900">
|
||||
Sessão ativa: <span className="text-cyan-300">{user?.name || user?.email}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 overflow-y-auto bg-slate-900/40 px-8 py-6">
|
||||
<Outlet />
|
||||
</main>
|
||||
|
||||
<TerminalLogs />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
import { Account, AppwriteException, Client, Databases, Models } from 'appwrite'
|
||||
import { Account, AppwriteException, Client, Databases, Functions, Models } from 'appwrite'
|
||||
|
||||
const appwriteEndpoint = import.meta.env.VITE_APPWRITE_ENDPOINT
|
||||
const appwriteProjectId = import.meta.env.VITE_APPWRITE_PROJECT_ID
|
||||
const appwriteDatabaseId = import.meta.env.VITE_APPWRITE_DATABASE_ID
|
||||
|
||||
if (!appwriteEndpoint || !appwriteProjectId) {
|
||||
throw new Error('Defina VITE_APPWRITE_ENDPOINT e VITE_APPWRITE_PROJECT_ID no ambiente do Vite.')
|
||||
|
|
@ -11,6 +12,7 @@ const client = new Client().setEndpoint(appwriteEndpoint).setProject(appwritePro
|
|||
|
||||
const account = new Account(client)
|
||||
const databases = new Databases(client)
|
||||
const functions = new Functions(client)
|
||||
|
||||
const isSessionExpired = (error: unknown) => {
|
||||
if (error instanceof AppwriteException) {
|
||||
|
|
@ -47,4 +49,4 @@ export const getCurrentUser = async (): Promise<Models.User<Models.Preferences>
|
|||
}
|
||||
}
|
||||
|
||||
export { account, client, databases }
|
||||
export { account, client, databases, functions, appwriteDatabaseId }
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import { AuthProvider } from './contexts/Auth.tsx'
|
||||
import './index.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<AuthProvider>
|
||||
<App />
|
||||
</AuthProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
|
|
|||
282
dashboard/src/pages/Cloudflare.tsx
Normal file
282
dashboard/src/pages/Cloudflare.tsx
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
import { Execution, ID, Query } from 'appwrite'
|
||||
import { FormEvent, useEffect, useState } from 'react'
|
||||
import { appwriteDatabaseId, databases, functions } from '../lib/appwrite'
|
||||
|
||||
const badgeClass = (status: string) =>
|
||||
status === 'active' ? 'rounded-full bg-emerald-500/20 px-2 py-1 text-xs text-emerald-200' : 'rounded-full bg-amber-500/20 px-2 py-1 text-xs text-amber-200'
|
||||
|
||||
type Zone = {
|
||||
id: string
|
||||
name: string
|
||||
status: string
|
||||
paused?: boolean
|
||||
}
|
||||
|
||||
type Worker = {
|
||||
name: string
|
||||
modifiedOn?: string
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
export default function Cloudflare() {
|
||||
const [label, setLabel] = useState('')
|
||||
const [apiKey, setApiKey] = useState('')
|
||||
const [accountId, setAccountId] = useState('')
|
||||
const [cloudflareAccountId, setCloudflareAccountId] = useState('')
|
||||
const [credentials, setCredentials] = useState<{ $id: string; label: string }[]>([])
|
||||
const [zones, setZones] = useState<Zone[]>([])
|
||||
const [workers, setWorkers] = useState<Worker[]>([])
|
||||
const [execution, setExecution] = useState<Execution | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [modalOpen, setModalOpen] = useState(false)
|
||||
const [newZone, setNewZone] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
const loadCredentials = async () => {
|
||||
if (!appwriteDatabaseId) return
|
||||
try {
|
||||
const response = await databases.listDocuments(appwriteDatabaseId, 'cloud_accounts', [
|
||||
Query.equal('provider', 'cloudflare'),
|
||||
])
|
||||
const docs = response.documents.map((doc) => ({ $id: doc.$id, label: (doc as { label?: string }).label || doc.$id }))
|
||||
setCredentials(docs)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Falha ao carregar credenciais Cloudflare.')
|
||||
}
|
||||
}
|
||||
|
||||
loadCredentials()
|
||||
}, [])
|
||||
|
||||
const handleSaveKey = async (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
if (!appwriteDatabaseId) {
|
||||
setError('Configure VITE_APPWRITE_DATABASE_ID para salvar a chave de API.')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const document = await databases.createDocument(appwriteDatabaseId, 'cloud_accounts', ID.unique(), {
|
||||
provider: 'cloudflare',
|
||||
apiKey,
|
||||
label,
|
||||
})
|
||||
setCredentials((prev) => [...prev, { $id: document.$id, label: label || document.$id }])
|
||||
setLabel('')
|
||||
setApiKey('')
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Não foi possível salvar a API Key.')
|
||||
}
|
||||
}
|
||||
|
||||
const handleStatus = async () => {
|
||||
setError(null)
|
||||
const selectedAccount = accountId || credentials[0]?.$id
|
||||
if (!selectedAccount) {
|
||||
setError('Selecione ou cadastre uma credencial Cloudflare antes de consultar o status.')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const executionResult = await functions.createExecution(
|
||||
'check-cloudflare-status',
|
||||
JSON.stringify({ accountId: selectedAccount, cloudflareAccountId }),
|
||||
)
|
||||
setExecution(executionResult)
|
||||
|
||||
const payload = executionResult.responseBody ? JSON.parse(executionResult.responseBody) : {}
|
||||
setZones((payload.zones as Zone[]) || [])
|
||||
setWorkers((payload.workers as Worker[]) || [])
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Não foi possível checar o status do Cloudflare.')
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddZone = () => {
|
||||
if (!newZone.trim()) return
|
||||
setZones((prev) => [{ id: crypto.randomUUID(), name: newZone, status: 'pending' }, ...prev])
|
||||
setNewZone('')
|
||||
setModalOpen(false)
|
||||
}
|
||||
|
||||
const online = zones.some((zone) => zone.status === 'active' && !zone.paused)
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<header className="rounded-xl border border-slate-800/70 bg-slate-900/60 p-5 shadow-lg shadow-slate-950/50">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Cloudflare</p>
|
||||
<h1 className="mt-2 text-2xl font-semibold text-slate-50">Integração e Status</h1>
|
||||
<p className="mt-2 text-sm text-slate-400">
|
||||
Salve a API Key criptografada no Appwrite e consulte a função <span className="text-cyan-300">check-cloudflare-status</span>.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<form className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5 shadow-inner shadow-slate-950/60" onSubmit={handleSaveKey}>
|
||||
<h2 className="text-lg font-semibold text-slate-100">Salvar credencial</h2>
|
||||
<p className="text-sm text-slate-400">Armazene a chave com criptografia gerenciada pelo Appwrite.</p>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<div>
|
||||
<label className="text-sm text-slate-200">Label</label>
|
||||
<input
|
||||
type="text"
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-slate-200">API Key</label>
|
||||
<input
|
||||
type="password"
|
||||
value={apiKey}
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
required
|
||||
className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400"
|
||||
>
|
||||
Salvar API Key
|
||||
</button>
|
||||
</div>
|
||||
{error ? <p className="mt-3 text-sm text-red-300">{error}</p> : null}
|
||||
</form>
|
||||
|
||||
<div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5 shadow-inner shadow-slate-950/60">
|
||||
<h2 className="text-lg font-semibold text-slate-100">Status das zonas</h2>
|
||||
<p className="text-sm text-slate-400">Selecione a credencial e consulte o status em tempo real.</p>
|
||||
|
||||
<div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="text-sm text-slate-200">Credencial</label>
|
||||
<select
|
||||
value={accountId}
|
||||
onChange={(e) => setAccountId(e.target.value)}
|
||||
className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
|
||||
>
|
||||
<option value="">Selecione um documento</option>
|
||||
{credentials.map((cred) => (
|
||||
<option key={cred.$id} value={cred.$id}>
|
||||
{cred.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm text-slate-200">Cloudflare Account ID</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cloudflareAccountId}
|
||||
onChange={(e) => setCloudflareAccountId(e.target.value)}
|
||||
className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleStatus}
|
||||
className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400"
|
||||
>
|
||||
Consultar status
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setModalOpen(true)}
|
||||
className="rounded-lg border border-cyan-500/60 px-4 py-2 text-sm text-cyan-200 transition hover:bg-cyan-500/10"
|
||||
>
|
||||
Adicionar Nova Zona
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{execution ? (
|
||||
<div className="mt-3 rounded-lg border border-slate-800 bg-slate-950/60 p-3 text-xs text-slate-300">
|
||||
Execução #{execution.$id} • Status {execution.status}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-slate-100">Zonas DNS</h3>
|
||||
<span className={online ? 'text-xs text-emerald-300' : 'text-xs text-amber-300'}>
|
||||
{online ? 'Online' : 'Aguardando verificação'}
|
||||
</span>
|
||||
</div>
|
||||
<ul className="mt-3 divide-y divide-slate-800 text-sm text-slate-200">
|
||||
{zones.length === 0 ? <li className="py-3 text-slate-500">Nenhuma zona carregada.</li> : null}
|
||||
{zones.map((zone) => (
|
||||
<li key={zone.id} className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<p className="font-semibold">{zone.name}</p>
|
||||
<p className="text-xs text-slate-400">ID: {zone.id}</p>
|
||||
</div>
|
||||
<span className={badgeClass(zone.status)}>{zone.status}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5">
|
||||
<h3 className="text-lg font-semibold text-slate-100">Workers</h3>
|
||||
<ul className="mt-3 divide-y divide-slate-800 text-sm text-slate-200">
|
||||
{workers.length === 0 ? <li className="py-3 text-slate-500">Nenhum worker listado.</li> : null}
|
||||
{workers.map((worker) => (
|
||||
<li key={worker.name} className="flex items-center justify-between py-3">
|
||||
<div>
|
||||
<p className="font-semibold">{worker.name}</p>
|
||||
<p className="text-xs text-slate-400">{worker.modifiedOn}</p>
|
||||
</div>
|
||||
<span className={worker.active ? 'text-xs text-emerald-300' : 'text-xs text-slate-400'}>
|
||||
{worker.active ? 'Ativo' : 'Inativo'}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{modalOpen ? (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
|
||||
<div className="w-full max-w-md rounded-xl border border-slate-800 bg-slate-950 p-6 shadow-2xl shadow-slate-900">
|
||||
<h4 className="text-lg font-semibold text-slate-100">Adicionar Nova Zona</h4>
|
||||
<p className="mt-1 text-sm text-slate-400">Inclua uma entrada manual enquanto a função sincroniza zonas.</p>
|
||||
<input
|
||||
type="text"
|
||||
value={newZone}
|
||||
onChange={(e) => setNewZone(e.target.value)}
|
||||
placeholder="example.com"
|
||||
className="mt-3 w-full rounded-lg border border-slate-800 bg-slate-900 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
|
||||
/>
|
||||
<div className="mt-4 flex items-center justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setModalOpen(false)}
|
||||
className="rounded-lg px-4 py-2 text-sm text-slate-300 hover:text-slate-50"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddZone}
|
||||
className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 hover:bg-cyan-400"
|
||||
>
|
||||
Adicionar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
118
dashboard/src/pages/Github.tsx
Normal file
118
dashboard/src/pages/Github.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import { Execution } from 'appwrite'
|
||||
import { useState } from 'react'
|
||||
import { functions } from '../lib/appwrite'
|
||||
|
||||
const columns = ['Nome', 'Linguagem', 'Stars', 'Último Commit']
|
||||
|
||||
type Repo = {
|
||||
id: string | number
|
||||
name: string
|
||||
language?: string | null
|
||||
stargazers_count?: number
|
||||
stars?: number
|
||||
pushed_at?: string
|
||||
last_commit?: string
|
||||
}
|
||||
|
||||
export default function Github() {
|
||||
const [accountId, setAccountId] = useState('')
|
||||
const [execution, setExecution] = useState<Execution | null>(null)
|
||||
const [repos, setRepos] = useState<Repo[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const handleSync = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const executionResult = await functions.createExecution(
|
||||
'sync-github',
|
||||
JSON.stringify({ accountId }),
|
||||
)
|
||||
setExecution(executionResult)
|
||||
|
||||
const payload = executionResult.responseBody ? JSON.parse(executionResult.responseBody) : {}
|
||||
const normalizedRepos: Repo[] = (payload.repositories as Repo[] | undefined) || []
|
||||
setRepos(normalizedRepos)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Não foi possível sincronizar com o GitHub.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<header className="rounded-xl border border-slate-800/70 bg-slate-900/60 p-5 shadow-lg shadow-slate-950/50">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-cyan-300">GitHub</p>
|
||||
<h1 className="mt-2 text-2xl font-semibold text-slate-50">Sincronizar Repositórios</h1>
|
||||
<p className="mt-2 text-sm text-slate-400">
|
||||
Execute a função <span className="text-cyan-300">sync-github</span> e visualize o catálogo retornado pelo Appwrite.
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-col gap-3 sm:flex-row">
|
||||
<input
|
||||
type="text"
|
||||
value={accountId}
|
||||
onChange={(e) => setAccountId(e.target.value)}
|
||||
placeholder="ID do documento em cloud_accounts"
|
||||
className="w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSync}
|
||||
disabled={loading || !accountId}
|
||||
className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Sincronizando...' : 'Executar função'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error ? <p className="mt-3 text-sm text-red-300">{error}</p> : null}
|
||||
{execution ? (
|
||||
<p className="mt-2 text-xs text-slate-400">Execução #{execution.$id} • Status: {execution.status}</p>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
<div className="overflow-hidden rounded-xl border border-slate-800/70 bg-slate-950/60 shadow-inner shadow-slate-950/60">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-200">
|
||||
<thead className="bg-slate-900/80 text-xs uppercase tracking-[0.2em] text-cyan-200">
|
||||
<tr>
|
||||
{columns.map((column) => (
|
||||
<th key={column} className="px-4 py-3 font-semibold">
|
||||
{column}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800">
|
||||
{repos.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-4 py-6 text-center text-slate-500">
|
||||
Nenhum repositório sincronizado ainda.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
repos.map((repo) => (
|
||||
<tr key={repo.id} className="hover:bg-slate-900/50">
|
||||
<td className="px-4 py-3 font-semibold text-slate-100">{repo.name}</td>
|
||||
<td className="px-4 py-3 text-slate-300">{repo.language ?? 'N/A'}</td>
|
||||
<td className="px-4 py-3 text-slate-300">{repo.stars ?? repo.stargazers_count ?? 0}</td>
|
||||
<td className="px-4 py-3 text-slate-300">
|
||||
{repo.last_commit || repo.pushed_at
|
||||
? new Date(repo.last_commit || (repo.pushed_at as string)).toLocaleString()
|
||||
: 'Sem dados'}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
100
dashboard/src/pages/Home.tsx
Normal file
100
dashboard/src/pages/Home.tsx
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
import { Query } from 'appwrite'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { appwriteDatabaseId, databases } from '../lib/appwrite'
|
||||
|
||||
const statCard = (label: string, value: string | number, helper?: string) => (
|
||||
<div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-4 shadow-inner shadow-slate-950/60">
|
||||
<p className="text-xs uppercase tracking-[0.25em] text-cyan-300">{label}</p>
|
||||
<p className="mt-2 text-3xl font-semibold text-slate-50">{value}</p>
|
||||
{helper ? <p className="mt-1 text-xs text-slate-400">{helper}</p> : null}
|
||||
</div>
|
||||
)
|
||||
|
||||
export default function Home() {
|
||||
const [projectsTotal, setProjectsTotal] = useState<number | null>(null)
|
||||
const [activeWorkers, setActiveWorkers] = useState<number | null>(null)
|
||||
const [lastDeployment, setLastDeployment] = useState<string>('---')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMetrics = async () => {
|
||||
if (!appwriteDatabaseId) {
|
||||
setError('Defina VITE_APPWRITE_DATABASE_ID para consultar métricas.')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const [projects, cloudAccounts, deployments] = await Promise.all([
|
||||
databases.listDocuments(appwriteDatabaseId, 'projects', [Query.limit(1)]),
|
||||
databases.listDocuments(appwriteDatabaseId, 'cloud_accounts', [Query.limit(1)]),
|
||||
databases.listDocuments(appwriteDatabaseId, 'audit_logs', [Query.orderDesc('timestamp'), Query.limit(1)]),
|
||||
])
|
||||
|
||||
setProjectsTotal(projects.total)
|
||||
setActiveWorkers(cloudAccounts.total)
|
||||
const lastTimestamp = deployments.documents[0]?.timestamp as string | undefined
|
||||
setLastDeployment(lastTimestamp ? new Date(lastTimestamp).toLocaleString() : 'Sem deploys registrados')
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Não foi possível carregar as métricas do painel.')
|
||||
}
|
||||
}
|
||||
|
||||
fetchMetrics()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="rounded-xl border border-slate-800/80 bg-slate-900/60 p-6 shadow-lg shadow-slate-950/50">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Overview</p>
|
||||
<h1 className="mt-2 text-2xl font-semibold text-slate-50">Saúde do Projeto</h1>
|
||||
<p className="mt-2 text-sm text-slate-400">
|
||||
Consolidação das integrações com GitHub, Cloudflare e Appwrite para acompanhar deploys e automações.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error ? <div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-200">{error}</div> : null}
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{statCard('Total Repos', projectsTotal ?? '---', 'Quantidade de projetos cadastrados no Appwrite')}
|
||||
{statCard('Active Workers', activeWorkers ?? '---', 'Workers monitorados pelo Cloudflare')}
|
||||
{statCard('Last Deployment', lastDeployment)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5">
|
||||
<h3 className="text-lg font-semibold text-slate-100">Deploys recentes</h3>
|
||||
<p className="mt-2 text-sm text-slate-400">Acompanhe as últimas execuções registradas no Appwrite.</p>
|
||||
<ul className="mt-4 space-y-3 text-sm text-slate-300">
|
||||
<li className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
|
||||
<span>Build & Deploy</span>
|
||||
<span className="text-xs text-emerald-300">{lastDeployment}</span>
|
||||
</li>
|
||||
<li className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
|
||||
<span>Sync GitHub</span>
|
||||
<span className="text-xs text-emerald-300">{projectsTotal ?? '---'} repositórios</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-5">
|
||||
<h3 className="text-lg font-semibold text-slate-100">Status de integrações</h3>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-300">
|
||||
<div className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
|
||||
<span>Appwrite Database</span>
|
||||
<span className="text-xs text-cyan-300">{appwriteDatabaseId ? 'Configurado' : 'Pendente'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
|
||||
<span>Cloud Accounts</span>
|
||||
<span className="text-xs text-cyan-300">{activeWorkers ?? '---'} credenciais</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">
|
||||
<span>Realtime Logs</span>
|
||||
<span className="text-xs text-emerald-300">Monitorando audit_logs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
85
dashboard/src/pages/Login.tsx
Normal file
85
dashboard/src/pages/Login.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import { FormEvent, useState } from 'react'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '../contexts/Auth'
|
||||
|
||||
export default function Login() {
|
||||
const { login } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const handleSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
await login(email, password)
|
||||
const redirectTo = (location.state as { from?: { pathname?: string } })?.from?.pathname || '/'
|
||||
navigate(redirectTo, { replace: true })
|
||||
} catch (err) {
|
||||
setError('Falha ao autenticar. Confira as credenciais e tente novamente.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden bg-slate-950">
|
||||
<div
|
||||
className="pointer-events-none absolute inset-0 opacity-60"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(59,130,246,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(14,165,233,0.08) 1px, transparent 1px)',
|
||||
backgroundSize: '28px 28px',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex min-h-screen items-center justify-center px-4">
|
||||
<div className="w-full max-w-md rounded-2xl border border-slate-800/80 bg-slate-900/80 p-8 shadow-2xl shadow-cyan-900/40 backdrop-blur">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Appwrite</p>
|
||||
<h1 className="mt-2 text-2xl font-semibold text-slate-50">Acesse o Dashboard</h1>
|
||||
<p className="mt-2 text-sm text-slate-400">Autentique-se para visualizar repositórios, zonas Cloudflare e logs.</p>
|
||||
|
||||
<form className="mt-6 space-y-4" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label className="text-sm text-slate-200">E-mail</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm text-slate-200">Senha</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="mt-1 w-full rounded-lg border border-slate-800 bg-slate-950 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error ? <p className="text-sm text-red-300">{error}</p> : null}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-slate-900 transition hover:bg-cyan-400 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Entrando...' : 'Entrar'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
dashboard/src/pages/Settings.tsx
Normal file
16
dashboard/src/pages/Settings.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export default function Settings() {
|
||||
return (
|
||||
<div className="rounded-xl border border-slate-800/70 bg-slate-900/70 p-6 shadow-inner shadow-slate-950/60">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-cyan-300">Settings</p>
|
||||
<h1 className="mt-2 text-2xl font-semibold text-slate-50">Preferências e Acesso</h1>
|
||||
<p className="mt-2 text-sm text-slate-400">
|
||||
Ajustes finos para notificações, tokens e comportamento das integrações. Expanda conforme novas features forem criadas.
|
||||
</p>
|
||||
<ul className="mt-4 space-y-3 text-sm text-slate-200">
|
||||
<li className="rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">Dark theme ativo</li>
|
||||
<li className="rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">Logs em tempo real habilitados</li>
|
||||
<li className="rounded-lg border border-slate-800/70 bg-slate-950/60 px-3 py-2">Sessão Appwrite protegida</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
2055
package-lock.json
generated
Normal file
2055
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
14
package.json
Normal file
14
package.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"name": "core",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev:dashboard": "cd dashboard && npm run dev",
|
||||
"dev:landing": "cd landing && deno task start",
|
||||
"dev:web": "npm-run-all -p dev:dashboard dev:landing",
|
||||
"lint:dashboard": "cd dashboard && npm run lint"
|
||||
},
|
||||
"devDependencies": {
|
||||
"npm-run-all": "^4.1.5"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue