@necrolab/dashboard 0.4.3

package/src/components/Editors/Profile/CreateProfile.vue

@@ -0,0 +1,321 @@
+<template>
+    <Modal>
+        <template #header>
+            <span v-if="!ui.currentlyEditing?.profileName">Add Profile</span>
+            <span v-else>Edit Profile</span>
+            <img src="@/assets/img/scanner.svg" class="ml-4" />
+        </template>
+
+        <div>
+            <div class="grid grid-cols-12 gap-3 my-3">
+                <!-- Profile tag -->
+                <div class="input-wrapper col-span-4" style="z-index: 30 !important">
+                    <label class="label-override mb-2">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) => (profile.tag = f)"
+                        :capitalize="true"
+                    />
+                </div>
+
+                <!-- Card Number -->
+                <div class="input-wrapper col-span-8 z-0">
+                    <label class="label-override mb-2">Card Number </label>
+                    <div :class="`input-default ${errors.includes('cardNumber') ? 'error' : ''}`">
+                        <input
+                            ref="cardNumberInput"
+                            placeholder="Enter card number"
+                            v-model="displayCardNumber"
+                            maxlength="23"
+                            inputmode="numeric"
+                            @input="handleCreditCardUpdate"
+                            @focus="formatCardNumberDisplay"
+                        />
+                    </div>
+                </div>
+
+                <!-- Country chooser -->
+                <div class="input-wrapper col-span-2">
+                    <label class="label-override mb-2">Country </label>
+                    <ProfileCountryChooser
+                        class="h-8"
+                        :value="profile.country"
+                        :onClick="chooseCountry"
+                        :disabled="true"
+                    />
+                </div>
+
+                <!-- Exp Year -->
+                <div class="input-wrapper col-span-5">
+                    <label class="label-override mb-2 z-0">Expiry Year </label>
+                    <Dropdown
+                        :class="`input-default dropdown w-full ${errors.includes('expYear') ? 'error' : ''}`"
+                        default="Expiry Year"
+                        :value="
+                            profile.expYear && !profile?.expYear?.startsWith('20')
+                                ? '20' + profile.expYear
+                                : profile.expYear
+                                ? profile.expYear
+                                : undefined
+                        "
+                        :options="['2025', '2026', '2027', '2028', '2029', '2030', '2031']"
+                        :onClick="(f) => (profile.expYear = f)"
+                    />
+                </div>
+
+                <!-- Exp Month -->
+                <div class="input-wrapper col-span-5">
+                    <label class="label-override mb-2">Expiry Month </label>
+                    <Dropdown
+                        :class="`input-default dropdown w-full ${errors.includes('expMonth') ? 'error' : ''}`"
+                        default="Expiry Month"
+                        :value="profile.expMonth ? profile.expMonth : undefined"
+                        :options="['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']"
+                        :onClick="(f) => (profile.expMonth = f)"
+                    />
+                </div>
+
+                <!-- CVV -->
+                <div class="input-wrapper col-span-6 md:col-span-4 z-0">
+                    <label class="label-override mb-2">CVV </label>
+                    <div :class="`input-default ${errors.includes('cvv') ? 'error' : ''}`">
+                        <input
+                            placeholder="183"
+                            min="100"
+                            max="9999"
+                            maxlength="4"
+                            minlength="3"
+                            v-model="profile.cvv"
+                        />
+                    </div>
+                </div>
+
+                <!-- City -->
+                <div class="input-wrapper col-span-6 md:col-span-4 z-0">
+                    <label class="label-override mb-2">City </label>
+                    <div :class="`input-default ${errors.includes('city') ? 'error' : ''}`">
+                        <input placeholder="Denver" v-model="profile.city" />
+                    </div>
+                </div>
+
+                <!-- State -->
+                <div class="input-wrapper col-span-6 md:col-span-4 z-50">
+                    <label class="label-override mb-2">State </label>
+                    <div v-if="profile.country === 'US'" :class="`${errors.includes('state') ? 'error' : ''}`">
+                        <Dropdown
+                            class="input-default w-full"
+                            default="Select State"
+                            :onClick="(state) => profile.state = state"
+                            :options="usStates"
+                            :allowDefault="false"
+                            rightAmount="right-2"
+                            :chosen="profile.state"
+                        />
+                    </div>
+                    <div v-else :class="`input-default ${errors.includes('state') ? 'error' : ''}`">
+                        <input disabled placeholder="N/A" value="" />
+                    </div>
+                </div>
+
+                <!-- Zip -->
+                <div class="input-wrapper col-span-6 md:col-span-4 z-0">
+                    <label class="label-override mb-2">Zip </label>
+                    <div :class="`input-default ${errors.includes('zipCode') ? 'error' : ''}`">
+                        <input placeholder="80281" type="number" min="1" max="12" v-model="profile.zipCode" />
+                    </div>
+                </div>
+
+                <!-- Address -->
+                <div class="input-wrapper col-span-6 md:col-span-4 z-0">
+                    <label class="label-override mb-2">Address </label>
+                    <div :class="`input-default ${errors.includes('address') ? 'error' : ''}`">
+                        <input placeholder="Denver" v-model="profile.address" />
+                    </div>
+                </div>
+
+                <!-- Generate -->
+                <div class="input-wrapper col-span-6 md:col-span-4 z-0">
+                    <label class="label-override mb-2 z-0"> Fake ID</label>
+                    <div class="input-default mt-2 w-full h-10 flex items-center">
+                        <button @click="generate" class="text-white w-full text-xs flex items-center justify-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="3" y="4" width="18" height="16" rx="2" />
+                                <line x1="7" y1="2" x2="7" y2="6" />
+                                <line x1="17" y1="2" x2="17" y2="6" />
+                            </svg>
+                            <span>Generate</span>
+                        </button>
+                    </div>
+                </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()"
+        >
+            Save <EditIcon />
+        </button>
+    </Modal>
+</template>
+<style lang="scss" scoped>
+.input-wrapper {
+    label {
+        @apply flex;
+    }
+}
+.z-0 {
+    z-index: 0 !important;
+}
+
+.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 ProfileCountryChooser from "@/components/Editors/Profile/ProfileCountryChooser.vue";
+import { useUIStore } from "@/stores/ui";
+import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import { ref, computed, watch, nextTick, onMounted } from "vue";
+import { fakeId } from "@/stores/utils";
+import { validateCard } from "@/stores/utils";
+
+const props = defineProps({ profile: { type: Object, required: false } });
+const errors = ref([]);
+const ui = useUIStore();
+
+// US States list (excluding GA and PR, alphabetically ordered)
+const usStates = [
+    "AK", "AL", "AR", "AZ", "CA", "CO", "CT", "DE", "FL", "HI", "IA", "ID", "IL", "IN", "KS", "KY", "LA", "MA", "MD", "ME", "MI", "MN", "MO", "MS", "MT", "NC", "ND", "NE", "NH", "NJ", "NM", "NV", "NY", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VA", "VT", "WA", "WI", "WV", "WY"
+];
+const cardNumberInput = ref(null);
+const profile = ref({
+    cvv: "",
+    cardNumber: "",
+    city: "",
+    tag: ui.profile.accountTags[0],
+    state: "",
+    country: "US",
+    zipCode: ""
+});
+
+if (ui.currentlyEditing?.profileName) profile.value = ui.currentlyEditing;
+
+// Reactive display value for the formatted card number
+const displayCardNumber = ref("");
+
+// Initialize display card number with formatting
+const initializeCardNumberDisplay = () => {
+    if (profile.value.cardNumber) {
+        const cleanNumber = profile.value.cardNumber.replace(/\s+/g, "");
+        if (cleanNumber) {
+            const cardInfo = validateCard(cleanNumber);
+            displayCardNumber.value = cardInfo.formatted;
+        }
+    }
+};
+
+// Format card number display on focus
+const formatCardNumberDisplay = () => {
+    if (profile.value.cardNumber) {
+        const cleanNumber = profile.value.cardNumber.replace(/\s+/g, "");
+        if (cleanNumber) {
+            const cardInfo = validateCard(cleanNumber);
+            displayCardNumber.value = cardInfo.formatted;
+        }
+    }
+};
+
+// Watch for changes in profile.cardNumber to sync with display
+watch(() => profile.value.cardNumber, (newValue) => {
+    if (newValue) {
+        const cleanNumber = newValue.replace(/\s+/g, "");
+        if (cleanNumber) {
+            const cardInfo = validateCard(cleanNumber);
+            displayCardNumber.value = cardInfo.formatted;
+        }
+    } else {
+        displayCardNumber.value = "";
+    }
+});
+
+// Initialize on modal open
+onMounted(() => {
+    nextTick(() => {
+        initializeCardNumberDisplay();
+    });
+});
+
+const generate = () => {
+    const fake = fakeId();
+    profile.value.city = fake.city;
+    profile.value.zipCode = fake?.zipCode;
+    profile.value.address = fake.address;
+    profile.value.state = fake.state;
+    profile.value.country = "US";
+};
+
+const chooseCountry = (f) => {
+    profile.value.country = f;
+    if (f !== "US") profile.value.state = "";
+};
+
+const validate = (p) => {
+    errors.value = [];
+    if (!p.zipCode && !p.address && !p.state && !p.city) generate();
+
+    if (!p.zipCode) errors.value.push("zipCode");
+    if (!p.address) errors.value.push("address");
+    if (!p.state && p.country === "US") errors.value.push("state");
+    if (!p.city) errors.value.push("city");
+    if (!p.country) errors.value.push("country");
+    if (!/^\d{3,4}$/.test(`${p.cvv}`)) errors.value.push("cvv");
+    const cleanCardNumber = p.cardNumber.replace(/\s+/g, "");
+    // Validate card number based on type and length
+    const isValidCard = cleanCardNumber.match(/^4\d{15}$/) || // Visa (16 digits)
+                       cleanCardNumber.match(/^5[1-5]\d{14}$/) || // Mastercard (16 digits)
+                       cleanCardNumber.match(/^3[47]\d{13}$/); // AMEX (15 digits)
+    if (!isValidCard) errors.value.push("cardNumber");
+    if (!p.expYear) errors.value.push("expYear");
+    if (!p.expMonth) errors.value.push("expMonth");
+    if (!p.expMonth) errors.value.push("expMonth");
+    return errors.value.length === 0;
+};
+
+const handleCreditCardUpdate = (event) => {
+    const value = event.target.value.replace(/\D/g, "");
+    
+    // Determine max length based on card type
+    let maxLength = 16; // Default for Visa/Mastercard
+    if (value.startsWith('3')) {
+        maxLength = 15; // AMEX
+    } else if (value.startsWith('4') || value.startsWith('5')) {
+        maxLength = 16; // Visa/Mastercard
+    }
+    
+    const subs = value.substring(0, maxLength);
+    const cardInfo = validateCard(subs);
+    
+    // Store clean number (without spaces) in profile
+    profile.value.cardNumber = subs;
+    // Display formatted number in input
+    displayCardNumber.value = cardInfo.formatted;
+};
+
+function done() {
+    // Clear state if country is not US
+    if (profile.value.country !== 'US') {
+        profile.value.state = '';
+    }
+    
+    ui.logger.Info("Created profile", profile.value);
+    if (validate(profile.value) !== true) return;
+    ui.toggleModal("");
+    ui.addProfile(profile.value);
+}
+</script>

package/src/components/Editors/Profile/Profile.vue

@@ -0,0 +1,142 @@
+<template>
+    <Row
+        class="relative text-white grid-cols-7 lg:grid-cols-8"
+        @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.toggleProfileSelected(props.task._id)"
+            />
+            <h4 class="mx-auto text-white">
+                {{ props.task.profileName }}
+            </h4>
+        </div>
+        <div class="col-span-1 lg:col-span-2">
+            <h4 class="text-white flex justify-center items-center gap-2">
+                <span class="hidden ipadlg:block">{{
+                    props.task.privacy
+                        ? props.task.cardNumber[0] +
+                          "•".repeat(props.task.cardNumber.length - 5) +
+                          props.task.cardNumber.slice(-4)
+                        : validateCard(props.task.cardNumber).formatted
+                }}</span>
+                <img class="w-6 h-6" :src="getAccountType()" />
+            </h4>
+        </div>
+        <div class="col-span-1">
+            <h4 class="text-white">{{ expDate() }}</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>
+                <li>
+                    <button @click="deleteProfile"><TrashIcon /></button>
+                </li>
+            </ul>
+        </div>
+    </Row>
+</template>
+<style lang="scss" scoped>
+.green svg path {
+    fill: rgb(68 183 68);
+}
+
+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 { validateCard } from "@/stores/utils";
+import TagLabel from "@/components/Editors/TagLabel.vue";
+
+const ui = useUIStore();
+
+const props = defineProps({
+    task: { type: Object }
+});
+
+const getAccountType = () => {
+    var cn = props.task.cardNumber;
+    if (cn.startsWith("4")) return `/img/banks/visa.svg`; // visa
+    else if (cn.startsWith("3")) return `/img/banks/amex.svg`; // amex
+    else if (cn.startsWith("5")) return `/img/banks/mastercard.svg`; // master
+};
+
+const expDate = () =>
+    props.task.privacy ? "••/••" : `${props.task.expMonth}/${props.task.expYear?.replace("20", "")}`;
+const enable = async () => await ui.addProfile({ ...props.task, enabled: true });
+const disable = async () => await ui.addProfile({ ...props.task, enabled: false });
+const edit = () => {
+    ui.currentlyEditing = props.task;
+    ui.toggleModal("create-profile");
+};
+const deleteProfile = async () => await ui.deleteProfile(props.task._id);
+</script>

package/src/components/Editors/Profile/ProfileCountryChooser.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown rounded-lg">
+            <span @click="open = !open" class="flex justify-between items-center z-inf text-white">
+                <div class="flex gap-3 justify-center">
+                    <img class="w-5" :src="`/flags/${current?.toLowerCase()}.svg`" />
+                </div>
+            </span>
+            <div
+                v-if="open && !disabled"
+                class="dropdown-content special-dropdown snap-mandatory snap-y z-inf max-h-48 overflow-scroll hidden-scrollbars"
+            >
+                <div
+                    v-for="(country, i) in countries"
+                    v-bind:key="country"
+                    :class="`cursor-pointer w-12 snap-start ${i === 0 ? '' : 'my-2'}`"
+                    @click="set(country)"
+                >
+                    <div class="flex gap-3 justify-between smooth-hover">
+                        <span class="text-sm">{{ country }} </span>
+                        <img class="w-5" :src="`/flags/${country?.toLowerCase()}.svg`" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+const countries = ["US", "CA", "DE", "FR", "DK"];
+const open = ref(false);
+
+const props = defineProps({
+    value: { type: String },
+    onClick: { type: Function },
+    disabled: { type: Boolean, required: false }
+});
+const current = ref(props.value || "US");
+
+const set = (c) => {
+    if (props.disabled) return;
+    current.value = c;
+    open.value = false;
+    props.onClick(c);
+};
+
+watch(
+    () => props.value,
+    (n) => (current.value = n)
+);
+</script>
+
+<style scoped>
+.special-dropdown {
+    @apply min-w-20;
+}
+
+.small-dropdown {
+    background-clip: border-box !important;
+    /* border-radius: 100% !important; */
+    padding: 0;
+    width: 3em !important;
+    /* height: 3em !important; */
+    display: flex;
+    justify-items: center;
+    justify-content: center;
+}
+
+.dropdown-content {
+    left: -1.1rem;
+    z-index: 99999999999999;
+}
+</style>
+, watch

package/src/components/Editors/Profile/ProfileView.vue

@@ -0,0 +1,96 @@
+<template>
+    <Table>
+        <Header class="text-center grid-cols-7 lg:grid-cols-8">
+            <div class="col-span-3 lg:col-span-2 flex">
+                <Checkbox
+                    class="mr-3"
+                    :toggled="ui.mainCheckbox.profiles"
+                    @valueUpdate="ui.toggleMainCheckbox('profiles')"
+                />
+                <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
+                    <ProfileIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
+                    <h4 class="hidden ipadlg:flex">Profile Name</h4>
+                </div>
+            </div>
+            <div class="lg:col-span-2 col-span-1 items-center justify-center flex" v-once>
+                <CartIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
+                <h4 class="hidden ipadlg:flex">Card Number</h4>
+            </div>
+            <div class="col-span-1 flex items-center justify-center" v-once>
+                <TimerIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
+                <h4 class="hidden ipadlg:flex">Exp. Date</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 lg:mr-3 w-4 h-4" />
+                <h4 class="hidden lg: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="index"
+                class="scroller max-h-big vue-recycle-scroller ready direction-vertical flex flex-col divide-y-2 divide-border overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+            >
+                <template #default="props">
+                    <div class="task" :key="i[props.item.index]">
+                        <Profile
+                            @click="i[props.item.index]++"
+                            :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 profiles 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;
+}
+
+.max-h-big-prof {
+    max-height: calc(100vh - 20rem);
+    overflow: hidden;
+}
+</style>
+<script setup>
+import { Table, Header } from "@/components/Table";
+import { CartIcon, TicketIcon, ClickIcon, TimerIcon, ProfileIcon, CheckmarkIcon } from "@/components/icons";
+import Profile from "./Profile.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/TagLabel.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="flex rounded-2xl w-fit shadow-3xl items-center justify-center bg-dark-600">
+        <span class="font-bold p-2 truncate small">{{ props.text }}</span>
+    </div>
+</template>
+
+<style scoped>
+.small {
+    font-size: 0.6rem;
+    line-height: 0.8rem;
+}
+</style>
+
+<script setup>
+const props = defineProps({ text: { type: String } });
+</script>