fix: update sophos guide

Author: mjabascal10

frontend/src/app/app-module/guides/guide-sophos/guide-sophos.component.html

@@ -5,6 +5,63 @@ <h4 class="card-title mb-0 text-primary">
     </h4>
   </div>
 
+  <div class="card-body">
+    <p class="font-size-base">
+      Sophos Central has secured APIs available for customers. These allow the retrieval of event and alert data from
+      Sophos Central, for use in other systems.<br><br>
+
+    <h6 class="font-weight-semibold mt-3 mb-3">
+      How to send alert and event data to UTMStack:
+    </h6>
+    <ol class="setup_list">
+      <app-utm-list [items]="steps">
+        <ng-template stepTemplateRef let-step>
+          <li>
+            <app-step>
+              <span stepNumber>{{step.id}}</span>
+              <div [innerHtml]="step.name"></div>
+              <ng-container *ngIf="step.content">
+
+                <ng-template [ngIf]="step.content['images']">
+                  <app-utm-list [items]="step.content['images']">
+                    <ng-template stepTemplateRef let-image>
+                      <img [alt]="image.alt" class="step-img" [src]="image.src">
+                    </ng-template>
+                  </app-utm-list>
+                </ng-template>
+
+                <ng-template [ngIf]="step.content.id === 'stepContent5'">
+                  <app-int-generic-group-config [moduleId]="integrationId"
+                                                (configValidChange)="configValidChange($event)"
+                                                [serverId]="serverId"></app-int-generic-group-config>
+                </ng-template>
+
+                <ng-template [ngIf]="step.content.id === 'stepContent3'">
+                  <div  class="mt-3">
+                    <app-app-module-activate-button [module]="module.SOPHOS" [type]="'integration'"
+                                                    [disabled]="configValidity"
+                                                    [serverId]="serverId">
+                    </app-app-module-activate-button>
+                  </div>
+                </ng-template>
+
+              </ng-container>
+            </app-step>
+          </li>
+        </ng-template>
+      </app-utm-list>
+    </ol>
+  </div>
+</div>
+
+
+<!--<div class="w-100 h-100">
+  <div class="card-header d-flex justify-content-between align-items-center">
+    <h4 class="card-title mb-0 text-primary">
+      Sophos Central
+    </h4>
+  </div>
+
   <div class="card-body">
     <p class="font-size-base">
       Sophos Central has secured APIs available for customers. These allow the retrieval of event and alert data from
@@ -72,4 +129,4 @@ <h6 class="font-weight-semibold mt-3 mb-3">
       </li>
     </ol>
   </div>
-</div>
+</div>-->

frontend/src/app/app-module/guides/guide-sophos/guide-sophos.component.ts

@@ -1,5 +1,9 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {UtmModulesEnum} from '../../shared/enum/utm-module.enum';
+import {AS400STEPS} from "../guide-as400/as400.steps";
+import {ACTIONS, PLATFORM} from "../guide-as400/constants";
+import {Step} from "../shared/step";
+import {SOPHOS_STEPS} from "./sophos.steps";
 
 @Component({
   selector: 'app-guide-sophos',
@@ -11,6 +15,9 @@ export class GuideSophosComponent implements OnInit {
   @Input() serverId: number;
   module = UtmModulesEnum;
   configValidity: boolean;
+  steps = SOPHOS_STEPS;
+  platforms = PLATFORM;
+  actions = ACTIONS;
 
   constructor() {
   }
@@ -21,5 +28,4 @@ export class GuideSophosComponent implements OnInit {
   configValidChange($event: boolean) {
     this.configValidity = !$event;
   }
-
 }

frontend/src/app/app-module/guides/guide-sophos/sophos.steps.ts

@@ -0,0 +1,31 @@
+import {Step} from '../shared/step';
+
+export const SOPHOS_STEPS: Step[] = [
+  {id: '1', name: 'You require a Client ID and Client Secret to access event data via the API. ' +
+                  'In Sophos Central Admin, go to <strong> Global Settings > API Credentials Management </strong>. <br>',
+  },
+  {id: '2', name: 'To create a new credential, click Add Credential from the top-right corner of the screen'},
+  {id: '3', name: 'Enter a name and description for the credential, then select the role you want to assign and click Add.'},
+  {id: '4', name: 'Click Show Client Secret to view the Client ID and Client Secret, then click Copy to store them securely. <br>' +
+                  '<div class="w-100 alert alert-info alert-styled-right mb-3 alert-dismissible">' +
+                    'The Client Secret is only visible once. Ensure you copy and save it securely</div>',
+    content: {
+      id: 'stepContent4',
+      images: [{
+        alt: 'Client Secrets',
+        src: '../../../../assets/img/guides/sophos/sophos-step-4.png',
+      }]
+    }
+  },
+  {id: '5', name: 'Insert information in the following inputs.You can add more than one Sophos configuration ' +
+                  'by clicking on Add tenant button.',
+    content: {
+      id: 'stepContent5'
+    }
+  },
+  {id: '6', name: 'Click on the button shown below, to activate the UTMStack features related to this integration',
+    content: {
+      id: 'stepContent6'
+    }
+  }
+];