From 3b9a62fdbeec92a145ab1bea0a9269afc53cf8e9 Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Mon, 7 Oct 2024 14:15:20 -0600
Subject: [PATCH] Add configure stetps

---
 api/web/package-lock.json                     | 12 +--
 api/web/src/components/Configure.vue          | 74 +++++++++++++++++--
 .../components/Connection/CertificateP12.vue  | 62 +++++++++-------
 3 files changed, 112 insertions(+), 36 deletions(-)

diff --git a/api/web/package-lock.json b/api/web/package-lock.json
index e3164ec6c..a5c7d2a4b 100644
--- a/api/web/package-lock.json
+++ b/api/web/package-lock.json
@@ -3200,9 +3200,9 @@
             }
         },
         "node_modules/@tak-ps/vue-tabler": {
-            "version": "3.53.0",
-            "resolved": "https://registry.npmjs.org/@tak-ps/vue-tabler/-/vue-tabler-3.53.0.tgz",
-            "integrity": "sha512-Ml8yp29tdY7tccpR2oWkZ6/VJspBjVWrMnJI3muB8OJuAy8K19DB43MvuNWOhmQYZcfC77WoQGiZZ9wVXM2i7Q==",
+            "version": "3.53.1",
+            "resolved": "https://registry.npmjs.org/@tak-ps/vue-tabler/-/vue-tabler-3.53.1.tgz",
+            "integrity": "sha512-lDJ7jug8SmBVzF3h8zwJEJsTrPohQGetrzmtIfgy5mPHD/RURtPLc06LhplJuaoFdbCoxj0PVvZd374ARd1sgA==",
             "dev": true,
             "license": "ISC",
             "dependencies": {
@@ -4946,9 +4946,9 @@
             }
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.32",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.32.tgz",
-            "integrity": "sha512-M+7ph0VGBQqqpTT2YrabjNKSQ2fEl9PVx6AK3N558gDH9NO8O6XN9SXXFWRo9u9PbEg/bWq+tjXQr+eXmxubCw==",
+            "version": "1.5.33",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.33.tgz",
+            "integrity": "sha512-+cYTcFB1QqD4j4LegwLfpCNxifb6dDFUAwk6RsLusCwIaZI6or2f+q8rs5tTB2YC53HhOlIbEaqHMAAC8IOIwA==",
             "dev": true,
             "license": "ISC"
         },
diff --git a/api/web/src/components/Configure.vue b/api/web/src/components/Configure.vue
index 5767af46b..d2c82e6d6 100644
--- a/api/web/src/components/Configure.vue
+++ b/api/web/src/components/Configure.vue
@@ -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>
@@ -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'
                                         />
@@ -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'
@@ -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
@@ -74,9 +119,6 @@
                                 </template>
                             </div>
                         </div>
-                        <div class='text-center text-muted mt-3'>
-                            Don't have account yet? <a href='mailto:nicholas.ingalls@state.co.us'>Contact Us</a>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -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
@@ -105,6 +153,8 @@ export default {
             loading: false,
             errors: {
                 name: '',
+                username: '',
+                password: '',
                 url: '',
                 api: ''
             },
@@ -112,7 +162,9 @@ export default {
                 name: '',
                 url: '',
                 api: '',
-                certs: {
+                username: '',
+                password: '',
+                auth: {
                     key: '',
                     cert: ''
                 }
@@ -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:') {
diff --git a/api/web/src/components/Connection/CertificateP12.vue b/api/web/src/components/Connection/CertificateP12.vue
index b2ca6f814..2b8f7a111 100644
--- a/api/web/src/components/Connection/CertificateP12.vue
+++ b/api/web/src/components/Connection/CertificateP12.vue
@@ -22,6 +22,8 @@
             <template v-else>
                 <TablerInput
                     v-model='password'
+                    type='password'
+                    autocomplete='off'
                     label='P12 Password'
                     @keyup.enter='extract'
                 />
@@ -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;
+            }
         }
     }
 }