Skip to content

Commit

Permalink
Dark mode + bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Nicklaus McClendon committed Jul 24, 2023
1 parent 0900810 commit 585d33d
Show file tree
Hide file tree
Showing 10 changed files with 241 additions and 24 deletions.
28 changes: 28 additions & 0 deletions .github/workflows/build-main.yml
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions assets/scss/main.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "theme.scss";

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

Expand Down
113 changes: 113 additions & 0 deletions assets/scss/theme.scss
Original file line number Diff line number Diff line change
@@ -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;
}
31 changes: 29 additions & 2 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -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>
Expand Down Expand Up @@ -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: {
Expand Down
41 changes: 35 additions & 6 deletions src/components/CreateTask/TimeLimitInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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()
}
}
}
}
}
Expand Down
26 changes: 15 additions & 11 deletions src/components/UploadFileModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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')">
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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()
Expand Down
4 changes: 3 additions & 1 deletion src/components/UsersSelection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -31,7 +32,8 @@ export default {
data () {
return {
loading: false,
users: []
users: [],
internal_value: []
}
},
Expand Down
7 changes: 5 additions & 2 deletions src/i18n/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -127,6 +128,7 @@
"status": "Status",
"error": "Error",
"created_at": "Created At",
"timeout_at": "Timeout At",
"language": "Language",
"task_name": "Task Name",
"delete": "Delete",
Expand All @@ -139,7 +141,8 @@
"license": "License",
"submit": "Submit",
"please_wait": "Please wait...",
"disabled": "Disabled"
"disabled": "Disabled",
"never": "Never"
},
"upload_modal": {
"engine": "Engine",
Expand Down
4 changes: 2 additions & 2 deletions src/views/CreateTask.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down Expand Up @@ -428,7 +428,7 @@ export default {
selectedDevices: [],
additionalUsers: [],
priority: 1,
taskTimeLimit: null
taskTimeLimit: '172800'
}
},
Expand Down
9 changes: 9 additions & 0 deletions src/views/TaskStatus.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 585d33d

Please sign in to comment.