Added angular frontend #70
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { AuthUserComponent } from './components/auth-user/auth-user.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{path: '', component: AuthUserComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AuthUserRoutingModule { }
|
||||
18
kdb-web/src/app/modules/admin/auth-users/auth-user.module.ts
Normal file
18
kdb-web/src/app/modules/admin/auth-users/auth-user.module.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { AuthUserRoutingModule } from './auth-user-routing.module';
|
||||
import { AuthUserComponent } from './components/auth-user/auth-user.component';
|
||||
import { SharedModule } from '../../shared/shared.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AuthUserComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
AuthUserRoutingModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class AuthUserModule { }
|
||||
@@ -0,0 +1,201 @@
|
||||
<h1>
|
||||
{{'admin.auth_users.header' | translate}}
|
||||
</h1>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<p-table #dt [value]="users" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
|
||||
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
|
||||
[lazy]="true" (onLazyLoad)="nextPage($event)">
|
||||
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="table-caption">
|
||||
<div class="table-caption-text">
|
||||
<ng-container *ngIf="!loading">{{users.length}} {{'admin.auth_users.of' | translate}}
|
||||
{{dt.totalRecords}}
|
||||
</ng-container>
|
||||
{{'admin.auth_users.users' | translate}}
|
||||
</div>
|
||||
|
||||
<div class="table-caption-btn-wrapper btn-wrapper">
|
||||
<button pButton label="{{'admin.auth_users.add' | translate}}" class="icon-btn btn"
|
||||
icon="pi pi-user-plus" (click)="addUser(dt)" [disabled]="isEditingNew">
|
||||
</button>
|
||||
<button pButton label="{{'admin.auth_users.reset_filters' | translate}}" icon="pi pi-undo"
|
||||
class="icon-btn btn" (click)="resetFilters(dt)">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="firstName">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'admin.auth_users.headers.first_name' | translate}}</div>
|
||||
<p-sortIcon icon="sort" field="firstName" class="table-header-icon"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th pSortableColumn="lastName">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'admin.auth_users.headers.last_name' | translate}}</div>
|
||||
<p-sortIcon field="lastName" class="table-header-icon"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th pSortableColumn="eMail">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'admin.auth_users.headers.e_mail' | translate}}</div>
|
||||
<p-sortIcon field="eMail" class="table-header-icon"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="table-header-actions" pSortableColumn="confirmationId">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'admin.auth_users.headers.active' | translate}}</div>
|
||||
<p-sortIcon field="confirmationId" class="table-header-icon"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="table-header-small-dropdown" pSortableColumn="authRole">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'admin.auth_users.headers.role' | translate}}</div>
|
||||
<p-sortIcon field="authRole" class="table-header-icon"></p-sortIcon>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'admin.auth_users.headers.password' | translate}}</div>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="table-header-actions">
|
||||
<div class="table-header-label">
|
||||
<div class="table-header-text">{{'admin.auth_users.headers.actions' | translate}}</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<form [formGroup]="filterForm">
|
||||
<input type="text" pInputText formControlName="firstName" placeholder="{{'admin.auth_users.headers.first_name' | translate}}">
|
||||
</form>
|
||||
</th>
|
||||
<th>
|
||||
<form [formGroup]="filterForm">
|
||||
<input type="text" pInputText formControlName="lastName" placeholder="{{'admin.auth_users.headers.last_name' | translate}}">
|
||||
</form>
|
||||
</th>
|
||||
<th>
|
||||
<form [formGroup]="filterForm">
|
||||
<input type="email" pInputText formControlName="email" placeholder="{{'admin.auth_users.headers.e_mail' | translate}}">
|
||||
</form>
|
||||
</th>
|
||||
<th></th>
|
||||
<th>
|
||||
<form [formGroup]="filterForm">
|
||||
<p-dropdown formControlName="authRole" [options]="authRoles"></p-dropdown>
|
||||
</form>
|
||||
</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="body" let-user let-editing="editing" let-ri="rowIndex">
|
||||
<tr [pEditableRow]="user">
|
||||
<td>
|
||||
<p-cellEditor>
|
||||
<ng-template pTemplate="input">
|
||||
<input class="table-edit-input" pInputText type="text" [(ngModel)]="user.firstName"
|
||||
[ngClass]="{ 'invalid-feedback-input': isFirstNameInvalid}">
|
||||
</ng-template>
|
||||
<ng-template pTemplate="output">
|
||||
{{user.firstName}}
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<p-cellEditor>
|
||||
<ng-template pTemplate="input">
|
||||
<input class="table-edit-input" pInputText type="text" [(ngModel)]="user.lastName"
|
||||
[ngClass]="{ 'invalid-feedback-input': isLastNameInvalid}">
|
||||
</ng-template>
|
||||
<ng-template pTemplate="output">
|
||||
{{user.lastName}}
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<p-cellEditor>
|
||||
<ng-template pTemplate="input">
|
||||
<input class="table-edit-input" pInputText type="email" [(ngModel)]="user.email"
|
||||
[ngClass]="{ 'invalid-feedback-input': isEMailInvalid}">
|
||||
</ng-template>
|
||||
<ng-template pTemplate="output">
|
||||
{{user.email}}
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<p-cellEditor>
|
||||
<ng-template pTemplate="input">
|
||||
<p-checkbox [binary]="true" [(ngModel)]="user.isConfirmed"
|
||||
[ngClass]="{ 'invalid-feedback-input': isEMailInvalid}" [disabled]="isEditingNew">
|
||||
</p-checkbox>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="output">
|
||||
<p-checkbox [binary]="true" [ngModel]="user.isConfirmed" [disabled]="true">
|
||||
</p-checkbox>
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<p-cellEditor>
|
||||
<ng-template pTemplate="input">
|
||||
<p-dropdown [options]="authRoles" [(ngModel)]="user.authRole"
|
||||
[disabled]="user.email == loggedInUserEMail"></p-dropdown>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="output">
|
||||
{{user.authRole | authRole}}
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<p-cellEditor>
|
||||
<ng-template pTemplate="input">
|
||||
<input class="table-edit-input" pInputText type="password" [(ngModel)]="user.password"
|
||||
[ngClass]="{ 'invalid-feedback-input': isPasswordInvalid}">
|
||||
</ng-template>
|
||||
<ng-template pTemplate="output">
|
||||
</ng-template>
|
||||
</p-cellEditor>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-wrapper">
|
||||
<button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
|
||||
(click)="onRowEditInit(dt, user, ri)"></button>
|
||||
<button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
|
||||
(click)="deleteUser(user)"></button>
|
||||
|
||||
<button *ngIf="editing" pButton pSaveEditableRow class="btn icon-btn"
|
||||
icon="pi pi-check-circle" (click)="onRowEditSave(dt, user, ri)"></button>
|
||||
<button *ngIf="editing" pButton pCancelEditableRow class="btn icon-btn danger-icon-btn"
|
||||
icon="pi pi-times-circle" (click)="onRowEditCancel(user, ri)"></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="Invalidmessage">
|
||||
<tr>
|
||||
<td colspan="7">{{'admin.auth_users.no_entries_found' | translate}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
<ng-template pTemplate="paginatorleft">
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AuthUserComponent } from './auth-user.component';
|
||||
|
||||
describe('AuthUserComponent', () => {
|
||||
let component: AuthUserComponent;
|
||||
let fixture: ComponentFixture<AuthUserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AuthUserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AuthUserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,330 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { catchError, debounceTime, last } from 'rxjs/operators';
|
||||
import { AuthRoles } from 'src/app/models/auth/auth-roles.enum';
|
||||
import { AuthUserDTO } from 'src/app/models/auth/auth-user.dto';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { ConfirmationDialogService } from 'src/app/services/confirmation-dialog/confirmation-dialog.service';
|
||||
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
import { ToastService } from 'src/app/services/toast/toast.service';
|
||||
import { Table } from 'primeng/table';
|
||||
import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
|
||||
import { RegisterErrorMessages } from 'src/app/models/auth/register-error-messages.enum';
|
||||
import { ErrorDTO } from 'src/app/models/error/error-dto';
|
||||
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
||||
import { AuthUserSelectCriterion } from 'src/app/models/selection/auth-user/auth-user-select-criterion.dto';
|
||||
import { LazyLoadEvent } from 'primeng/api';
|
||||
import { throwError } from 'rxjs';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-auth-user',
|
||||
templateUrl: './auth-user.component.html',
|
||||
styleUrls: ['./auth-user.component.scss']
|
||||
})
|
||||
export class AuthUserComponent implements OnInit {
|
||||
|
||||
users!: AuthUserDTO[];
|
||||
statuses!: any[];
|
||||
loading = true;
|
||||
activityValues: number[] = [0, 100];
|
||||
|
||||
clonedUsers: { [s: string]: AuthUserDTO; } = {};
|
||||
isEditingNew: boolean = false;
|
||||
|
||||
authRoles = [
|
||||
{ label: AuthRoles[AuthRoles.Normal].toString(), value: AuthRoles.Normal },
|
||||
{ label: AuthRoles[AuthRoles.Admin].toString(), value: AuthRoles.Admin }
|
||||
]
|
||||
|
||||
newUserTemplate: AuthUserDTO = {
|
||||
id: 0,
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
authRole: AuthRoles.Normal
|
||||
};
|
||||
|
||||
isFirstNameInvalid: boolean = false;
|
||||
isLastNameInvalid: boolean = false;
|
||||
isEMailInvalid: boolean = false;
|
||||
isPasswordInvalid: boolean = false;
|
||||
|
||||
loggedInUserEMail: string = "";
|
||||
|
||||
filterForm!: FormGroup<{
|
||||
firstName: FormControl<string | null>,
|
||||
lastName: FormControl<string | null>,
|
||||
email: FormControl<string | null>,
|
||||
authRole: FormControl<string | null>
|
||||
}>;
|
||||
searchCriterions!: AuthUserSelectCriterion;
|
||||
totalRecords!: number;
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private spinnerService: SpinnerService,
|
||||
private toastService: ToastService,
|
||||
private confirmDialog: ConfirmationDialogService,
|
||||
private fb: FormBuilder,
|
||||
private translate: TranslateService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loggedInUserEMail = this.authService.getEMailFromDecodedToken(this.authService.getDecodedToken()) ?? '';
|
||||
this.searchCriterions = {
|
||||
firstName: null,
|
||||
lastName: null,
|
||||
email: null,
|
||||
authRole: null,
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
sortColumn: null,
|
||||
sortDirection: null
|
||||
};
|
||||
|
||||
this.setFilterForm();
|
||||
// this.loadNextPage();
|
||||
}
|
||||
|
||||
setFilterForm() {
|
||||
this.filterForm = this.fb.group({
|
||||
firstName: [''],
|
||||
lastName: [''],
|
||||
email: [''],
|
||||
authRole: ['']
|
||||
});
|
||||
|
||||
this.filterForm.valueChanges.pipe(
|
||||
debounceTime(600)
|
||||
).subscribe(changes => {
|
||||
if (changes.firstName) {
|
||||
this.searchCriterions.firstName = changes.firstName;
|
||||
} else {
|
||||
this.searchCriterions.firstName = null;
|
||||
}
|
||||
|
||||
if (changes.lastName) {
|
||||
this.searchCriterions.lastName = changes.lastName;
|
||||
} else {
|
||||
this.searchCriterions.lastName = null;
|
||||
}
|
||||
|
||||
if (changes.email) {
|
||||
this.searchCriterions.email = changes.email;
|
||||
} else {
|
||||
this.searchCriterions.email = null;
|
||||
}
|
||||
|
||||
if (changes.authRole != null) {
|
||||
this.searchCriterions.authRole = +changes.authRole;
|
||||
} else {
|
||||
this.searchCriterions.authRole = null;
|
||||
}
|
||||
|
||||
if (this.searchCriterions.pageSize)
|
||||
this.searchCriterions.pageSize = 10;
|
||||
|
||||
if (this.searchCriterions.pageSize)
|
||||
this.searchCriterions.pageIndex = 0;
|
||||
|
||||
this.loadNextPage();
|
||||
});
|
||||
}
|
||||
|
||||
loadNextPage() {
|
||||
this.authService.getFilteredUsers(this.searchCriterions).pipe(catchError(err => {
|
||||
this.loading = false;
|
||||
return throwError(err);
|
||||
})).subscribe(list => {
|
||||
this.totalRecords = list.totalCount;
|
||||
this.users = list.users;
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
nextPage(event: LazyLoadEvent) {
|
||||
this.searchCriterions.pageSize = event.rows ?? 0;
|
||||
if (event.first != null && event.rows != null)
|
||||
this.searchCriterions.pageIndex = event.first / event.rows;
|
||||
this.searchCriterions.sortColumn = event.sortField ?? null;
|
||||
this.searchCriterions.sortDirection = event.sortOrder === 1 ? 'asc' : event.sortOrder === -1 ? 'desc' : 'asc';
|
||||
|
||||
if (event.filters) {
|
||||
// + "" => convert to string
|
||||
this.searchCriterions.firstName = event.filters['firstName'] ? event.filters['firstName'] + "" : null;
|
||||
this.searchCriterions.lastName = event.filters['lastName'] ? event.filters['lastName'] + "" : null;
|
||||
this.searchCriterions.email = event.filters['email'] ? event.filters['email'] + "" : null;
|
||||
this.searchCriterions.authRole = event.filters['authRole'] ? +event.filters['authRole'] : null;
|
||||
}
|
||||
|
||||
this.loadNextPage();
|
||||
}
|
||||
|
||||
resetFilters(table: Table) {
|
||||
this.filterForm.reset();
|
||||
}
|
||||
|
||||
initUserList(): void {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.getAllUsers()
|
||||
.pipe(catchError(err => {
|
||||
this.spinnerService.hideSpinner();
|
||||
throw err;
|
||||
}))
|
||||
.subscribe(users => {
|
||||
this.users = users;
|
||||
this.spinnerService.hideSpinner();
|
||||
});
|
||||
}
|
||||
|
||||
onRowEditInit(table: Table, user: AuthUserDTO, index: number) {
|
||||
this.clonedUsers[index] = { ...user };
|
||||
}
|
||||
|
||||
onRowEditSave(table: Table, newUser: AuthUserDTO, index: number) {
|
||||
const oldUser = this.clonedUsers[index];
|
||||
delete this.clonedUsers[index];
|
||||
|
||||
if (JSON.stringify(oldUser) === JSON.stringify(newUser) && !this.isEditingNew) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isEditingNew && JSON.stringify(newUser) === JSON.stringify(this.newUserTemplate)) {
|
||||
this.isEditingNew = false;
|
||||
this.users.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
this.isFirstNameInvalid = newUser.firstName == "";
|
||||
this.isLastNameInvalid = newUser.lastName == "";
|
||||
this.isEMailInvalid = newUser.email == "";
|
||||
this.isPasswordInvalid = newUser.password == "";
|
||||
|
||||
if (
|
||||
this.isEditingNew && (
|
||||
newUser.firstName == "" ||
|
||||
newUser.lastName == "" ||
|
||||
newUser.email == ""
|
||||
)
|
||||
) {
|
||||
table.initRowEdit(newUser);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isEditingNew) {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.register(newUser).pipe(catchError(error => {
|
||||
this.spinnerService.hideSpinner();
|
||||
|
||||
if (error.error !== null) {
|
||||
const err: ErrorDTO = error.error;
|
||||
|
||||
if (err.errorCode === ServiceErrorCode.InvalidData && err.message === RegisterErrorMessages.InvalidEMail) {
|
||||
this.isEMailInvalid = true;
|
||||
this.toastService.error(this.translate.instant('admin.auth_users.message.invalid_email'), this.translate.instant('admin.auth_users.message.invalid_email_d', { email: newUser.email }));
|
||||
} else if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === RegisterErrorMessages.UserAlreadyExists) {
|
||||
this.isEMailInvalid = true;
|
||||
this.toastService.error(this.translate.instant('admin.auth_users.message.user_already_exists'), this.translate.instant('admin.auth_users.message.user_already_exists_d', { email: newUser.email }));
|
||||
}
|
||||
error.error = null;
|
||||
table.initRowEdit(newUser);
|
||||
}
|
||||
this.spinnerService.hideSpinner();
|
||||
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(_ => {
|
||||
this.initUserList();
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.success(this.translate.instant('admin.auth_users.message.user_added'), this.translate.instant('admin.auth_users.message.user_added_d', { email: newUser.email }));
|
||||
this.isEditingNew = false;
|
||||
});
|
||||
this.triggerUserChangeDetection();
|
||||
return;
|
||||
}
|
||||
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.updateUserAsAdmin({
|
||||
authUserDTO: oldUser,
|
||||
newAuthUserDTO: newUser,
|
||||
changePassword: newUser.password != ""
|
||||
}).pipe(catchError(err => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.error(this.translate.instant('admin.auth_users.message.user_change_failed'), this.translate.instant('admin.auth_users.message.user_change_failed_d', { email: newUser.email }));
|
||||
this.initUserList();
|
||||
throw err;
|
||||
}))
|
||||
.subscribe(_ => {
|
||||
this.initUserList();
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.success(this.translate.instant('admin.auth_users.message.user_changed'), this.translate.instant('admin.auth_users.message.user_changed_d', { email: newUser.email }));
|
||||
});
|
||||
this.triggerUserChangeDetection();
|
||||
}
|
||||
|
||||
onRowEditCancel(user: AuthUserDTO, index: number) {
|
||||
this.isFirstNameInvalid = false;
|
||||
this.isLastNameInvalid = false;
|
||||
this.isEMailInvalid = false;
|
||||
this.isPasswordInvalid = false;
|
||||
|
||||
if (this.isEditingNew) {
|
||||
this.users.splice(index, 1);
|
||||
this.triggerUserChangeDetection();
|
||||
delete this.clonedUsers[index];
|
||||
this.isEditingNew = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.users[index] = this.clonedUsers[index];
|
||||
this.triggerUserChangeDetection();
|
||||
delete this.clonedUsers[index];
|
||||
}
|
||||
|
||||
deleteUser(user: AuthUserDTO) {
|
||||
if (user.email == this.loggedInUserEMail) {
|
||||
this.toastService.error(this.translate.instant('admin.auth_users.message.cannot_delete_user'), this.translate.instant('admin.auth_users.message.logon_with_another_user'));
|
||||
return;
|
||||
}
|
||||
|
||||
this.confirmDialog.confirmDialog(
|
||||
this.translate.instant('admin.auth_users.message.user_delete'), this.translate.instant('admin.auth_users.message.user_delete_q', { email: user.email }),
|
||||
() => {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.deleteUserByMail(user.email ?? '')
|
||||
.pipe(catchError(err => {
|
||||
this.spinnerService.hideSpinner();
|
||||
throw err;
|
||||
}))
|
||||
.subscribe(_ => {
|
||||
this.initUserList();
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.success(this.translate.instant('admin.auth_users.message.user_deleted'), this.translate.instant('admin.auth_users.message.user_deleted_d', { email: user.email }));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
addUser(table: Table) {
|
||||
const newUser = JSON.parse(JSON.stringify(this.newUserTemplate));
|
||||
newUser.id = Math.max.apply(Math, this.users.map(u => { return u.id ?? 0; })) + 1;
|
||||
console.log(newUser);
|
||||
|
||||
this.users.push(newUser);
|
||||
this.triggerUserChangeDetection();
|
||||
|
||||
table.initRowEdit(newUser);
|
||||
|
||||
const index = this.users.findIndex(u => u.email == newUser.email);
|
||||
this.onRowEditInit(table, newUser, index);
|
||||
|
||||
this.isEditingNew = true;
|
||||
}
|
||||
|
||||
triggerUserChangeDetection() {
|
||||
// trigger change detection (https://github.com/primefaces/primeng/issues/2219)
|
||||
this.users = this.users.slice();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
<h1>
|
||||
{{'admin.settings.header' | translate}}
|
||||
</h1>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header">
|
||||
<h2>
|
||||
{{'admin.settings.website.header' | translate}}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.website.frontend_version' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.webVersion}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.website.backend_version' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.apiVersion}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.website.config_path' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.configPath}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.website.frontend_base_url' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.webBaseURL}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.website.backend_base_url' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.apiBaseURL}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-divider"></div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.website.token_expire_time' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.tokenExpireTime}} {{'general.minutes' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.website.refresh_token_expire_time' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.refreshTokenExpireTime}} {{'general.days' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header">
|
||||
<h2>
|
||||
{{'admin.settings.e_mail.header' | translate}}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.e_mail.user' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.mailUser}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.e_mail.host' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.mailHost}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.e_mail.port' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.mailPort}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.e_mail.transceiver' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.mailTransceiver}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<div class="content-column">
|
||||
<div class="content-data-name">{{'admin.settings.e_mail.e_mail_address' | translate}}:</div>
|
||||
<div class="content-data-value">{{data.mailTransceiverAddress}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-row">
|
||||
<form [formGroup]="testMailForm" class="content-column">
|
||||
<div class="content-data-name">
|
||||
<div class="input-field content-input-field">
|
||||
<input type="email" pInputText formControlName="mail" placeholder="{{'admin.settings.e_mail.e_mail' | translate}}" autocomplete="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-data-value">
|
||||
<div class="login-form-submit">
|
||||
<button pButton icon="pi pi-save" label="{{'admin.settings.e_mail.send_e_mail' | translate}}" class="btn login-form-submit-btn"
|
||||
(click)="testMail()" [disabled]="testMailForm.invalid"></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SettingsComponent } from './settings.component';
|
||||
|
||||
describe('SettingsComponent', () => {
|
||||
let component: SettingsComponent;
|
||||
let fixture: ComponentFixture<SettingsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ SettingsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SettingsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,121 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { SettingsDTO } from 'src/app/models/config/settings.dto';
|
||||
import { ErrorDTO } from 'src/app/models/error/error-dto';
|
||||
import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { GuiService } from 'src/app/services/gui/gui.service';
|
||||
import { SettingsService } from 'src/app/services/settings/settings.service';
|
||||
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
import { ToastService } from 'src/app/services/toast/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
templateUrl: './settings.component.html',
|
||||
styleUrls: ['./settings.component.scss']
|
||||
})
|
||||
export class SettingsComponent implements OnInit {
|
||||
|
||||
testMailForm!: FormGroup;
|
||||
data: SettingsDTO = {
|
||||
webVersion: '',
|
||||
apiVersion: '',
|
||||
configPath: '',
|
||||
webBaseURL: '',
|
||||
apiBaseURL: '',
|
||||
|
||||
tokenExpireTime: 0,
|
||||
refreshTokenExpireTime: 0,
|
||||
|
||||
mailUser: '',
|
||||
mailPort: 0,
|
||||
mailHost: '',
|
||||
mailTransceiver: '',
|
||||
mailTransceiverAddress: '',
|
||||
};
|
||||
|
||||
constructor(
|
||||
private settingsService: SettingsService,
|
||||
private spinnerService: SpinnerService,
|
||||
private guiService: GuiService,
|
||||
private formBuilder: FormBuilder,
|
||||
private toastService: ToastService,
|
||||
private translate: TranslateService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.spinnerService.showSpinner();
|
||||
this.initForms();
|
||||
|
||||
this.guiService.getSettings()
|
||||
.pipe(catchError(err => {
|
||||
this.spinnerService.hideSpinner();
|
||||
throw err;
|
||||
}))
|
||||
.subscribe(settings => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.data = settings;
|
||||
this.data.webVersion = this.settingsService.getWebVersion()?.getVersionString() ?? '0.0.0';
|
||||
this.data.apiBaseURL = this.settingsService.getApiURL();
|
||||
if (!this.data.apiBaseURL.endsWith('/')) {
|
||||
this.data.apiBaseURL += '/';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initForms(): void {
|
||||
this.testMailForm = this.formBuilder.group({
|
||||
mail: [null, [Validators.required, Validators.email]],
|
||||
});
|
||||
}
|
||||
|
||||
testMail(): void {
|
||||
this.spinnerService.showSpinner();
|
||||
|
||||
const mail = this.testMailForm.value.mail;
|
||||
if (!mail) {
|
||||
this.spinnerService.hideSpinner();
|
||||
return;
|
||||
}
|
||||
|
||||
this.guiService.sendTestMail(mail)
|
||||
.pipe(catchError(error => {
|
||||
let header = this.translate.instant('admin.settings.message.error');
|
||||
let message = this.translate.instant('admin.settings.message.could_not_send_mail');
|
||||
|
||||
if (error.error !== null) {
|
||||
const err: ErrorDTO = error.error;
|
||||
|
||||
if (err.errorCode === ServiceErrorCode.ConnectionFailed) {
|
||||
header = this.translate.instant('admin.settings.message.connection_failed');
|
||||
message = this.translate.instant('admin.settings.message.connection_to_mail_failed');
|
||||
error.error = null;
|
||||
}
|
||||
|
||||
if (err.errorCode === ServiceErrorCode.InvalidUser) {
|
||||
header = this.translate.instant('admin.settings.message.connection_failed');
|
||||
message = this.translate.instant('admin.settings.message.mail_login_failed');
|
||||
error.error = null;
|
||||
}
|
||||
|
||||
if (err.errorCode === ServiceErrorCode.MailError) {
|
||||
header = this.translate.instant('admin.settings.message.send_failed');
|
||||
message = this.translate.instant('admin.settings.message.test_mail_not_send');
|
||||
error.error = null;
|
||||
}
|
||||
}
|
||||
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.error(header, message);
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(res => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.success(this.translate.instant('admin.settings.message.success'), this.translate.instant('admin.settings.message.send_mail'));
|
||||
this.testMailForm.reset();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { SettingsComponent } from './components/settings/settings.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{path:'', component: SettingsComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class SettingsRoutingModule { }
|
||||
19
kdb-web/src/app/modules/admin/settings/settings.module.ts
Normal file
19
kdb-web/src/app/modules/admin/settings/settings.module.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { SettingsRoutingModule } from './settings-routing.module';
|
||||
import { SettingsComponent } from './components/settings/settings.component';
|
||||
import { SharedModule } from '../../shared/shared.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
SettingsComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
SettingsRoutingModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class SettingsModule { }
|
||||
21
kdb-web/src/app/modules/auth/auth-routing.module.ts
Normal file
21
kdb-web/src/app/modules/auth/auth-routing.module.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { ForgetPasswordComponent } from './components/forget-password/forget-password.component';
|
||||
import { LoginComponent } from './components/login/login.component';
|
||||
import { RegistrationComponent } from './components/registration/registration.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: 'login', component: LoginComponent },
|
||||
{ path: 'register', component: RegistrationComponent },
|
||||
{ path: 'register/:id', component: RegistrationComponent },
|
||||
{ path: 'forgot-password', component: ForgetPasswordComponent },
|
||||
{ path: 'forgot-password/:id', component: ForgetPasswordComponent },
|
||||
{ path: 'forgot-password', component: ForgetPasswordComponent },
|
||||
{ path: 'forgot-password/:id', component: ForgetPasswordComponent },
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AuthRoutingModule { }
|
||||
23
kdb-web/src/app/modules/auth/auth.module.ts
Normal file
23
kdb-web/src/app/modules/auth/auth.module.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { AuthRoutingModule } from './auth-routing.module';
|
||||
import { ForgetPasswordComponent } from './components/forget-password/forget-password.component';
|
||||
import { LoginComponent } from './components/login/login.component';
|
||||
import { RegistrationComponent } from './components/registration/registration.component';
|
||||
import { SharedModule } from '../shared/shared.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ForgetPasswordComponent,
|
||||
LoginComponent,
|
||||
RegistrationComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
AuthRoutingModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class AuthModule { }
|
||||
@@ -0,0 +1,57 @@
|
||||
<section class="login-wrapper">
|
||||
<div class="login-form-wrapper">
|
||||
<div class="login-form">
|
||||
<ng-container *ngIf="resetPasswordId === null; else resetPasswordForm">
|
||||
<form [formGroup]="emailForm">
|
||||
<h1>{{'auth.header' | translate}}</h1>
|
||||
<div *ngIf="!ready" class="input-field">
|
||||
<input type="email" pInputText formControlName="email" placeholder="{{'auth.forgot_password.e_mail' | translate}}"
|
||||
autocomplete="username email">
|
||||
</div>
|
||||
<div *ngIf="ready" class="input-field-info-text">
|
||||
{{'auth.forgot_password.send_confirmation_url' | translate}}
|
||||
</div>
|
||||
<div class="login-form-submit">
|
||||
<button pButton label="{{'auth.forgot_password.reset_password' | translate}}" class="btn login-form-submit-btn"
|
||||
(click)="forgotPassword()" [disabled]="emailForm.invalid || ready"></button>
|
||||
</div>
|
||||
|
||||
<div class="login-form-sub-button-wrapper">
|
||||
<div class="login-form-sub-btn-wrapper">
|
||||
<button pButton label="{{'auth.forgot_password.login' | translate}}" class="btn login-form-sub-btn" (click)="login()"></button>
|
||||
</div>
|
||||
<div class="login-form-sub-btn-wrapper">
|
||||
<button pButton label="{{'auth.forgot_password.register' | translate}}" class="btn login-form-sub-btn"
|
||||
(click)="register()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #resetPasswordForm>
|
||||
<form [formGroup]="passwordForm">
|
||||
<h1>{{'auth.header' | translate}}</h1>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="password" pInputText formControlName="password" placeholder="{{'auth.forgot_password.password' | translate}}"
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="password" pInputText formControlName="passwordRepeat"
|
||||
placeholder="{{'auth.forgot_password.repeat_password' | translate}}"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.password}">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="repeatErrors.password">{{'auth.forgot_password.passwords_do_not_match' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-form-submit">
|
||||
<button pButton label="{{'auth.forgot_password.reset_password' | translate}}" class="btn login-form-submit-btn"
|
||||
(click)="resetPassword()" [disabled]="passwordForm.invalid || ready"></button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ForgetPasswordComponent } from './forget-password.component';
|
||||
|
||||
describe('ForgetPasswordComponent', () => {
|
||||
let component: ForgetPasswordComponent;
|
||||
let fixture: ComponentFixture<ForgetPasswordComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ForgetPasswordComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ForgetPasswordComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,136 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { ResetPasswordDTO } from 'src/app/models/auth/reset-password.dto';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
import { ToastService } from 'src/app/services/toast/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-forget-password',
|
||||
templateUrl: './forget-password.component.html',
|
||||
styleUrls: ['./forget-password.component.scss']
|
||||
})
|
||||
export class ForgetPasswordComponent implements OnInit {
|
||||
|
||||
emailForm!: FormGroup;
|
||||
passwordForm!: FormGroup;
|
||||
submitted = false;
|
||||
ready = false;
|
||||
repeatErrors = {
|
||||
email: false,
|
||||
password: false
|
||||
};
|
||||
|
||||
resetPasswordId: string | null = null;
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
private spinnerService: SpinnerService,
|
||||
private route: ActivatedRoute,
|
||||
private toastService: ToastService,
|
||||
private translate: TranslateService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.isUserLoggedInAsync().then(result => {
|
||||
if (result) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
}
|
||||
|
||||
this.initForms();
|
||||
this.checkResetPasswordId();
|
||||
this.spinnerService.hideSpinner();
|
||||
});
|
||||
}
|
||||
|
||||
initForms(): void {
|
||||
this.emailForm = this.formBuilder.group({
|
||||
email: [null, [Validators.required, Validators.email]]
|
||||
});
|
||||
|
||||
this.passwordForm = this.formBuilder.group({
|
||||
password: [null, [Validators.required, Validators.minLength(8)]],
|
||||
passwordRepeat: [null, [Validators.required, Validators.minLength(8)]]
|
||||
});
|
||||
}
|
||||
|
||||
login(): void {
|
||||
this.router.navigate(['/auth/login']);
|
||||
}
|
||||
|
||||
register(): void {
|
||||
this.router.navigate(['/auth/register']);
|
||||
}
|
||||
|
||||
forgotPassword(): void {
|
||||
this.submitted = true;
|
||||
|
||||
if (this.emailForm.invalid) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.forgotPassword(this.emailForm.value.email)
|
||||
.pipe(catchError(err => {
|
||||
this.spinnerService.hideSpinner();
|
||||
throw err;
|
||||
})).subscribe(res => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.ready = true;
|
||||
setTimeout(() => { this.router.navigate(['/dashboard']); }, 5000);
|
||||
});
|
||||
}
|
||||
|
||||
checkResetPasswordId(): void {
|
||||
const id = this.route.snapshot.params['id'];
|
||||
if (id) {
|
||||
this.resetPasswordId = id;
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.getEMailFromforgotPasswordId(id)
|
||||
.pipe(catchError(err => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.router.navigate(['/auth/forgot-password']);
|
||||
throw err;
|
||||
})).subscribe(email => {
|
||||
this.spinnerService.hideSpinner();
|
||||
if (email) {
|
||||
this.emailForm.value.email = email;
|
||||
} else {
|
||||
this.router.navigate(['/auth/forgot-password']);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
resetPassword(): void {
|
||||
const id = this.route.snapshot.params['id'];
|
||||
if (this.emailForm.value.password !== this.emailForm.value.passwordRepeat) {
|
||||
this.repeatErrors.password = true;
|
||||
return;
|
||||
}
|
||||
this.spinnerService.showSpinner();
|
||||
|
||||
const resetPasswordDTO: ResetPasswordDTO = {
|
||||
id,
|
||||
password: this.passwordForm.value.password
|
||||
};
|
||||
|
||||
this.authService.resetPassword(resetPasswordDTO)
|
||||
.pipe(catchError(error => {
|
||||
this.router.navigate(['/auth/login']);
|
||||
this.spinnerService.hideSpinner();
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(resp => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.success(this.translate.instant('auth.forgot_password.message.reset_password'), this.translate.instant('auth.forgot_password.message.reset_password_d'));
|
||||
this.router.navigate(['/auth/login']);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
<section class="login-wrapper">
|
||||
<div class="login-form-wrapper">
|
||||
<div class="login-form">
|
||||
<form [formGroup]="loginForm">
|
||||
<h1>sh-edraft.de</h1>
|
||||
<div class="input-field">
|
||||
<input type="email" pInputText formControlName="email" placeholder="E-Mail" [ngClass]="{ 'invalid-feedback-input': submitted && (
|
||||
(loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required) ||
|
||||
(authUserAtrErrors.email.wrongData) ||
|
||||
(authUserAtrErrors.email.notConfirmed)
|
||||
)}" autocomplete="username email">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required">
|
||||
E-Mail wird benötigt</div>
|
||||
<div *ngIf="authUserAtrErrors.email.wrongData">Benutzer nicht gefunden</div>
|
||||
<div *ngIf="authUserAtrErrors.email.notConfirmed">E-Mail wurde nicht bestätigt</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-field">
|
||||
<!--
|
||||
!! WARNING !!
|
||||
Bugfix from https://github.com/primefaces/primeng/issues/10788
|
||||
styleClass="p-password p-component p-inputwrapper p-input-icon-right"
|
||||
Remove after update!
|
||||
-->
|
||||
<p-password type="password" formControlName="password" placeholder="Passwort" [ngClass]="{ 'invalid-feedback-input': submitted && (
|
||||
(loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required) ||
|
||||
(authUserAtrErrors.password.wrongData)
|
||||
)}" autocomplete="current-password" [toggleMask]="true" [feedback]="false"
|
||||
styleClass="p-password p-component p-inputwrapper p-input-icon-right"
|
||||
></p-password>
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required">
|
||||
Password wird benötigt</div>
|
||||
<div *ngIf="authUserAtrErrors.password.wrongData">Falsches passwort</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-form-submit">
|
||||
<button pButton label="Anmelden" class="btn login-form-submit-btn" (click)="login()"
|
||||
[disabled]="loginForm.invalid"></button>
|
||||
</div>
|
||||
<div class="login-form-sub-button-wrapper">
|
||||
<div class="login-form-sub-btn-wrapper">
|
||||
<button pButton label="Registrieren" class="btn login-form-sub-btn"
|
||||
(click)="register()"></button>
|
||||
</div>
|
||||
<div class="login-form-sub-btn-wrapper">
|
||||
<button pButton label="Passwort vergessen?"
|
||||
class="btn login-form-sub-btn login-form-sub-login-btn p-button-text"
|
||||
(click)="forgotPassword()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LoginComponent } from './login.component';
|
||||
|
||||
describe('LoginComponent', () => {
|
||||
let component: LoginComponent;
|
||||
let fixture: ComponentFixture<LoginComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ LoginComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LoginComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
114
kdb-web/src/app/modules/auth/components/login/login.component.ts
Normal file
114
kdb-web/src/app/modules/auth/components/login/login.component.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { AuthUserDTO } from 'src/app/models/auth/auth-user.dto';
|
||||
import { Router } from '@angular/router';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { ErrorDTO } from 'src/app/models/error/error-dto';
|
||||
import { AuthErrorMessages } from 'src/app/models/auth/auth-error-messages.enum';
|
||||
import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
|
||||
import { AuthUserAtrErrors } from 'src/app/models/auth/auth-user-atr-errors';
|
||||
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
import { ThemeService } from 'src/app/services/theme/theme.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrls: ['./login.component.scss']
|
||||
})
|
||||
export class LoginComponent implements OnInit {
|
||||
|
||||
loginForm!: FormGroup<{
|
||||
email: FormControl<string | null>,
|
||||
password: FormControl<string | null>
|
||||
}>;
|
||||
submitted = false;
|
||||
|
||||
authUserAtrErrors!: AuthUserAtrErrors;
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
private spinnerService: SpinnerService,
|
||||
private themeService: ThemeService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.isUserLoggedInAsync().then(result => {
|
||||
if (result) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
}
|
||||
|
||||
this.initLoginForm();
|
||||
this.resetStateFlags();
|
||||
this.spinnerService.hideSpinner();
|
||||
});
|
||||
}
|
||||
|
||||
resetStateFlags(): void {
|
||||
this.authUserAtrErrors = new AuthUserAtrErrors();
|
||||
}
|
||||
|
||||
initLoginForm(): void {
|
||||
this.loginForm = this.formBuilder.group({
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
password: ['', [Validators.required, Validators.minLength(8)]]
|
||||
});
|
||||
}
|
||||
|
||||
register(): void {
|
||||
this.router.navigate(['/auth/register']);
|
||||
}
|
||||
|
||||
forgotPassword(): void {
|
||||
this.router.navigate(['/auth/forgot-password']);
|
||||
}
|
||||
|
||||
login(): void {
|
||||
this.submitted = true;
|
||||
this.resetStateFlags();
|
||||
|
||||
if (this.loginForm.invalid) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.spinnerService.showSpinner();
|
||||
const user: AuthUserDTO = {
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: this.loginForm.value.email ?? null,
|
||||
password: this.loginForm.value.password ?? null
|
||||
};
|
||||
|
||||
this.authService.login(user)
|
||||
.pipe(catchError(error => {
|
||||
if (error.error !== null) {
|
||||
const err: ErrorDTO = error.error;
|
||||
|
||||
if (err.errorCode === ServiceErrorCode.InvalidData && err.message === AuthErrorMessages.UserIsEmpty) {
|
||||
this.authUserAtrErrors.email.required = true;
|
||||
this.authUserAtrErrors.password.required = true;
|
||||
} else if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === AuthErrorMessages.UserNotFound) {
|
||||
this.authUserAtrErrors.email.wrongData = true;
|
||||
} else if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === AuthErrorMessages.WrongPassword) {
|
||||
this.authUserAtrErrors.password.wrongData = true;
|
||||
} else if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === AuthErrorMessages.EMailNotConfirmed) {
|
||||
this.authUserAtrErrors.email.notConfirmed = true;
|
||||
}
|
||||
error.error = null;
|
||||
}
|
||||
this.spinnerService.hideSpinner();
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(token => {
|
||||
this.authService.saveToken(token);
|
||||
this.themeService.loadTheme();
|
||||
this.themeService.loadMenu();
|
||||
this.spinnerService.hideSpinner();
|
||||
this.router.navigate(['/dashboard']);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
<section class="login-wrapper">
|
||||
<div class="login-form-wrapper register-form-wrapper">
|
||||
<div class="login-form">
|
||||
<form [formGroup]="loginForm">
|
||||
<h1>sh-edraft.de</h1>
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="firstName" placeholder="Vorname"
|
||||
autocomplete="given-name">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.firstName.errors && loginForm.controls.firstName.errors['required'] || authUserAtrErrors.firstName.required">
|
||||
Vorname wird benötigt</div>
|
||||
<div *ngIf="authUserAtrErrors.firstName.wrongData">Vorname ist ungültig</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="lastName" placeholder="Nachname"
|
||||
autocomplete="family-name">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.lastName.errors && loginForm.controls.lastName.errors['required'] || authUserAtrErrors.lastName.required">
|
||||
Nachname wird benötigt</div>
|
||||
<div *ngIf="authUserAtrErrors.lastName.wrongData">Nachname ist ungültig</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="email" pInputText formControlName="email" placeholder="E-Mail"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && (authUserAtrErrors.email.wrongData || loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required)}"
|
||||
autocomplete="username email">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.email.errors && loginForm.controls.email.errors['required'] || authUserAtrErrors.email.required">
|
||||
E-Mail wird benötigt</div>
|
||||
<div *ngIf="authUserAtrErrors.email.wrongData">Benutzer existiert bereits</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="email" pInputText formControlName="emailRepeat" placeholder="E-Mail wiederholen"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.email}">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="repeatErrors.email">Die E-Mails stimmen nicht überein</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<p-password type="password" formControlName="password" placeholder="Passwort"
|
||||
ngClass="{ 'invalid-feedback': submitted && loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required}"
|
||||
autocomplete="new-password" [toggleMask]="true" [feedback]="false"
|
||||
styleClass="p-password p-component p-inputwrapper p-input-icon-right"></p-password>
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="loginForm.controls.password.errors && loginForm.controls.password.errors['required'] || authUserAtrErrors.password.required">
|
||||
Password wird benötigt</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<p-password type="password" formControlName="passwordRepeat" placeholder="Passwort wiederholen"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && repeatErrors.password}" [toggleMask]="true"
|
||||
[feedback]="false" styleClass="p-password p-component p-inputwrapper p-input-icon-right">
|
||||
</p-password>
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="repeatErrors.password">Die Passwörter stimmen nicht überein</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-form-submit">
|
||||
<button pButton label="Registrieren" class="btn login-form-submit-btn" (click)="register()"
|
||||
[disabled]="loginForm.invalid"></button>
|
||||
</div>
|
||||
|
||||
<div class="login-form-sub-button-wrapper">
|
||||
<div class="login-form-sub-btn-wrapper">
|
||||
<button pButton label="Einloggen" class="btn login-form-sub-btn" (click)="login()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RegistrationComponent } from './registration.component';
|
||||
|
||||
describe('RegistrationComponent', () => {
|
||||
let component: RegistrationComponent;
|
||||
let fixture: ComponentFixture<RegistrationComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ RegistrationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RegistrationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,144 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { AuthErrorMessages } from 'src/app/models/auth/auth-error-messages.enum';
|
||||
import { AuthUserDTO } from 'src/app/models/auth/auth-user.dto';
|
||||
import { AuthUserAtrErrors } from 'src/app/models/auth/auth-user-atr-errors';
|
||||
import { ErrorDTO } from 'src/app/models/error/error-dto';
|
||||
import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-registration',
|
||||
templateUrl: './registration.component.html',
|
||||
styleUrls: ['./registration.component.scss']
|
||||
})
|
||||
export class RegistrationComponent implements OnInit {
|
||||
|
||||
loginForm!: FormGroup<{
|
||||
firstName: FormControl<string | null>,
|
||||
lastName: FormControl<string | null>,
|
||||
email: FormControl<string | null>,
|
||||
emailRepeat: FormControl<string | null>,
|
||||
password: FormControl<string | null>,
|
||||
passwordRepeat: FormControl<string | null>
|
||||
}>;
|
||||
submitted = false;
|
||||
authUserAtrErrors!: AuthUserAtrErrors;
|
||||
repeatErrors = {
|
||||
email: false,
|
||||
password: false
|
||||
};
|
||||
|
||||
showEMailConfirmation = false;
|
||||
showEMailConfirmationError = false;
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
private spinnerService: SpinnerService,
|
||||
private route: ActivatedRoute
|
||||
) {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.isUserLoggedInAsync().then(res => {
|
||||
if (res) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
}
|
||||
this.spinnerService.hideSpinner();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initLoginForm();
|
||||
this.resetStateFlags();
|
||||
this.confirmEMail();
|
||||
}
|
||||
|
||||
resetStateFlags(): void {
|
||||
this.authUserAtrErrors = new AuthUserAtrErrors();
|
||||
this.repeatErrors = {
|
||||
email: false,
|
||||
password: false
|
||||
};
|
||||
}
|
||||
|
||||
login(): void {
|
||||
this.router.navigate(['/auth/login']);
|
||||
}
|
||||
|
||||
initLoginForm(): void {
|
||||
this.loginForm = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
emailRepeat: ['', [Validators.required, Validators.email]],
|
||||
password: ['', [Validators.required, Validators.minLength(8)]],
|
||||
passwordRepeat: ['', [Validators.required, Validators.minLength(8)]]
|
||||
});
|
||||
}
|
||||
|
||||
register(): void {
|
||||
this.submitted = true;
|
||||
this.resetStateFlags();
|
||||
|
||||
// stop here if form is invalid
|
||||
if (this.loginForm.invalid) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.loginForm.value.email !== this.loginForm.value.emailRepeat) {
|
||||
this.repeatErrors.email = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.loginForm.value.password !== this.loginForm.value.passwordRepeat) {
|
||||
this.repeatErrors.password = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.spinnerService.showSpinner();
|
||||
const user: AuthUserDTO = {
|
||||
firstName: this.loginForm.value.firstName ?? null,
|
||||
lastName: this.loginForm.value.lastName ?? null,
|
||||
email: this.loginForm.value.email ?? null,
|
||||
password: this.loginForm.value.password ?? null
|
||||
};
|
||||
|
||||
this.authService.register(user)
|
||||
.pipe(catchError(error => {
|
||||
if (error.error !== null) {
|
||||
const err: ErrorDTO = error.error;
|
||||
|
||||
if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === AuthErrorMessages.UserAlreadyExists) {
|
||||
this.authUserAtrErrors.email.wrongData = true;
|
||||
}
|
||||
}
|
||||
this.spinnerService.hideSpinner();
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(resp => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.router.navigate(['/auth/login']);
|
||||
});
|
||||
}
|
||||
|
||||
confirmEMail(): void {
|
||||
const id = this.route.snapshot.params['id'];
|
||||
if (id) {
|
||||
this.spinnerService.showSpinner();
|
||||
this.authService.confirmEMail(id)
|
||||
.pipe(catchError(error => {
|
||||
this.router.navigate(['/auth/login']);
|
||||
this.spinnerService.hideSpinner();
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(resp => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.router.navigate(['/auth/login']);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AuthGuard } from './auth.guard';
|
||||
|
||||
describe('AuthGuard', () => {
|
||||
let guard: AuthGuard;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
guard = TestBed.inject(AuthGuard);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(guard).toBeTruthy();
|
||||
});
|
||||
});
|
||||
38
kdb-web/src/app/modules/shared/guards/auth/auth.guard.ts
Normal file
38
kdb-web/src/app/modules/shared/guards/auth/auth.guard.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { ThemeService } from 'src/app/services/theme/theme.service';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AuthGuard implements CanActivate {
|
||||
constructor(
|
||||
private router: Router,
|
||||
private authService: AuthService,
|
||||
private themeService: ThemeService
|
||||
) {
|
||||
}
|
||||
|
||||
async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
|
||||
if (!this.authService.getToken().token) {
|
||||
this.authService.logout();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!await this.authService.isUserLoggedInAsync()) {
|
||||
this.authService.logout();
|
||||
return false;
|
||||
}
|
||||
|
||||
const role = route.data['role'];
|
||||
if (role) {
|
||||
if (!await this.authService.hasUserPermission(role)) {
|
||||
this.router.navigate(['/dashboard']);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
13
kdb-web/src/app/modules/shared/pipes/auth-role.pipe.ts
Normal file
13
kdb-web/src/app/modules/shared/pipes/auth-role.pipe.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { AuthRoles } from 'src/app/models/auth/auth-roles.enum';
|
||||
|
||||
@Pipe({
|
||||
name: 'authRole'
|
||||
})
|
||||
export class AuthRolePipe implements PipeTransform {
|
||||
|
||||
transform(value: AuthRoles): string {
|
||||
return AuthRoles[value].toString();
|
||||
}
|
||||
|
||||
}
|
||||
8
kdb-web/src/app/modules/shared/pipes/bool.pipe.spec.ts
Normal file
8
kdb-web/src/app/modules/shared/pipes/bool.pipe.spec.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { BoolPipe } from './bool.pipe';
|
||||
|
||||
describe('BoolPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new BoolPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
||||
21
kdb-web/src/app/modules/shared/pipes/bool.pipe.ts
Normal file
21
kdb-web/src/app/modules/shared/pipes/bool.pipe.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'bool'
|
||||
})
|
||||
export class BoolPipe implements PipeTransform {
|
||||
|
||||
constructor(
|
||||
private translate: TranslateService
|
||||
) {}
|
||||
|
||||
transform(value: boolean): string {
|
||||
if (value === true) {
|
||||
return this.translate.instant('common.bool_as_string.true');
|
||||
}
|
||||
|
||||
return this.translate.instant('common.bool_as_string.false');
|
||||
}
|
||||
|
||||
}
|
||||
27
kdb-web/src/app/modules/shared/pipes/ip-address.pipe.ts
Normal file
27
kdb-web/src/app/modules/shared/pipes/ip-address.pipe.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'ipAddress'
|
||||
})
|
||||
export class IpAddressPipe implements PipeTransform {
|
||||
|
||||
transform(ipAsArray: number[]): string {
|
||||
let ipAsString = "";
|
||||
|
||||
if (ipAsArray.length != 4){
|
||||
throw new Error("Invalid IP")
|
||||
}
|
||||
|
||||
for (let i = 0; i < ipAsArray.length; i++) {
|
||||
const byte = ipAsArray[i];
|
||||
if (i == ipAsArray.length - 1) {
|
||||
ipAsString += `${byte}`;
|
||||
} else {
|
||||
ipAsString += `${byte}.`;
|
||||
}
|
||||
}
|
||||
|
||||
return ipAsString;
|
||||
}
|
||||
|
||||
}
|
||||
71
kdb-web/src/app/modules/shared/shared.module.ts
Normal file
71
kdb-web/src/app/modules/shared/shared.module.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { ConfirmDialogModule } from 'primeng/confirmdialog';
|
||||
import { DialogModule } from 'primeng/dialog';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { DynamicDialogModule } from 'primeng/dynamicdialog';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
import { PasswordModule } from 'primeng/password';
|
||||
import { ProgressSpinnerModule } from 'primeng/progressspinner';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { AuthRolePipe } from './pipes/auth-role.pipe';
|
||||
import { IpAddressPipe } from './pipes/ip-address.pipe';
|
||||
import { BoolPipe } from './pipes/bool.pipe';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AuthRolePipe,
|
||||
IpAddressPipe,
|
||||
BoolPipe,
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ButtonModule,
|
||||
PasswordModule,
|
||||
MenuModule,
|
||||
DialogModule,
|
||||
ProgressSpinnerModule,
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
ToastModule,
|
||||
ConfirmDialogModule,
|
||||
TableModule,
|
||||
InputTextModule,
|
||||
CheckboxModule,
|
||||
DropdownModule,
|
||||
TranslateModule,
|
||||
DynamicDialogModule
|
||||
],
|
||||
exports: [
|
||||
ButtonModule,
|
||||
PasswordModule,
|
||||
MenuModule,
|
||||
DialogModule,
|
||||
ProgressSpinnerModule,
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
ToastModule,
|
||||
ConfirmDialogModule,
|
||||
TableModule,
|
||||
InputTextModule,
|
||||
CheckboxModule,
|
||||
DropdownModule,
|
||||
TranslateModule,
|
||||
DynamicDialogModule,
|
||||
AuthRolePipe,
|
||||
IpAddressPipe,
|
||||
BoolPipe,
|
||||
]
|
||||
})
|
||||
export class SharedModule { }
|
||||
@@ -0,0 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { ChangePasswordComponent } from './components/change-password/change-password.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{path: '', component:ChangePasswordComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ChangePasswordRoutingModule { }
|
||||
@@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { ChangePasswordRoutingModule } from './change-password-routing.module';
|
||||
import { ChangePasswordComponent } from './components/change-password/change-password.component';
|
||||
import { SharedModule } from '../../shared/shared.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ChangePasswordComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
ChangePasswordRoutingModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class ChangePasswordModule { }
|
||||
@@ -0,0 +1,35 @@
|
||||
<h1>
|
||||
{{'view.change-password.header' | translate}}
|
||||
</h1>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<form [formGroup]="passwordForm">
|
||||
<div class="input-field">
|
||||
<input type="password" pInputText formControlName="oldPassword" placeholder="{{'view.change-password.active_password' | translate}}"
|
||||
autocomplete="password" [ngClass]="{ 'invalid-feedback-input': submitted && errors.oldPassword}">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="errors.oldPassword">{{'view.change-password.wrong_password' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="password" pInputText formControlName="password" placeholder="{{'view.change-password.new_password' | translate}}"
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="password" pInputText formControlName="passwordRepeat"
|
||||
placeholder="{{'view.change-password.repeat_new_password' | translate}}"
|
||||
[ngClass]="{ 'invalid-feedback-input': submitted && errors.repeatPassword}">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="errors.repeatPassword">{{'view.change-password.passwords_do_not_match' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-form-submit">
|
||||
<button pButton icon="pi pi-save" label="{{'view.change-password.save' | translate}}" class="btn login-form-submit-btn"
|
||||
(click)="changePassword()" [disabled]="passwordForm.invalid || ready"></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ChangePasswordComponent } from './change-password.component';
|
||||
|
||||
describe('ChangePasswordComponent', () => {
|
||||
let component: ChangePasswordComponent;
|
||||
let fixture: ComponentFixture<ChangePasswordComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ChangePasswordComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ChangePasswordComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,107 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { AuthErrorMessages } from 'src/app/models/auth/auth-error-messages.enum';
|
||||
import { UpdateUserDTO } from 'src/app/models/auth/update-user.dto';
|
||||
import { ErrorDTO } from 'src/app/models/error/error-dto';
|
||||
import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
import { ToastService } from 'src/app/services/toast/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-change-password',
|
||||
templateUrl: './change-password.component.html',
|
||||
styleUrls: ['./change-password.component.scss']
|
||||
})
|
||||
export class ChangePasswordComponent implements OnInit {
|
||||
|
||||
passwordForm!: FormGroup;
|
||||
submitted = false;
|
||||
ready = false;
|
||||
errors = {
|
||||
email: false,
|
||||
repeatPassword: false,
|
||||
oldPassword: false
|
||||
};
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
private spinnerService: SpinnerService,
|
||||
private toastService: ToastService,
|
||||
private translate: TranslateService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initForms();
|
||||
}
|
||||
|
||||
initForms(): void {
|
||||
this.passwordForm = this.formBuilder.group({
|
||||
oldPassword: [null, [Validators.required, Validators.minLength(8)]],
|
||||
password: [null, [Validators.required, Validators.minLength(8)]],
|
||||
passwordRepeat: [null, [Validators.required, Validators.minLength(8)]]
|
||||
});
|
||||
}
|
||||
|
||||
resetErrorFlags(): void {
|
||||
this.errors = {
|
||||
email: false,
|
||||
repeatPassword: false,
|
||||
oldPassword: false
|
||||
};
|
||||
}
|
||||
|
||||
changePassword(): void {
|
||||
this.submitted = true;
|
||||
this.resetErrorFlags();
|
||||
|
||||
if (this.passwordForm.value.password !== this.passwordForm.value.passwordRepeat) {
|
||||
this.errors.repeatPassword = true;
|
||||
return;
|
||||
}
|
||||
this.spinnerService.showSpinner();
|
||||
|
||||
const decodedToken = this.authService.getDecodedToken();
|
||||
const changePasswordDTO: UpdateUserDTO = {
|
||||
authUserDTO: {
|
||||
firstName: null,
|
||||
lastName: null,
|
||||
password: this.passwordForm.value.oldPassword,
|
||||
email: this.authService.getEMailFromDecodedToken(decodedToken)
|
||||
},
|
||||
newAuthUserDTO: {
|
||||
firstName: null,
|
||||
lastName: null,
|
||||
password: this.passwordForm.value.password,
|
||||
email: this.authService.getEMailFromDecodedToken(decodedToken)
|
||||
}
|
||||
};
|
||||
|
||||
this.authService.updateUser(changePasswordDTO)
|
||||
.pipe(catchError(error => {
|
||||
if (error.error !== null) {
|
||||
const err: ErrorDTO = error.error;
|
||||
|
||||
if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === AuthErrorMessages.WrongPassword) {
|
||||
this.errors.oldPassword = true;
|
||||
}
|
||||
|
||||
error.error = null;
|
||||
}
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.error(this.translate.instant('view.change_password.message.error'), this.translate.instant('view.change_password.message.password_cannot_be_changed'));
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(resp => {
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.success(this.translate.instant('view.change_password.message.change_password'), this.translate.instant('view.change_password.message.changed_password'));
|
||||
this.router.navigate(["/dashboard"]);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<p>dashboard works!</p>
|
||||
|
||||
<div class="content"></div>
|
||||
@@ -0,0 +1,25 @@
|
||||
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({
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DashboardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { DashboardComponent } from './components/dashboard/dashboard.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{path: '', component: DashboardComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class DashboardRoutingModule { }
|
||||
19
kdb-web/src/app/modules/view/dashboard/dashboard.module.ts
Normal file
19
kdb-web/src/app/modules/view/dashboard/dashboard.module.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { DashboardRoutingModule } from './dashboard-routing.module';
|
||||
import { DashboardComponent } from './components/dashboard/dashboard.component';
|
||||
import { SharedModule } from '../../shared/shared.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
DashboardComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
DashboardRoutingModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class DashboardModule { }
|
||||
@@ -0,0 +1,41 @@
|
||||
<h1>
|
||||
{{'view.user_settings.header' | translate}}
|
||||
</h1>
|
||||
<div class="content-wrapper">
|
||||
<div class="content">
|
||||
<form [formGroup]="settingsForm">
|
||||
<div>
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="firstName" placeholder="{{'view.user_settings.first_name' | translate}}"
|
||||
autocomplete="given-name">
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="lastName" placeholder="{{'view.user_settings.last_name' | translate}}"
|
||||
autocomplete="family-name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="email" pInputText formControlName="email" placeholder="{{'view.user_settings.e_mail' | translate}}"
|
||||
autocomplete="username email" [ngClass]="{ 'invalid-feedback-input': submitted && errors.email}">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="errors.email">{{'view.user_settings.e_mail_already_exists' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<input type="password" pInputText formControlName="password" placeholder="{{'view.user_settings.password' | translate}}"
|
||||
autocomplete="password" [ngClass]="{ 'invalid-feedback-input': submitted && errors.password}">
|
||||
<div *ngIf="submitted" class="invalid-feedback">
|
||||
<div *ngIf="errors.password">{{'view.user_settings.wrong_password' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-form-submit">
|
||||
<button pButton icon="pi pi-save" label="{{'view.user_settings.save' | translate}}" class="btn login-form-submit-btn"
|
||||
(click)="saveSettings()" [disabled]="settingsForm.invalid || ready"></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserSettingsComponent } from './user-settings.component';
|
||||
|
||||
describe('UserSettingsComponent', () => {
|
||||
let component: UserSettingsComponent;
|
||||
let fixture: ComponentFixture<UserSettingsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ UserSettingsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UserSettingsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,151 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { AuthErrorMessages } from 'src/app/models/auth/auth-error-messages.enum';
|
||||
import { AuthUserDTO } from 'src/app/models/auth/auth-user.dto';
|
||||
import { UpdateUserDTO } from 'src/app/models/auth/update-user.dto';
|
||||
import { ErrorDTO } from 'src/app/models/error/error-dto';
|
||||
import { ServiceErrorCode } from 'src/app/models/error/service-error-code.enum';
|
||||
import { AuthService } from 'src/app/services/auth/auth.service';
|
||||
import { SpinnerService } from 'src/app/services/spinner/spinner.service';
|
||||
import { ThemeService } from 'src/app/services/theme/theme.service';
|
||||
import { ToastService } from 'src/app/services/toast/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-settings',
|
||||
templateUrl: './user-settings.component.html',
|
||||
styleUrls: ['./user-settings.component.scss']
|
||||
})
|
||||
export class UserSettingsComponent implements OnInit {
|
||||
settingsForm!: FormGroup<{
|
||||
firstName: FormControl<string | null>,
|
||||
lastName: FormControl<string | null>,
|
||||
email: FormControl<string | null>,
|
||||
password: FormControl<string | null>
|
||||
}>;
|
||||
submitted = false;
|
||||
ready = false;
|
||||
errors = {
|
||||
email: false,
|
||||
password: false
|
||||
};
|
||||
|
||||
authUser: AuthUserDTO | null = null;
|
||||
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
private spinnerService: SpinnerService,
|
||||
private toastService: ToastService,
|
||||
private themeService: ThemeService,
|
||||
private translaste: TranslateService
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initForms();
|
||||
this.load();
|
||||
}
|
||||
|
||||
initForms(): void {
|
||||
this.settingsForm = this.formBuilder.group({
|
||||
firstName: ['', [Validators.required]],
|
||||
lastName: ['', [Validators.required]],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
password: ['', [Validators.required, Validators.minLength(8)]]
|
||||
});
|
||||
}
|
||||
|
||||
resetErrorFlags(): void {
|
||||
this.errors = {
|
||||
email: false,
|
||||
password: false
|
||||
};
|
||||
}
|
||||
|
||||
load(): void {
|
||||
const token = this.authService.getDecodedToken();
|
||||
const mail = this.authService.getEMailFromDecodedToken(token);
|
||||
if (!mail) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.authService.findUserByEMail(mail)
|
||||
.pipe(catchError(err => {
|
||||
this.toastService.error(this.translaste.instant('view.user_settings.message.user_not_found'), this.translaste.instant('view.user_settings.message.user_not_found_d'));
|
||||
this.authService.logout();
|
||||
throw err;
|
||||
}))
|
||||
.subscribe(user => {
|
||||
if (!user) {
|
||||
this.toastService.error(this.translaste.instant('view.user_settings.message.user_not_found'), this.translaste.instant('view.user_settings.message.user_not_found_d'));
|
||||
this.authService.logout();
|
||||
}
|
||||
this.authUser = user;
|
||||
this.settingsForm.controls.firstName.setValue(user.firstName);
|
||||
this.settingsForm.controls.lastName.setValue(user.lastName);
|
||||
this.settingsForm.controls.email.setValue(user.email);
|
||||
});
|
||||
}
|
||||
|
||||
saveSettings(): void {
|
||||
if (!this.authUser) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.resetErrorFlags();
|
||||
this.submitted = true;
|
||||
this.spinnerService.showSpinner();
|
||||
|
||||
this.authUser.password = this.settingsForm.value.password ?? null;
|
||||
const updateUserDTO: UpdateUserDTO = {
|
||||
authUserDTO: this.authUser,
|
||||
newAuthUserDTO: {
|
||||
firstName: this.settingsForm.value.firstName ?? null,
|
||||
lastName: this.settingsForm.value.lastName ?? null,
|
||||
email: this.settingsForm.value.email ?? null,
|
||||
password: null
|
||||
}
|
||||
};
|
||||
|
||||
this.authService.updateUser(updateUserDTO)
|
||||
.pipe(catchError(error => {
|
||||
if (error.error !== null) {
|
||||
const err: ErrorDTO = error.error;
|
||||
|
||||
if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === AuthErrorMessages.WrongPassword) {
|
||||
this.errors.password = true;
|
||||
} else if (err.errorCode === ServiceErrorCode.InvalidUser && err.message === AuthErrorMessages.UserAlreadyExists) {
|
||||
this.errors.email = true;
|
||||
}
|
||||
}
|
||||
this.spinnerService.hideSpinner();
|
||||
this.toastService.error(this.translaste.instant('view.user_settings.message.error'), this.translaste.instant('view.user_settings.message.could_not_change_settings'));
|
||||
throw error;
|
||||
}))
|
||||
.subscribe(resp => {
|
||||
updateUserDTO.newAuthUserDTO.password = updateUserDTO.authUserDTO.password;
|
||||
this.authService.login(updateUserDTO.newAuthUserDTO)
|
||||
.pipe(catchError(err => {
|
||||
this.router.navigate(['/auth/login']);
|
||||
throw err;
|
||||
}))
|
||||
.subscribe(token => {
|
||||
this.spinnerService.hideSpinner();
|
||||
if (token) {
|
||||
this.toastService.success(this.translaste.instant('view.user_settings.message.success'), this.translaste.instant('view.user_settings.message.changed_settings'));
|
||||
this.authService.saveToken(token);
|
||||
this.themeService.loadTheme();
|
||||
this.themeService.loadMenu();
|
||||
this.load();
|
||||
return true;
|
||||
}
|
||||
this.router.navigate(['/auth/login']);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { UserSettingsComponent } from './components/user-settings/user-settings.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: UserSettingsComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class UserSettingsRoutingModule { }
|
||||
@@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
import { UserSettingsRoutingModule } from './user-settings-routing.module';
|
||||
import { UserSettingsComponent } from './components/user-settings/user-settings.component';
|
||||
import { SharedModule } from '../../shared/shared.module';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
UserSettingsComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
UserSettingsRoutingModule,
|
||||
SharedModule
|
||||
]
|
||||
})
|
||||
export class UserSettingsModule { }
|
||||
Reference in New Issue
Block a user