[CSS] Reorganize mission visual (#120)

* side-panel-size-shadow fix * final front_makeover mission-single * final front_makeover mission-single * Update README.md * [FEAT] add i18n spanish, french and english (#117) * feat: add locale es, en and fr * fix: get language before navigate * start to add translation, arab and russian coming soon too * start to add arab * fix after review * update field * continue * start to add russian * update keys and fix document generation * peer programming with @darkweak * vuln translation * fix vuln-id into database Co-authored-by: Houziaux mike / Jenaye <jenaye@protonmail.com> * [Design] new design login (#118) * feat: new login design * fix: background overlap * side-panel-size-shadow fix * final front_makeover mission-single * final front_makeover mission-single * Update README.md * fix merge issues #2 * fix button effect padding to avoid having element groups moving on hover * removing misplaced php entity Co-authored-by: Adrian Sanchis Gallego <sanchis1992@gmail.com> Co-authored-by: Houziaux mike / Jenaye <jenaye@protonmail.com>
matro7sh · Jun 11, 2021 · efc6985 · efc6985
1 parent 2a15539
commit efc6985
Show file tree

Hide file tree

Showing 15 changed files with 304 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -184,8 +184,9 @@ docker-compose exec php sh
 - SilouFr  - https://github.com/orgs/CMEPW/people/SilouFr
 - sanchis  - https://github.com/sanchis
 - RayMoDev  - https://github.com/RayMoDev
+- Log_s - https://rmrf-logs.com/man-log_s/
 
 
 # Official Discord Channel
 
-[![Porchetta Industries](https://discordapp.com/api/guilds/736724457258745996/widget.png?style=banner3)](https://discord.gg/sEkn3aa)
+[![Porchetta Industries](https://discordapp.com/api/guilds/736724457258745996/widget.png?style=banner3)](https://discord.gg/sEkn3aa)
diff --git a/api/src/Entity/Host.php b/api/src/Entity/Host.php
@@ -54,7 +54,7 @@ class Host
 
     /**
      * @ORM\Column(type="string", length=255)
-     * @Groups({"MissionSingleOutput", "Host:output", "HostVuln:output"})
+     * @Groups({"MissionSingleOutput", "Host:output", "HostVuln:output", "HostDashboard"})
      * @Assert\AtLeastOneOf({
      *     @AppConstraint\Ip(message="The server name must be at least a valid IP."),
      *     @Assert\Hostname(message="The server name must be at least a valid hostname."),
@@ -70,7 +70,7 @@ class Host
 
     /**
      * @ORM\Column(type="boolean", options={"default":0}, nullable=false)
-     * @Groups({"MissionSingleOutput"})
+     * @Groups({"MissionSingleOutput", "HostDashboard"})
      */
     private $checked;
 

diff --git a/api/src/Entity/Mission.php b/api/src/Entity/Mission.php
@@ -41,13 +41,13 @@ class Mission
      * @ORM\Id
      * @ORM\GeneratedValue
      * @ORM\Column(type="integer")
-     * @Groups({"Mission", "MissionSingleOutput", "User"})
+     * @Groups({"Mission", "MissionSingleOutput", "User", "HostDashboard"})
      */
     private $id;
 
     /**
      * @ORM\Column(type="string", length=255)
-     * @Groups({"Mission", "MissionSingleOutput", "User"})
+     * @Groups({"Mission", "MissionSingleOutput", "User", "HostDashboard"})
      */
     private $name;
 
@@ -88,7 +88,7 @@ class Mission
 
     /**
      * @ORM\OneToMany(targetEntity=Host::class, mappedBy="mission", cascade={"remove"})
-     * @Groups({"Mission", "MissionSingleOutput"})
+     * @Groups({"Mission", "MissionSingleOutput", "HostDashboard"})
      */
     private $hosts;
 

diff --git a/api/src/Entity/User.php b/api/src/Entity/User.php
@@ -23,7 +23,10 @@
  *      },
  *      itemOperations={
  *          "delete"={"security"="is_granted('ROLE_ADMIN')"},
- *          "get"={"security"="is_granted('ROLE_USER_GET_ITEM', object)"},
+ *          "get"={
+ *      "normalization_context"={"groups"={"HostDashboard"}},
+ *     "security"="is_granted('ROLE_USER_GET_ITEM', object)"
+ * },
  *          "patch"={"security"="is_granted('ROLE_USER_PATCH', object)"},
  *          "put"={"security"="is_granted('ROLE_USER_PUT', object)"}
  *      },
@@ -46,7 +49,7 @@ class User implements UserInterface
 
     /**
      * @ORM\Column(type="string", length=180, unique=true)
-     * @Groups({"User", "MissionSingleOutput"})
+     * @Groups({"User", "MissionSingleOutput", "HostDashboard"})
      */
     private $username;
 
@@ -58,7 +61,7 @@ class User implements UserInterface
 
     /**
      * @ORM\Column(name="enabled", type="boolean", options={"default":true}, nullable=true)
-     * @Groups({"User"})
+     * @Groups({"User", "HostDashboard", "HostDashboard"})
      */
     protected $enabled;
 
@@ -71,31 +74,31 @@ class User implements UserInterface
 
     /**
      * @ORM\ManyToMany(targetEntity=Mission::class, inversedBy="users")
-     * @Groups({"User"})
+     * @Groups({"User", "HostDashboard"})
      */
     private $missions;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
-     * @Groups({"User", "MissionSingleOutput"})
+     * @Groups({"User", "MissionSingleOutput", "HostDashboard"})
      */
     private $phone;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
-     * @Groups({"User", "MissionSingleOutput"})
+     * @Groups({"User", "MissionSingleOutput", "HostDashboard"})
      */
     private $trigram;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
-     * @Groups({"User", "MissionSingleOutput"})
+     * @Groups({"User", "MissionSingleOutput", "HostDashboard"})
      */
     private $mail;
 
     /**
      * @ORM\Column(type="string", length=255, nullable=true)
-     * @Groups({"User", "MissionSingleOutput"})
+     * @Groups({"User", "MissionSingleOutput", "HostDashboard"})
      */
     private $city;
 

diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
@@ -24,8 +24,9 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatRadioModule } from '@angular/material/radio';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatChipsModule } from '@angular/material/chips';
-
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MissionSingleComponent } from './components/mission-single/mission-single.component';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -74,6 +75,7 @@ import { StepsService } from './services/steps.service';
 import { GenericListComponent } from 'src/app/components/generic/list/generic-list.component';
 import { ThemeService } from './services/theme.service';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import { PopupComponent } from './components/popup/popup.component';
 import { MediaObjectsService } from 'src/app/services/mediaObjects.service';
 import { MediasService } from 'src/app/services/medias.service';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -95,6 +97,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     MissionSingleComponent,
     SideBarComponent,
     UsersListComponent,
+    PopupComponent,
     UserSingleComponent,
     HomepageComponent,
     UserCreateComponent,
@@ -116,6 +119,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     ClientEditComponent,
     ClientCreateComponent,
     EditVulnWithStateComponent,
+    PopupComponent,
   ],
   imports: [
     BrowserModule,
@@ -125,6 +129,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     NgxMatNativeDateModule,
     MatDatepickerModule,
     MatTabsModule,
+    MatProgressBarModule,
     HttpClientModule,
     MatChipsModule,
     MatNativeDateModule,
@@ -141,6 +146,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     MatToolbarModule,
     MatCardModule,
     MatFormFieldModule,
+    MatDialogModule,
     MatSidenavModule,
     BrowserModule,
     MatCheckboxModule,

diff --git a/client/src/app/components/impact-create/impact-create.component.ts b/client/src/app/components/impact-create/impact-create.component.ts
@@ -21,7 +21,7 @@ export class ImpactCreateComponent implements OnInit {
 
   ngOnInit(): void {}
 
-  openSnackBar(message) {
+  openSnackBar(message: string): void {
     this._snackBar.open(message, '', {
       duration: this.durationInSeconds * 1000,
     });

diff --git a/client/src/app/components/mission-my/mission-my.component.html b/client/src/app/components/mission-my/mission-my.component.html
@@ -11,7 +11,17 @@ <h1 data-cy="title">{{ 'dashboard.WELCOME' | translate }} </h1>
             <mat-list>
                 <mat-list-item *ngFor="let mission of missions">
                     <mat-icon mat-list-icon>label_important</mat-icon>
-                    <div mat-line data-cy="mission">{{mission.name}} - <button mat-raised-button color="accent" [routerLink]="['/missions/',mission.id]" data-cy="show-mission">{{ 'button.SHOW' | translate }}</button> - <button mat-raised-button (click)="editMission(mission.id)" data-cy="edit-mission">{{ 'button.EDIT' | translate }}</button></div>
+                    <div mat-line data-cy="mission" class="responsive_row">
+                        <div>{{mission.name}}</div>
+                        <div class="row">
+                            <mat-icon mat-list-icon color="accent" class="clickableIcon" style="margin-left: 0.5em;" [routerLink]="['/missions/',mission.id]" data-cy="show-mission" class="clickable">remove_red_eye</mat-icon>
+                            <mat-icon mat-list-icon color="accent" class="clickableIcon" style="margin-left: 0.5em;" (click)="editMission(mission.id)" data-cy="edit-mission" class="clickable">edit</mat-icon>
+                            <div class="row">
+                                <mat-progress-bar mode="determinate" class="progress-bar" value={{mission.current}}></mat-progress-bar>
+                                <span class="progress-text">{{mission.current}} %</span>
+                            </div>
+                        </div>
+                    </div>
                 </mat-list-item>
                 <mat-divider></mat-divider>
             </mat-list>

diff --git a/client/src/app/components/mission-my/mission-my.component.scss b/client/src/app/components/mission-my/mission-my.component.scss
@@ -0,0 +1,27 @@
+.row {
+    display: flex !important;
+    flex-direction: row;
+    align-items: center;
+}
+
+.responsive_row {
+    display: flex !important;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.clickable:hover {
+    cursor: pointer;
+}
+
+.progress-bar {
+    width: 10em;
+    margin-left: 1em;
+}
+
+.progress-text {
+    width: 2em;
+    padding: 1em;
+}
diff --git a/client/src/app/components/mission-my/mission-my.component.ts b/client/src/app/components/mission-my/mission-my.component.ts
@@ -28,8 +28,13 @@ export class MissionMyComponent implements OnInit {
     const decode = atob(token.split('.')[1]);
     const id = JSON.parse(decode).user.split('/').pop();
     this.roles = JSON.parse(decode).roles;
-    this.usersServices.getDataById(id).subscribe((res) => {
-      this.missions = res.missions;
+    this.usersServices.getDataById(id).subscribe(({ missions }) => {
+      this.missions = missions.map(({ hosts, name, id }) => ({
+        name,
+        current:
+          (hosts.filter(({ checked }) => checked).length / hosts.length) * 100,
+        id,
+      }));
     });
   }