diff --git a/next.config.js b/next.config.js index 767719f..eecf48d 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,8 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {} +const nextConfig = { + env: { + API_URL: 'http://localhost:8081' + } +} module.exports = nextConfig diff --git a/package-lock.json b/package-lock.json index 61f53c9..4d20899 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,12 +12,18 @@ "@types/react": "18.0.31", "@types/react-dom": "18.2.4", "autoprefixer": "10.4.14", + "js-cookie": "^3.0.5", "next": "13.4.4", "postcss": "8.4.21", "react": "18.2.0", "react-dom": "18.2.0", + "react-hook-form": "^7.45.0", "tailwindcss": "3.3.0", "typescript": "5.0.2" + }, + "devDependencies": { + "@types/js-cookie": "^3.0.3", + "daisyui": "^3.1.5" } }, "node_modules/@next/env": { @@ -200,6 +206,12 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/js-cookie": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.3.tgz", + "integrity": "sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==", + "dev": true + }, "node_modules/@types/node": { "version": "18.15.11", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz", @@ -432,6 +444,12 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "dev": true + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -445,6 +463,16 @@ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, + "node_modules/css-selector-tokenizer": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", + "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "fastparse": "^1.1.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -461,6 +489,28 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, + "node_modules/daisyui": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.1.5.tgz", + "integrity": "sha512-3nk5L//IU31ISzsonKEFG8ris8hS/MRAc+PrOTOyRbssjv1fYmNKSdIrOhG6op2ED3RyJL4p6I81JUwd7RWqTw==", + "dev": true, + "dependencies": { + "colord": "^2.9", + "css-selector-tokenizer": "^0.8", + "postcss-js": "^4", + "tailwindcss": "^3" + }, + "engines": { + "node": ">=16.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/daisyui" + }, + "peerDependencies": { + "postcss": "^8" + } + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -510,6 +560,12 @@ "node": ">= 6" } }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "dev": true + }, "node_modules/fastq": { "version": "1.15.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", @@ -676,6 +732,14 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-cookie": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", + "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==", + "engines": { + "node": ">=14" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -1098,6 +1162,21 @@ "react": "^18.2.0" } }, + "node_modules/react-hook-form": { + "version": "7.45.0", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.0.tgz", + "integrity": "sha512-AbHeZ4ad+0dEIknSW9dBgIwcvRDfZ1O97sgj75WaMdOX0eg8TBiUf9wxzVkIjZbk76BBIE9lmFOzyD4PN80ZQg==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 70fa8a0..eb1357a 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,17 @@ "@types/react": "18.0.31", "@types/react-dom": "18.2.4", "autoprefixer": "10.4.14", + "js-cookie": "^3.0.5", "next": "13.4.4", "postcss": "8.4.21", "react": "18.2.0", "react-dom": "18.2.0", + "react-hook-form": "^7.45.0", "tailwindcss": "3.3.0", "typescript": "5.0.2" + }, + "devDependencies": { + "@types/js-cookie": "^3.0.3", + "daisyui": "^3.1.5" } } diff --git a/src/app/globals.css b/src/app/globals.css index fd81e88..b5c61c9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,27 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} diff --git a/src/app/hola/page.tsx b/src/app/hola/page.tsx new file mode 100644 index 0000000..61a4c0f --- /dev/null +++ b/src/app/hola/page.tsx @@ -0,0 +1,17 @@ +import { FC } from 'react' + +interface Props { +} + +const Hola:FC = () => { + return ( + <> +
+ Hola mundo +
+ + + ) +} + +export default Hola; \ No newline at end of file diff --git a/src/app/login/LoginForm.tsx b/src/app/login/LoginForm.tsx new file mode 100644 index 0000000..94693c5 --- /dev/null +++ b/src/app/login/LoginForm.tsx @@ -0,0 +1,56 @@ +'use client' + +import useBasicAuth from '@/hooks/useBasicAuth'; +import Cookies from 'js-cookie'; +import { useRouter } from 'next/navigation'; +import { FC } from 'react' +import { useForm } from 'react-hook-form' + +export const LoginForm = () => { + + const { register, handleSubmit, getValues } = useForm(); + const router = useRouter(); + + const onSubmit = async () => { + console.log("ingreso en el submit") + const { bearerToken } = await useBasicAuth(getValues("user"), getValues("password")); + Cookies.set("token",bearerToken); + router.push("/hola") + } + + return ( + <> +
+
+ + +
+
+ + + +
+
+ +
+
+ + + ) +} \ No newline at end of file diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx new file mode 100644 index 0000000..641c050 --- /dev/null +++ b/src/app/login/page.tsx @@ -0,0 +1,25 @@ +import { LoginForm } from "./LoginForm"; + +const LoginPage = () => { + + return( + <> +
+
+
+

Login now!

+

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

+
+
+
+ +
+
+
+
+ + ) + +} + +export default LoginPage; \ No newline at end of file diff --git a/src/hooks/useBasicAuth.tsx b/src/hooks/useBasicAuth.tsx new file mode 100644 index 0000000..b5c281e --- /dev/null +++ b/src/hooks/useBasicAuth.tsx @@ -0,0 +1,34 @@ + +const fecher = async (url:string, token: string) => { + return await fetch(url, { + method: 'POST', + headers:{ + 'Authorization': token + } + }) +} + +const useBasicAuth = async (username: string, password: string) => { + let bearerToken = ""; + try { + console.log("ingreso en el useBasicAuth") + const token = 'Basic '+ Buffer.from(username+":"+password).toString('base64'); + console.log(token) + const baseUrl = process.env.API_URL; + console.log(baseUrl) + const response = await fecher(baseUrl+'/login', token); + console.log(response) + if (response.ok){ + bearerToken = response.headers.get("Authorization") || ""; + + } + } catch (error) { + console.log(error) + } + + return{ + bearerToken + } +} + +export default useBasicAuth; \ No newline at end of file diff --git a/src/middleware.ts b/src/middleware.ts new file mode 100644 index 0000000..1226892 --- /dev/null +++ b/src/middleware.ts @@ -0,0 +1,23 @@ +import { NextResponse } from 'next/server' +import type { NextRequest } from 'next/server' + +// This function can be marked `async` if using `await` inside +export function middleware(request: NextRequest) { + + const token = request.cookies.get("token")?.value; + console.log("En el middleware: "+token) + if (!token){ + console.log("redireccion") + return NextResponse.rewrite(new URL('/login', request.url)) + } + console.log("Ok") + +} + + +export const config = { + matcher: [ + + '/((?!api|_next/static|_next/image|favicon.ico|login).*)', + ], + } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index d53b2ea..74da8f8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,5 +14,5 @@ module.exports = { }, }, }, - plugins: [], + plugins: [require("daisyui")], }