Skip to content

Commit

Permalink
Add configure stetps
Browse files Browse the repository at this point in the history
  • Loading branch information
@ingalls
ingalls committed Oct 7, 2024
1 parent 36dac1f commit 3b9a62f
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 36 deletions.
12 changes: 6 additions & 6 deletions api/web/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

74 changes: 69 additions & 5 deletions api/web/src/components/Configure.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
:error='errors.name'
label='Server Name'
placeholder='TAK Server Name'
description='Human Readable name for the server'
@keyup.enter='updateServer'
/>
</div>
Expand All @@ -41,6 +42,7 @@
v-model='body.url'
label='Server CoT API'
placeholder='ssl://ops.example.com:8089'
description='Streaming COT API - Usually on port 8089'
:error='errors.url'
@keyup.enter='updateServer'
/>
Expand All @@ -49,6 +51,7 @@
<TablerInput
v-model='body.api'
label='Server Marti API'
description='Marti API - Usually on port 8443'
placeholder='https://ops.example.com:8443'
:error='errors.api'
@keyup.enter='updateServer'
Expand All @@ -58,14 +61,56 @@
<div class='mb-2'>
<label class='mx-2'>Admin Certificate</label>
<CertificateP12
@certs='body.certs = $event'
v-if='!body.auth.cert || !body.auth.key'
@certs='body.auth = $event'
@err='err = $event'
/>

<template v-else>
<div class='col-12 d-flex align-items-center'>
<IconCheck
:size='40'
class='text-green'
/>
<span class='mx-3'>Certificate Uploaded</span>

<div class='ms-auto'>
<IconTrash
v-tooltip='"Remove Certificate"'
:size='32'
:stroke='1'
class='cursor-pointer'
@click='body.auth = { cert: "", key: "" };'
/>
</div>
</div>
</template>
</div>
<div class='mb-2'>
<TablerInput
v-model='body.api'
label='Administrator Username'
description='An existing TAK user to use as an initial CloudTAK System Administrator - The TAK Server must respond with a cert for this username/password combo'
autocomplete='username'
:error='errors.username'
@keyup.enter='updateServer'
/>
</div>
<div class='mb-2'>
<TablerInput
v-model='body.api'
label='Administrator Password'
description='An existing TAK user to use as an initial CloudTAK System Administrator - The TAK Server must respond with a cert for this username/password combo'
autocomplete='password'
:error='errors.password'
@keyup.enter='updateServer'
/>
</div>
<div class='form-footer'>
<button
type='submit'
class='btn btn-primary w-100'
:disabled='!body.auth.key'
@click='updateServer'
>
Configure Server
Expand All @@ -74,9 +119,6 @@
</template>
</div>
</div>
<div class='text-center text-muted mt-3'>
Don't have account yet? <a href='mailto:[email protected]'>Contact Us</a>
</div>
</div>
</div>
</div>
Expand All @@ -92,10 +134,16 @@ import {
TablerLoading,
TablerInput
} from '@tak-ps/vue-tabler'
import {
IconCheck,
IconTrash
} from '@tabler/icons-vue';
export default {
name: 'InitialConfigure',
components: {
IconCheck,
IconTrash,
CertificateP12,
TablerInput,
TablerLoading
Expand All @@ -105,14 +153,18 @@ export default {
loading: false,
errors: {
name: '',
username: '',
password: '',
url: '',
api: ''
},
body: {
name: '',
url: '',
api: '',
certs: {
username: '',
password: '',
auth: {
key: '',
cert: ''
}
Expand Down Expand Up @@ -140,6 +192,18 @@ export default {
this.errors.name = '';
}
if (this.body.username.trim().length === 0) {
this.errors.username = 'Username cannot be empty';
} else {
this.errors.username = '';
}
if (this.body.password.trim().length === 0) {
this.errors.password = 'Password cannot be empty';
} else {
this.errors.password = '';
}
try {
const url = new URL(this.body.url)
if (url.protocol !== 'ssl:') {
Expand Down
62 changes: 37 additions & 25 deletions api/web/src/components/Connection/CertificateP12.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
<template v-else>
<TablerInput
v-model='password'
type='password'
autocomplete='off'
label='P12 Password'
@keyup.enter='extract'
/>
Expand Down Expand Up @@ -64,35 +66,45 @@ export default {
}
},
mounted: function() {
this.$nextTick(() => {
this.dropzone = new Dropzone("#dropzone-default", {
autoProcessQueue: false
});
this.dropzone.on('addedfile', (file) => {
const read = new FileReader();
read.onload = (event) => {
this.file = event.target.result;
};
read.readAsDataURL(file);
});
});
this.createDropzone();
},
methods: {
createDropzone: function() {
this.$nextTick(() => {
this.dropzone = new Dropzone("#dropzone-default", {
autoProcessQueue: false,
});
this.dropzone.on('addedfile', (file) => {
const read = new FileReader();
read.onload = (event) => {
this.file = event.target.result;
};
read.readAsDataURL(file);
});
});
},
extract: function() {
const certs = convertToPem(atob(this.file.split('base64,')[1]), this.password);
const cert = certs.pemCertificate
.split('-----BEGIN CERTIFICATE-----')
.join('-----BEGIN CERTIFICATE-----\n')
.split('-----END CERTIFICATE-----')
.join('\n-----END CERTIFICATE-----');
const key = certs.pemKey
.split('-----BEGIN RSA PRIVATE KEY-----')
.join('-----BEGIN RSA PRIVATE KEY-----\n')
.split('-----END RSA PRIVATE KEY-----')
.join('\n-----END RSA PRIVATE KEY-----');
try {
const certs = convertToPem(atob(this.file.split('base64,')[1]), this.password);
const cert = certs.pemCertificate
.split('-----BEGIN CERTIFICATE-----')
.join('-----BEGIN CERTIFICATE-----\n')
.split('-----END CERTIFICATE-----')
.join('\n-----END CERTIFICATE-----');
const key = certs.pemKey
.split('-----BEGIN RSA PRIVATE KEY-----')
.join('-----BEGIN RSA PRIVATE KEY-----\n')
.split('-----END RSA PRIVATE KEY-----')
.join('\n-----END RSA PRIVATE KEY-----');
this.$emit('certs', { key, cert });
this.$emit('certs', { key, cert });
} catch (err) {
this.file = null;
this.password = '';
this.createDropzone();
throw err;
}
}
}
}
Expand Down

0 comments on commit 3b9a62f

Please sign in to comment.