@tak-ps/cloudtak 12.54.0

package/src/components/util/UploadLogo.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class='mb-3'>
+        <TablerInput
+            id='logoUpload'
+            :label='props.label || "Upload PNG/SVG Logo"'
+            type='file'
+            accept='image/png, image/svg+xml'
+            :disabled='props.disabled'
+            :error='error'
+            @change='onFileChange'
+        />
+    </div>
+    <div
+        v-if='base64Data'
+        class='mt-3 row d-flex align-items-center justify-content-center'
+    >
+        <img
+            :src='base64Data'
+            alt='Logo Preview'
+            class='img-thumbnail'
+            style='max-width: 200px;'
+        >
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import {
+    TablerInput
+} from '@tak-ps/vue-tabler'
+
+const emit = defineEmits(['update:modelValue', 'file-name']);
+
+const props = defineProps<{
+    modelValue?: string | null;
+    label?: string;
+    disabled?: boolean;
+}>();
+
+const base64Data = ref<string | undefined | null>(props.modelValue);
+const error = ref('');
+
+watch(() => props.modelValue, () => {
+    base64Data.value = props.modelValue;
+});
+
+watch(base64Data, () => {
+    console.error('base64Data changed:', base64Data.value);
+    emit('update:modelValue', base64Data.value);
+})
+
+function onFileChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+
+    error.value = '';
+
+    if (!target.files || target.files.length === 0) {
+        throw new Error('Could not read file from input');
+    }
+
+    const file = target.files[0];
+    if (!file) return;
+
+    emit('file-name', file.name);
+
+    if (!['image/png', 'image/svg+xml'].includes(file.type)) {
+        error.value = 'Please upload a PNG or SVG file.';
+        base64Data.value = '';
+        return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        base64Data.value = (e.target && e.target.result) ? String(e.target.result) : undefined;
+    };
+    reader.onerror = () => {
+        error.value = 'Failed to read file.';
+        base64Data.value = '';
+    };
+
+    reader.readAsDataURL(file);
+}
+</script>

package/src/components/util/UploadP12.vue

@@ -0,0 +1,93 @@
+<template>
+    <TablerModal>
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='close'
+        />
+        <div class='modal-status bg-yellow' />
+        <div class='modal-body text-center py-4'>
+            <template v-if='!file'>
+                <form
+                    id='dropzone-default'
+                    class='dropzone dz-clickable'
+                    action='./'
+                    autocomplete='off'
+                    novalidate=''
+                >
+                    <div class='dz-default dz-message'>
+                        <button
+                            class='dz-button'
+                            type='button'
+                        >
+                            Drop .p12 here<br>click to upload
+                        </button>
+                    </div>
+                </form>
+            </template>
+            <template v-else>
+                <TablerInput
+                    v-model='password'
+                    label='P12 Password'
+                    @keyup.enter='extract'
+                />
+
+                <div class='row mt-3'>
+                    <div class='col'>
+                        <a
+                            class='cursor-pointer btn w-100'
+                            @click='extract'
+                        >OK</a>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue';
+import { 
+    TablerModal,
+    TablerInput
+} from '@tak-ps/vue-tabler';
+import Dropzone from 'dropzone/dist/dropzone.mjs';
+import 'dropzone/dist/dropzone.css';
+import '@tabler/core/dist/css/tabler-vendors.min.css';
+import { convertToPem } from 'p12-pem/lib/lib/p12.js';
+
+const emit = defineEmits([
+    'close',
+    'certs'
+]);
+
+const dropzone = ref(null);
+const password = ref('');
+const file = ref(null);
+
+onMounted(() => {
+    nextTick(() => {
+        dropzone.value = new Dropzone("#dropzone-default", {
+            autoProcessQueue: false
+        });
+
+        dropzone.value.on('addedfile', (f) => {
+            const read = new FileReader();
+            read.onload = (event) => {
+                file.value = event.target.result;
+            };
+            read.readAsDataURL(f);
+        });
+    });
+});
+
+function close() {
+    emit('close');
+}
+
+function extract() {
+    const certs = convertToPem(atob(file.value.split('base64,')[1]), password.value);
+    emit('certs', certs);
+}
+</script>

package/src/components/util/UserSelect.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class='w-100 px-2 py-2'>
+        <TablerLoading
+            v-if='loading'
+            desc='Loading User...'
+            :inline='true'
+        />
+        <template v-else>
+            <div class='d-flex align-items-center'>
+                <span
+                    v-if='selected'
+                    v-text='selected.username'
+                />
+                <span v-else>Publically Shared - No User Selected</span>
+
+                <div
+                    v-if='!props.disabled'
+                    class='btn-list ms-auto'
+                >
+                    <TablerIconButton
+                        v-if='selected'
+                        title='Remove Selected'
+                        @click='selected = undefined'
+                    >
+                        <IconTrash
+                            :size='32'
+                            stroke='1'
+                        />
+                    </TablerIconButton>
+                    <TablerDropdown>
+                        <template #default>
+                            <TablerIconButton
+                                title='User Select'
+                                class='dropdown-toggle'
+                            >
+                                <IconSettings
+                                    :size='32'
+                                    stroke='1'
+                                />
+                            </TablerIconButton>
+                        </template>
+                        <template #dropdown>
+                            <div class='card'>
+                                <div class='card-body'>
+                                    <TablerInput
+                                        v-model='paging.filter'
+                                        icon='search'
+                                        placeholder='Filter...'
+                                    />
+                                    <div
+                                        v-for='user of list.items'
+                                        :key='user.username'
+                                        tabindex='0'
+                                        class='cursor-pointer my-1 hover px-2 py-1'
+                                        @keyup.enter='selected = user'
+                                        @click='selected = user'
+                                    >
+                                        <div class='d-flex'>
+                                            <span style='width: 24px;'>
+                                                <IconUser
+                                                    :size='24'
+                                                    stroke='1'
+                                                />
+                                            </span>
+                                            <span
+                                                v-text='user.username'
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </TablerDropdown>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, watch } from 'vue'
+import { std, stdurl } from '../../std.ts';
+import type { User, UserList } from '../../types.ts';
+import {
+    IconTrash,
+    IconUser,
+    IconSettings
+} from '@tabler/icons-vue';
+import {
+    TablerIconButton,
+    TablerInput,
+    TablerLoading,
+    TablerDropdown
+} from '@tak-ps/vue-tabler';
+
+const props = defineProps<{
+    modelValue: string | undefined,
+    disabled?: boolean
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const loading = ref(true);
+const selected = ref<User | undefined>()
+const paging = ref({
+    filter: ''
+})
+const list = ref<UserList>({
+    total: 0,
+    items: []
+})
+
+watch(selected, () => {
+    emit('update:modelValue', selected.value
+        ? selected.value.username
+        : undefined
+    );
+})
+
+watch(paging.value, async () => {
+    await listUsers();
+});
+
+watch(props, async () => {
+    if (props.modelValue) {
+        await getUser();
+    }
+});
+
+onMounted(async () => {
+    if (props.modelValue) {
+        await getUser();
+    }
+
+    await listUsers();
+
+    loading.value = false;
+});
+
+async function getUser() {
+    loading.value = true;
+    selected.value = await std(`/api/user/${props.modelValue}`) as User;
+    loading.value = false;
+}
+
+async function listUsers() {
+    const url = stdurl(`/api/user`);
+    url.searchParams.append('filter', paging.value.filter);
+    list.value = await std(url) as UserList;
+}
+</script>