generated from lucien/api-template
Compare commits
1 commit
Author | SHA1 | Date | |
---|---|---|---|
e4b8b8cdfa |
7 changed files with 618 additions and 132 deletions
607
front/package-lock.json
generated
607
front/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -10,10 +10,13 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"axios": "^1.8.4",
|
||||
"daisyui": "^5.0.28",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.5.1"
|
||||
"react-router-dom": "^7.5.1",
|
||||
"tailwindcss": "^4.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.21.0",
|
||||
|
|
|
@ -1,67 +1,49 @@
|
|||
import { useState } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import { User } from "../types"
|
||||
|
||||
export default function TopBar({ user }: { user: User | undefined }) {
|
||||
const [burgerMenuOpen, setBurgerMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="bank-section topbar">
|
||||
<div className="topbar-left">
|
||||
<Link to="/">Home</Link>
|
||||
{user?.admin == 1 && (
|
||||
<Link to="/admin">Admin</Link>
|
||||
)}
|
||||
<div className="navbar bg-base-200">
|
||||
<div className="navbar-start">
|
||||
<ul className="menu menu-horizontal rounded-box bg-base-300">
|
||||
<li>
|
||||
<Link to="/" className="">Home</Link>
|
||||
</li>
|
||||
{user?.admin == 1 && (
|
||||
<li>
|
||||
<Link to="/admin" className="">Admin</Link>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="topbar-center">
|
||||
<div className="navbar-center text-xl">
|
||||
<h1>Tanuki's Bank</h1>
|
||||
</div>
|
||||
{user ? (
|
||||
<div className="topbar-right">
|
||||
<span>{user.name}</span>
|
||||
<button onClick={() => {
|
||||
localStorage.removeItem("token")
|
||||
window.location.reload()
|
||||
}}>
|
||||
Logout
|
||||
</button>
|
||||
<div className="navbar-end">
|
||||
<div className="flex items-center gap-3">
|
||||
<span>{user.name}</span>
|
||||
<button className="btn bg-accent" onClick={() => {
|
||||
localStorage.removeItem("token")
|
||||
window.location.reload()
|
||||
}}>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="topbar-right">
|
||||
<Link to="/login">Login</Link>
|
||||
<Link to="/register">Register</Link>
|
||||
<div className="navbar-end">
|
||||
<ul className="menu menu-horizontal rounded-box bg-base-300">
|
||||
<li>
|
||||
<Link to="/login" className="">Login</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/register" className="">Register</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<div className="burger-menu">
|
||||
{burgerMenuOpen && (
|
||||
<div className="burger-menu-content">
|
||||
<Link to="/">Home</Link>
|
||||
{user?.admin == 1 && (
|
||||
<Link to="/admin">Admin</Link>
|
||||
)}
|
||||
{user ? (
|
||||
<div className="burger-menu-user">
|
||||
<span>{user.name}</span>
|
||||
<button onClick={() => {
|
||||
localStorage.removeItem("token")
|
||||
window.location.reload()
|
||||
}}>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="burger-menu-user">
|
||||
<Link to="/login">Login</Link>
|
||||
<Link to="/register">Register</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<button onClick={() => setBurgerMenuOpen(!burgerMenuOpen)}>
|
||||
{burgerMenuOpen ? "Close" : "Menu"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -1,4 +1,10 @@
|
|||
html {
|
||||
@import "tailwindcss";
|
||||
@plugin "daisyui" {
|
||||
themes: light --default, autumn --prefersdark;
|
||||
}
|
||||
|
||||
|
||||
/*html {
|
||||
background: #2a6c9b;
|
||||
background: linear-gradient(167deg, rgba(42, 108, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(163, 237, 83, 1) 100%);
|
||||
}
|
||||
|
@ -79,4 +85,4 @@ html {
|
|||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
|
|
@ -31,15 +31,20 @@ export default function Login () {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="bank-page">
|
||||
<div>
|
||||
<TopBar user={undefined} />
|
||||
<div className="bank-section">
|
||||
<h1>Login</h1>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input type="text" id="username" name="username" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
|
||||
<input type="password" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
|
||||
<button type="submit" >Login</button>
|
||||
<div className="card bg-base-200 m-4">
|
||||
<form onSubmit={handleSubmit} className="card-body gap-5 flex flex-col items-center">
|
||||
<div className="card-title">
|
||||
<h1>Login</h1>
|
||||
</div>
|
||||
<input type="text" id="username" name="username" className="input" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
|
||||
<input type="password" id="password" name="password" className="input" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
|
||||
<div className="card-actions">
|
||||
<button type="submit" className="btn bg-accent" >Login</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -46,17 +46,19 @@ export default function Register () {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='bank-page'>
|
||||
<div>
|
||||
<TopBar user={undefined} />
|
||||
<div className='bank-section'>
|
||||
<h1>Register</h1>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input type="text" id="name" name="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<input type="text" id="lastname" name="lastname" placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
|
||||
<input type="text" id="email" name="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
|
||||
<input type="text" id="numero" name="numero" placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
|
||||
<input type="password" id="password" name="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
<button type="submit">Register</button>
|
||||
<div className="card bg-base-200 m-4">
|
||||
<form onSubmit={handleSubmit} className="card-body gap-5 flex flex-col items-center">
|
||||
<div className='card-title'>
|
||||
<h1>Register</h1>
|
||||
</div>
|
||||
<input type="text" className='input' placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
<input type="text" className='input' placeholder="Lastname" value={lastname} onChange={(e) => setLastname(e.target.value)} />
|
||||
<input type="text" className='input' placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
|
||||
<input type="text" className='input' placeholder="Numero" value={numero} onChange={(e) => setNumero(e.target.value)} />
|
||||
<input type="password" className='input' placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
|
||||
<button type="submit" className='btn bg-accent'>Register</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
plugins: [react(), tailwindcss()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue