Add donut front-end form

Src/WebController/UI/src/components/modals/CreateRelay.vue

@@ -2,9 +2,7 @@
   <div class="c3modal-body">
     <div class="c3modal-details">
       <h1>Relay Setup</h1>
-      <p>
-        Please setup a Relay.
-      </p>
+      <p>Please setup a Relay.</p>
       <Input
         legend="Name / Auto Generated ID"
         class="form-element"
@@ -22,7 +20,7 @@
           legend="TargetSuffix"
           class="form-element"
           :selected="selectedTargetSuffix"
-          :options="{ dll: 'dll', exe: 'exe' }"
+          :options="{ dll: 'dll', exe: 'exe', shellcode: 'shellcode'}"
           :border="true"
           @change="changeTargetSuffix($event, targetSuffix)"
         />
@@ -35,11 +33,12 @@
           @change="changeArchitecture($event, architecture)"
         />
       </div>
+      <div class="c3modal-form">
+        <DonutForm v-if="donutSelected" @change="changeDonutForm($event, formData)" />
+      </div>
       <div class="c3modal-form">
         <h1>Add Command</h1>
-        <p>
-          Please Select the first command to the Relay.
-        </p>
+        <p>Please Select the first command to the Relay.</p>
         <CommandCenterModal
           class="embeded-modal"
           :target-id="'new'"
@@ -49,16 +48,12 @@
         />
       </div>
       <dir class="flex-row c3modal-actions">
-        <button class="c3btn c3btn--grey" v-on:click.self="closeThisModal()">
-          Cancel
-        </button>
+        <button class="c3btn c3btn--grey" v-on:click.self="closeThisModal()">Cancel</button>
         <button
           class="c3btn c3btn"
           v-on:click="createNewRelay()"
           :disabled="formIsValid"
-        >
-          Create and Download Relay
-        </button>
+        >Create and Download Relay</button>
       </dir>
     </div>
   </div>
@@ -79,6 +74,7 @@ import {
 import C3 from '@/c3';
 import Input from '@/components/form/Input.vue';
 import Select from '@/components/form/Select.vue';
+import DonutForm from '@/components/partial/DonutForm.vue';
 import GeneralForm from '@/components/form/GeneralForm.vue';
 import AddChannelForm from '@/components/form/AddChannelForm.vue';
 import CommandCenterModal from './CommandCenter.vue';
@@ -91,6 +87,7 @@ const C3OptionsModule = namespace('optionsModule');
   components: {
     Input,
     Select,
+    DonutForm,
     GeneralForm,
     CommandCenterModal
   }
@@ -111,6 +108,8 @@ export default class CreateRelayModal extends Mixins(C3) {
   public architecture: string = 'x64';
   public commandGroup: string = 'Relay';
   public commandTarget: string = '';
+  public donutSelected: boolean = false;
+  public donutFormData: object = {};
 
   get formIsValid() {
     return !this.isValid;
@@ -205,8 +204,17 @@ export default class CreateRelayModal extends Mixins(C3) {
     this.formData = data.data;
   }
 
+  public changeDonutForm(data: any): void {
+    this.donutFormData = data;
+  }
+
   public changeTargetSuffix(t: string): void {
     this.targetSuffix = t;
+    if (this.targetSuffix === 'shellcode') {
+      this.donutSelected = true;
+    } else {
+      this.donutSelected = false;
+    }
   }
 
   public changeArchitecture(a: string): void {
@@ -219,7 +227,8 @@ export default class CreateRelayModal extends Mixins(C3) {
       architecture: this.selectedArchitecture,
       parentGatewayBuildId: this.gatewayBuildsId,
       name: this.relayName,
-      startupCommands: [this.formData]
+      startupCommands: [this.formData],
+      donut: this.donutFormData
     };
     axios({
       url: '/api/build/customize',

Src/WebController/UI/src/components/partial/DonutForm.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="donut-form">
+    <h1>Add Command</h1>
+    <Select
+      legend="Format"
+      class="form-element line"
+      :selected="selectedFormat"
+      :options="{
+        Binary: 'Binary',
+        Base64: 'Base64',
+        Ruby: 'Ruby',
+        C: 'C',
+        Python: 'Python',
+        Powershell: 'Powershell',
+        Csharp: 'Csharp',
+        HeX: 'HeX'
+      }"
+      :border="true"
+      @change="changeFormat($event, format)"
+    />
+    <Select
+      legend="Compress"
+      class="form-element half-line"
+      :selected="selectedCompress"
+      :options="{
+        None: 'None',
+        Lznt1: 'Lznt1',
+        Xpress: 'Xpress',
+        Xpress_huff: 'Xpress_huff'
+      }"
+      :border="true"
+      @change="changeCompress($event, compress)"
+    />
+    <Select
+      legend="Entropy"
+      class="form-element half-line"
+      :selected="selectedEntropy"
+      :options="{
+        None: 'None',
+        Random: 'Random',
+        Default: 'Default'
+      }"
+      :border="true"
+      @change="changeEntropy($event, entropy)"
+    />
+    <Select
+      legend="ExitOpt"
+      class="form-element half-line"
+      :selected="selectedExitOpt"
+      :options="{
+        Exit_thread: 'Exit_thread',
+        Exit_process: 'Exit_process'
+      }"
+      :border="true"
+      @change="changeExitOpt($event, exitOpt)"
+    />
+    <Select
+      legend="Bypass"
+      class="form-element half-line"
+      :selected="selectedBypass"
+      :options="{
+        None: 'None',
+        Abort: 'Abort',
+        Continue: 'Continue'
+      }"
+      :border="true"
+      @change="changeBypass($event, bypass)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { namespace } from 'vuex-class';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import C3 from '@/c3';
+import Select from '../form/Select.vue';
+
+@Component({
+  components: {
+    Select
+  }
+})
+export default class DonutForm extends Vue {
+  public format: string = 'Binary';
+  public compress: string = 'None';
+  public entropy: string = 'Default';
+  public exitOpt: string = 'Exit_thread';
+  public bypass: string = 'None';
+
+  get selectedFormat() {
+    return this.format;
+  }
+
+  public changeFormat(a: string): void {
+    this.format = a;
+    this.emitDonut();
+  }
+
+  get selectedCompress() {
+    return this.compress;
+  }
+
+  public changeCompress(a: string): void {
+    this.compress = a;
+    this.emitDonut();
+  }
+
+  get selectedEntropy() {
+    return this.entropy;
+  }
+
+  public changeEntropy(a: string): void {
+    this.entropy = a;
+    this.emitDonut();
+  }
+
+  get selectedExitOpt() {
+    return this.exitOpt;
+  }
+
+  public changeExitOpt(a: string): void {
+    this.exitOpt = a;
+    this.emitDonut();
+  }
+
+  get selectedBypass() {
+    return this.bypass;
+  }
+
+  public changeBypass(a: string): void {
+    this.bypass = a;
+    this.emitDonut();
+  }
+
+  public emitDonut(): void {
+    const donut = {
+      format: this.format.toUpperCase(),
+      compress: this.compress.toUpperCase(),
+      entropy: this.entropy.toUpperCase(),
+      exitOpt: this.exitOpt.toUpperCase(),
+      bypass: this.bypass.toUpperCase()
+    };
+
+    this.$emit('change', donut);
+  }
+
+  public mounted(): void {
+    this.emitDonut();
+  }
+}
+</script>
+
+<style scoped lang="sass">
+@import '~@/scss/colors.scss'
+.donut-form
+  display: flex
+  flex-wrap: wrap
+  justify-content: space-between
+  h1
+    width: 100%
+  .line
+    width: 100%
+  .half-line
+    max-width: 48%
+    width: 48%
+</style>