Skip to content

Commit c53fd46

Browse files
Frasquito3Frasquito3
committed
Visually pleasing login and register
The layouts folder was also added, where the MainLayout and AuthLayout were created. Based on that, the App.tsx and AppRoutes.tsx files were changed.
1 parent 687c9da commit c53fd46

14 files changed

Lines changed: 1110 additions & 211 deletions

File tree

‎.github/workflows/auto-pr.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ jobs:
2424
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
2525
run: |
2626
# 1. Define a todo el equipo en una lista (array de bash)
27-
ALL_REVIEWERS=("Frasquito3" "LucaTvl")
27+
ALL_REVIEWERS=("Frasquito3" "LucaTvl" "NiconiKimg" "carlex74")
2828
2929
# 2. Obtén el autor del PR desde las variables de GitHub
3030
PR_AUTHOR="${{ github.actor }}"

‎README.md‎

Lines changed: 1 addition & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13-
14-
```js
15-
export default tseslint.config([
16-
globalIgnores(['dist']),
17-
{
18-
files: ['**/*.{ts,tsx}'],
19-
extends: [
20-
// Other configs...
21-
22-
// Remove tseslint.configs.recommended and replace with this
23-
...tseslint.configs.recommendedTypeChecked,
24-
// Alternatively, use this for stricter rules
25-
...tseslint.configs.strictTypeChecked,
26-
// Optionally, add this for stylistic rules
27-
...tseslint.configs.stylisticTypeChecked,
28-
29-
// Other configs...
30-
],
31-
languageOptions: {
32-
parserOptions: {
33-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
34-
tsconfigRootDir: import.meta.dirname,
35-
},
36-
// other options...
37-
},
38-
},
39-
])
40-
```
41-
42-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43-
44-
```js
45-
// eslint.config.js
46-
import reactX from 'eslint-plugin-react-x'
47-
import reactDom from 'eslint-plugin-react-dom'
48-
49-
export default tseslint.config([
50-
globalIgnores(['dist']),
51-
{
52-
files: ['**/*.{ts,tsx}'],
53-
extends: [
54-
// Other configs...
55-
// Enable lint rules for React
56-
reactX.configs['recommended-typescript'],
57-
// Enable lint rules for React DOM
58-
reactDom.configs.recommended,
59-
],
60-
languageOptions: {
61-
parserOptions: {
62-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63-
tsconfigRootDir: import.meta.dirname,
64-
},
65-
// other options...
66-
},
67-
},
68-
])
69-
```
1+
# Front-End-DSW

‎index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76
<title>Courses Platform</title>
87
</head>

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@fortawesome/free-solid-svg-icons": "^7.0.0",
14+
"@fortawesome/react-fontawesome": "^0.2.3",
1315
"axios": "^1.10.0",
16+
"lucide-react": "^0.534.0",
1417
"react": "^19.1.0",
1518
"react-dom": "^19.1.0",
1619
"react-router-dom": "^7.7.0"

‎pnpm-lock.yaml‎

Lines changed: 80 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx‎

Lines changed: 1 addition & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,10 @@
1-
import {Link, useNavigate} from 'react-router-dom';
21
import AppRouter from './router/AppRouter.tsx';
32
import { AuthProvider } from './contexts/AuthContext.tsx';
4-
import { useAuth } from './hooks/useAuth.ts';
5-
6-
const Layout = () => {
7-
const { isAuthenticated, user, logout } = useAuth();
8-
const navigate = useNavigate();
9-
10-
const handleLogout = () => {
11-
logout();
12-
navigate('/login');
13-
};
14-
15-
return (
16-
<div>
17-
<header style={{ background: '#eee', padding: '1rem', marginBottom: '1rem' }}>
18-
<nav style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
19-
<Link to="/">Courses</Link>
20-
21-
{isAuthenticated ? (
22-
<>
23-
{user?.role === 'admin' && <Link to="/admin/dashboard">Admin</Link>}
24-
25-
{(user?.role === 'admin' || user?.role === 'professor') && (
26-
<Link to="/professor/dashboard">Professor</Link>
27-
)}
28-
29-
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '1rem' }}>
30-
<span>Welcome, {user?.name} ({user?.mail})</span>
31-
<button onClick={handleLogout}>Logout</button>
32-
</div>
33-
</>
34-
) : (
35-
<div style={{ marginLeft: 'auto', display: 'flex', gap: '1rem' }}>
36-
<Link to="/login">Login</Link>
37-
<Link to="/register">Register</Link>
38-
</div>
39-
)}
40-
</nav>
41-
</header>
42-
<main>
43-
<AppRouter />
44-
</main>
45-
</div>
46-
);
47-
};
483

494
function App() {
505
return (
516
<AuthProvider>
52-
<Layout />
7+
<AppRouter />
538
</AuthProvider>
549
);
5510
}

‎src/components/layouts/AuthLayout.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Outlet, Link } from 'react-router-dom';
2+
3+
const AuthLayout = () => {
4+
// Este layout no tiene un header complejo, solo centra el contenido.
5+
return (
6+
<div className="auth-container">
7+
<Link to="/" style={{
8+
position: 'absolute',
9+
top: 'var(--spacing-8)',
10+
left: 'var(--spacing-8)',
11+
color: 'var(--primary-100)',
12+
textDecoration: 'none',
13+
fontWeight: '600',
14+
}}>
15+
Home
16+
</Link>
17+
18+
<main>
19+
{/* Aquí se renderizará LoginPage o RegisterPage */}
20+
<Outlet />
21+
</main>
22+
</div>
23+
);
24+
};
25+
26+
export default AuthLayout;

0 commit comments

Comments
 (0)