Merge pull request '[ogGui] Pantalla de Inicio de Login' (#2) from oggui/routingStructure into main

pull/6/head
Alvaro Puente Mella 2024-05-27 11:45:26 +02:00
commit 29e9574ce1
48 changed files with 899 additions and 444 deletions

View File

@ -1,4 +1,4 @@
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist

View File

@ -1,6 +1,6 @@
# OgWebconsole
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.7.
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.7.
## Development server

View File

@ -5,7 +5,17 @@
"projects": {
"ogWebconsole": {
"projectType": "application",
"schematics": {},
"schematics": {
"@schematics/angular:component": {
"standalone": false
},
"@schematics/angular:directive": {
"standalone": false
},
"@schematics/angular:pipe": {
"standalone": false
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
@ -27,12 +37,7 @@
"styles": [
"src/styles.css"
],
"scripts": [],
"server": "src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "server.ts"
}
"scripts": []
},
"configurations": {
"production": {

File diff suppressed because it is too large Load Diff

View File

@ -6,39 +6,33 @@
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssr:ogWebconsole": "node dist/og-webconsole/server/server.mjs"
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/platform-server": "^17.3.0",
"@angular/router": "^17.3.0",
"@angular/ssr": "^17.3.7",
"express": "^4.18.2",
"@angular/animations": "^17.0.0",
"@angular/common": "^17.0.0",
"@angular/compiler": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/forms": "^17.0.0",
"@angular/platform-browser": "^17.0.0",
"@angular/platform-browser-dynamic": "^17.0.0",
"@angular/router": "^17.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.7",
"@angular/cli": "^17.3.7",
"@angular/compiler-cli": "^17.3.0",
"@types/express": "^4.17.17",
"@angular-devkit/build-angular": "^17.0.7",
"@angular/cli": "^17.0.7",
"@angular/compiler-cli": "^17.0.0",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.4.2"
"typescript": "~5.2.2"
}
}
}

View File

@ -1,56 +0,0 @@
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');
const commonEngine = new CommonEngine();
server.set('view engine', 'html');
server.set('views', browserDistFolder);
// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('*.*', express.static(browserDistFolder, {
maxAge: '1y'
}));
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
return server;
}
function run(): void {
const port = process.env['PORT'] || 4000;
// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
run();

View File

@ -0,0 +1,34 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './components/layout/main-layout/main-layout.component';
import { AuthLayoutComponent } from './components/layout/auth-layout/auth-layout.component';
import { LoginComponent } from './components/login/login.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
const routes: Routes = [
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' },
{
path: '',
component: MainLayoutComponent,
children: [
{ path: 'dashboard', component: DashboardComponent },
// otras rutas que usan el MainLayoutComponent
],
},
{
path: 'auth',
component: AuthLayoutComponent,
children: [
{ path: 'login', component: LoginComponent },
// otras rutas de autenticación
],
},
{ path: '**', component: PageNotFoundComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

View File

@ -1,7 +1 @@
<main class="main">
<div class="content">
<h3>ogWebconsole base project is running!</h3>
</div>
</main>
<router-outlet />
<router-outlet />

View File

@ -1,10 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
});
@ -14,7 +20,7 @@ describe('AppComponent', () => {
expect(app).toBeTruthy();
});
it(`should have the 'ogWebconsole' title`, () => {
it(`should have as title 'ogWebconsole'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('ogWebconsole');

View File

@ -1,10 +1,7 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})

View File

@ -1,11 +0,0 @@
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering()
]
};
export const config = mergeApplicationConfig(appConfig, serverConfig);

View File

@ -1,9 +0,0 @@
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideClientHydration()]
};

View File

@ -0,0 +1,39 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthLayoutComponent } from './components/layout/auth-layout/auth-layout.component';
import { MainLayoutComponent } from './components/layout/main-layout/main-layout.component';
import { HeaderComponent } from './components/layout/header/header.component';
import { SidebarComponent } from './components/layout/sidebar/sidebar.component';
import { LoginComponent } from './components/login/login.component';
import { FormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { CustomInterceptor } from './services/custom.interceptor';
@NgModule({
declarations: [
AppComponent,
AuthLayoutComponent,
MainLayoutComponent,
HeaderComponent,
SidebarComponent,
LoginComponent,
MainLayoutComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: CustomInterceptor,
multi:true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }

View File

@ -1,3 +0,0 @@
import { Routes } from '@angular/router';
export const routes: Routes = [];

View File

@ -0,0 +1 @@
<p>dashboard works!</p>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { DashboardComponent } from './dashboard.component';
describe('DashboardComponent', () => {
let component: DashboardComponent;
let fixture: ComponentFixture<DashboardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [DashboardComponent]
})
.compileComponents();
fixture = TestBed.createComponent(DashboardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.css'
})
export class DashboardComponent {
}

View File

@ -0,0 +1,5 @@
<div class="auth-wrapper">
<div class="auth-content">
<router-outlet></router-outlet>
</div>
</div>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AuthLayoutComponent } from './auth-layout.component';
describe('AuthLayoutComponent', () => {
let component: AuthLayoutComponent;
let fixture: ComponentFixture<AuthLayoutComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AuthLayoutComponent]
})
.compileComponents();
fixture = TestBed.createComponent(AuthLayoutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,12 @@
import { HttpClientModule } from '@angular/common/http';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-auth-layout',
templateUrl: './auth-layout.component.html',
styleUrl: './auth-layout.component.css'
})
export class AuthLayoutComponent {
}

View File

@ -0,0 +1,5 @@
:host{
display: block;
background-color: rgb(126, 126, 126);
grid-area: header;
}

View File

@ -0,0 +1 @@
<p>header works!</p>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HeaderComponent]
})
.compileComponents();
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrl: './header.component.css',
})
export class HeaderComponent {
}

View File

@ -0,0 +1,14 @@
:host{
width: 100%;
display: grid;
grid-template-areas:
"sidebar header"
"sidebar content"
"sidebar footer";
grid-template-columns: 120px 1fr;
}
.content-wrapper{
display: block;
background-color: gold;
grid-area: content;
}

View File

@ -0,0 +1,7 @@
<app-sidebar></app-sidebar>
<app-header>
</app-header>
<div class="content-wrapper">
<div class="content">
<router-outlet />
</div>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MainLayoutComponent } from './main-layout.component';
describe('MainLayoutComponent', () => {
let component: MainLayoutComponent;
let fixture: ComponentFixture<MainLayoutComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [MainLayoutComponent]
})
.compileComponents();
fixture = TestBed.createComponent(MainLayoutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-main-layout',
templateUrl: './main-layout.component.html',
styleUrl: './main-layout.component.css'
})
export class MainLayoutComponent {
}

View File

@ -0,0 +1,5 @@
:host{
display: block;
background-color: rgb(85, 85, 85);
grid-area: sidebar;
}

View File

@ -0,0 +1 @@
<p>sidebar works!</p>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SidebarComponent } from './sidebar.component';
describe('SidebarComponent', () => {
let component: SidebarComponent;
let fixture: ComponentFixture<SidebarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [SidebarComponent]
})
.compileComponents();
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrl: './sidebar.component.css'
})
export class SidebarComponent {
hovered = false;
}
//https://medium.com/@yevhen.chmykhun.01/angular-blueprint-application-layout-b1680ca888e0

View File

@ -0,0 +1,66 @@
.login {
overflow: hidden;
background-color: rgb(255, 255, 255);
border: 1px solid grey;
padding: 40px 30px 30px 30px;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
width: 400px;
transform: translate(-50%, -50%);
transition: transform 300ms, box-shadow 300ms;
box-shadow: 5px 10px 10px rgba(2, 128, 144, 0.2);
}
.login::before, .login::after {
content: "";
position: absolute;
width: 600px;
height: 600px;
border-top-left-radius: 40%;
border-top-right-radius: 45%;
border-bottom-left-radius: 35%;
border-bottom-right-radius: 40%;
z-index: -1;
}
.login input {
font-family: "Asap", sans-serif;
display: block;
border-radius: 5px;
font-size: 16px;
background: rgba(230, 230, 230);
width: 100%;
padding: 10px 10px;
margin: 15px -10px;
}
.login button {
font-family: "Asap", sans-serif;
cursor: pointer;
color: #fff;
font-size: 16px;
text-transform: uppercase;
width: 80px;
border: 0;
padding: 10px 0;
margin-top: 10px;
margin-left: -5px;
border-radius: 5px;
background-color: #0084ff;
transition: background-color 300ms;
}
.login button:hover {
background-color: #0271da;
}
.invalid {
border: 1px solid red;
}
.error-message {
color: red;
margin-top: 10px;
}

View File

@ -0,0 +1,9 @@
<div>
<form class="login" (ngSubmit)="onLogin()" #loginForm="ngForm">
<h2>Opengnsys</h2>
<input [(ngModel)]="loginObj.username" type="text" id="username" name="username" placeholder="usuario" required #usernameInput="ngModel" [ngClass]="{'invalid': !usernameInput.valid && usernameInput.touched}">
<input [(ngModel)]="loginObj.password" type="password" id="password" name="password" placeholder="contraseña" required #passwordInput="ngModel" [ngClass]="{'invalid': !passwordInput.valid && passwordInput.touched}">
<button type="submit">Login</button>
<div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
</form>
</div>

View File

@ -0,0 +1,26 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginComponent } from './login.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HttpClientModule, FormsModule],
declarations: [LoginComponent]
})
.compileComponents();
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,52 @@
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
})
export class LoginComponent {
loginObj: any = {
"username": "",
"password": ""
};
errorMessage: string = '';
constructor(private http: HttpClient, private router: Router) { }
onLogin() {
if (!this.loginObj.username || !this.loginObj.password) {
if (!this.loginObj.username) {
document.getElementById('username')?.classList.add('invalid');
} else {
document.getElementById('username')?.classList.remove('invalid');
}
if (!this.loginObj.password) {
document.getElementById('password')?.classList.add('invalid');
} else {
document.getElementById('password')?.classList.remove('invalid');
}
return;
}
this.http.post('http://127.0.0.1:8080/auth/login', this.loginObj).subscribe({
next: (res: any) => {
if (res.token) {
localStorage.setItem('loginToken', res.token);
localStorage.setItem('refreshToken', res.refreshToken);
this.router.navigateByUrl('/dashboard');
}
},
error: (err) => {
if (err.status === 401) {
this.errorMessage = 'Usuario o contraseña incorrectos';
} else {
this.errorMessage = 'Ha ocurrido un error. Por favor, inténtelo de nuevo.';
}
}
});
}
}

View File

@ -0,0 +1 @@
<p>page-not-found works!</p>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PageNotFoundComponent } from './page-not-found.component';
describe('PageNotFoundComponent', () => {
let component: PageNotFoundComponent;
let fixture: ComponentFixture<PageNotFoundComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [PageNotFoundComponent]
})
.compileComponents();
fixture = TestBed.createComponent(PageNotFoundComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-page-not-found',
templateUrl: './page-not-found.component.html',
styleUrl: './page-not-found.component.css'
})
export class PageNotFoundComponent {
}

View File

@ -0,0 +1,8 @@
import { TestBed } from '@angular/core/testing';
import { HttpInterceptorFn } from '@angular/common/http';
import { CustomInterceptor } from './custom.interceptor';
describe('customInterceptor', () => {
});

View File

@ -0,0 +1,19 @@
import { Injectable } from '@angular/core';
import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Token } from '@angular/compiler';
export class CustomInterceptor implements HttpInterceptor{
constructor(){}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('loginToken');
const newCloneRequest = req.clone({
setHeaders:{
Authorization: `${token}`
}
})
return next.handle(newCloneRequest);
}
}

View File

@ -1,7 +0,0 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';
const bootstrap = () => bootstrapApplication(AppComponent, config);
export default bootstrap;

View File

@ -1,6 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

View File

@ -3,14 +3,10 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"node"
]
"types": []
},
"files": [
"src/main.ts",
"src/main.server.ts",
"server.ts"
"src/main.ts"
],
"include": [
"src/**/*.d.ts"

View File

@ -3,6 +3,7 @@
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,