Yavirac
/
frontend-pw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

login Ok

Browse Source
main
Freddy Heredia 2 years ago
parent 501a1f097a
commit 50f1d5f3e1
10 changed files with 246 additions and 26 deletions
Show Stats Download Patch File Download Diff File

6
next.config.js
Unescape View File

@ -1,4 +1,8 @@
/** @type {import('next').NextConfig} */
const nextConfig = {}
const nextConfig = {
env: {
API_URL: 'http://localhost:8081'
}
}
module.exports = nextConfig

79
package-lock.json generated
Unescape View File

@ -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",

6
package.json
Unescape View File

@ -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"
}
}

24
src/app/globals.css
Unescape View File

@ -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));
}

17
src/app/hola/page.tsx
Unescape View File

@ -0,0 +1,17 @@
import { FC } from 'react'
interface Props {
}
const Hola:FC <Props> = () => {
return (
<>
<div>
Hola mundo
</div>
</>
)
}
export default Hola;

56
src/app/login/LoginForm.tsx
Unescape View File

@ -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 (
<>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-control">
<label className="label">
<span className="label-text">Email</span>
</label>
<input
type="text"
placeholder="Usuario"
className="input input-bordered"
{...register("user")}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Password</span>
</label>
<input
type="password"
placeholder="password"
className="input input-bordered"
{...register("password")}
/>
<label className="label">
<a href="#" className="label-text-alt link link-hover">Forgot password?</a>
</label>
</div>
<div className="form-control mt-6">
<button type='submit' className="btn btn-primary">Login</button>
</div>
</form>
</>
)
}

25
src/app/login/page.tsx
Unescape View File

@ -0,0 +1,25 @@
import { LoginForm } from "./LoginForm";
const LoginPage = () => {
return(
<>
<div className="hero min-h-screen bg-base-200">
<div className="hero-content flex-col lg:flex-row-reverse">
<div className="text-center lg:text-left">
<h1 className="text-5xl font-bold">Login now!</h1>
<p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
</div>
<div className="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
<div className="card-body">
<LoginForm/>
</div>
</div>
</div>
</div>
</>
)
}
export default LoginPage;

34
src/hooks/useBasicAuth.tsx
Unescape View File

@ -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;

23
src/middleware.ts
Unescape View File

@ -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).*)',
],
}

2
tailwind.config.js
Unescape View File

@ -14,5 +14,5 @@ module.exports = {
},
},
},
plugins: [],
plugins: [require("daisyui")],
}

Write Preview
Loading…
Cancel
Save