Dark mode + bug fixes

mandiant · Dec 12, 2023 · a6f0b87 · a6f0b87
1 parent 0900810
commit a6f0b87
Show file tree

Hide file tree

Showing 10 changed files with 241 additions and 24 deletions.
diff --git a/.github/workflows/build-main.yml b/.github/workflows/build-main.yml
@@ -0,0 +1,28 @@
+name: Build master
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Setup Node
+      uses: actions/setup-node@v3
+      with:
+        node-version: 12
+
+    - name: Install dependencies
+      run: yarn install
+
+    - name: Build UI
+      run: yarn build
+
+    - name: Upload release package
+      uses: actions/upload-artifact@v3
+      with:
+        name: dist
+        path: dist
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -1,3 +1,5 @@
+@import "theme.scss";
+
 @import 'node_modules/bootstrap/scss/bootstrap';
 @import 'node_modules/bootstrap-vue/src/index.scss';
 

diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
@@ -0,0 +1,113 @@
+:root {
+  --theme-dark-bg: #343a40;
+  --theme-border-color: #dee2e6;
+  --theme-bg-color: #fff;
+  --theme-body-color: #212529;
+  --theme-card-bg: #fff;
+  --theme-card-border-color: rgba(00, 00, 00, .125);
+  --theme-card-cap-bg: rgba(00, 00, 00, .03);
+  --theme-hr-border-color: rgba(00, 00, 00, .1);
+  --theme-input-bg: #fff;
+  --theme-input-border-color: #ced4da;
+  --theme-input-color: #495057;
+  --theme-input-disabled-bg: #e9ecef;
+  --theme-input-group-addon-bg: #e9ecef;
+  --theme-dropdown-bg: #fff;
+  --theme-dropdown-link-color: #212529;
+  --theme-table-accent-bg: rgba(00, 00, 00, .05);
+}
+
+:root[data-theme="dark"] {
+  --theme-dark-bg: rgba(00, 00, 00, .09);
+  --theme-border-color:  #343a40;
+  --theme-bg-color: #212529;
+  --theme-body-color: #fff;
+  --theme-card-bg: #212529;
+  --theme-card-border-color: rgba(00, 00, 00, .5);
+  --theme-card-cap-bg: rgba(00, 00, 00, .12);
+  --theme-hr-border-color: rgba(00, 00, 00, .4);
+  --theme-input-bg: #343a40;
+  --theme-input-border-color: rgba(00, 00, 00, .4);
+  --theme-input-color: #f8f9fa;
+  --theme-input-disabled-bg: #212529;
+  --theme-input-group-addon-bg: #111215;
+  --theme-dropdown-bg: #343a40;
+  --theme-dropdown-link-color: #fff;
+  --theme-table-accent-bg: rgba(00, 00, 00, .2);
+}
+
+// Body
+$body-bg:    var(--theme-bg-color);
+$body-color: var(--theme-body-color);
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+$border-color: var(--theme-border-color);
+
+// Cards
+$card-bg:           var(--theme-card-bg);
+$card-border-color: var(--theme-card-border-color);
+$card-cap-bg:       var(--theme-card-cap-bg);
+
+// Typography
+$hr-border-color: var(--theme-hr-border-color);
+
+// Forms
+$input-bg:              var(--theme-input-bg);
+$input-border-color:    var(--theme-input-border-color);
+$input-disabled-bg:     var(--theme-input-disabled-bg);
+$input-color:           var(--theme-input-color);
+$input-group-addon-bg: var(--theme-input-group-addon-bg);
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+$dropdown-bg:         var(--theme-dropdown-bg);
+$dropdown-link-color: var(--theme-dropdown-link-color);
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+$table-accent-bg: var(--theme-table-accent-bg);
+
+// Modals
+$modal-content-bg: var(--theme-bg-color);
+
+.theme-dark {
+    background-color: var(--theme-dark-bg);
+}
+
+.multiselect {
+  .multiselect__single {
+    background: var(--theme-input-bg);
+    border-color: var(--theme-input-border-color);
+    color: var(--theme-input-color);
+  }
+
+  .multiselect__tags {
+    background: var(--theme-input-bg);
+    border-color: var(--theme-input-border-color);
+    color: var(--theme-input-color);
+  }
+
+  .multiselect__input {
+    background: var(--theme-input-bg);
+    border-color: var(--theme-input-border-color);
+    color: var(--theme-input-color);
+  }
+
+  .multiselect__content-wrapper {
+    background: var(--theme-input-bg);
+    border-color: var(--theme-input-border-color);
+    color: var(--theme-input-color);
+  }
+
+  .multiselect__spinner {
+    background: var(--theme-input-bg);
+  }
+}
+
+.page-link {
+    background: var(--theme-input-bg) !important;
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <b-navbar toggleable="md" type="dark" variant="dark">
+    <b-navbar toggleable="md" type="dark" class="theme-dark">
       <b-nav-toggle target="nav_collapse"></b-nav-toggle>
       <b-navbar-brand to="/">{{ $t('name') }}</b-navbar-brand>
 
@@ -27,6 +27,19 @@
           </b-nav-form>
 
           <b-nav-item-dropdown :text="getAuthDetails.username" right>
+            <b-dropdown-form>
+              <b-form-checkbox
+                id="dark-mode"
+                v-model="theme"
+                name="dark-mode"
+                value="dark"
+                unchecked-value=""
+                switch
+                class="ml-2"
+              >
+                {{ $t("navbar.dark_mode") }}
+              </b-form-checkbox>
+            </b-dropdown-form>
             <b-dropdown-item to="/users/edit" exact><i class="fa fa-edit" aria-hidden="true"></i> {{ $t('shared.edit_settings') }}</b-dropdown-item>
             <b-dropdown-item @click="logout"><i class="fa fa-sign-out-alt" aria-hidden="true"></i> {{ $t('shared.logout') }}</b-dropdown-item>
           </b-nav-item-dropdown>
@@ -76,7 +89,21 @@ export default {
       'userIsLoggedIn',
       'isAdministrator',
       'getAuthDetails'
-    ])
+    ]),
+
+    theme: {
+      get: function () {
+        return localStorage.getItem('theme')
+      },
+      set: function (theme) {
+        document.documentElement.dataset.theme = theme
+        localStorage.setItem('theme', theme)
+      }
+    }
+  },
+
+  mounted () {
+    document.documentElement.dataset.theme = this.theme
   },
 
   methods: {

diff --git a/src/components/CreateTask/TimeLimitInput.vue b/src/components/CreateTask/TimeLimitInput.vue
@@ -16,13 +16,42 @@
 </template>
 
 <script>
-import { chCompValidator } from '@/mixins'
-
 export default {
-  mixins: [chCompValidator],
-  data () {
-    return {
-      text: '172,800'
+  props: {
+    v: {
+      type: Object,
+      default: null
+    },
+
+    value: {
+      type: String,
+      default: null
+    }
+  },
+
+  computed: {
+    state () {
+      // Do we have a validator?
+      if (this.v === null) {
+        return null
+      }
+
+      // Check our validity from the parent validator
+      return this.v.$dirty ? !this.v.$invalid && !this.v.$error : null
+    },
+    internalValue: {
+      // getter
+      get: function () {
+        return this.value
+      },
+      // setter
+      set: function (newValue) {
+        this.$emit('input', newValue)
+
+        if (this.v !== null) {
+          this.v.$touch()
+        }
+      }
     }
   }
 }

diff --git a/src/components/UploadFileModal.vue b/src/components/UploadFileModal.vue
@@ -36,16 +36,19 @@
 
       <!-- Display the options for a shared file if we're not a task file -->
       <template v-if="!isTaskFile">
-        <b-form-group id="isFileShared" label-for="isFileShared"
+        <b-form-group id="isFileShared" label-for="is-file-shared"
                       :description="$t('upload_modal.description_is_shared')">
-          <b-form-checkbox
-            id="isFileShared"
-            v-model="selectedOptions.isFileShared"
-            value="true"
-            unchecked-value="false"
-          >
-            {{ $t('upload_modal.is_shared')}}
-          </b-form-checkbox>
+
+        <b-form-checkbox
+          id="is-file-shared"
+          v-model="selectedOptions.isFileShared"
+          name="is-file-shared"
+          value="true"
+          unchecked-value="false"
+        >
+          {{ $t('upload_modal.is_shared')}}
+        </b-form-checkbox>
+
         </b-form-group>
 
         <b-form-group id="selectFileType" label-for="selectFileType" :label="$t('shared.file_type')">
@@ -123,7 +126,7 @@ export default {
         file_type: apitypes.ENGINE_FILE_TYPES[0],
         selectedEngineForTask: (this.isTaskFile ? apitypes.TASK_FILE_FOR_ENGINE[1] : null),
         hashcat_type: null,
-        isFileShared: 'no'
+        isFileShared: 'false'
       },
       hashcatTypeDropdown: {
         loading: false,
@@ -160,7 +163,8 @@ export default {
       this.selectedOptions = {
         file_type: apitypes.ENGINE_FILE_TYPES[0],
         selectedEngineForTask: (this.isTaskFile ? apitypes.TASK_FILE_FOR_ENGINE[1] : null),
-        hashcat_type: null
+        hashcat_type: null,
+        isFileShared: 'false'
       }
       this.uploadProgress = 0
       this.$refs.uploadFileInput.reset()

diff --git a/src/components/UsersSelection.vue b/src/components/UsersSelection.vue
@@ -11,6 +11,7 @@
         label="username"
         id="additionalUsers"
         placeholder="Add a user"
+        v-model="internal_value"
         @open="onUsersSelectOpen"
         @input="onInput" />
       <small class="form-text text-muted">{{ $t('create_task.description_users') }}</small>
@@ -31,7 +32,8 @@ export default {
   data () {
     return {
       loading: false,
-      users: []
+      users: [],
+      internal_value: []
     }
   },
 

diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
@@ -9,7 +9,8 @@
         "admin": "Admin Settings",
         "users": "Users",
         "edit_user": "Edit User",
-        "version": "Version"
+        "version": "Version",
+        "dark_mode": "Dark Mode"
     },
     "login": {
         "header": "Log In",
@@ -127,6 +128,7 @@
         "status": "Status",
         "error": "Error",
         "created_at": "Created At",
+        "timeout_at": "Timeout At",
         "language": "Language",
         "task_name": "Task Name",
         "delete": "Delete",
@@ -139,7 +141,8 @@
         "license": "License",
         "submit": "Submit",
         "please_wait": "Please wait...",
-        "disabled": "Disabled"
+        "disabled": "Disabled",
+        "never": "Never"
     },
     "upload_modal": {
         "engine": "Engine",

diff --git a/src/views/CreateTask.vue b/src/views/CreateTask.vue
@@ -290,7 +290,7 @@ export default {
         priority: this.priority
       }
 
-      if (this.taskTimeLimit !== null) {
+      if (this.taskTimeLimit !== null && this.taskTimeLimit !== '') {
         payload.task_duration = parseInt(this.taskTimeLimit)
       }
 
@@ -428,7 +428,7 @@ export default {
       selectedDevices: [],
       additionalUsers: [],
       priority: 1,
-      taskTimeLimit: null
+      taskTimeLimit: '172800'
     }
   },
 

diff --git a/src/views/TaskStatus.vue b/src/views/TaskStatus.vue
@@ -60,6 +60,15 @@
                     <td>{{ $t('shared.created_at') }}</td>
                     <td>{{ new Date(taskInfo.info.created_at).toString() }} </td>
                   </tr>
+                  <tr>
+                    <td>{{ $t('shared.timeout_at') }}</td>
+                    <td v-if="taskInfo.info.task_duration !== undefined && taskInfo.info.task_duration !== null && taskInfo.info.task_duration !== 0">
+                      {{ new Date(new Date(taskInfo.info.created_at).getTime() + (1000 * taskInfo.info.task_duration)).toString() }}
+                    </td>
+                    <td v-else>
+                      {{ $t('shared.never') }}
+                    </td>
+                  </tr>
                   <tr>
                     <td>{{ $t('shared.engine') }}</td>
                     <td>{{ taskInfo.info.engine }}</td>