redesigning of the resource component with dialog popup

Author: azharanees

gui/README.md

@@ -4,15 +4,17 @@
 **IN DEVELOPMENT**
 
 ## Description
-Added Charts to the History Page and Added table for downloading reports.
+Added initial Authentication for the dashboard.
 
 
 # Todos 
 - Report Table Dynamic Fetching
 - Upload Code
-- Improvements in Settings
+- Improvements in Authentication
 - Improvements in Profile
+- Improvements in Settings
 - Other issue fixing related to theme
+- Auth Guard
 
 
 
@@ -22,8 +24,11 @@ Added Charts to the History Page and Added table for downloading reports.
 ## Impacted Areas in Application
 General components of the application that this PR will affect:
 
-* Tool Component
-* Material Module
+* Login Component
+* app routing Module
+* User Model
+* app Module
+* History Module
 * Readme
 
 

gui/package-lock.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "~7.0.0",
     "@angular/platform-browser-dynamic": "~7.0.0",
     "@angular/router": "~7.0.0",
+    "angular-bootstrap-md": "^7.5.4",
     "angular-chart.js": "^1.1.1",
     "bootstrap": "^4.3.1",
     "chart.js": "^2.8.0",

gui/package.json

@@ -8,6 +8,7 @@ import { ResourcesComponent } from './view/resources/resources.component';
 import { SettingsComponent } from './view/settings/settings.component';
 import { SupportComponent } from './view/support/support.component';
 import { ToolsComponent } from './view/tools/tools.component';
+
 import { Top10Component } from './view/tools/top10/top10.component';
 
 const routes: Routes = [

gui/src/app/app-routing.module.ts

@@ -1,3 +1,6 @@
+
+
+
 <mat-toolbar >
     <div><button mat-icon-button>
 <img src="/assets/img/OWASP-Logo-White.png" width=60 alt="OWASP LOGO">
@@ -6,38 +9,8 @@
   <div>RISK ASSESSMENT FRAMEWORK</div>
 
   </mat-toolbar>
-<mat-drawer-container hasBackdrop="false">
-    <mat-drawer  opened="true" mode="push" true >
-        <mat-nav-list>
-
-            <div mat-list-item class="avatarDiv">
-              <mat-icon>security</mat-icon>
-            </div>
-            <a mat-list-item routerLink="home"  routerLinkActive="activeLink">
-              <mat-icon>dashboard</mat-icon>
-              <span class="nav-caption">Home</span></a>
-            <a mat-list-item routerLink="tools" routerLinkActive="activeLink">
-              <mat-icon>build</mat-icon>
-              <span class="nav-caption">Tools</span></a>
-            <a mat-list-item routerLink="history" routerLinkActive="activeLink">
-              <mat-icon>access_time</mat-icon>
-              <span class="nav-caption">History</span></a>
-            <a mat-list-item routerLink="profile" routerLinkActive="activeLink">
-              <mat-icon>person</mat-icon>
-              <span class="nav-caption">Profile</span></a>
-            <a mat-list-item routerLink="resources" routerLinkActive="activeLink">
-              <mat-icon>all_inbox</mat-icon>
-              <span class="nav-caption">Resources</span></a>
-            <a mat-list-item routerLink="settings" routerLinkActive="activeLink">
-              <mat-icon>settings</mat-icon>
-              <span class="nav-caption">Settings</span></a>
-            <a mat-list-item routerLink="support" routerLinkActive="activeLink">
-              <mat-icon>help</mat-icon>
-              <span class="nav-caption">Support</span></a>
-         </mat-nav-list>
+  
+  <!-- <app-login *ngIf="!isAuth"></app-login> -->
+  <app-navigation *ngIf="!isAuth"></app-navigation>
+  <router-outlet *ngIf="!isAuth"></router-outlet>
 
-    </mat-drawer>
-    <mat-drawer-content>
-              <router-outlet></router-outlet>
-    </mat-drawer-content>
-  </mat-drawer-container>

gui/src/app/app.component.html

@@ -1,13 +1,31 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core';
+import { AuthService } from './auth/auth.service';
+import { Subscription } from 'rxjs';
+
+
+
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy {
   title = 'dashboard';
   openSidenav = false;
 
+  isAuth = false;
+  authSubscription: Subscription;
+  constructor(private authService: AuthService) {
 
+  }
+ngOnDestroy() {
+  this.authSubscription.unsubscribe();
+}
+
+ngOnInit() {
+this.authService.authChange.subscribe(authStatus => {
+this.isAuth = authStatus;
+});
+}
 }

gui/src/app/app.component.ts

@@ -17,6 +17,10 @@ import { EmbedVideo } from 'ngx-embed-video';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { Top10Component } from './view/tools/top10/top10.component';
 import { AuthService } from './auth/auth.service';
+import { NavigationComponent } from './view/navigation/navigation.component';
+import { DialogComponentComponent } from './view/resources/dialog-component/dialog-component.component';
+import { FormsModule } from '@angular/forms';
+
 
 
 @NgModule({
@@ -30,7 +34,10 @@ import { AuthService } from './auth/auth.service';
     SettingsComponent,
     ProfileComponent,
     SupportComponent,
-    Top10Component
+    Top10Component,
+    NavigationComponent,
+    DialogComponentComponent
+
   ],
   imports: [
     BrowserModule,
@@ -40,12 +47,13 @@ import { AuthService } from './auth/auth.service';
     HttpClientModule,
     EmbedVideo.forRoot(),
     FlexLayoutModule,
-
+   FormsModule
 
 
 
   ],
   providers: [AuthService],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [DialogComponentComponent]
 })
 export class AppModule { }

gui/src/app/app.module.ts

@@ -1,17 +1,36 @@
 import { Injectable } from '@angular/core';
 import { AuthData } from './auth-data.model';
 import { User } from './user.model';
+import { Subject } from 'rxjs';
+
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
-
+authChange = new Subject<boolean>();
   private user: User;
 login(authData: AuthData) {
   this.user = {
     email: authData.email,
     userId: '3'
   };
+  this.authChange.next(true);
+
+}
+
+logout() {
+  this.user = null;
+  this.authChange.next(false);
+
+}
+
+// tslint:disable-next-line: one-line
+registerUser(authData: AuthData){
+this.user = {
+  email: authData.email,
+  userId: Math.round(Math.random() * 10000).toString()
+};
+this.authChange.next(true);
 }
 
 getUser() {

gui/src/app/auth/auth.service.ts

@@ -4,16 +4,16 @@
 <mat-card class = "login-card">
 
 <h2>Login</h2>
-<form  (ngSubmit)="onSubmit()">
+<form (onsubmit)="onSubmit($event)"  >
     <div class="form-group">
         <label for="username">Username</label>
         <mat-form-field appearance="outline">
                 <mat-label>Username</mat-label>
                 <input matInput placeholder="Placeholder">
                 <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
                 <mat-hint>Hint</mat-hint>
-              </mat-form-field>        <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
-            <div *ngIf="f.username.errors.required">Username is required</div>
+              </mat-form-field>        <div  class="invalid-feedback">
+            <div>Username is required</div>
         </div>
     </div>
     <div class="form-group">
@@ -23,13 +23,13 @@ <h2>Login</h2>
                 <input type = "password" matInput placeholder="">
                 <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
                 <mat-hint>Hint</mat-hint>
-              </mat-form-field>        <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
-            <div *ngIf="f.password.errors.required">Password is required</div>
+              </mat-form-field>        <div class="invalid-feedback">
+            <div>Password is required</div>
         </div>
     </div>
     <div class="form-group">
-        <button mat-raised-button [disabled]="loading" color="accent">Login</button>
-        <a routerLink="/register" class="btn btn-link">Register</a>
+        <button mat-raised-button onClick="onSubmit($event)"color="accent">Login</button>
+        <!-- <a routerLink="/register" class="btn btn-link">Register</a> -->
     </div>
 </form>
 

gui/src/app/auth/login/login.component.html

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material';
 import { Router } from '@angular/router';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { AuthService } from '../auth.service';
 
 @Component({
@@ -13,17 +13,27 @@ export class LoginComponent implements OnInit {
   public  email  =  '';
   public  password  =  '';
 
-
+loginForm: FormGroup;
   constructor(private authService: AuthService) { }
 
-onSubmit() {
+onSubmit(event) {
+  event.preventDefault();
+  console.log('submit done');
 // this.authService.login({
 //   email: this.loginForm.value.email,
 //   password: this.loginForm.value.password
 // });
+
 }
 
   ngOnInit() {
+this.loginForm = new FormGroup({
+  email: new FormControl('', {
+    validators: [Validators.required, Validators.email]
+  }),
+  password: new FormControl('', {validators : [Validators.required]})
+});
+
   }
 
 }

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

@@ -10,6 +10,7 @@ import {MatCardModule,
      MatExpansionModule} from '@angular/material';
 import { AlertModule } from 'ngx-bootstrap';
 import {MatGridListModule} from '@angular/material/grid-list';
+import { ModalModule, WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md'
 import {MatTableModule} from '@angular/material/table';
 
 
@@ -25,12 +26,13 @@ import {MatTableModule} from '@angular/material/table';
        MatIconModule, MatFormFieldModule,
         MatCardModule, MatInputModule,
          AlertModule, MatTableModule, MatGridListModule, MatExpansionModule,
-         MatDialogModule, MatProgressBarModule  ],
+         MatDialogModule, MatProgressBarModule, ModalModule, WavesModule, InputsModule, ButtonsModule,
+         ModalModule.forRoot()],
     exports: [MatButtonModule, MatListModule, MatExpansionModule,
        MatToolbarModule, MatSidenavModule,
        MatIconModule, MatFormFieldModule,
        MatCardModule, MatTableModule, MatInputModule, AlertModule, MatGridListModule,
-       MatDialogModule, MatProgressBarModule ]
+       MatDialogModule, MatProgressBarModule, ModalModule, WavesModule, InputsModule, ButtonsModule,  ]
 
 })
 

gui/src/app/material.module.ts

@@ -0,0 +1,72 @@
+mat-drawer-container{
+  height: 100%;
+
+}
+
+mat-drawer{
+  width: 25%;
+  background-color: #070a19;
+
+
+}
+
+mat-drawer-content{
+  position: relative;
+  left: 3%;
+
+}
+
+mat-toolbar{
+  height: 8%;
+  background-color: #070a19;
+  position: sticky;
+  position: -webkit-sticky; /* For macOS/iOS Safari */
+  top: 0; /* Sets the sticky toolbar to be on top */
+  z-index: 1000}
+
+.nav-caption{
+  display: inline-block;
+  padding-left: 12px;
+}
+
+
+
+mat-nav-list{
+  background-color: #141831;
+
+  height: 100%;
+
+}
+
+mat-nav-list a:hover{
+  color:white ;
+  background-color:#040611;
+}
+
+mat-nav-list a.activeLink{
+  color:white ;
+  background-color: teal;
+  border: 1px solid #509A9D;
+
+}
+
+/* Avatar */
+.avatarDiv  {
+  text-align: left;
+  background-color:#040611;
+  position: relative;
+    top: -10px;
+
+
+
+}
+.avatarDiv mat-icon{
+  font-size: 20vw;
+  margin-left:8%;
+
+}
+
+
+.content{
+  margin-top: 3%;
+}