login, approval

build.gradle

 plugins {
   id 'java'
   id "com.github.node-gradle.node" version "2.2.4"
-
   id 'war'
 }
 
@@ -11,8 +10,8 @@ repositories {
 }
 
 node {
-  version = '12.18.2'
-  npmVersion = '7.15.0'
+  version = '14.15.5'
+  npmVersion = '6.14.11'
   download = true
 }
 

src/app/app-routing.module.ts

@@ -3,18 +3,25 @@ import { RouterModule, Routes } from '@angular/router';
 import {HomeComponent} from './component/home/home.component';
 import {ResourceComponent} from "./component/resource/resource.component";
 import {AddResourceComponent} from "./component/add-resource/add-resource.component";
+import {ApproveResourceComponent} from "./component/approve-resource/approve-resource.component";
+import {LoginComponent} from "./component/login/login.component";
+import {AuthGuard} from "./guard/auth.guard";
 
 const routes: Routes = [
   {path: '', component: HomeComponent, pathMatch: 'full'},
-  {path: 'home', component: HomeComponent, pathMatch: 'full'},
+  {path: 'home', component: HomeComponent, pathMatch: 'full',runGuardsAndResolvers: 'always'},
+  {path:'resource/approve', component:ApproveResourceComponent, pathMatch:'full',canActivate:[AuthGuard]},
   {path:'resource/add', component:AddResourceComponent, pathMatch:'full'},
-  {path:'resource/:id', component:ResourceComponent, pathMatch:'full'}
+  {path:'resource/:id', component:ResourceComponent, pathMatch:'full'},
+  {path:'login', component:LoginComponent, pathMatch:'full'},
+
+
 
 
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes,{ onSameUrlNavigation: 'reload' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

-<p-menubar>
-  <ng-template pTemplate="start">
-    <img src="assets/logo-white.png" height="50" class="p-mr-2" routerLink="/home"alt="brand logo">
-  </ng-template>
-  <ng-template pTemplate="end">
-    <p-button label="Login" icon="pi pi-login" iconPos="left" styleClass="buttonColor"></p-button>
-  </ng-template>
-</p-menubar>
-
-    <div class="container-fluid py-4">
+<app-header-menu></app-header-menu>
+<div class="container-fluid py-4">
   <router-outlet></router-outlet>
-    </div>
+</div>

src/app/app.component.ts

-import {Component, ViewEncapsulation} from '@angular/core';
-import {MenuItem, PrimeNGConfig} from "primeng/api";
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {LogoutAction, UserState} from "./states/user.state";
+import {filter, takeUntil} from "rxjs/operators";
+import {NavigationEnd, Router} from "@angular/router";
+import {MenuItem, MessageService, PrimeNGConfig} from "primeng/api";
+import {Select, Store} from "@ngxs/store";
+import {Observable, Subject} from "rxjs";
+import {User} from "./model/user";
+
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'ipmworks-web';
-  items: MenuItem[] = [] ;
-  constructor(private primengConfig: PrimeNGConfig) { }
 
-  ngOnInit() {
+export class AppComponent{
+  title = 'ipmworks-web';
+  constructor(private primengConfig: PrimeNGConfig, private store: Store, private router: Router,private messageService: MessageService) {}
 
-  }
 }
+
+
+

src/app/app.module.ts

@@ -10,11 +10,11 @@ import {HomeComponent} from './component/home/home.component';
 import {AccordionModule} from 'primeng/accordion';
 import {MessageService, SharedModule} from "primeng/api";
 import {CheckboxModule} from 'primeng/checkbox';
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {DataViewModule} from "primeng/dataview";
 import {RatingModule} from "primeng/rating";
 import {RouterModule} from "@angular/router";
-import {HttpClientModule} from "@angular/common/http";
+import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
 import {MultiSelectModule} from 'primeng/multiselect';
 import {DropdownModule} from "primeng/dropdown";
 import {InputTextModule} from "primeng/inputtext";
@@ -34,8 +34,19 @@ import {PanelModule} from "primeng/panel";
 import {HashLocationStrategy, LocationStrategy} from "@angular/common";
 import {CascadeSelectModule} from 'primeng/cascadeselect';
 import {DialogModule} from 'primeng/dialog';
-
-
+import { ApproveResourceComponent } from './component/approve-resource/approve-resource.component';
+import {TableModule} from "primeng/table";
+import { LoginComponent } from './component/login/login.component';
+import {NgxsStoragePluginModule} from '@ngxs/storage-plugin';
+import {NgxsModule} from '@ngxs/store';
+import {UserState} from "./states/user.state";
+import {environment} from "../environments/environment";
+import {AuthInterceptor} from "./guard/auth.interceptor";
+import { HeaderMenuComponent } from './component/header-menu/header-menu.component';
+import {ImageModule} from "primeng/image";
+import {ConfirmPopupModule} from 'primeng/confirmpopup';
+import {ConfirmationService} from 'primeng/api';
+import {ConfirmDialogModule} from "primeng/confirmdialog";
 
 
 @NgModule({
@@ -43,7 +54,10 @@ import {DialogModule} from 'primeng/dialog';
     AppComponent,
     HomeComponent,
     ResourceComponent,
-    AddResourceComponent
+    AddResourceComponent,
+    ApproveResourceComponent,
+    LoginComponent,
+    HeaderMenuComponent
   ],
   imports: [
     BrowserModule,
@@ -78,10 +92,22 @@ import {DialogModule} from 'primeng/dialog';
     ToastModule,
     PanelModule,
     CascadeSelectModule,
-        DialogModule
+    DialogModule,
+    TableModule,
+    NgxsModule.forRoot([UserState], {developmentMode: !environment.production}),
+    NgxsStoragePluginModule.forRoot(),
+    ReactiveFormsModule,
+    ToastModule,
+    ImageModule,
+    ConfirmPopupModule,
+    ConfirmDialogModule
   ],
-  providers: [MessageService,{
+  providers: [MessageService,ConfirmationService,{
     provide: LocationStrategy, useClass: HashLocationStrategy,
+  },{
+    provide: HTTP_INTERCEPTORS,
+    useClass: AuthInterceptor,
+    multi: true
   }],
   bootstrap: [AppComponent]
 })

src/app/component/add-resource/add-resource.component.css

-.button-center{
-  display: flex;
-  justify-content: space-around;
-}
+

src/app/component/add-resource/add-resource.component.html

@@ -164,8 +164,9 @@
        </div>
      </div>
    </div>
-   <div class="col-12 pt-3 button-center">
-     <p-button  label="Save resource" icon="pi pi-save"[loading]="false" [disabled]="resourceForm.form.invalid" (submit)="saveResource();resourceForm.control.markAsTouched()"></p-button>
+   <div class="col-12 pt-3 justify-content-center flex" >
+     <p-button  label="Back" icon="pi pi-step-backward"  class="pr-5"routerLink="/home" type="button" ></p-button>
+     <p-button  label="Save resource" icon="pi pi-save" [loading]="false" type="submit" [disabled]="resourceForm.form.invalid"></p-button>
    </div>
    </form>
  </div>

src/app/component/add-resource/add-resource.component.ts

@@ -53,7 +53,7 @@ export class AddResourceComponent implements OnInit {
       this.resource = data;
         this.resourceService.addFiles(this.image, this.resourceContent, this.resource.idResource).subscribe(data => {
           this.messageService.add({severity: 'success', detail: 'Resource is saved, but need to be approved by administrator!'});
-          this.router.navigate(['/home']);
+          this.router.navigate(['/resource/add']);
 
         }, error => {
           this.messageService.add({severity: 'error', detail: 'Some error occurred!'})

src/app/component/approve-resource/approve-resource.component.html

 <div class="card pt-6 pl-6 pr-6">
-  <p class="text-3xl" i18n> Approve resources</p>
+  <p class="text-3xl"> Approve resources</p>
   <p-table [value]="resources" [paginator]="true" [rows]="10" >
     <ng-template pTemplate="header">
       <tr>
-        <th i18n>Resource name</th>
-        <th i18n>Resource type</th>
-        <th i18n>Creation date</th>
-        <th i18n>How resource added</th>
+        <th>Resource name</th>
+        <th>Resource type</th>
+        <th>Creation date</th>
         <th></th>
       </tr>
     </ng-template>
@@ -15,7 +14,6 @@
         <td>{{resource.resourceName}}</td>
         <td>{{resource.resourceType?.name}}</td>
         <td>{{resource.creationDate| date:"d.M.yyyy, h:mm a"}}</td>
-        <td i18n>Manually</td>
         <td>
           <button pButton type="button" routerLink="/resource/{{resource.idResource}}" icon="pi pi-pencil"></button>
         </td>

src/config/app.config.ts

@@ -6,21 +6,27 @@ export class AppConfig {
 
   public static ApiPaths = {
     getAllResources: `${AppConfig.Origin}/resource/getAllResources`,
+    getResourcesForApproval: `${AppConfig.Origin}/admin/getResourceForApproval`,
     getResource: `${AppConfig.Origin}/resource/get`,
+    approveResource: `${AppConfig.Origin}/admin/approve`,
+
     getFile: `${AppConfig.Origin}/resource/file`,
 
     saveResource: `${AppConfig.Origin}/resource/saveResource`,
+      searchResource: `${AppConfig.Origin}/resource/search`,
       addFile: `${AppConfig.Origin}/resource/add`,
 
 
     getAllLanguages: `${AppConfig.Origin}/codebooks/getAllLanguages`,
     getAllSectors: `${AppConfig.Origin}/codebooks/getAllSectors`,
-    getAllRegions: `${AppConfig.Origin}/codebooks/getAllRegions`,
+    getAllCountries: `${AppConfig.Origin}/codebooks/getAllCountries`,
     getAllResourceTypes: `${AppConfig.Origin}/codebooks/getAllResourceTypes`,
     getAllProjects: `${AppConfig.Origin}/codebooks/getAllProjects`,
     getAllPests: `${AppConfig.Origin}/codebooks/getAllPests`,
     getAllCrops: `${AppConfig.Origin}/codebooks/getAllCrops`,
-    getAllKeywords: `${AppConfig.Origin}/codebooks/getAllKeywords`
+    getAllKeywords: `${AppConfig.Origin}/codebooks/getAllKeywords`,
+
+    login:`${AppConfig.Origin}/authenticate`