Login on enter and hide password fix

oggui/ogboot
Alvaro Puente Mella 2024-08-30 10:19:24 +02:00
parent a2829beff9
commit 3d33d1643d
31 changed files with 32 additions and 389 deletions

View File

@ -28,12 +28,10 @@ import { UsersComponent } from './components/admin/users/users/users.component';
import { RolesComponent } from './components/admin/roles/roles/roles.component';
import { MatTableModule } from '@angular/material/table';
import { MatDialogModule } from '@angular/material/dialog';
import { DeleteUserModalComponent } from './components/admin/users/users/delete-user-modal/delete-user-modal.component';
import { AddUserModalComponent } from './components/admin/users/users/add-user-modal/add-user-modal.component';
import { MatSelectModule } from '@angular/material/select';
import { EditUserModalComponent } from './components/admin/users/users/edit-user-modal/edit-user-modal.component';
import { AddRoleModalComponent } from './components/admin/roles/roles/add-role-modal/add-role-modal.component';
import { DeleteRoleModalComponent } from './components/admin/roles/roles/delete-role-modal/delete-role-modal.component';
import { ChangePasswordModalComponent } from './components/admin/users/users/change-password-modal/change-password-modal.component';
import { GroupsComponent } from './components/groups/groups.component';
import { MatDividerModule } from '@angular/material/divider';
@ -53,7 +51,6 @@ import { ClientViewComponent } from './components/groups/client-view/client-view
import { MatTab, MatTabGroup } from "@angular/material/tabs";
import { MatTooltip } from "@angular/material/tooltip";
import { MatExpansionModule } from '@angular/material/expansion';
import { DeleteGroupsModalComponent } from './components/groups/delete-groups-modal/delete-groups-modal.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ToastrModule } from 'ngx-toastr';
import { ShowOrganizationalUnitComponent } from './components/groups/organizational-units/show-organizational-unit/show-organizational-unit.component';
@ -84,8 +81,6 @@ import {MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelTitle}
import { OgbootStatusComponent } from './components/ogboot/ogboot-status/ogboot-status.component';
import { CreatePxeBootFileComponent } from './components/ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { DeleteImageComponent } from './components/ogboot/images/delete-image/delete-image/delete-image.component';
import { DeletePxeTemplateComponent } from './components/ogboot/pxe/pxe/delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component';
import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component';
@ -102,11 +97,9 @@ import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/creat
MainLayoutComponent,
UsersComponent,
RolesComponent,
DeleteUserModalComponent,
AddUserModalComponent,
EditUserModalComponent,
AddRoleModalComponent,
DeleteRoleModalComponent,
ChangePasswordModalComponent,
GroupsComponent,
CreateOrganizationalUnitComponent,
@ -116,7 +109,6 @@ import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/creat
EditClientComponent,
ClassroomViewComponent,
ClientViewComponent,
DeleteGroupsModalComponent,
ShowOrganizationalUnitComponent,
TreeViewComponent,
LegendComponent,
@ -133,8 +125,6 @@ import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/creat
PxeBootFilesComponent,
OgbootStatusComponent,
CreatePxeBootFileComponent,
DeleteImageComponent,
DeletePxeTemplateComponent,
OgdhcpComponent,
OgDhcpSubnetsComponent,
CreateSubnetComponent

View File

@ -1,8 +0,0 @@
<h1 mat-dialog-title i18n="@@dialogTitleDeleteRole">Eliminar Rol</h1>
<div mat-dialog-content>
<p i18n="@@dialogContentDeleteRole">¿Estás seguro que deseas eliminar el rol {{ data.name }}?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" i18n="@@buttonCancel">Cancelar</button>
<button mat-button (click)="onYesClick()" i18n="@@buttonDelete">Eliminar</button>
</div>

View File

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

View File

@ -1,40 +0,0 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, EventEmitter, Inject, Output } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-delete-role-modal',
templateUrl: './delete-role-modal.component.html',
styleUrl: './delete-role-modal.component.css'
})
export class DeleteRoleModalComponent {
@Output() roleDeleted = new EventEmitter<void>();
constructor(
public dialogRef: MatDialogRef<DeleteRoleModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private http: HttpClient
) {}
onNoClick(): void {
this.dialogRef.close();
}
onYesClick(): void {
const apiUrl = `http://127.0.0.1:8080/user-groups/${this.data.uuid}`;
const headers = new HttpHeaders({
'Content-Type': 'application/ld+json'
});
this.http.delete(apiUrl, { headers: headers }).subscribe(
() => {
console.log('Role deleted successfully');
this.roleDeleted.emit();
this.dialogRef.close(true);
},
( error: any) => {
console.error('Error deleting role:', error);
// Agregar alguna lógica para manejar el error en la interfaz de usuario
}
);
}
}

View File

@ -3,7 +3,9 @@ import { RoleService } from './roles.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatDialog } from '@angular/material/dialog';
import { AddRoleModalComponent } from './add-role-modal/add-role-modal.component';
import { DeleteRoleModalComponent } from './delete-role-modal/delete-role-modal.component';
import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-roles',
@ -31,7 +33,8 @@ export class RolesComponent implements OnInit {
];
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
constructor(private roleService: RoleService, public dialog: MatDialog) {}
constructor(private roleService: RoleService, public dialog: MatDialog, private http: HttpClient,
private toastService: ToastrService) {}
ngOnInit() {
this.loadRoles();
@ -53,15 +56,30 @@ export class RolesComponent implements OnInit {
}
deleteRole(role: any) {
const dialogRef = this.dialog.open(DeleteRoleModalComponent, {
data: role
deleteRole(role: any): void {
const dialogRef = this.dialog.open(DeleteModalComponent, {
width: '300px',
data: { name: role.name }
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
const apiUrl = `http://127.0.0.1:8080/user-groups/${role.uuid}`;
this.http.delete(apiUrl).subscribe({
next: () => {
console.log('Role deleted successfully');
this.loadRoles();
this.toastService.success('Role deleted successfully');
},
error: (error) => {
console.error('Error deleting role:', error);
}
});
} else {
console.log('Role deletion cancelled');
}
});
}
}

View File

@ -1,8 +0,0 @@
<h1 mat-dialog-title i18n="@@dialogTitleDeleteUser">Eliminar Usuario</h1>
<div mat-dialog-content>
<p i18n="@@dialogContentDeleteUser">¿Estás seguro que deseas eliminar a {{ data.username }}?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" i18n="@@buttonCancel">Cancelar</button>
<button mat-button (click)="onYesClick()" i18n="@@buttonDelete">Eliminar</button>
</div>

View File

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

View File

@ -1,40 +0,0 @@
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, EventEmitter, Inject, Output } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-delete-user-modal',
templateUrl: './delete-user-modal.component.html',
styleUrl: './delete-user-modal.component.css'
})
export class DeleteUserModalComponent {
@Output() userDeleted = new EventEmitter<void>();
constructor(
public dialogRef: MatDialogRef<DeleteUserModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
private http: HttpClient
) {}
onNoClick(): void {
this.dialogRef.close();
}
onYesClick(): void {
const apiUrl = `http://127.0.0.1:8080/users/${this.data.uuid}`;
const headers = new HttpHeaders({
'Content-Type': 'application/ld+json'
});
this.http.delete(apiUrl, { headers: headers }).subscribe(
() => {
console.log('User deleted successfully');
this.userDeleted.emit();
this.dialogRef.close(true);
},
( error: any) => {
console.error('Error deleting user:', error);
// Agregar alguna lógica para manejar el error en la interfaz de usuario
}
);
}
}

View File

@ -1,7 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { UserService } from './users.service';
import { MatTableDataSource } from '@angular/material/table';
import { DeleteUserModalComponent } from './delete-user-modal/delete-user-modal.component';
import { MatDialog } from '@angular/material/dialog';
import { AddUserModalComponent } from './add-user-modal/add-user-modal.component';
import { EditUserModalComponent } from './edit-user-modal/edit-user-modal.component';

View File

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

View File

@ -1,32 +0,0 @@
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-delete-confirm-dialog',
template: `
<h1 mat-dialog-title i18n="@@delete-dialog-title">Eliminar</h1>
<div mat-dialog-content>
<p i18n="@@delete-dialog-content">¿Quiere borrar los clientes situados en {{data.name}} o quiere resituarlos en el nivel superior?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="deleteClick()" i18n="@@delete-all-clients-button">Borrar todos los clientes</button>
<button mat-button (click)="changeClick()" i18n="@@reposition-clients-button">Resituar</button>
</div>
`
})
export class DeleteGroupsModalComponent {
constructor(
public dialogRef: MatDialogRef<DeleteGroupsModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: { name: string }
) {}
deleteClick(): void {
this.dialogRef.close('delete');
}
changeClick(): void {
this.dialogRef.close('change');
}
}

View File

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

View File

@ -1,31 +0,0 @@
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-delete-confirm-dialog',
template: `
<h1 mat-dialog-title i18n="@@deleteDialogTitle">Eliminar</h1>
<div mat-dialog-content>
<p i18n="@@deleteConfirmationMessage">¿Estás seguro que deseas eliminar {{data.name}}?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
<button mat-button (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
</div>
`
})
export class DeleteModalComponent {
constructor(
public dialogRef: MatDialogRef<DeleteModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: { name: string }
) {}
onNoClick(): void {
this.dialogRef.close(false);
}
onYesClick(): void {
this.dialogRef.close(true);
}
}

View File

@ -7,7 +7,6 @@ import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/del
import { CreateClientComponent } from './clients/create-client/create-client.component';
import { EditOrganizationalUnitComponent } from './organizational-units/edit-organizational-unit/edit-organizational-unit.component';
import { EditClientComponent } from './clients/edit-client/edit-client.component';
import { DeleteGroupsModalComponent } from "./delete-groups-modal/delete-groups-modal.component";
import { ShowOrganizationalUnitComponent} from "./organizational-units/show-organizational-unit/show-organizational-unit.component";
import {ToastrService} from "ngx-toastr";
import {TreeViewComponent} from "./tree-view/tree-view.component";
@ -210,7 +209,7 @@ export class GroupsComponent implements OnInit {
}
});
} else {
const dialogDeleteGroupRef = this.dialog.open(DeleteGroupsModalComponent, {
const dialogDeleteGroupRef = this.dialog.open(DeleteModalComponent, {
width: '400px',
data: { name }
});

View File

@ -1,5 +1,5 @@
<div>
<form class="login" (ngSubmit)="onLogin()" #loginForm="ngForm">
<form class="login" (ngSubmit)="onLogin()" #loginForm="ngForm" (keydown.enter)="onLogin()">
<img src="assets/images/logo.png" alt="Opengnsys"
class="login-logo" [class.rotating]="isLoading">
<h2 i18n="@@headerOpengnsys">Opengnsys</h2>
@ -9,19 +9,18 @@
</mat-form-field>
<mat-form-field>
<mat-label i18n="@@loginlabelPassword">Introduce tu contraseña</mat-label>
<input matInput [type]="hide() ? 'password' : 'text'" required [(ngModel)]="loginObj.password" name="password"/>
<input matInput (keydown.enter)="$event.preventDefault()" [type]="hide() ? 'password' : 'text'" required [(ngModel)]="loginObj.password" name="password"/>
<button
mat-icon-button
matSuffix
(click)="clickEvent($event)"
(click)="clickEvent()"
[attr.aria-label]="'Ocultar contraseña'"
[attr.aria-pressed]="hide()"
>
<mat-icon>{{hide() ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<div class="button-row">
<button mat-flat-button color="primary" type="submit" (keydown.enter)="$event.preventDefault()" [disabled]="!loginObj.username || !loginObj.password" i18n="@@buttonLogin">Iniciar sesión</button>
<button mat-flat-button color="primary" type="submit" [disabled]="!loginObj.username || !loginObj.password" i18n="@@buttonLogin">Iniciar sesión</button>
</div>
</form>

View File

@ -62,10 +62,8 @@ export class LoginComponent {
}
hide = signal(true);
clickEvent(event: MouseEvent) {
event.preventDefault();
clickEvent() {
this.hide.set(!this.hide());
event.stopPropagation();
}
openSnackBar(isError: boolean, message: string) {

View File

@ -1,8 +0,0 @@
<h1 mat-dialog-title i18n="@@deleteDialogTitle">Eliminar</h1>
<div mat-dialog-content>
<p i18n="@@deleteConfirmationMessage">¿Estás seguro que deseas eliminar {{data.name}}?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
<button mat-button color="warn" (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
</div>

View File

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

View File

@ -1,22 +0,0 @@
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-delete-image',
templateUrl: './delete-image.component.html',
styleUrl: './delete-image.component.css'
})
export class DeleteImageComponent {
constructor(
public dialogRef: MatDialogRef<DeleteImageComponent>,
@Inject(MAT_DIALOG_DATA) public data: { name: string }
) {}
onNoClick(): void {
this.dialogRef.close(false);
}
onYesClick(): void {
this.dialogRef.close(true);
}
}

View File

@ -8,7 +8,6 @@ import { MatTableDataSource } from "@angular/material/table";
import {PageEvent} from "@angular/material/paginator";
import {ToastrService} from "ngx-toastr";
import { DatePipe } from "@angular/common";
import { DeleteImageComponent } from './delete-image/delete-image/delete-image.component';
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
@Component({

View File

@ -1,8 +0,0 @@
<h1 mat-dialog-title i18n="@@deleteDialogTitle">Eliminar</h1>
<div mat-dialog-content>
<p i18n="@@deleteConfirmationMessage">¿Estás seguro que deseas eliminarla?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
<button mat-button color="warn" (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
</div>

View File

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

View File

@ -1,22 +0,0 @@
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-delete-pxe-template',
templateUrl: './delete-pxe-template.component.html',
styleUrl: './delete-pxe-template.component.css'
})
export class DeletePxeTemplateComponent {
constructor(
public dialogRef: MatDialogRef<DeletePxeTemplateComponent>,
@Inject(MAT_DIALOG_DATA) public data: { name: string }
) {}
onNoClick(): void {
this.dialogRef.close(false);
}
onYesClick(): void {
this.dialogRef.close(true);
}
}

View File

@ -7,7 +7,7 @@ import {MatTableDataSource} from "@angular/material/table";
import {PageEvent} from "@angular/material/paginator";
import {ToastrService} from "ngx-toastr";
import {DatePipe} from "@angular/common";
import { DeletePxeTemplateComponent } from './delete-pxeTemplate/delete-pxe-template/delete-pxe-template.component';
import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
@Component({
selector: 'app-pxe',
@ -126,7 +126,7 @@ export class PxeComponent {
deletePxeTemplate(template: any) {
// Lógica para eliminar una plantilla
const dialogRef = this.dialog.open(DeletePxeTemplateComponent, {
const dialogRef = this.dialog.open(DeleteModalComponent, {
width: '300px'
});

View File

@ -1,8 +1,6 @@
import { Component, Input } from '@angular/core';
import { jwtDecode } from 'jwt-decode';
import { EditUserModalComponent } from '../../components/admin/users/users/edit-user-modal/edit-user-modal.component';
import { MatDialog } from '@angular/material/dialog';
import { ChangePasswordModalComponent } from '../../components/admin/users/users/change-password-modal/change-password-modal.component';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',