Init

src/app/views/contracts/contracts.component.html

@@ -0,0 +1,15 @@
+<h1 class="ms-3">
+  <mat-icon class="me-2">request_quote</mat-icon>
+  Contracts
+</h1>
+<mat-divider></mat-divider>
+<div>
+  <mat-selection-list [multiple]="false">
+    <mat-list-option *ngFor="let c of contracts">
+      <mat-icon matListItemIcon class="me-3">{{c.icon}}</mat-icon>
+      <div class="fw-bold">{{c.name}}</div>
+      <div>{{c.description}}</div>
+      <div *ngIf="c.accepted" class="text-muted">Accepted</div>
+    </mat-list-option>
+  </mat-selection-list>
+</div>

src/app/views/contracts/contracts.component.ts

@@ -0,0 +1,23 @@
+import { Component } from "@angular/core";
+
+export type Contract = {
+  icon: string,
+  name: string,
+  description: string,
+  accepted?: boolean
+}
+
+@Component({
+  selector: 'hn-contracts',
+  templateUrl: './contracts.component.html'
+})
+export class ContractsComponent {
+  contracts: Contract[] = [
+    {icon: 'wifi_disable', name: 'Crack Network', description: 'Gain unauthorized access to a network'},
+    {icon: 'currency_bitcoin', name: 'Steel Wallet', description: 'Hack into a server & retrieve a crypto-wallet'},
+    {icon: 'bug_report', name: 'Deploy Trojan', description: 'Gain full access to a target server'},
+    {icon: 'keyboard_hide', name: 'Deploy Keylogger', description: 'Deploy a keylogger to collect valuable intel'},
+    {icon: 'delete', name: 'Delete Data', description: 'Delete some sensitive files on a remove server'},
+    {icon: 'file_copy', name: 'Steel Data', description: 'Copy some sensitive data without being detected'},
+  ]
+}

src/app/views/firewall/firewall.component.html

@@ -0,0 +1,23 @@
+<h1 class="ms-3">
+  <mat-icon>local_fire_department</mat-icon>
+  Firewall
+</h1>
+<mat-divider></mat-divider>
+<div class="d-flex align-items-center">
+  <div class="p-3">
+    <mat-form-field apperence="fill">
+      <mat-label>Rule Name</mat-label>
+      <input matInput type="text">
+    </mat-form-field>
+  </div>
+  <div class="p-3">
+    <mat-form-field apperence="fill">
+      <mat-label>Port</mat-label>
+      <input matInput type="number">
+    </mat-form-field>
+  </div>
+  <div class="pb-3">
+    <mat-checkbox [checked]="true">Enabled</mat-checkbox>
+  </div>
+</div>
+<a class="p-3 text-decoration-underline">+ New Rule</a>

src/app/views/firewall/firewall.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: 'hn-firewall',
+  templateUrl: './firewall.component.html',
+})
+export class FirewallComponent { }

src/app/views/login/login.component.html

@@ -0,0 +1,17 @@
+<div class="d-flex justify-content-center mt-5 pt-5">
+  <div class="d-flex flex-column align-items-center">
+    <mat-icon style="font-size: 36px; height: 36px; width: 36px">web</mat-icon>
+    <mat-form-field class="mt-3">
+      <mat-label>Username</mat-label>
+      <input matInput type="text">
+    </mat-form-field>
+    <mat-form-field class="mt-3">
+      <mat-label>Password</mat-label>
+      <input matInput type="password">
+    </mat-form-field>
+    <div class="d-flex w-100 mt-3 justify-content-between">
+      <button mat-button>Register</button>
+      <button mat-raised-button>Login</button>
+    </div>
+  </div>
+</div>

src/app/views/login/login.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'hn-login',
+  templateUrl: './login.component.html'
+})
+export class LoginComponent { }

src/app/views/networks/networks.component.html

@@ -0,0 +1,29 @@
+<h1 class="ms-3">
+  <mat-icon class="me-2">wifi</mat-icon>
+  Networks
+</h1>
+<mat-progress-bar mode="indeterminate"></mat-progress-bar>
+<div>
+  <mat-selection-list [multiple]="false">
+    <mat-list-option *ngIf="connected" selected>
+      <mat-icon matListItemIcon>network_wifi_{{connected.strength}}_bar</mat-icon>
+      {{connected.name}}
+      <div class="text-muted">Connected</div>
+    </mat-list-option>
+    <mat-list-option *ngFor="let n of discovered">
+      <mat-icon matListItemIcon>network_wifi_{{n.strength}}_bar</mat-icon>
+      {{n.name}}
+    </mat-list-option>
+  </mat-selection-list>
+</div>
+<h2 class="ms-3">
+  <mat-icon class="me-2">vpn_key</mat-icon>
+  VPN
+</h2>
+<mat-divider></mat-divider>
+<mat-list>
+  <mat-list-item *ngFor="let n of tunnled">
+    <mat-icon matListItemIcon>link</mat-icon>
+    {{n.name}}
+  </mat-list-item>
+</mat-list>

src/app/views/networks/networks.component.ts

@@ -0,0 +1,22 @@
+import { Component } from "@angular/core";
+
+export type Network = {
+  strength: number,
+  name: string,
+}
+
+@Component({
+  selector: 'hn-networks',
+  templateUrl: './networks.component.html'
+})
+export class NetworksComponent {
+  connected: Network = {strength: 3, name: 'OutraNet'}
+  discovered: Network[] = [
+    {strength: 4, name: 'SkyNet'},
+    {strength: 2, name: 'FBI Survelence Van'},
+    {strength: 3, name: 'Bat Cave'},
+  ]
+  tunnled: Network[] = [
+    {strength: 3, name: 'Bat Cave'},
+  ]
+}

src/app/views/terminal/terminal.component.html

@@ -0,0 +1,141 @@
+<style>
+    .console {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    .console-input {
+        display: flex;
+    }
+
+    .console-input-prompt {
+        padding-right: 0.55em;
+    }
+
+    .console-input-field {
+        border: none;
+        outline: none;
+        font-size: 1rem;
+        background-color: rgba(0, 0, 0, 0);
+        color: #0f0;
+        font-family: monospace;
+        flex-grow: 1;
+        padding: 0;
+    }
+
+    .console-output {
+        flex-grow: 1;
+    }
+
+    .console-output-line {
+        margin: 0;
+        padding: 0;
+        min-height: 1.25rem;
+    }
+</style>
+<script>
+    window.cli = {};
+</script>
+<script>
+    window.cli['clear'] = {
+      autocomplete: () => {
+        return [];
+      },
+      help: () => {
+        return 'Clear console output';
+      },
+      run: args => {
+        output.innerHTML = '';
+      }
+    }
+</script>
+<script>
+    window.cli['echo'] = {
+      autocomplete: () => {
+        return [];
+      },
+      help: () => {
+        return 'Output text to console';
+      },
+      run: args => {
+        return args.join(' ');
+      }
+    }
+</script>
+<script>
+    window.cli['exit'] = {
+      autocomplete: () => {
+        return [];
+      },
+      help: () => {
+        return 'End session';
+      },
+      run: args => {
+        process('clear');
+        history = [];
+        historyIndex = 0;
+        header();
+      }
+    }
+</script>
+<script>
+    window.cli['help'] = {
+      autocomplete: () => {
+        return [];
+      },
+      help: () => {
+        return 'Display all commands';
+      },
+      run: args => {
+        return Object.keys(window.cli).map(command => `${command} - ${window.cli[command].help()}`).join('<br>') + '<br><br>';
+      }
+    }
+</script>
+<script>
+    window.cli['hostname'] = {
+      autocomplete: () => {
+        return [];
+      },
+      help: () => {
+        return 'Get computer hostname';
+      },
+      run: args => {
+        return 'localhost'
+      }
+    }
+</script>
+<script>
+    window.cli['man'] = {
+      autocomplete: () => {
+        return [];
+      },
+      help: () => {
+        return 'Command manual';
+      },
+      run: args => {
+        return window.cli[args[0]].help();
+      }
+    }
+</script>
+<script>
+    window.cli['whoami'] = {
+      autocomplete: () => {
+        return [];
+      },
+      help: () => {
+        return 'Get username';
+      },
+      run: args => {
+        return 'root'
+      }
+    }
+</script>
+
+<div class="console" (click)="inputEl.focus()">
+    <div class="console-output"></div>
+    <div class="console-input">
+        <div class="console-input-prompt">root@localhost:~ #</div>
+        <input #inputEl class="console-input-field" type="text" autofocus (blur)="inputEl.focus()" (keyup.enter)="enter()">
+    </div>
+</div>

src/app/views/terminal/terminal.component.ts

@@ -0,0 +1,97 @@
+import {AfterViewInit, Component} from "@angular/core";
+
+@Component({
+  selector: 'hn-terminal',
+  templateUrl: './terminal.component.html'
+})
+export class TerminalComponent implements AfterViewInit {
+  output: any;
+  input: any;
+
+  history: string[] = [];
+  historyIndex = 0;
+
+  ngAfterViewInit() {
+    this.output = document.getElementsByClassName('console-output')[0];
+    this.input = document.getElementsByClassName('console-input-field')[0];
+    setTimeout(() => this.banner(), 1000);
+  }
+
+  banner() {
+    this.stdOut('Konsole 0.1.0 LTS localhost tty1<br><br>localhost login: root<br>password:<br><br>');
+  }
+
+  disableInput() {
+    this.input.disabled = true;
+//    document.getElementsByClassName('console-input-prompt')[0].style.visibility = 'hidden';
+  }
+
+  enableInput() {
+    this.input.disabled = false;
+    this.input.focus();
+//    document.getElementsByClassName('console-input-prompt')[0].style.visibility = 'visible';
+  }
+
+  process(command: string) {
+    (Array.isArray(command) ? command.join(' ') : command).split(';').filter(c => !!c).forEach(c => {
+      const parts = c.split(' ').filter(c => !!c);
+      if((<any>window).cli[parts[0]] == undefined || (<any>window).cli[parts[0]].run == undefined) {
+        this.stdErr(`${parts[0]}: command not found`);
+      } else {
+        try {
+          const out = (<any>window).cli[parts[0]].run(parts.slice(1));
+          if(!!out) this.stdOut(out);
+        } catch(err) {
+          console.error(err)
+          this.stdErr(`${parts[0]}: exited with a non-zero status`);
+        }
+      }
+    });
+  }
+
+  stdErr(text: string) {
+    const p: any = document.createElement('p');
+    p.classList = 'console-output-line error';
+    p.innerText = text;
+    this.output.appendChild(p);
+  }
+
+  stdOut(text: string, html=true) {
+    const p: any = document.createElement('p');
+    p.classList = 'console-output-line';
+    p[html ? 'innerHTML' : 'innerText'] = text;
+    this.output.appendChild(p);
+  }
+
+  enter() {
+    this.disableInput();
+    const inputValue: string = this.input.value;
+    this.input.value = '';
+    this.stdOut(`root@localhost:~ # ${inputValue}`, false);
+    if(!!inputValue) {
+      this.history.push(inputValue);
+      this.historyIndex = history.length;
+      this.process(inputValue)
+    }
+    this.enableInput();
+//    if(event.key == "Enter") {
+//
+//    } else if(event.key == 'Up' || event.key == 'ArrowUp') {
+//      if(historyIndex > 0) historyIndex--;
+//      input.value = historyIndex == history.length ? '' : history[historyIndex];
+//      setTimeout(() => {
+//        const end = input.value.length;
+//        input.setSelectionRange(end, end);
+//        input.focus();
+//        }, 1)
+//    } else if(event.key == 'Down' || event.key == 'ArrowDown') {
+//      if(historyIndex < history.length) historyIndex++;
+//      input.value = historyIndex == history.length ? '' : history[historyIndex];
+//      setTimeout(() => {
+//        const end = input.value.length;
+//        input.setSelectionRange(end, end);
+//        input.focus();
+//        }, 1)
+//    }
+  }
+}