hightjs 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -6
- package/dist/builder.js +1 -1
- package/dist/hotReload.js +0 -1
- package/docs/README.md +1 -2
- package/docs/cli.md +55 -3
- package/docs/integracoes.md +240 -0
- package/example/.hweb/entry.client.js +24 -0
- package/example/certs/cert.pem +20 -0
- package/example/certs/key.pem +27 -0
- package/example/hweb-dist/main-5KKAYNUU.js +1137 -0
- package/example/package-lock.json +3595 -0
- package/example/package.json +26 -0
- package/example/postcss.config.js +8 -0
- package/example/src/auth.ts +42 -0
- package/example/src/web/backend/routes/auth.ts +3 -0
- package/example/src/web/backend/routes/version.ts +13 -0
- package/example/src/web/globals.css +5 -0
- package/example/src/web/layout.tsx +46 -0
- package/example/src/web/routes/index.tsx +153 -0
- package/example/src/web/routes/login.tsx +175 -0
- package/example/tailwind.config.js +12 -0
- package/example/tsconfig.json +15 -0
- package/package.json +1 -1
- package/src/builder.js +1 -1
- package/src/hotReload.ts +0 -1
- package/docs/adapters.md +0 -7
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "example",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "hight start --ssl --port 443",
|
|
8
|
+
"dev": "hight dev --ssl --port 443"
|
|
9
|
+
},
|
|
10
|
+
"author": "itsmuzin",
|
|
11
|
+
"license": "ISC",
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@tailwindcss/postcss": "^4.1.16",
|
|
14
|
+
"autoprefixer": "^10.4.21",
|
|
15
|
+
"hightjs": "^0.3.1",
|
|
16
|
+
"postcss": "^8.5.6",
|
|
17
|
+
"react": "^19.2.0",
|
|
18
|
+
"react-dom": "^19.2.0",
|
|
19
|
+
"tailwindcss": "^4.1.16",
|
|
20
|
+
"ts-node": "^10.9.2"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"@types/react": "^19.2.2",
|
|
24
|
+
"typescript": "^5.9.3"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import {CredentialsProvider, createAuthRoutes, DiscordProvider, GoogleProvider, User} from 'hightjs/auth';
|
|
2
|
+
import type { AuthConfig } from 'hightjs/auth';
|
|
3
|
+
|
|
4
|
+
export const authConfig: AuthConfig = {
|
|
5
|
+
providers: [
|
|
6
|
+
new CredentialsProvider({
|
|
7
|
+
authorize(credentials: Record<string, string>): Promise<User | null> | User | null {
|
|
8
|
+
if (credentials.username === 'jsmith' && credentials.password === 'password123') {
|
|
9
|
+
return {
|
|
10
|
+
id: '1',
|
|
11
|
+
name: 'John Smith',
|
|
12
|
+
email: 'john.smith@gmail.com'
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
return null;
|
|
16
|
+
},
|
|
17
|
+
credentials: {
|
|
18
|
+
username: { label: "Username", type: "text", placeholder: "jsmith" },
|
|
19
|
+
password: { label: "Password", type: "password" }
|
|
20
|
+
}
|
|
21
|
+
})
|
|
22
|
+
],
|
|
23
|
+
|
|
24
|
+
session: {
|
|
25
|
+
strategy: 'jwt',
|
|
26
|
+
maxAge: 24 * 60 * 60, // 24 horas
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
pages: {
|
|
30
|
+
signIn: '/login',
|
|
31
|
+
signOut: '/'
|
|
32
|
+
},
|
|
33
|
+
callbacks: {
|
|
34
|
+
async session({session, provider}) {
|
|
35
|
+
return session;
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
secret: 'hweb-test-secret-key-change-in-production'
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// Criar as rotas de auth automaticamente
|
|
42
|
+
export const authRoutes = createAuthRoutes(authConfig);
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import {BackendRouteConfig, HightJSResponse} from "hightjs";
|
|
2
|
+
|
|
3
|
+
const route: BackendRouteConfig = {
|
|
4
|
+
pattern: "/api/version",
|
|
5
|
+
GET: (request, params): HightJSResponse => {
|
|
6
|
+
return HightJSResponse.json({
|
|
7
|
+
success: true,
|
|
8
|
+
version: "1.0.0",
|
|
9
|
+
name: "HightJS Example App"
|
|
10
|
+
})
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
export default route;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {Metadata, router} from "hightjs/client"
|
|
3
|
+
import './globals.css';
|
|
4
|
+
import {AnimatePresence, motion} from "framer-motion";
|
|
5
|
+
import {SessionProvider} from "hightjs/auth/react";
|
|
6
|
+
|
|
7
|
+
interface LayoutProps {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Metadata exportada (similar ao Next.js)
|
|
12
|
+
export const metadata: Metadata = {
|
|
13
|
+
title: "Hight JS",
|
|
14
|
+
description: "O framework web mais rápido e simples para React!",
|
|
15
|
+
favicon: "/favicon.ico",
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export default function Layout({ children }: LayoutProps) {
|
|
19
|
+
const variants = {
|
|
20
|
+
hidden: { opacity: 0, y: 15 }, // Começa um pouco abaixo e invisível
|
|
21
|
+
enter: { opacity: 1, y: 0 }, // Sobe para a posição final e aparece
|
|
22
|
+
exit: { opacity: 0, y: -15 }, // Sai subindo um pouco e some
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<SessionProvider>
|
|
27
|
+
<AnimatePresence
|
|
28
|
+
mode="wait"
|
|
29
|
+
onExitComplete={() => window.scrollTo(0, 0)}
|
|
30
|
+
>
|
|
31
|
+
<motion.div
|
|
32
|
+
key={router.pathname}
|
|
33
|
+
variants={variants}
|
|
34
|
+
initial="hidden"
|
|
35
|
+
animate="enter"
|
|
36
|
+
exit="exit"
|
|
37
|
+
// Uma transição mais rápida e suave
|
|
38
|
+
transition={{ type: 'tween', ease: 'easeInOut', duration: 0.4 }}
|
|
39
|
+
>
|
|
40
|
+
{ /*// @ts-ignore*/ }
|
|
41
|
+
{children}
|
|
42
|
+
</motion.div>
|
|
43
|
+
</AnimatePresence>
|
|
44
|
+
</SessionProvider>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import {RouteConfig} from "hightjs/client";
|
|
2
|
+
|
|
3
|
+
import React from "react";
|
|
4
|
+
import {useSession} from "hightjs/auth/react"
|
|
5
|
+
import { Link } from "hightjs/client";
|
|
6
|
+
|
|
7
|
+
function Home() {
|
|
8
|
+
const { data: session, status, signOut } = useSession();
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
return (
|
|
12
|
+
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 bg-gradient-to-r from-black to-gray-500 text-gray-200 relative overflow-hidden">
|
|
13
|
+
<div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-r from-black to-gray-500 bg-[radial-gradient(circle_500px_at_50%_200px,#3e007555,transparent)]"></div>
|
|
14
|
+
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start z-10">
|
|
15
|
+
<div className="flex items-center gap-4">
|
|
16
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-purple-500"><path d="m12 3-8.9 5.06a4 4 0 0 0-1.1 5.44l1.1 1.94a4 4 0 0 0 5.44 1.1l8.9-5.06a4 4 0 0 0 1.1-5.44l-1.1-1.94a4 4 0 0 0-5.44-1.1z"></path></svg>
|
|
17
|
+
<h1 className="text-3xl font-bold text-purple-400 [text-shadow:_0_0_12px_theme(colors.purple.500)]">HightJS</h1>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div className="flex flex-col items-center gap-4 self-center">
|
|
21
|
+
{status === 'loading' && <p>Carregando...</p>}
|
|
22
|
+
{status === 'authenticated' && session?.user && (
|
|
23
|
+
<>
|
|
24
|
+
<p className="text-lg">Você está logado como <span className="font-bold text-purple-400">{session.user.name}</span> !!!</p>
|
|
25
|
+
<button
|
|
26
|
+
onClick={() => signOut({callbackUrl: '/'})}
|
|
27
|
+
className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-40 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
|
|
28
|
+
>
|
|
29
|
+
Sair
|
|
30
|
+
</button>
|
|
31
|
+
|
|
32
|
+
</>
|
|
33
|
+
)}
|
|
34
|
+
{status === 'unauthenticated' && (
|
|
35
|
+
<Link
|
|
36
|
+
href="/login"
|
|
37
|
+
className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-40 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
|
|
38
|
+
>
|
|
39
|
+
Login
|
|
40
|
+
</Link>
|
|
41
|
+
)}
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left text-gray-400">
|
|
45
|
+
<li className="mb-2 tracking-[-.01em]">
|
|
46
|
+
Comece editando{" "}
|
|
47
|
+
<code className="bg-gray-800 border border-gray-700 font-mono font-semibold px-1 py-0.5 rounded text-purple-400">
|
|
48
|
+
src/web/routes/index.tsx
|
|
49
|
+
</code>
|
|
50
|
+
.
|
|
51
|
+
</li>
|
|
52
|
+
<li className="tracking-[-.01em]">
|
|
53
|
+
Salve e veja suas mudanças instantaneamente.
|
|
54
|
+
</li>
|
|
55
|
+
</ol>
|
|
56
|
+
|
|
57
|
+
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
|
58
|
+
<a
|
|
59
|
+
className="rounded-full border border-solid border-transparent transition-all duration-300 flex items-center justify-center bg-purple-600 text-white gap-2 hover:bg-purple-500 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)]"
|
|
60
|
+
href="#"
|
|
61
|
+
target="_blank"
|
|
62
|
+
rel="noopener noreferrer"
|
|
63
|
+
>
|
|
64
|
+
<svg
|
|
65
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
66
|
+
width="20"
|
|
67
|
+
height="20"
|
|
68
|
+
viewBox="0 0 24 24"
|
|
69
|
+
fill="none"
|
|
70
|
+
stroke="currentColor"
|
|
71
|
+
strokeWidth="2"
|
|
72
|
+
strokeLinecap="round"
|
|
73
|
+
strokeLinejoin="round"
|
|
74
|
+
className="lucide lucide-rocket"
|
|
75
|
+
>
|
|
76
|
+
<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.33-.04-3.86l1.8-1.8c.44-.44.86-.92 1.22-1.44l-2.06-2.06c-.52.36-1 .78-1.44 1.22l-1.8-1.8c-1.53.74-3.02.73-3.86-.04Z" />
|
|
77
|
+
<path d="m12 15 5-5" />
|
|
78
|
+
<path d="M9 3h6v6h-6Z" />
|
|
79
|
+
<path d="M19.5 16.5c1.5-1.26 2-5 2-5s-3.74.5-5 2c-.71.84-.7 2.33.04 3.86l-1.8 1.8c-.44.44-.86.92-1.22 1.44l2.06 2.06c.52-.36 1-.78 1.44-1.22l1.8 1.8c1.53-.74 3.02-.73 3.86.04Z" />
|
|
80
|
+
</svg>
|
|
81
|
+
Fazer Deploy
|
|
82
|
+
</a>
|
|
83
|
+
<a
|
|
84
|
+
className="rounded-full border border-solid border-white/20 transition-colors flex items-center justify-center hover:bg-white/10 hover:border-white/30 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px] text-gray-300"
|
|
85
|
+
href="#"
|
|
86
|
+
target="_blank"
|
|
87
|
+
rel="noopener noreferrer"
|
|
88
|
+
>
|
|
89
|
+
Leia a documentação
|
|
90
|
+
</a>
|
|
91
|
+
</div>
|
|
92
|
+
</main>
|
|
93
|
+
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center z-10">
|
|
94
|
+
<a
|
|
95
|
+
className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
|
|
96
|
+
href="#"
|
|
97
|
+
target="_blank"
|
|
98
|
+
rel="noopener noreferrer"
|
|
99
|
+
>
|
|
100
|
+
<img
|
|
101
|
+
aria-hidden
|
|
102
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2stb3BlbiI+PHBhdGggZD0iTTIgM3YxNGEyIDIgMCAwIDAgMiAyaDE2YTIgMiAwIDAgMCAyLTJWM20tOCAxOGExIDQgMCAwIDEtMy44LTJsMS42LTEuNmExIDQgMCAwIDEgMy44IDJ6bTggMGE0IDQgMCAwIDAgMy44LTJsLTEuNi0xLjZhNCA0IDAgMCAwLTMuOCAyeiIvPjwvc3ZnPg=="
|
|
103
|
+
alt="Ícone de arquivo"
|
|
104
|
+
width={16}
|
|
105
|
+
height={16}
|
|
106
|
+
/>
|
|
107
|
+
Aprenda
|
|
108
|
+
</a>
|
|
109
|
+
<a
|
|
110
|
+
className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
|
|
111
|
+
href="#"
|
|
112
|
+
target="_blank"
|
|
113
|
+
rel="noopener noreferrer"
|
|
114
|
+
>
|
|
115
|
+
<img
|
|
116
|
+
aria-hidden
|
|
117
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxheW91dC10ZW1wbGF0ZSI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjciIHg9IjMiIHk9IjMiIHJ4PSIyIiByeT0iMiIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjciIHg9IjMiIHk9IjE0IiByeD0iMiIgcnk9IjIiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB4PSIxNCIgeT0iMTQiIHJ4PSIyIiByeT0iMiIvPjwvc3ZnPg=="
|
|
118
|
+
alt="Ícone de janela"
|
|
119
|
+
width={16}
|
|
120
|
+
height={16}
|
|
121
|
+
/>
|
|
122
|
+
Exemplos
|
|
123
|
+
</a>
|
|
124
|
+
<a
|
|
125
|
+
className="flex items-center gap-2 text-gray-400 transition-colors hover:text-purple-400 hover:underline hover:underline-offset-4"
|
|
126
|
+
href="#"
|
|
127
|
+
target="_blank"
|
|
128
|
+
rel="noopener noreferrer"
|
|
129
|
+
>
|
|
130
|
+
<img
|
|
131
|
+
aria-hidden
|
|
132
|
+
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWdsb2JlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwYXRoIGQ9Ik0xMiAyYTE0LjUgMTQuNSAwIDAgMCAwIDIwIDE0LjUgMTQuNSAwIDAgMCAwLTIweiIvPjxwYXRoIGQ9Ik0yIDEySDEybTEwIDBIMTIiLz48L3N2Zz4="
|
|
133
|
+
alt="Ícone de globo"
|
|
134
|
+
width={16}
|
|
135
|
+
height={16}
|
|
136
|
+
/>
|
|
137
|
+
Ir para hightjs.dev →
|
|
138
|
+
</a>
|
|
139
|
+
</footer>
|
|
140
|
+
</div>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
export const config: RouteConfig = {
|
|
147
|
+
pattern: '/',
|
|
148
|
+
component: Home,
|
|
149
|
+
generateMetadata: () => ({
|
|
150
|
+
title: 'HightJS | Home'
|
|
151
|
+
})
|
|
152
|
+
};
|
|
153
|
+
export default config
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import {RouteConfig, router} from "hightjs/client";
|
|
2
|
+
import {GuestOnly, useSession} from "hightjs/auth/react"
|
|
3
|
+
import React, {useState} from "react";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
function LoginPage() {
|
|
7
|
+
const [username, setUsername] = useState("");
|
|
8
|
+
const [password, setPassword] = useState("");
|
|
9
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
10
|
+
const {signIn} = useSession();
|
|
11
|
+
|
|
12
|
+
const [error, setError] = useState<string | null>(null);
|
|
13
|
+
|
|
14
|
+
const handleLogin = async (e: React.FormEvent) => {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
setIsLoading(true);
|
|
17
|
+
setError(null);
|
|
18
|
+
|
|
19
|
+
try {
|
|
20
|
+
const result = await signIn('credentials', {
|
|
21
|
+
redirect: false,
|
|
22
|
+
username: username,
|
|
23
|
+
password: password,
|
|
24
|
+
callbackUrl: '/'
|
|
25
|
+
});
|
|
26
|
+
console.log(result)
|
|
27
|
+
if (!result || result.error) {
|
|
28
|
+
setError('Credenciais inválidas. Verifique seus dados e senha.');
|
|
29
|
+
setIsLoading(false);
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
router.push("/")
|
|
33
|
+
|
|
34
|
+
} catch (err) {
|
|
35
|
+
setError('Ocorreu um erro inesperado. Tente novamente.');
|
|
36
|
+
setIsLoading(false);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<div className="font-sans min-h-screen flex items-center justify-center p-8 bg-gradient-to-r from-black to-gray-500 text-gray-200 relative overflow-hidden">
|
|
43
|
+
{/* Background gradient */}
|
|
44
|
+
<div className="absolute inset-0 -z-10 h-full w-full bg-gradient-to-r from-black to-gray-500 bg-[radial-gradient(circle_500px_at_50%_200px,#3e007555,transparent)]"></div>
|
|
45
|
+
|
|
46
|
+
{/* Additional ambient lights */}
|
|
47
|
+
<div className="absolute top-1/4 left-1/4 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl -z-10"></div>
|
|
48
|
+
<div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl -z-10"></div>
|
|
49
|
+
|
|
50
|
+
{/* Login Container */}
|
|
51
|
+
<div className="w-full max-w-md">
|
|
52
|
+
{/* Header */}
|
|
53
|
+
<div className="text-center mb-8">
|
|
54
|
+
<div className="flex items-center justify-center gap-3 mb-4">
|
|
55
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-purple-500">
|
|
56
|
+
<path d="m12 3-8.9 5.06a4 4 0 0 0-1.1 5.44l1.1 1.94a4 4 0 0 0 5.44 1.1l8.9-5.06a4 4 0 0 0 1.1-5.44l-1.1-1.94a4 4 0 0 0-5.44-1.1z"></path>
|
|
57
|
+
</svg>
|
|
58
|
+
<h1 className="text-2xl font-bold text-purple-400 [text-shadow:_0_0_12px_theme(colors.purple.500)]">HightJS</h1>
|
|
59
|
+
</div>
|
|
60
|
+
<h2 className="text-xl font-medium text-gray-300 mb-2">Bem-vindo de volta</h2>
|
|
61
|
+
<p className="text-sm text-gray-400">Faça login em sua conta</p>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
{/* Glass Login Form */}
|
|
65
|
+
<div className="relative">
|
|
66
|
+
{/* Glass background */}
|
|
67
|
+
<div className="absolute inset-0 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl"></div>
|
|
68
|
+
|
|
69
|
+
{/* error */}
|
|
70
|
+
{error && (
|
|
71
|
+
<div className="relative p-4 mb-4 text-sm text-red-800 bg-red-200 rounded-lg" role="alert">
|
|
72
|
+
{error}
|
|
73
|
+
</div>
|
|
74
|
+
)}
|
|
75
|
+
|
|
76
|
+
{/* Form content */}
|
|
77
|
+
<form onSubmit={handleLogin} className="relative p-8 space-y-6">
|
|
78
|
+
{/* Email field */}
|
|
79
|
+
<div className="space-y-2">
|
|
80
|
+
<label htmlFor="email" className="text-sm font-medium text-gray-300">
|
|
81
|
+
Usuário
|
|
82
|
+
</label>
|
|
83
|
+
<input
|
|
84
|
+
id="username"
|
|
85
|
+
type="username"
|
|
86
|
+
value={username}
|
|
87
|
+
onChange={(e) => setUsername(e.target.value)}
|
|
88
|
+
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-gray-200 placeholder-gray-400 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 focus:outline-none backdrop-blur-sm transition-all duration-300"
|
|
89
|
+
required
|
|
90
|
+
/>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
{/* Password field */}
|
|
94
|
+
<div className="space-y-2">
|
|
95
|
+
<label htmlFor="password" className="text-sm font-medium text-gray-300">
|
|
96
|
+
Senha
|
|
97
|
+
</label>
|
|
98
|
+
<input
|
|
99
|
+
id="password"
|
|
100
|
+
type="password"
|
|
101
|
+
placeholder="••••••••"
|
|
102
|
+
value={password}
|
|
103
|
+
onChange={(e) => setPassword(e.target.value)}
|
|
104
|
+
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-gray-200 placeholder-gray-400 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 focus:outline-none backdrop-blur-sm transition-all duration-300"
|
|
105
|
+
required
|
|
106
|
+
/>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
{/* Remember me and forgot password */}
|
|
110
|
+
<div className="flex items-center justify-between text-sm">
|
|
111
|
+
<label className="flex items-center text-gray-400 cursor-pointer">
|
|
112
|
+
<input
|
|
113
|
+
type="checkbox"
|
|
114
|
+
className="mr-2 rounded border-white/20 bg-white/5 text-purple-500 focus:ring-purple-500/20"
|
|
115
|
+
/>
|
|
116
|
+
Lembrar de mim
|
|
117
|
+
</label>
|
|
118
|
+
<a href="#" className="text-purple-400 hover:text-purple-300 transition-colors hover:underline">
|
|
119
|
+
Esqueceu a senha?
|
|
120
|
+
</a>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
{/* Login button */}
|
|
124
|
+
<button
|
|
125
|
+
type="submit"
|
|
126
|
+
disabled={isLoading}
|
|
127
|
+
className="w-full bg-purple-600 hover:bg-purple-500 text-white font-medium py-3 px-4 rounded-xl transition-all duration-300 shadow-[0_0_15px_-3px_theme(colors.purple.600)] hover:shadow-[0_0_25px_-3px_theme(colors.purple.500)] disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-purple-500/20"
|
|
128
|
+
>
|
|
129
|
+
{isLoading ? (
|
|
130
|
+
<div className="flex items-center justify-center gap-2">
|
|
131
|
+
<svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
|
|
132
|
+
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
133
|
+
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
134
|
+
</svg>
|
|
135
|
+
Entrando...
|
|
136
|
+
</div>
|
|
137
|
+
) : (
|
|
138
|
+
'Entrar'
|
|
139
|
+
)}
|
|
140
|
+
</button>
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
</form>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
const wrapper = () => {
|
|
154
|
+
const session = useSession()
|
|
155
|
+
if (session.status === 'loading') {
|
|
156
|
+
return <div>Loading...</div>;
|
|
157
|
+
}
|
|
158
|
+
if (session.status === 'authenticated') {
|
|
159
|
+
router.push('/')
|
|
160
|
+
return <div>Redirecting...</div>;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
return (
|
|
164
|
+
<LoginPage/>
|
|
165
|
+
)
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
export const config: RouteConfig = {
|
|
169
|
+
pattern: '/login',
|
|
170
|
+
component: wrapper,
|
|
171
|
+
generateMetadata: () => ({
|
|
172
|
+
title: 'HightJS | Login'
|
|
173
|
+
})
|
|
174
|
+
};
|
|
175
|
+
export default config
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES6",
|
|
4
|
+
"module": "CommonJS",
|
|
5
|
+
"jsx": "react",
|
|
6
|
+
"strict": true,
|
|
7
|
+
"esModuleInterop": true,
|
|
8
|
+
"resolveJsonModule": true,
|
|
9
|
+
"skipLibCheck": true,
|
|
10
|
+
"forceConsistentCasingInFileNames": true,
|
|
11
|
+
"outDir": "./dist",
|
|
12
|
+
"moduleResolution": "nodenext"
|
|
13
|
+
},
|
|
14
|
+
"include": ["src/**/*"]
|
|
15
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hightjs",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"description": "HightJS is a high-level framework for building web applications with ease and speed. It provides a robust set of tools and features to streamline development and enhance productivity.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
package/src/builder.js
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
*/
|
|
17
17
|
const esbuild = require('esbuild');
|
|
18
18
|
const path = require('path');
|
|
19
|
-
const Console = require("./api/console")
|
|
19
|
+
const Console = require("./api/console").default
|
|
20
20
|
const fs = require('fs');
|
|
21
21
|
// Lista de módulos nativos do Node.js para marcar como externos (apenas os built-ins do Node)
|
|
22
22
|
const nodeBuiltIns = [
|
package/src/hotReload.ts
CHANGED