Merge pull request '[ogGui] Pantalla de Inicio de Login' (#2) from oggui/routingStructure into main
commit
29e9574ce1
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
|
@ -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 { }
|
|
@ -1,7 +1 @@
|
|||
<main class="main">
|
||||
<div class="content">
|
||||
<h3>ogWebconsole base project is running!</h3>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<router-outlet />
|
||||
<router-outlet />
|
|
@ -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');
|
||||
|
|
|
@ -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'
|
||||
})
|
||||
|
|
|
@ -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);
|
|
@ -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()]
|
||||
};
|
|
@ -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 { }
|
|
@ -1,3 +0,0 @@
|
|||
import { Routes } from '@angular/router';
|
||||
|
||||
export const routes: Routes = [];
|
|
@ -0,0 +1 @@
|
|||
<p>dashboard works!</p>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrl: './dashboard.component.css'
|
||||
})
|
||||
export class DashboardComponent {
|
||||
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
<div class="auth-wrapper">
|
||||
<div class="auth-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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 {
|
||||
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
:host{
|
||||
display: block;
|
||||
background-color: rgb(126, 126, 126);
|
||||
grid-area: header;
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
<p>header works!</p>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrl: './header.component.css',
|
||||
})
|
||||
export class HeaderComponent {
|
||||
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
<app-sidebar></app-sidebar>
|
||||
<app-header>
|
||||
</app-header>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<router-outlet />
|
||||
</div>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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 {
|
||||
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
:host{
|
||||
display: block;
|
||||
background-color: rgb(85, 85, 85);
|
||||
grid-area: sidebar;
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
<p>sidebar works!</p>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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.';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
<p>page-not-found works!</p>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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 {
|
||||
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
import { HttpInterceptorFn } from '@angular/common/http';
|
||||
|
||||
import { CustomInterceptor } from './custom.interceptor';
|
||||
|
||||
describe('customInterceptor', () => {
|
||||
|
||||
});
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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;
|
|
@ -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));
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
|
|
Loading…
Reference in New Issue