First Pull Resquet

.gitignore

@@ -1,5 +1,8 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+# Base de Datos
+API/ormconfig.json
+
 # compiled output
 /dist
 /tmp

API/ormconfig.json

@@ -1,10 +1,10 @@
 {
   "type": "mysql",
-  "host": "XXXXXXXXX",
+  "host": "localhost",
   "port": 3306,
-  "username": "XXXXXX",
-  "password": "XXXXXX",
-  "database": "XXXXXXXX",
+  "username": "root",
+  "password": "",
+  "database": "casa",
   "synchronize": true,
   "logging": false,
   "entities": ["src/entity/**/*.ts"],

API/src/controller/AuthController.ts

@@ -24,7 +24,7 @@ class AuthController {
 
     // Check password
     if (!user.checkPassword(password)) {
-      return res.status(400).json({ message: 'Username or Password are incorrect!' });
+        return res.status(400).json({ message: 'Username or Password are incorrect!' });
     }
 
     const token = jwt.sign({ userId: user.id, username: user.username }, config.jwtSecret, { expiresIn: '1h' });
@@ -50,7 +50,7 @@ class AuthController {
     }
 
     if (!user.checkPassword(oldPassword)) {
-      return res.status(401).json({ message: 'Check your old Password' });
+     return res.status(401).json({ message: 'Check your old Password' });
     }
 
     user.password = newPassword;

API/src/controller/UserController.ts

@@ -57,7 +57,8 @@ export class UserController {
       return res.status(409).json({ message: 'Username already exist' });
     }
     // All ok
-    res.send('User created');
+    //res.send('User created');  this line change by line 61.
+    res.status(201).json({ message : 'User Created !'});
   };
 
   static edit = async (req: Request, res: Response) => {
@@ -88,7 +89,7 @@ export class UserController {
       return res.status(409).json({ message: 'Username already in use' });
     }
 
-    res.status(201).json({ message: 'User update' });
+    res.status(201).json({ message: 'User update !' });
   };
 
   static delete = async (req: Request, res: Response) => {

package.json

@@ -26,6 +26,7 @@
     "@auth0/angular-jwt": "^5.0.1",
     "concurrently": "^5.2.0",
     "rxjs": "~6.5.5",
+    "sweetalert2": "^10.4.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },

src/app/app-routing.module.ts

@@ -8,6 +8,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/home/home.module').then((m) => m.HomeModule),
   },
+  {
+    path: 'home',
+    loadChildren: () =>
+      import('./pages/home/home.module').then((m) => m.HomeModule),
+  },
   {
     path: 'notFound',
     loadChildren: () =>

src/app/app.component.html

@@ -1,6 +1,13 @@
 <mat-sidenav-container>
   <mat-sidenav #sidenav mode="side" [(opened)]="opened">
-    <mat-toolbar color="primary">Menu</mat-toolbar>
+    <mat-toolbar color="primary">
+      <span>
+        <button mat-icon-button (click)="closeMenu()">
+          <mat-icon>close</mat-icon>
+        </button>&nbsp;
+      </span>
+      Menu 
+    </mat-toolbar>
     <app-sidebar></app-sidebar>
   </mat-sidenav>
   <mat-sidenav-content>

src/app/app.component.ts

@@ -1,5 +1,6 @@
+import { Router } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
-import { UtilsService } from './shared/services/utils.service';
+import { UtilsService } from '@shared/services/utils.service';
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
@@ -10,16 +11,25 @@ import { Subject } from 'rxjs';
 })
 export class AppComponent implements OnInit, OnDestroy {
   opened = false;
+
   private destroy$ = new Subject<any>();
+
+  constructor(private utilsSvc: UtilsService, private router: Router) {}
+
+  closeMenu(): void{
+    this.utilsSvc.openSidebar(false);
+    this.router.navigate(['/home']);
+  }
 
-  constructor(private utilsSvc: UtilsService) {}
 
   ngOnInit(): void {
     this.utilsSvc.sidebarOpened$
       .pipe(takeUntil(this.destroy$))
       .subscribe((res: boolean) => (this.opened = res));
   }
 
+
+
   ngOnDestroy(): void {
     this.destroy$.next({});
     this.destroy$.complete();

src/app/pages/admin/components/modal/modal.component.ts

@@ -7,47 +7,66 @@ enum Action {
   EDIT = 'edit',
   NEW = 'new',
 }
+import Swal from 'sweetalert2';
 
 @Component({
   selector: 'app-modal',
   templateUrl: './modal.component.html',
   styleUrls: ['./modal.component.scss'],
 })
 export class ModalComponent implements OnInit {
+
   actionTODO = Action.NEW;
   showPasswordField = true;
   hide = true;
+
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
     public userForm: BaseFormUser,
     private userSvc: UsersService
   ) {}
 
   ngOnInit(): void {
+
+    this.userForm.baseForm.reset(); // Clear Form , left the inputs loaded
+
     if (this.data?.user.hasOwnProperty('id')) {
+
       this.actionTODO = Action.EDIT;
       this.showPasswordField = false;
       this.userForm.baseForm.get('password').setValidators(null);
       this.userForm.baseForm.updateValueAndValidity();
       this.data.title = 'Edit user';
       this.pathFormData();
+
     }
   }
 
   onSave(): void {
-    const formValue = this.userForm.baseForm.value;
-    if (this.actionTODO === Action.NEW) {
-      this.userSvc.new(formValue).subscribe((res) => {
-        console.log('New ', res);
-      });
-    } else {
+
+    const formValue = this.userForm.baseForm.value;  
+    if ( this.actionTODO === Action.NEW ) {
+      this.userSvc.new(formValue).subscribe((res) =>
+        this.swal(res['message'])
+      );
+    }else{    
       const userId = this.data?.user?.id;
-      this.userSvc.update(userId, formValue).subscribe((res) => {
-        console.log('Update', res);
-      });
+      this.userSvc.update(userId, formValue).subscribe( (res) =>
+        this.swal(res['message'])
+      );
     }
   }
 
+  swal(title: string){
+    Swal.fire({
+      position: 'top',
+      icon: 'success',
+      title: title,
+      showConfirmButton: false,
+      timer: 1500
+    })
+  }
+
   checkField(field: string): boolean {
     return this.userForm.isValidField(field);
   }

src/app/pages/admin/services/users.service.ts

@@ -25,7 +25,7 @@ export class UsersService {
 
   new(user: User): Observable<User> {
     return this.http
-      .post<User>(`${environment.API_URL}/users`, user)
+      .post<User>(`${environment.API_URL}/users/`, user)
       .pipe(catchError(this.handlerError));
   }
 
@@ -44,9 +44,9 @@ export class UsersService {
   handlerError(error): Observable<never> {
     let errorMessage = 'Error unknown';
     if (error) {
-      errorMessage = `Error ${error.message}`;
+      errorMessage = `Error ::: ${error.message}`;
     }
-    window.alert(errorMessage);
+    //////window.alert(errorMessage);   /// Devuelve un Error !
     return throwError(errorMessage);
   }
 }

src/app/pages/admin/users/users.component.ts

@@ -12,6 +12,8 @@ import { MatSort } from '@angular/material/sort';
 import { MatDialog } from '@angular/material/dialog';
 import { ModalComponent } from './../components/modal/modal.component';
 import { Subject } from 'rxjs';
+import Swal from 'sweetalert2';
+
 @Component({
   selector: 'app-users',
   templateUrl: './users.component.html',
@@ -35,25 +37,53 @@ export class UsersComponent implements AfterViewInit, OnInit, OnDestroy {
   ngAfterViewInit(): void {
     this.dataSource.sort = this.sort;
   }
+
   onDelete(userId: number): void {
-    if (window.confirm('Do you really want remove this user')) {
-      this.userSvc
-        .delete(userId)
-        .pipe(takeUntil(this.destroy$))
-        .subscribe((res) => {
-          window.alert(res);
+
+    Swal.fire({
+      title: 'Are you sure?',
+      text: "You won't be able to revert this!",
+      icon: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText: 'Yes, delete it!'
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.userSvc
+          .delete(userId)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((res) => {
+            console.log("Del ->", res)
+            // Update result after deleting the user.
+            this.userSvc.getAll().subscribe((users) => {
+              this.dataSource.data = users;
+            });
+            Swal.fire(
+              'Deleted!',
+              'Your file has been deleted.',
+              'success',
+            )
         });
-    }
+      }
+    });    
   }
 
   onOpenModal(user = {}): void {
-    console.log('User->', user);
-    this.dialog.open(ModalComponent, {
+    console.log('User ->', user);
+    let dialogRef = this.dialog.open(ModalComponent, {
       height: '400px',
       width: '600px',
       hasBackdrop: false,
       data: { title: 'New user', user },
     });
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(`Dialog result: ${result}`, typeof result);
+      // Update result after adding new user.
+      this.userSvc.getAll().subscribe((users) => {
+        this.dataSource.data = users;
+      });
+    });
   }
 
   ngOnDestroy(): void {

src/app/pages/auth/auth.service.ts

@@ -1,10 +1,11 @@
+import { UtilsService } from './../../shared/services/utils.service';
 import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { environment } from '@env/environment';
 import { Observable, throwError, BehaviorSubject } from 'rxjs';
 
-import { UserResponse, User, Roles } from '@shared/models/user.interface';
+import { UserResponse, User } from '@shared/models/user.interface';
 import { catchError, map } from 'rxjs/operators';
 import { JwtHelperService } from '@auth0/angular-jwt';
 
@@ -14,9 +15,16 @@ const helper = new JwtHelperService();
   providedIn: 'root',
 })
 export class AuthService {
+
   private user = new BehaviorSubject<UserResponse>(null);
 
-  constructor(private http: HttpClient, private router: Router) {
+  constructor(
+
+    private http: HttpClient, 
+    private router: Router,
+    private utilsSvc: UtilsService 
+
+  ) {
     this.checkToken();
   }
   get user$(): Observable<UserResponse> {
@@ -26,6 +34,7 @@ export class AuthService {
   get userValue(): UserResponse {
     return this.user.getValue();
   }
+
   login(authData: User): Observable<UserResponse | void> {
     return this.http
       .post<UserResponse>(`${environment.API_URL}/auth/login`, authData)
@@ -40,12 +49,17 @@ export class AuthService {
   }
 
   logout(): void {
+
     localStorage.removeItem('user');
     this.user.next(null);
+
+    this.utilsSvc.openSidebar(false);
     this.router.navigate(['/login']);
+
   }
 
   private checkToken(): void {
+
     const user = JSON.parse(localStorage.getItem('user')) || null;
 
     if (user) {
@@ -56,6 +70,7 @@ export class AuthService {
       } else {
         this.user.next(user);
       }
+
     }
   }
 

src/app/pages/auth/login/login.component.ts

@@ -20,6 +20,7 @@ export class LoginComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    this.loginForm.baseForm.reset();
     this.loginForm.baseForm.get('role').setValidators(null);
     this.loginForm.baseForm.get('role').updateValueAndValidity();
   }

src/app/pages/home/home.component.html

@@ -1,4 +1 @@
-<h1 *ngIf="(authSvc.user$ | async) as user">
-  Welcome, {{ user?.username || 'User' }}.
-</h1>
 <p>home works!</p>