@necrolab/dashboard 0.4.61 → 0.4.208

package/src/components/Editors/Account/AccountCreator.vue

@@ -6,85 +6,63 @@
         </template>
 
         <div>
-            <div class="form-grid mb-4 mt-7">
-                <div class="input-wrapper relative-positioned z-tooltip col-span-8">
-                    <label class="label-override mb-2">
-                        Account Tag
-                        <TagIcon />
-                    </label>
-                    <Dropdown
-                        class="input-default dropdown w-full p-4"
-                        :default="ui.profile.tags[0]"
-                        :options="ui.profile.tags"
-                        :onClick="(f) => (creatorConfig.tag = f)"
-                        :capitalize="true"
-                        :allowDefault="false"
-                        :chosen="creatorConfig.tag" />
+            <div class="my-3 grid grid-cols-12 gap-3 mt-7 mb-4">
+                <div class="input-wrapper col-span-8 z-inf">
+                    <label class="label-override">Account Tag </label>
+                    <div :class="`input-default ${errors.includes('accountTag') ? 'error' : ''}`">
+                        <Dropdown
+                            class="text-xs w-64 h-8"
+                            :default="ui.profile.accountTags[0]"
+                            :options="ui.profile.accountTags"
+                            :onClick="(f) => (creatorConfig.tag = f)"
+                            :capitalize="true"
+                            rightAmount="right-6 lg:right-2 top-2"
+                        />
+                    </div>
                 </div>
 
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
-                        Threads
-                        <EditIcon />
-                    </label>
+                    <label class="label-override">Threads</label>
                     <div :class="`input-default ${errors.includes('threads') ? 'error' : ''}`">
                         <input placeholder="1" type="number" min="1" max="50" v-model="creatorConfig.threads" />
-                        <div class="input-incrementer">
-                            <button @click="creatorConfig.threads++">
-                                <UpIcon />
-                            </button>
-                            <button @click="if (creatorConfig.threads > 1) creatorConfig.threads--;">
-                                <DownIcon />
-                            </button>
-                        </div>
                     </div>
                 </div>
                 <div class="input-wrapper col-span-8">
-                    <label class="label-override mb-2">
-                        Email catchall
-                        <MailIcon />
-                    </label>
+                    <label class="label-override">Email catchall</label>
                     <div :class="`input-default ${errors.includes('catchall') ? 'error' : ''}`">
-                        <input placeholder="example.com" v-model="creatorConfig.catchall" />
+                        <input placeholder="mycatchall.com" v-model="creatorConfig.catchall" />
                     </div>
                 </div>
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
-                        Catchall amount
-                        <BagIcon />
-                    </label>
+                    <label class="label-override">Catchall amount</label>
                     <div :class="`input-default ${errors.includes('number') ? 'error' : ''}`">
                         <input placeholder="1" type="number" min="0" max="5000" v-model="creatorConfig.number" />
-                        <div class="input-incrementer">
-                            <button @click="creatorConfig.number++">
-                                <UpIcon />
-                            </button>
-                            <button @click="if (creatorConfig.number > 0) creatorConfig.number--;">
-                                <DownIcon />
-                            </button>
-                        </div>
                     </div>
                 </div>
                 <div class="input-wrapper col-span-12">
-                    <label class="label-override mb-2">
-                        Emails
-                        <MailIcon />
-                    </label>
-                    <div :class="`${errors.includes('emails') ? 'error-border' : ''}`">
-                        <textarea
-                            v-model="creatorConfig.emails"
-                            class="proxy-editor"
-                            spellcheck="false"
-                            style="max-height: 250px; min-height: 150px"
-                            placeholder="Enter emails here - One per line"></textarea>
+                    <div class="flex items-center gap-2">
+                        <label class="label-override">Emails </label>
                     </div>
+                    <!-- <div :class="`input-default ${errors.includes('email') ? 'error' : ''}`"> -->
+                    <!-- <input placeholder="email@example.com" type="email" v-model="account.email" /> -->
+
+                    <CodeEditor
+                        v-model="creatorConfig.emails"
+                        width="100%"
+                        spellcheck="false"
+                        :hide_header="true"
+                        :language_selector="false"
+                        :languages="[['text']]"
+                        theme="dark"
+                        :class="`${errors.includes('emails') ? 'error' : ''} max-h-60`"
+                    ></CodeEditor>
                 </div>
             </div>
             <button
-                class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs hover:opacity-70 active:opacity-50"
-                @click="done()">
-                Start
-                <EditIcon />
+                class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto mt-4"
+                @click="done()"
+            >
+                Start <EditIcon />
             </button>
         </div>
     </Modal>
@@ -100,43 +78,16 @@
     border-color: rgb(238 130 130) !important;
 }
 
-.error-border {
-    border: 2px solid rgb(238 130 130) !important;
-    border-radius: 8px;
-}
-
-/* Proxy editor styles */
-.proxy-editor {
-    width: 100%;
-    background-color: #2e2f34;
-    color: #e2e2e5;
-    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
-    padding: 12px;
-    border: none;
-    resize: none;
-    font-size: 14px;
-    line-height: 1.6;
-    tab-size: 4;
-    outline: none;
-    border: 1px solid #3d3e44;
-    border-radius: 8px;
-    overflow: auto;
-}
-
-.proxy-editor:focus {
-    border-color: #44454b;
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
-}
-
 .z-inf {
     z-index: 99999999999999;
 }
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import { EditIcon, TagIcon, SpinnerIcon, UpIcon, DownIcon, MailIcon, BagIcon } from "@/components/icons";
+import { EditIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import CodeEditor from "simple-code-editor";
 
 import { ref } from "vue";
 
@@ -145,7 +96,7 @@ const creatorConfig = ref({
     threads: 5,
     catchall: "",
     emails: "",
-    tag: ui.profile.tags[0],
+    tag: ui.profile.accountTags[0],
     number: 0
 });
 

package/src/components/Editors/Account/AccountView.vue

@@ -1,62 +1,59 @@
 <template>
     <Table>
-        <Header class="sticky top-0 z-10 grid-cols-5 bg-dark-400 text-center md:grid-cols-7">
-            <div class="col-span-3 flex lg:col-span-2">
+        <Header class="text-center grid-cols-5 ipadlg:grid-cols-7">
+            <div class="lg:col-span-2 col-span-3 flex">
                 <Checkbox
                     class="mr-3"
                     :toggled="ui.mainCheckbox.accounts"
                     @valueUpdate="ui.toggleMainCheckbox('accounts')"
-                    :isHeader="true" />
+                />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
-                    <MailIcon class="mr-0 h-4 w-4 md:mr-3" />
-                    <h4 class="hidden md:flex">Email</h4>
+                    <img src="/img/mail.svg" class="mr-0 ipadlg:mr-3" />
+                    <h4 class="hidden ipadlg:flex">Email</h4>
                 </div>
             </div>
-            <div class="col-span-2 hidden items-center justify-center md:flex" v-once>
-                <KeyIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Password</h4>
+            <div class="col-span-2 items-center justify-center hidden ipadlg:flex" v-once>
+                <img src="/img/key.svg" class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Password</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Enabled</h4>
+                <img src="/img/controls/enable.svg" width="14" class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Enabled</h4>
             </div>
-            <div class="col-span-1 hidden items-center justify-center lg:flex" v-once>
-                <TicketIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Tags</h4>
+            <div class="col-span-1 hidden lg:flex items-center justify-center" v-once>
+                <TicketIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Tags</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Actions</h4>
+                <ClickIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Actions</h4>
             </div>
         </Header>
-        <div
-            v-if="toRender.length != 0"
-            class="hidden-scrollbars stop-pan overflow-y-auto overflow-x-hidden"
-            :style="{ maxHeight: dynamicTableHeight }">
+        <div v-if="toRender.length > 0">
             <RecycleScroller
                 :items="toRender"
                 :item-size="64"
-                key-field="index"
-                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650">
+                key-field="_id"
+                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y-2 divide-border max-h-big overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+            >
                 <template #default="props">
-                    <div class="account" :key="`account-${props.item.id || props.item.index}`">
+                    <div class="task" :key="i[props.item._id]">
                         <Account
-                            @click="i[props.item.index]++"
-                            :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
-                            :account="props.item" />
+                            @click="i[props.item._id]++"
+                            :class="[props.item.index % 2 == 1 ? 'bg-dark-500' : 'bg-dark-550']"
+                            :task="props.item"
+                        />
                     </div>
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
-            <MailIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
-            <p class="text-sm text-light-400">No accounts found</p>
-            <p class="mt-1 text-xs text-light-500">Create accounts to get started</p>
+        <div v-else class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border">
+            No accounts found
         </div>
     </Table>
 </template>
 <style lang="scss" scoped>
-.account {
+.task {
     height: 64px;
 }
 h4 {
@@ -66,90 +63,25 @@ h4 {
 .stop-pan {
     touch-action: pan-y pan-up pan-down;
 }
-
-.empty-state {
-    color: #969696;
-    font-size: 14px;
-    font-weight: 500;
-}
 </style>
 <script setup>
 import { Table, Header } from "@/components/Table";
-import {
-    EventIcon,
-    TicketIcon,
-    StatusIcon,
-    ClickIcon,
-    DownIcon,
-    MailIcon,
-    KeyIcon,
-    CheckmarkIcon
-} from "@/components/icons";
+import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon } from "@/components/icons";
 import Account from "./Account.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref } from "vue";
 
 const props = defineProps({
-    accounts: { type: Object }
+    tasks: { type: Object }
 });
+const i = ref({});
+props.tasks.forEach((t) => (i.value[t._id] = 0));
+
 const ui = useUIStore();
 
-const i = ref({});
 const toRender = computed(() => {
     let c = 0;
-    const rendered = props.accounts.map((t) => ({ ...t, index: c++ }));
-
-    // Initialize reactive refs for click tracking
-    rendered.forEach((t) => {
-        if (t.id && !(t.id in i.value)) {
-            i.value[t.id] = 0;
-        }
-        if (!(t.index in i.value)) {
-            i.value[t.index] = 0;
-        }
-    });
-
-    return rendered;
-});
-
-// Dynamic height calculation for perfect item fitting
-const windowHeight = ref(window.innerHeight);
-const windowWidth = ref(window.innerWidth);
-
-const updateDimensions = () => {
-    windowHeight.value = window.innerHeight;
-    windowWidth.value = window.innerWidth;
-};
-
-onMounted(() => {
-    window.addEventListener("resize", updateDimensions);
-});
-
-onUnmounted(() => {
-    window.removeEventListener("resize", updateDimensions);
-});
-
-const dynamicTableHeight = computed(() => {
-    // Calculate available space for accounts table with conservative buffer
-    const headerHeight = 60; // Header + navbar
-    const titleHeight = 50; // Accounts title and controls
-    const searchHeight = 50; // Search and filter controls
-    const margins = windowWidth.value >= 1024 ? 40 : 25;
-    const bufferSpace = 50; // Conservative buffer to prevent partial items
-
-    const totalUsedSpace = headerHeight + titleHeight + searchHeight + margins + bufferSpace;
-    const availableHeight = windowHeight.value - totalUsedSpace;
-
-    // Account row height is always 64px
-    const rowHeight = 64;
-    const minRowsToShow = 2;
-    const minHeight = minRowsToShow * rowHeight;
-
-    // Calculate exact number of complete rows that fit with conservative approach
-    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
-    const exactHeight = maxCompleteRows * rowHeight;
-
-    return exactHeight + "px";
+    return props.tasks.map((t) => ({ ...t, index: c++ }));
 });
 </script>

package/src/components/Editors/Account/CreateAccount.vue

@@ -7,71 +7,42 @@
         </template>
 
         <div>
-            <div class="my-3 grid grid-cols-12 gap-3">
-                <!-- Account tag -->
-                <div class="input-wrapper relative-positioned z-tooltip col-span-4">
-                    <label class="label-override mb-2">
-                        Account Tag
-                        <TagIcon />
-                    </label>
-                    <Dropdown
-                        :class="`input-default dropdown w-full p-4`"
-                        :default="ui.profile.tags[0]"
-                        :options="ui.profile.tags"
-                        :onClick="(f) => (account.tag = f)"
-                        :capitalize="true"
-                        :allowDefault="false"
-                        :chosen="account.tag" />
-                </div>
-
-                <!-- Email -->
-                <div class="input-wrapper z-0 col-span-8">
-                    <label class="label-override mb-2">
-                        Email
-                        <MailIcon />
-                    </label>
-                    <div :class="`input-default required ${errors.includes('email') ? 'error' : ''}`">
-                        <input
-                            placeholder="email@example.com"
-                            type="email"
-                            v-model="account.email"
-                            required
-                            autocomplete="new-password"
-                            name="not-email-field-random-12345"
-                            data-dashlane-rid=""
-                            data-dashlane-label=""
-                            data-dashlane-classification=""
-                            data-form-type="other"
-                            role="textbox"
-                            inputmode="email" />
+            <div class="my-3 grid grid-cols-12 gap-3 mt-7 mb-4">
+                <div class="input-wrapper col-span-4 z-10">
+                    <label class="label-override">Profile Tag </label>
+                    <div :class="`input-default ${errors.includes('profileTag') ? 'error' : ''}`">
+                        <Dropdown
+                            class="text-xs w-64 h-8"
+                            :default="ui.profile.accountTags[0]"
+                            :options="ui.profile.accountTags"
+                            :onClick="(f) => (account.tag = f)"
+                            :capitalize="true"
+                            rightAmount="right-6 lg:right-2 top-2"
+                        />
                     </div>
                 </div>
-
-                <!-- Password -->
-                <div class="input-wrapper z-0 col-span-12">
-                    <label class="label-override mb-2">
-                        Password
-                        <KeyIcon />
-                    </label>
-                    <div :class="`input-default required ${errors.includes('password') ? 'error' : ''}`">
-                        <input
-                            placeholder="***********"
-                            type="password"
-                            v-model="account.password"
-                            required
-                            autocomplete="off"
-                            name="account_password_disableautocomplete" />
+                <div class="input-wrapper col-span-8">
+                    <label class="label-override">Email </label>
+                    <div :class="`input-default ${errors.includes('email') ? 'error' : ''}`">
+                        <input placeholder="email@example.com" type="email" v-model="account.email" />
+                        <span class="text-red-400 my-auto mr-2 mt-3">* </span>
                     </div>
                 </div>
             </div>
+            <div class="input-wrapper col-span-12">
+                <label class="label-override">Password </label>
+                <div :class="`input-default ${errors.includes('password') ? 'error' : ''}`">
+                    <input placeholder="***********" v-model="account.password" />
+                    <span class="text-red-400 my-auto mr-2 mt-3">* </span>
+                </div>
+            </div>
+            <button
+                class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto mt-4"
+                @click="done()"
+            >
+                Save <EditIcon />
+            </button>
         </div>
-
-        <button
-            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs hover:opacity-70 active:opacity-50"
-            @click="done()">
-            Save
-            <EditIcon />
-        </button>
     </Modal>
 </template>
 <style lang="scss" scoped>
@@ -80,16 +51,6 @@
         @apply flex;
     }
 }
-.z-0 {
-    z-index: 0 !important;
-}
-.z-1 {
-    z-index: 1 !important;
-}
-.z-2 {
-    z-index: 2 !important;
-}
-
 .error {
     border-width: 2px !important;
     border-color: rgb(238 130 130) !important;
@@ -97,16 +58,7 @@
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import {
-    EditIcon,
-    MailIcon,
-    KeyIcon,
-    ProfileIcon,
-    TimerIcon,
-    SandclockIcon,
-    TagIcon,
-    ScannerIcon
-} from "@/components/icons";
+import { EditIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 
@@ -116,7 +68,7 @@ const ui = useUIStore();
 const account = ref({
     email: "",
     password: "",
-    tag: ui.profile.tags[0]
+    tag: ui.profile.accountTags[0]
 });
 
 if (ui.currentlyEditing?.email) account.value = ui.currentlyEditing;