@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/Auth/LoginForm.vue

@@ -1,41 +1,26 @@
 <template>
     <div class="form-section">
         <!-- Username -->
-        <div class="input-container mb-3">
-            <div class="flex items-center gap-2">
+        <div class="form-field-labeled mb-3">
+            <div class="flex-gap-2 items-center">
                 <ProfileIcon class="w-4 h-4" />
                 <span class="text-light-300 font-medium text-sm">Username</span>
             </div>
             <div class="flex-1 flex items-center">
-                <input
-                    type="text"
-                    class="login-input"
-                    v-model="user"
-                    autocapitalize="off"
-                    autocorrect="off"
-                    autocomplete="username"
-                />
+                <input type="text" class="form-input-minimal" v-model="user" autocapitalize="off" autocorrect="off" autocomplete="username" aria-label="Username" />
             </div>
         </div>
         <!-- Password -->
-        <div class="input-container mb-4">
-            <div class="flex items-center gap-2">
+        <div class="form-field-labeled mb-4">
+            <div class="flex-gap-2 items-center">
                 <KeyIcon class="w-4 h-4" />
                 <span class="text-light-300 font-medium text-sm">Password</span>
             </div>
             <div class="flex-1 flex items-center">
-                <input
-                    type="password"
-                    class="login-input"
-                    v-model="password"
-                />
+                <input type="password" class="form-input-minimal" v-model="password" aria-label="Password" />
             </div>
         </div>
-        <button
-            class="login-btn mt-6 mx-auto"
-            @click="login()"
-            :disabled="buttonDisabled"
-        >
+        <button class="login-btn w-48 mt-6 mx-auto" @click="login()" :disabled="buttonDisabled">
             <span v-if="!buttonDisabled">Login</span>
             <svg v-if="!buttonDisabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                 <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M13.8 12H3"/>
@@ -68,67 +53,3 @@ async function login() {
     buttonDisabled.value = false;
 }
 </script>
-
-<style lang="scss" scoped>
-.login-btn {
-    @apply flex items-center justify-center gap-2 rounded-lg transition-all duration-150;
-    background: oklch(0.72 0.15 145);
-    border: 2px solid oklch(0.72 0.15 145);
-    color: oklch(1 0 0);
-    height: 3rem;
-    width: 12rem;
-    font-size: 0.9375rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-
-    &:hover:not(:disabled) {
-        background: oklch(0.68 0.15 145);
-        border-color: oklch(0.68 0.15 145);
-        transform: translateY(-1px);
-        box-shadow: 0 4px 12px oklch(0.72 0.15 145 / 0.3);
-    }
-
-    &:active:not(:disabled) {
-        transform: translateY(0);
-        box-shadow: 0 2px 4px oklch(0.72 0.15 145 / 0.2);
-    }
-
-    &:disabled {
-        opacity: 0.7;
-        cursor: not-allowed;
-    }
-}
-
-.input-container {
-    @apply text-white bg-dark-500 px-3 rounded-lg border-2 border-dark-550 flex items-center justify-between h-11;
-    overflow: visible;
-    transition: border-color 0.15s ease;
-
-    &:hover {
-        border-color: oklch(0.30 0 0);
-    }
-
-    &:focus-within {
-        border-color: oklch(0.72 0.15 145) !important;
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-    }
-}
-
-.login-input {
-    @apply w-full h-full text-sm text-white bg-transparent border-0 outline-none px-2 py-1;
-
-    &:focus {
-        @apply outline-none border-0 shadow-none bg-transparent;
-    }
-
-    &:hover:not(:focus) {
-        background: transparent;
-    }
-
-    &::placeholder {
-        color: oklch(0.50 0 0);
-    }
-}
-</style>

package/src/components/Console/ConsoleToolbar.vue

@@ -0,0 +1,123 @@
+<template>
+    <div>
+        <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div class="flex flex-col gap-3 md:flex-1 md:flex-row md:items-center">
+                <div class="w-full md:w-64">
+                    <Dropdown
+                        class="console-dropdown input-default w-full border-2 border-dark-550 bg-dark-500"
+                        rightAmount="right-2"
+                        default="All logs"
+                        :allowDefault="true"
+                        :value="currentTaskLog"
+                        :onClick="(f) => $emit('update:currentTaskLog', f.split(' ')[0])"
+                        :options="Object.entries(taskLogMapping).map(([k, v]) => `${k} (${v.length})`).sort((a, b) => a.localeCompare(b))" />
+                </div>
+                <div class="flex flex-1 items-center gap-2">
+                    <div class="input-default flex flex-1 items-center md:max-w-64">
+                        <input
+                            :value="searchQuery"
+                            @input="$emit('update:searchQuery', $event.target.value)"
+                            type="text"
+                            placeholder="Search logs..."
+                            aria-label="Search logs"
+                            class="transparent-input" />
+                        <span v-if="searchQuery" class="ml-2 text-xs text-light-500">{{ filteredCount }}</span>
+                    </div>
+                    <button
+                        class="console-scroll-btn md:hidden"
+                        @mousedown="$emit('scroll', 'up')"
+                        @mouseup="$emit('scroll-stop')"
+                        @mouseleave="$emit('scroll-stop')"
+                        @touchstart="$emit('scroll', 'up')"
+                        @touchend="$emit('scroll-stop')"
+                        aria-label="Scroll up">
+                        <UpIcon class="pointer-events-none h-5 w-5" />
+                    </button>
+                    <button
+                        class="console-scroll-btn md:hidden"
+                        @mousedown="$emit('scroll', 'down')"
+                        @mouseup="$emit('scroll-stop')"
+                        @mouseleave="$emit('scroll-stop')"
+                        @touchstart="$emit('scroll', 'down')"
+                        @touchend="$emit('scroll-stop')">
+                        <DownIcon class="pointer-events-none h-5 w-5" />
+                    </button>
+                </div>
+            </div>
+            <div class="flex hidden items-center gap-3 md:flex">
+                <div class="hidden items-center gap-3 md:flex">
+                    <button class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                        <h3 class="text-sm text-white">Hide Monitors</h3>
+                        <Switch class="scale-75" :model-value="filteredLogs" @update:model-value="$emit('update:filteredLogs', $event)" />
+                    </button>
+                    <button class="relative flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                        <h3 class="text-sm text-white">Auto</h3>
+                        <Switch class="scale-75" :model-value="autoscrollToggled" @update:model-value="$emit('update:autoscrollToggled', $event); $emit('autoscroll-toggle')" />
+                        <div
+                            v-if="userScrolledUp && autoscrollToggled"
+                            class="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
+                            title="Autoscroll paused - scroll to bottom to resume"></div>
+                    </button>
+                </div>
+                <button
+                    class="hidden size-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200 md:flex"
+                    @mousedown="$emit('scroll', 'up')"
+                    @mouseup="$emit('scroll-stop')"
+                    @mouseleave="$emit('scroll-stop')"
+                    @touchstart="$emit('scroll', 'up')"
+                    @touchend="$emit('scroll-stop')">
+                    <UpIcon class="pointer-events-none h-5 w-5" />
+                </button>
+                <button
+                    class="hidden size-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200 md:flex"
+                    @mousedown="$emit('scroll', 'down')"
+                    @mouseup="$emit('scroll-stop')"
+                    @mouseleave="$emit('scroll-stop')"
+                    @touchstart="$emit('scroll', 'down')"
+                    @touchend="$emit('scroll-stop')">
+                    <DownIcon class="pointer-events-none h-5 w-5" />
+                </button>
+            </div>
+        </div>
+        <div class="mb-6 mt-4 flex justify-between md:hidden mobile-portrait:mb-16 mobile-portrait:mt-6">
+            <button class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                <h3 class="text-sm text-white">Hide Monitors</h3>
+                <Switch class="scale-75" :model-value="filteredLogs" @update:model-value="$emit('update:filteredLogs', $event)" />
+            </button>
+            <button class="relative flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
+                <h3 class="text-sm text-white">Auto</h3>
+                <Switch class="scale-75" :model-value="autoscrollToggled" @update:model-value="$emit('update:autoscrollToggled', $event); $emit('autoscroll-toggle')" />
+                <div
+                    v-if="userScrolledUp && autoscrollToggled"
+                    class="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
+                    title="Autoscroll paused - scroll to bottom to resume"></div>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { DownIcon, UpIcon } from '@/components/icons';
+import Switch from '@/components/ui/controls/atomic/Switch.vue';
+import Dropdown from '@/components/ui/controls/atomic/Dropdown.vue';
+
+defineProps({
+    currentTaskLog: String,
+    taskLogMapping: Object,
+    searchQuery: String,
+    filteredLogs: Boolean,
+    autoscrollToggled: Boolean,
+    userScrolledUp: Boolean,
+    filteredCount: String
+});
+
+defineEmits([
+    'update:currentTaskLog',
+    'update:searchQuery',
+    'update:filteredLogs',
+    'update:autoscrollToggled',
+    'scroll',
+    'scroll-stop',
+    'autoscroll-toggle'
+]);
+</script>

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

@@ -11,12 +11,12 @@
                 class="ml-0 mr-4"
                 :toggled="props.account.selected"
                 @valueUpdate="ui.toggleAccountSelected(props.account.id)" />
-            <h4 class="mx-auto text-white" @click="copy(props.account.email, 'Copied email')">
+            <h4 class="mx-auto text-center text-white" @click="copy(props.account.email, 'Copied email')">
                 {{ props.account.email }}
             </h4>
         </div>
         <div class="col-span-2 hidden md:block" @click="copy(props.account.password, 'Copied password')">
-            <h4 class="text-white">
+            <h4 class="text-center text-white">
                 {{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
             </h4>
         </div>
@@ -25,7 +25,7 @@
         </div>
 
         <div class="col-span-1 hidden lg:block">
-            <h4 class="flex justify-center gap-1 text-white">
+            <h4 class="flex justify-center gap-1 text-center text-white">
                 <TagLabel v-for="tag in props.account.tags" :key="tag" :text="tag" />
             </h4>
         </div>
@@ -39,26 +39,21 @@
                 </li>
                 <li v-if="props.account.enabled">
                     <button @click="disable">
-                        <img class="h-4 w-4" src="/img/controls/disable.svg" />
+                        <img class="icon-md" src="/img/controls/disable.svg" />
                     </button>
                 </li>
                 <li v-else>
                     <button @click="enable">
-                        <img class="h-4 w-4" src="/img/controls/enable.svg" />
+                        <img class="icon-md" src="/img/controls/enable.svg" />
                     </button>
                 </li>
             </ActionButtonGroup>
         </div>
     </Row>
 </template>
-<style lang="scss" scoped>
-h4 {
-    @apply text-center;
-}
-</style>
 <script setup>
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
+import { EditIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import StatusBadge from "@/components/ui/StatusBadge.vue";
 import ActionButtonGroup from "@/components/ui/ActionButtonGroup.vue";
@@ -66,12 +61,17 @@ import { useUIStore } from "@/stores/ui";
 import TagLabel from "@/components/Editors/TagLabel.vue";
 import { useRowSelection } from "@/composables/useRowSelection";
 import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
+import { computed } from "vue";
+import { useEnableDisable } from "@/composables/useEnableDisable";
 
 const ui = useUIStore();
 const { copy } = useCopyToClipboard();
 
 const props = defineProps({
-    account: { type: Object }
+    account: {
+        type: Object,
+        required: true
+    }
 });
 
 const enable = async () => await ui.addAccount({ ...props.account, enabled: true });

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

@@ -1,152 +1,79 @@
 <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">
+    <div class="table-component relative box-border flex flex-col rounded-lg bg-dark-500 bg-clip-padding overflow-hidden shadow-sm">
+        <Header class="sticky top-0 z-10 grid-cols-5 text-center md:grid-cols-7">
+            <div class="col-span-3 flex items-center justify-start lg:col-span-2">
                 <Checkbox
-                    class="mr-3"
+                    class="ml-2 mr-4 flex-shrink-0"
                     :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>
+                <div class="mx-auto flex cursor-pointer items-center" @click="ui.toggleSort('eventId')">
+                    <MailIcon class="mr-0 icon-md md:mr-3" />
+                    <h4 class="hidden text-white md: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>
+                <KeyIcon class="mr-0 icon-md md:mr-3" />
+                <h4 class="hidden text-white md: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>
+            <div class="grid-cell-center" v-once>
+                <CheckmarkIcon class="mr-0 icon-md md:mr-3" />
+                <h4 class="hidden text-white md: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>
+                <TicketIcon class="mr-0 icon-md md:mr-3" />
+                <h4 class="hidden text-white md: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>
+            <div class="grid-cell-center" v-once>
+                <ClickIcon class="mr-0 icon-md md:mr-3" />
+                <h4 class="hidden text-white md:flex">Actions</h4>
             </div>
         </Header>
         <div
             v-if="toRender.length != 0"
-            class="hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
+            class="hidden-scrollbars flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll"
             :style="{ maxHeight: dynamicTableHeight }">
-            <div v-for="(account, i) in toRender" :key="account.id || account.index" class="account-row-container">
+            <div
+                v-for="(account, i) in toRender"
+                :key="account.id || account.index"
+                class="min-h-16 flex-shrink-0 hover:bg-dark-550">
                 <Account
-                    :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
+                    :class="getRowClass(i)"
                     :account="account" />
             </div>
         </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>
-    </Table>
+        <EmptyState v-else :icon="MailIcon" message="No accounts found" subtitle="Create accounts to get started" />
+    </div>
 </template>
-<style lang="scss" scoped>
-.account-row-container {
-    min-height: 64px;
-    flex-shrink: 0;
-    transition: background-color 0.15s ease;
-
-    &:hover {
-        @apply bg-dark-550 !important;
-    }
-}
-
-h4 {
-    @apply text-white;
-}
-
-.stop-pan {
-    touch-action: pan-y pan-up pan-down;
-}
-
-.empty-state {
-    font-size: 14px;
-    font-weight: 500;
-}
-</style>
 <script setup>
-import { Table, Header } from "@/components/Table";
+import { Header } from "@/components/Table";
 import {
-    EventIcon,
     TicketIcon,
-    StatusIcon,
     ClickIcon,
-    DownIcon,
     MailIcon,
     KeyIcon,
     CheckmarkIcon
 } from "@/components/icons";
 import Account from "./Account.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import EmptyState from "@/components/ui/EmptyState.vue";
 import { useUIStore } from "@/stores/ui";
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { useDynamicTableHeight } from "@/composables/useDynamicTableHeight";
+import { computed } from "vue";
+import { useTableRender } from "@/composables/useTableRender";
+import { getRowClass } from "@/utils/tableHelpers";
 
 const props = defineProps({
-    accounts: { type: Object }
+    accounts: {
+        type: Object,
+        required: true
+    }
 });
 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;
+const { toRender } = useTableRender(computed(() => props.accounts));
 
-    // Account row height is always 64px
-    const rowHeight = 64;
-    const minRowsToShow = 2;
-    const minHeight = minRowsToShow * rowHeight;
+import { TABLE_LAYOUT } from "@/constants/tableLayout";
 
-    // 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";
-});
+const { dynamicTableHeight } = useDynamicTableHeight(TABLE_LAYOUT.ACCOUNTS);
 </script>

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

@@ -9,11 +9,7 @@
         <div>
             <div class="my-3 grid grid-cols-12 gap-3">
                 <!-- Account tag -->
-                <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
-                        Account Tag
-                        <TagIcon />
-                    </label>
+                <FormField label="Account Tag" :icon="TagIcon" z-index="0" class="col-span-12 md:col-span-4" noWrapper>
                     <Dropdown
                         :class="`input-default dropdown w-full p-4`"
                         :default="ui.profile.tags[0]"
@@ -22,10 +18,10 @@
                         :capitalize="true"
                         :allowDefault="false"
                         :chosen="account.tag" />
-                </div>
+                </FormField>
 
                 <!-- Email -->
-                <FormField label="Email" :icon="MailIcon" required :error="errors.includes('email')" z-index="0" class="col-span-8">
+                <FormField label="Email" :icon="MailIcon" required :error="errors.includes('email')" z-index="0" class="col-span-12 md:col-span-8">
                     <input
                         placeholder="email@example.com"
                         type="email"
@@ -54,47 +50,15 @@
             </div>
 
             <!-- Readonly fields when editing -->
-            <div v-if="ui.currentlyEditing?.email" class="mt-6 grid grid-cols-12 gap-3 pt-4 border-t border-dark-600">
-                <div v-if="ui.currentlyEditing.tags && ui.currentlyEditing.tags.length > 0" class="col-span-6">
-                    <label class="label-override mb-2">Tags</label>
-                    <div class="flex gap-2 flex-wrap">
-                        <TagLabel v-for="tag in ui.currentlyEditing.tags" :key="tag" :text="tag" />
-                    </div>
-                </div>
-                <div class="col-span-6">
-                    <label class="label-override mb-2">Status</label>
-                    <div class="flex items-center gap-3 h-10">
-                        <StatusBadge :enabled="ui.currentlyEditing.enabled" size="large" />
-                        <span class="text-sm font-medium" :class="ui.currentlyEditing.enabled ? 'text-green-400' : 'text-red-400'">
-                            {{ ui.currentlyEditing.enabled ? 'Enabled' : 'Disabled' }}
-                        </span>
-                    </div>
-                </div>
-            </div>
+            <ReadonlyFieldsSection v-if="ui.currentlyEditing?.email" :data="ui.currentlyEditing" />
         </div>
 
-        <button
-            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
-            @click="done()">
+        <button class="btn-modal ml-auto mt-4 w-48" @click="done()">
             Save
-            <EditIcon />
+            <EditIcon class="ml-2" />
         </button>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.label-override {
-    @apply flex items-center;
-    color: #e1e1e4 !important;
-
-    svg {
-        @apply ml-2;
-
-        path {
-            fill: #e1e1e4 !important;
-        }
-    }
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import FormField from "@/components/ui/FormField.vue";
@@ -102,18 +66,13 @@ import {
     EditIcon,
     MailIcon,
     KeyIcon,
-    ProfileIcon,
-    TimerIcon,
-    SandclockIcon,
-    TagIcon,
-    ScannerIcon
+    TagIcon
 } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
-import StatusBadge from "@/components/ui/StatusBadge.vue";
-import TagLabel from "@/components/Editors/TagLabel.vue";
-
+import ReadonlyFieldsSection from "@/components/ui/ReadonlyFieldsSection.vue";
 import { ref } from "vue";
+import { useFormValidation } from "@/composables/useFormValidation";
 
 const ui = useUIStore();
 const account = ref({
@@ -124,19 +83,10 @@ const account = ref({
 
 if (ui.currentlyEditing?.email) account.value = ui.currentlyEditing;
 
-const errors = ref([]);
-
-const validate = (p) => {
-    errors.value = [];
-
-    if (!p.email.includes("@")) errors.value.push("email");
-    if (p.password.length < 5) errors.value.push("password");
-
-    return errors.value.length === 0;
-};
+const { errors, validateAccount } = useFormValidation();
 
 function done() {
-    if (!validate(account.value)) return;
+    if (!validateAccount(account.value)) return;
     ui.toggleModal("");
     ui.addAccount(account.value);
 }