Skip to content

Commit a6f0b87

Browse files
kulinacskulinacs
committed
Dark mode + bug fixes
1 parent 0900810 commit a6f0b87

File tree

10 files changed

+241
-24
lines changed

10 files changed

+241
-24
lines changed

‎.github/workflows/build-main.yml

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name: Build master
2+
3+
on:
4+
push:
5+
branches: [ master ]
6+
7+
jobs:
8+
build:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v3
12+
13+
- name: Setup Node
14+
uses: actions/setup-node@v3
15+
with:
16+
node-version: 12
17+
18+
- name: Install dependencies
19+
run: yarn install
20+
21+
- name: Build UI
22+
run: yarn build
23+
24+
- name: Upload release package
25+
uses: actions/upload-artifact@v3
26+
with:
27+
name: dist
28+
path: dist

‎assets/scss/main.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "theme.scss";
2+
13
@import 'node_modules/bootstrap/scss/bootstrap';
24
@import 'node_modules/bootstrap-vue/src/index.scss';
35

‎assets/scss/theme.scss

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
:root {
2+
--theme-dark-bg: #343a40;
3+
--theme-border-color: #dee2e6;
4+
--theme-bg-color: #fff;
5+
--theme-body-color: #212529;
6+
--theme-card-bg: #fff;
7+
--theme-card-border-color: rgba(00, 00, 00, .125);
8+
--theme-card-cap-bg: rgba(00, 00, 00, .03);
9+
--theme-hr-border-color: rgba(00, 00, 00, .1);
10+
--theme-input-bg: #fff;
11+
--theme-input-border-color: #ced4da;
12+
--theme-input-color: #495057;
13+
--theme-input-disabled-bg: #e9ecef;
14+
--theme-input-group-addon-bg: #e9ecef;
15+
--theme-dropdown-bg: #fff;
16+
--theme-dropdown-link-color: #212529;
17+
--theme-table-accent-bg: rgba(00, 00, 00, .05);
18+
}
19+
20+
:root[data-theme="dark"] {
21+
--theme-dark-bg: rgba(00, 00, 00, .09);
22+
--theme-border-color: #343a40;
23+
--theme-bg-color: #212529;
24+
--theme-body-color: #fff;
25+
--theme-card-bg: #212529;
26+
--theme-card-border-color: rgba(00, 00, 00, .5);
27+
--theme-card-cap-bg: rgba(00, 00, 00, .12);
28+
--theme-hr-border-color: rgba(00, 00, 00, .4);
29+
--theme-input-bg: #343a40;
30+
--theme-input-border-color: rgba(00, 00, 00, .4);
31+
--theme-input-color: #f8f9fa;
32+
--theme-input-disabled-bg: #212529;
33+
--theme-input-group-addon-bg: #111215;
34+
--theme-dropdown-bg: #343a40;
35+
--theme-dropdown-link-color: #fff;
36+
--theme-table-accent-bg: rgba(00, 00, 00, .2);
37+
}
38+
39+
// Body
40+
$body-bg: var(--theme-bg-color);
41+
$body-color: var(--theme-body-color);
42+
43+
// Components
44+
//
45+
// Define common padding and border radius sizes and more.
46+
$border-color: var(--theme-border-color);
47+
48+
// Cards
49+
$card-bg: var(--theme-card-bg);
50+
$card-border-color: var(--theme-card-border-color);
51+
$card-cap-bg: var(--theme-card-cap-bg);
52+
53+
// Typography
54+
$hr-border-color: var(--theme-hr-border-color);
55+
56+
// Forms
57+
$input-bg: var(--theme-input-bg);
58+
$input-border-color: var(--theme-input-border-color);
59+
$input-disabled-bg: var(--theme-input-disabled-bg);
60+
$input-color: var(--theme-input-color);
61+
$input-group-addon-bg: var(--theme-input-group-addon-bg);
62+
63+
// Dropdowns
64+
//
65+
// Dropdown menu container and contents.
66+
$dropdown-bg: var(--theme-dropdown-bg);
67+
$dropdown-link-color: var(--theme-dropdown-link-color);
68+
69+
// Tables
70+
//
71+
// Customizes the `.table` component with basic values, each used across all table variations.
72+
$table-accent-bg: var(--theme-table-accent-bg);
73+
74+
// Modals
75+
$modal-content-bg: var(--theme-bg-color);
76+
77+
.theme-dark {
78+
background-color: var(--theme-dark-bg);
79+
}
80+
81+
.multiselect {
82+
.multiselect__single {
83+
background: var(--theme-input-bg);
84+
border-color: var(--theme-input-border-color);
85+
color: var(--theme-input-color);
86+
}
87+
88+
.multiselect__tags {
89+
background: var(--theme-input-bg);
90+
border-color: var(--theme-input-border-color);
91+
color: var(--theme-input-color);
92+
}
93+
94+
.multiselect__input {
95+
background: var(--theme-input-bg);
96+
border-color: var(--theme-input-border-color);
97+
color: var(--theme-input-color);
98+
}
99+
100+
.multiselect__content-wrapper {
101+
background: var(--theme-input-bg);
102+
border-color: var(--theme-input-border-color);
103+
color: var(--theme-input-color);
104+
}
105+
106+
.multiselect__spinner {
107+
background: var(--theme-input-bg);
108+
}
109+
}
110+
111+
.page-link {
112+
background: var(--theme-input-bg) !important;
113+
}

‎src/App.vue

+29-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<b-navbar toggleable="md" type="dark" variant="dark">
3+
<b-navbar toggleable="md" type="dark" class="theme-dark">
44
<b-nav-toggle target="nav_collapse"></b-nav-toggle>
55
<b-navbar-brand to="/">{{ $t('name') }}</b-navbar-brand>
66

@@ -27,6 +27,19 @@
2727
</b-nav-form>
2828

2929
<b-nav-item-dropdown :text="getAuthDetails.username" right>
30+
<b-dropdown-form>
31+
<b-form-checkbox
32+
id="dark-mode"
33+
v-model="theme"
34+
name="dark-mode"
35+
value="dark"
36+
unchecked-value=""
37+
switch
38+
class="ml-2"
39+
>
40+
{{ $t("navbar.dark_mode") }}
41+
</b-form-checkbox>
42+
</b-dropdown-form>
3043
<b-dropdown-item to="/users/edit" exact><i class="fa fa-edit" aria-hidden="true"></i> {{ $t('shared.edit_settings') }}</b-dropdown-item>
3144
<b-dropdown-item @click="logout"><i class="fa fa-sign-out-alt" aria-hidden="true"></i> {{ $t('shared.logout') }}</b-dropdown-item>
3245
</b-nav-item-dropdown>
@@ -76,7 +89,21 @@ export default {
7689
'userIsLoggedIn',
7790
'isAdministrator',
7891
'getAuthDetails'
79-
])
92+
]),
93+
94+
theme: {
95+
get: function () {
96+
return localStorage.getItem('theme')
97+
},
98+
set: function (theme) {
99+
document.documentElement.dataset.theme = theme
100+
localStorage.setItem('theme', theme)
101+
}
102+
}
103+
},
104+
105+
mounted () {
106+
document.documentElement.dataset.theme = this.theme
80107
},
81108
82109
methods: {

‎src/components/CreateTask/TimeLimitInput.vue

+35-6
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,42 @@
1616
</template>
1717

1818
<script>
19-
import { chCompValidator } from '@/mixins'
20-
2119
export default {
22-
mixins: [chCompValidator],
23-
data () {
24-
return {
25-
text: '172,800'
20+
props: {
21+
v: {
22+
type: Object,
23+
default: null
24+
},
25+
26+
value: {
27+
type: String,
28+
default: null
29+
}
30+
},
31+
32+
computed: {
33+
state () {
34+
// Do we have a validator?
35+
if (this.v === null) {
36+
return null
37+
}
38+
39+
// Check our validity from the parent validator
40+
return this.v.$dirty ? !this.v.$invalid && !this.v.$error : null
41+
},
42+
internalValue: {
43+
// getter
44+
get: function () {
45+
return this.value
46+
},
47+
// setter
48+
set: function (newValue) {
49+
this.$emit('input', newValue)
50+
51+
if (this.v !== null) {
52+
this.v.$touch()
53+
}
54+
}
2655
}
2756
}
2857
}

‎src/components/UploadFileModal.vue

+15-11
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,19 @@
3636

3737
<!-- Display the options for a shared file if we're not a task file -->
3838
<template v-if="!isTaskFile">
39-
<b-form-group id="isFileShared" label-for="isFileShared"
39+
<b-form-group id="isFileShared" label-for="is-file-shared"
4040
:description="$t('upload_modal.description_is_shared')">
41-
<b-form-checkbox
42-
id="isFileShared"
43-
v-model="selectedOptions.isFileShared"
44-
value="true"
45-
unchecked-value="false"
46-
>
47-
{{ $t('upload_modal.is_shared')}}
48-
</b-form-checkbox>
41+
42+
<b-form-checkbox
43+
id="is-file-shared"
44+
v-model="selectedOptions.isFileShared"
45+
name="is-file-shared"
46+
value="true"
47+
unchecked-value="false"
48+
>
49+
{{ $t('upload_modal.is_shared')}}
50+
</b-form-checkbox>
51+
4952
</b-form-group>
5053

5154
<b-form-group id="selectFileType" label-for="selectFileType" :label="$t('shared.file_type')">
@@ -123,7 +126,7 @@ export default {
123126
file_type: apitypes.ENGINE_FILE_TYPES[0],
124127
selectedEngineForTask: (this.isTaskFile ? apitypes.TASK_FILE_FOR_ENGINE[1] : null),
125128
hashcat_type: null,
126-
isFileShared: 'no'
129+
isFileShared: 'false'
127130
},
128131
hashcatTypeDropdown: {
129132
loading: false,
@@ -160,7 +163,8 @@ export default {
160163
this.selectedOptions = {
161164
file_type: apitypes.ENGINE_FILE_TYPES[0],
162165
selectedEngineForTask: (this.isTaskFile ? apitypes.TASK_FILE_FOR_ENGINE[1] : null),
163-
hashcat_type: null
166+
hashcat_type: null,
167+
isFileShared: 'false'
164168
}
165169
this.uploadProgress = 0
166170
this.$refs.uploadFileInput.reset()

‎src/components/UsersSelection.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
label="username"
1212
id="additionalUsers"
1313
placeholder="Add a user"
14+
v-model="internal_value"
1415
@open="onUsersSelectOpen"
1516
@input="onInput" />
1617
<small class="form-text text-muted">{{ $t('create_task.description_users') }}</small>
@@ -31,7 +32,8 @@ export default {
3132
data () {
3233
return {
3334
loading: false,
34-
users: []
35+
users: [],
36+
internal_value: []
3537
}
3638
},
3739

‎src/i18n/en-US.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"admin": "Admin Settings",
1010
"users": "Users",
1111
"edit_user": "Edit User",
12-
"version": "Version"
12+
"version": "Version",
13+
"dark_mode": "Dark Mode"
1314
},
1415
"login": {
1516
"header": "Log In",
@@ -127,6 +128,7 @@
127128
"status": "Status",
128129
"error": "Error",
129130
"created_at": "Created At",
131+
"timeout_at": "Timeout At",
130132
"language": "Language",
131133
"task_name": "Task Name",
132134
"delete": "Delete",
@@ -139,7 +141,8 @@
139141
"license": "License",
140142
"submit": "Submit",
141143
"please_wait": "Please wait...",
142-
"disabled": "Disabled"
144+
"disabled": "Disabled",
145+
"never": "Never"
143146
},
144147
"upload_modal": {
145148
"engine": "Engine",

‎src/views/CreateTask.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,7 @@ export default {
290290
priority: this.priority
291291
}
292292
293-
if (this.taskTimeLimit !== null) {
293+
if (this.taskTimeLimit !== null && this.taskTimeLimit !== '') {
294294
payload.task_duration = parseInt(this.taskTimeLimit)
295295
}
296296
@@ -428,7 +428,7 @@ export default {
428428
selectedDevices: [],
429429
additionalUsers: [],
430430
priority: 1,
431-
taskTimeLimit: null
431+
taskTimeLimit: '172800'
432432
}
433433
},
434434

‎src/views/TaskStatus.vue

+9
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,15 @@
6060
<td>{{ $t('shared.created_at') }}</td>
6161
<td>{{ new Date(taskInfo.info.created_at).toString() }} </td>
6262
</tr>
63+
<tr>
64+
<td>{{ $t('shared.timeout_at') }}</td>
65+
<td v-if="taskInfo.info.task_duration !== undefined && taskInfo.info.task_duration !== null && taskInfo.info.task_duration !== 0">
66+
{{ new Date(new Date(taskInfo.info.created_at).getTime() + (1000 * taskInfo.info.task_duration)).toString() }}
67+
</td>
68+
<td v-else>
69+
{{ $t('shared.never') }}
70+
</td>
71+
</tr>
6372
<tr>
6473
<td>{{ $t('shared.engine') }}</td>
6574
<td>{{ taskInfo.info.engine }}</td>

0 commit comments

Comments
 (0)