@necrolab/dashboard 0.4.3

package/src/components/Auth/LoginForm.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="form-section">
+        <!-- Username -->
+        <div class="input-wrapper">
+            <label class="label-override mb-2">Username</label>
+            <div class="input-default">
+                <input v-model="user" placeholder="Username" />
+            </div>
+        </div>
+        <!-- Password -->
+        <div class="input-wrapper">
+            <label class="label-override mb-2">Password</label>
+            <div class="input-default">
+                <input v-model="password" type="password" placeholder="Password" />
+            </div>
+        </div>
+        <button
+            class="btn-primary w-full mt-4"
+            @click="login()"
+            :disabled="buttonDisabled"
+        >
+            <span v-if="!buttonDisabled">Login</span>
+            <div v-else class="loading-spinner mx-auto"></div>
+        </button>
+    </div>
+</template>
+<script setup>
+import { useUIStore } from "@/stores/ui";
+import { ref } from "vue";
+import router from "@/router/index";
+import { sendLogin } from "@/stores/requests";
+
+const password = ref("");
+const user = ref("");
+const ui = useUIStore();
+const buttonDisabled = ref(false);
+
+async function login() {
+    buttonDisabled.value = true;
+    const json = await sendLogin(user.value, password.value);
+    if (json.error) ui.showError(json.error);
+    else {
+        ui.profile.value = json.profile;
+        router.push("/");
+    }
+    buttonDisabled.value = false;
+}
+</script>

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

@@ -0,0 +1,119 @@
+<template>
+    <Row
+        class="relative text-white grid-cols-5 ipadlg:grid-cols-7 h-16"
+        @click="ui.setOpenContextMenu('')"
+        @click.right.prevent="ui.setOpenContextMenu('')"
+    >
+        <div class="col-span-3 lg:col-span-2 flex">
+            <Checkbox
+                class="ml-0 mr-4"
+                :toggled="props.task.selected"
+                @valueUpdate="ui.toggleAccountSelected(props.task._id)"
+            />
+            <h4 class="mx-auto text-white" @click="copy(props.task.email)">
+                {{ props.task.email }}
+            </h4>
+        </div>
+        <div class="col-span-2 hidden ipadlg:block" @click="copy(props.task.password)">
+            <h4 class="text-white">
+                {{ props.task.privacy ? "•".repeat(props.task.password.length) : props.task.password }}
+            </h4>
+        </div>
+        <div class="col-span-1">
+            <h4 v-if="props.task.enabled" class="text-green-400 flex justify-center">
+                <img class="w-3 h-3 green" src="/img/controls/enable.svg" />
+            </h4>
+            <h4 v-else class="text-red-400 flex justify-center">
+                <img class="w-3 h-3 fill-red-400" src="/img/close.svg" />
+            </h4>
+        </div>
+
+        <div class="col-span-1 hidden lg:block">
+            <h4 class="text-white flex justify-center gap-1">
+                <TagLabel v-for="tag in props.task.tags" :key="tag" :text="tag" />
+            </h4>
+        </div>
+
+        <div class="col-span-1 flex">
+            <ul class="task-buttons">
+                <li>
+                    <button @click="edit">
+                        <EditIcon />
+                    </button>
+                </li>
+                <li v-if="props.task.enabled">
+                    <button @click="disable">
+                        <img class="w-4 h-4" src="/img/controls/disable.svg" />
+                    </button>
+                </li>
+                <li v-else>
+                    <button @click="enable">
+                        <img class="w-4 h-4" src="/img/controls/enable.svg" />
+                    </button>
+                </li>
+            </ul>
+        </div>
+    </Row>
+</template>
+<style lang="scss" scoped>
+h4 {
+    @apply text-center;
+}
+.task-buttons {
+    @apply flex mx-auto gap-x-2;
+    
+    button {
+        @apply p-1 rounded transition-colors hover:bg-dark-500;
+    }
+    
+    svg {
+        @apply w-4 h-4;
+    }
+    
+    img {
+        @apply w-4 h-4;
+    }
+}
+
+@media (max-width: 1024px) {
+    h4 {
+        font-size: 10px !important;
+    }
+    .task-buttons {
+        @apply gap-x-3;
+    }
+    .task-id {
+        font-size: 6px !important;
+        margin-right: -12px;
+        margin-top: 20px;
+    }
+    .task-id-alt {
+        font-size: 7px !important;
+    }
+}
+</style>
+<script setup>
+import { Row } from "@/components/Table";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
+import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import { useUIStore } from "@/stores/ui";
+import TagLabel from "@/components/Editors/TagLabel.vue";
+
+const ui = useUIStore();
+
+const props = defineProps({
+    task: { type: Object }
+});
+
+const copy = (txt) => {
+    if (!txt) return;
+    navigator.clipboard.writeText(txt);
+    ui.showSuccess("Copied text");
+};
+const enable = async () => await ui.addAccount({ ...props.task, enabled: true });
+const disable = async () => await ui.addAccount({ ...props.task, enabled: false });
+const edit = () => {
+    ui.currentlyEditing = props.task;
+    ui.toggleModal("create-account");
+};
+</script>

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

@@ -0,0 +1,147 @@
+<template>
+    <Modal>
+        <template #header>
+            <span>Create Accounts</span>
+            <img src="@/assets/img/scanner.svg" class="ml-4" />
+        </template>
+
+        <div>
+            <div class="form-grid 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">Threads</label>
+                    <div :class="`input-default ${errors.includes('threads') ? 'error' : ''}`">
+                        <input placeholder="1" type="number" min="1" max="50" v-model="creatorConfig.threads" />
+                    </div>
+                </div>
+                <div class="input-wrapper col-span-8">
+                    <label class="label-override">Email catchall</label>
+                    <div :class="`input-default ${errors.includes('catchall') ? 'error' : ''}`">
+                        <input placeholder="mycatchall.com" v-model="creatorConfig.catchall" />
+                    </div>
+                </div>
+                <div class="input-wrapper col-span-4">
+                    <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>
+                </div>
+                <div class="input-wrapper col-span-12">
+                    <div class="flex items-center gap-2">
+                        <label class="label-override">Emails </label>
+                    </div>
+                    <div :class="`${errors.includes('emails') ? 'error-border' : ''}`">
+                        <textarea
+                            v-model="creatorConfig.emails"
+                            class="proxy-editor"
+                            spellcheck="false"
+                            style="max-height: 250px; min-height: 150px;"
+                        ></textarea>
+                    </div>
+                </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()"
+            >
+                Start <EditIcon />
+            </button>
+        </div>
+    </Modal>
+</template>
+<style lang="scss" scoped>
+.input-wrapper {
+    label {
+        @apply flex;
+    }
+}
+.error {
+    border-width: 2px !important;
+    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: #1a1a2e;
+    color: #f8f8f2;
+    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 #2d2d3b;
+    border-radius: 8px;
+    overflow: auto;
+}
+
+.proxy-editor:focus {
+    border-color: #6272a4;
+    box-shadow: 0 0 0 2px rgba(98, 114, 164, 0.25);
+}
+
+.z-inf {
+    z-index: 99999999999999;
+}
+</style>
+<script setup>
+import Modal from "@/components/ui/Modal.vue";
+import { EditIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+
+import { ref } from "vue";
+
+const ui = useUIStore();
+const creatorConfig = ref({
+    threads: 5,
+    catchall: "",
+    emails: "",
+    tag: ui.profile.accountTags[0],
+    number: 0
+});
+
+const errors = ref([]);
+
+const validate = (p) => {
+    errors.value = [];
+    if (
+        p.emails.trim().length !== 0 &&
+        p.emails
+            .trim()
+            .split("\n")
+            .some((s) => !s.includes("@"))
+    )
+        errors.value.push("emails");
+    if (p.catchall && !p.catchall.includes(".")) errors.value.push("catchall");
+
+    return errors.value.length === 0;
+};
+
+function done() {
+    if (!validate(creatorConfig.value)) return;
+    ui.toggleModal("");
+    ui.createAcconts(creatorConfig.value);
+}
+</script>

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

@@ -0,0 +1,87 @@
+<template>
+    <Table>
+        <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')"
+                />
+                <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
+                    <MailIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
+                    <h4 class="hidden ipadlg:flex">Email</h4>
+                </div>
+            </div>
+            <div class="col-span-2 items-center justify-center hidden ipadlg:flex" v-once>
+                <KeyIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
+                <h4 class="hidden ipadlg:flex">Password</h4>
+            </div>
+            <div class="col-span-1 flex items-center justify-center" v-once>
+                <CheckmarkIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
+                <h4 class="hidden ipadlg:flex">Enabled</h4>
+            </div>
+            <div class="col-span-1 hidden lg:flex items-center justify-center" v-once>
+                <TicketIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
+                <h4 class="hidden ipadlg:flex">Tags</h4>
+            </div>
+            <div class="col-span-1 flex items-center justify-center" v-once>
+                <ClickIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
+                <h4 class="hidden ipadlg:flex">Actions</h4>
+            </div>
+        </Header>
+        <div v-if="toRender.length > 0">
+            <RecycleScroller
+                :items="toRender"
+                :item-size="64"
+                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="task" :key="i[props.item._id]">
+                        <Account
+                            @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="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>
+.task {
+    height: 64px;
+}
+h4 {
+    @apply text-white;
+}
+
+.stop-pan {
+    touch-action: pan-y pan-up pan-down;
+}
+</style>
+<script setup>
+import { Table, 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 { useUIStore } from "@/stores/ui";
+import { computed, ref } from "vue";
+
+const props = defineProps({
+    tasks: { type: Object }
+});
+const i = ref({});
+props.tasks.forEach((t) => (i.value[t._id] = 0));
+
+const ui = useUIStore();
+
+const toRender = computed(() => {
+    let c = 0;
+    return props.tasks.map((t) => ({ ...t, index: c++ }));
+});
+</script>

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

@@ -0,0 +1,106 @@
+<template>
+    <Modal>
+        <template #header>
+            <span v-if="!ui.currentlyEditing?.email">Add Account</span>
+            <span v-else>Edit Account</span>
+            <img src="@/assets/img/scanner.svg" class="ml-4" />
+        </template>
+
+        <div>
+            <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>
+                    <Dropdown
+                        :class="`input-default dropdown w-full ${errors.includes('profileTag') ? 'error' : ''}`"
+                        :default="ui.profile.accountTags[0]"
+                        :options="ui.profile.accountTags"
+                        :onClick="(f) => (account.tag = f)"
+                        :capitalize="true"
+                    />
+                </div>
+                <div class="input-wrapper col-span-8">
+                    <label class="label-override">Email </label>
+                    <div :class="`input-default required ${errors.includes('email') ? 'error' : ''}`">
+                        <input
+                            placeholder="email@example.com"
+                            type="text"
+                            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>
+                </div>
+            </div>
+            <div class="input-wrapper col-span-12">
+                <label class="label-override">Password </label>
+                <div :class="`input-default required ${errors.includes('password') ? 'error' : ''}`">
+                    <input
+                        placeholder="***********"
+                        v-model="account.password"
+                        required
+                        autocomplete="off"
+                        name="account_password_disableautocomplete"
+                    />
+                </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>
+    </Modal>
+</template>
+<style lang="scss" scoped>
+.input-wrapper {
+    label {
+        @apply flex;
+    }
+}
+.error {
+    border-width: 2px !important;
+    border-color: rgb(238 130 130) !important;
+}
+</style>
+<script setup>
+import Modal from "@/components/ui/Modal.vue";
+import { EditIcon } from "@/components/icons";
+import { useUIStore } from "@/stores/ui";
+import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+
+import { ref } from "vue";
+
+const ui = useUIStore();
+const account = ref({
+    email: "",
+    password: "",
+    tag: ui.profile.accountTags[0]
+});
+
+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;
+};
+
+function done() {
+    if (!validate(account.value)) return;
+    ui.toggleModal("");
+    ui.addAccount(account.value);
+}
+</script>