updated authorization and added delete confirmation popup

angular.json

@@ -68,13 +68,22 @@
                   "with": "src/environments/environment.hmr.ts"
                 }
               ]
+            },
+            "backend": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.backend.ts"
+                }
+              ]
             }
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-material-admin:build"
+            "browserTarget": "angular-material-admin:build",
+            "port": 3000
           },
           "configurations": {
             "production": {
@@ -83,6 +92,9 @@
             "hmr": {
               "hmr": true,
               "browserTarget": "angular-material-admin:build:hmr"
+            },
+            "backend": {
+              "browserTarget": "angular-material-admin:build:backend"
             }
           }
         },

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.0.8] - 09/14/2021
+### Updated
+
+- Updated login page;
+- Updated register page;
+- Added delete confirmation popup;
+
 ## [1.0.7] - 05/05/2021
 ### Updated
 

package.json

@@ -1,9 +1,10 @@
 {
   "name": "angular-material-admin",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start:backend": "ng serve --configuration backend",
     "build": "ng build --prod",
     "lint": "ng lint",
     "hmr": "ng serve --configuration hmr"
@@ -21,6 +22,7 @@
     "@angular/platform-browser": "~11.2.12",
     "@angular/platform-browser-dynamic": "~11.2.12",
     "@angular/router": "~11.2.12",
+    "@auth0/angular-jwt": "^3.0.1",
     "@fullcalendar/angular": "4.4.5-beta",
     "@fullcalendar/core": "4.4.2",
     "@fullcalendar/daygrid": "4.4.2",

src/app/app.config.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../environments/environment';
+
+const hostApi = process.env.NODE_ENV === 'development' ? 'http://localhost' : 'https://flatlogic-node-backend.herokuapp.com';
+const portApi = process.env.NODE_ENV === 'development' ? '8080' : '';
+const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}`;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppConfig {
+  config = {
+    version: '4.0.0',
+    remote: 'https://flatlogic-node-backend.herokuapp.com',
+    isBackend: environment.backend,
+    hostApi,
+    portApi,
+    baseURLApi,
+    auth: {
+      email: '[email protected]',
+      password: 'password'
+    },
+  };
+
+  constructor() {
+  }
+
+  getConfig(): Object {
+    return this.config;
+  }
+}
+

src/app/app.interceptor.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+import { AppConfig } from './app.config';
+
+@Injectable()
+export class AppInterceptor implements HttpInterceptor {
+  config;
+
+  constructor(appConfig: AppConfig) {
+    this.config = appConfig.getConfig();
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    req = req.clone({url: this.config.baseURLApi + req.url});
+
+    const token: string = localStorage.getItem('token');
+    if (token) {
+      req = req.clone({
+        headers: req.headers.set('Authorization', 'Bearer ' + token)
+      });
+    }
+
+    return next.handle(req);
+  }
+}

src/app/app.module.ts

@@ -20,6 +20,8 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { FormsModule } from '@angular/forms';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { AppInterceptor } from './app.interceptor';
 
 @NgModule({
   declarations: [
@@ -47,8 +49,13 @@ import { FormsModule } from '@angular/forms';
     MatRadioModule,
     MatSlideToggleModule,
     FormsModule,
+    HttpClientModule
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true
+    }
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/modules/auth/auth-routing.module.ts

@@ -7,7 +7,12 @@ const routes: Routes = [
   {
     path: '',
     component: AuthPageComponent
-  }
+  },
+  {
+    path: 'register',
+    component: AuthPageComponent
+  },
+
 ];
 
 @NgModule({

src/app/modules/auth/auth.module.ts

@@ -11,6 +11,7 @@ import { YearPipe } from './pipes';
 import { AuthService, EmailService } from './services';
 import { LoginFormComponent, SignFormComponent } from './components';
 import { AuthGuard } from './guards';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { AuthGuard } from './guards';
     MatTabsModule,
     MatButtonModule,
     MatInputModule,
+    MatIconModule,
     ReactiveFormsModule,
     FormsModule
   ],

src/app/modules/auth/components/login-form/login-form.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { AppConfig } from '../../../../app.config';
 
 @Component({
   selector: 'app-login-form',
@@ -9,19 +10,22 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 export class LoginFormComponent implements OnInit {
   @Output() sendLoginForm = new EventEmitter<void>();
   public form: FormGroup;
-  public flatlogicEmail = '[email protected]';
-  public flatlogicPassword = 'admin';
+  config: any;
+
+  constructor(appConfig: AppConfig) {
+    this.config = appConfig.getConfig();
+  }
 
   public ngOnInit(): void {
     this.form = new FormGroup({
-      email: new FormControl(this.flatlogicEmail, [Validators.required, Validators.email]),
-      password: new FormControl(this.flatlogicPassword, [Validators.required])
+      email: new FormControl(this.config.auth.email, [Validators.required, Validators.email]),
+      password: new FormControl(this.config.auth.password, [Validators.required])
     });
   }
 
   public login(): void {
     if (this.form.valid) {
-      this.sendLoginForm.emit();
+      this.sendLoginForm.emit(this.form.value);
     }
   }
 }

src/app/modules/auth/components/sign-form/sign-form.component.html

@@ -1,3 +1,9 @@
+<div *ngIf="authService.errorMessage" class="notification notification_transparent-pink">
+  <div class="notification__icon-wrapper notification__icon-wrapper_solid-pink">
+    <mat-icon>report</mat-icon>
+  </div>
+  <p class="notification__title">{{authService.errorMessage}}</p>
+</div>
 <form class="form" [formGroup]="form" (ngSubmit)="sign()">
   <mat-form-field class="form__input">
     <input matInput placeholder="Full name" formControlName="name">

src/app/modules/auth/components/sign-form/sign-form.component.scss

@@ -21,3 +21,156 @@
     box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
   }
 }
+
+.notification {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  height: 45px;
+  border-radius: 45px;
+
+  &_solid {
+    &-pink {
+      background-color: $pink;
+    }
+
+    &-blue {
+      background-color: $blue;
+    }
+
+    &-green {
+      background-color: $green;
+    }
+
+    &-yellow {
+      background-color: $yellow;
+    }
+
+    &-violet {
+      background-color: $violet;
+    }
+  }
+
+  &_transparent {
+    &-pink {
+      background-color: $pink-15;
+    }
+
+    &-blue {
+      background-color: $blue-15;
+    }
+
+    &-green {
+      background-color: $green-15;
+    }
+
+    &-yellow {
+      background-color: $yellow-15;
+    }
+
+    &-violet {
+      background-color: $violet-15;
+    }
+  }
+
+  &__title {
+    margin: 0;
+
+    &_white {
+      color: $white;
+    }
+  }
+
+  &__icon-wrapper {
+    height: 45px;
+    width: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &_transparent {
+      color: $white-80;
+
+      &-pink {
+        color: $pink;
+      }
+
+      &-blue {
+        color: $blue;
+      }
+
+      &-green {
+        color: $green;
+      }
+
+      &-yellow {
+        color: $yellow;
+      }
+
+      &-violet {
+        color: $violet;
+      }
+    }
+
+    &_solid {
+      &-pink {
+        color: $pink;
+      }
+
+      &-blue {
+        color: $blue;
+      }
+
+      &-green {
+        color: $green;
+      }
+
+      &-yellow {
+        color: $yellow;
+      }
+
+      &-violet {
+        color: $violet;
+      }
+    }
+  }
+
+  &__icon-wrapper-circle {
+    height: 45px;
+    width: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 45px;
+    margin-right: 16px;
+
+    &_transparent {
+      &-pink {
+        color: $pink;
+        background-color: $pink-15;
+      }
+
+      &-blue {
+        color: $blue;
+        background-color: $blue-15;
+      }
+
+      &-green {
+        color: $green;
+        background-color:$green-15;
+      }
+
+      &-yellow {
+        color: $yellow;
+        background-color: $yellow-15;
+      }
+
+      &-violet {
+        color: $violet;
+        background-color: $violet-15;
+      }
+    }
+  }
+}