@necrolab/dashboard 0.4.221 → 0.5.2

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

@@ -7,42 +7,71 @@
         </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>
-                    <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 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>
-                <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>
+
+                <!-- 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>
                 </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>
+
+                <!-- 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>
                 </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"
+            @click="done()">
+            Save
+            <EditIcon />
+        </button>
     </Modal>
 </template>
 <style lang="scss" scoped>
@@ -51,6 +80,16 @@
         @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;
@@ -58,7 +97,16 @@
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import { EditIcon } from "@/components/icons";
+import {
+    EditIcon,
+    MailIcon,
+    KeyIcon,
+    ProfileIcon,
+    TimerIcon,
+    SandclockIcon,
+    TagIcon,
+    ScannerIcon
+} from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 
@@ -68,7 +116,7 @@ const ui = useUIStore();
 const account = ref({
     email: "",
     password: "",
-    tag: ui.profile.accountTags[0]
+    tag: ui.profile.tags[0]
 });
 
 if (ui.currentlyEditing?.email) account.value = ui.currentlyEditing;

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

@@ -7,88 +7,92 @@
         </template>
 
         <div>
-            <div class="grid grid-cols-12 gap-3 my-3">
+            <div class="my-3 grid grid-cols-12 gap-3">
                 <!-- Profile tag -->
-                <div class="input-wrapper col-span-4" style="z-index: 30 !important">
-                    <label class="label-override mb-2">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) => (profile.tag = f)"
-                            :capitalize="true"
-                            rightAmount="right-6 md:right-2 top-2"
-                        />
-                    </div>
+                <div class="input-wrapper z-dropdown col-span-4">
+                    <label class="label-override mb-2">
+                        Profile Tag
+                        <TagIcon />
+                    </label>
+                    <Dropdown
+                        :class="`input-default dropdown w-full ${errors.includes('profileTag') ? 'error' : ''}`"
+                        :default="ui.profile.tags[0]"
+                        :options="ui.profile.tags"
+                        :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-wrapper z-0 col-span-8">
+                    <label class="label-override mb-2">
+                        Card Number
+                        <CartIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('cardNumber') ? 'error' : ''}`">
                         <input
+                            ref="cardNumberInput"
                             placeholder="Enter card number"
-                            v-model="profile.cardNumber"
-                            maxlength="19"
+                            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>
+                    <label class="label-override mb-2">
+                        Country
+                        <SandclockIcon />
+                    </label>
                     <ProfileCountryChooser
                         class="h-8"
                         :value="profile.country"
                         :onClick="chooseCountry"
-                        :disabled="true"
-                    />
+                        :disabled="true" />
                 </div>
 
                 <!-- Exp Year -->
                 <div class="input-wrapper col-span-5">
-                    <label class="label-override mb-2 z-0">Expiry Year </label>
-                    <div :class="`input-default ${errors.includes('expYear') ? 'error' : ''}`">
-                        <Dropdown
-                            class="text-xs w-64 h-8"
-                            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)"
-                            rightAmount="right-2 top-2"
-                            topPadding="pt-2 mt-2"
-                        />
-                    </div>
+                    <label class="label-override z-0 mb-2">
+                        Expiry Year
+                        <TimerIcon />
+                    </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>
-                    <div :class="`input-default ${errors.includes('expMonth') ? 'error' : ''}`">
-                        <Dropdown
-                            class="text-xs w-64 h-8"
-                            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)"
-                            rightAmount="right-2 top-2"
-                            topPadding="pt-2 mt-2"
-                        />
-                    </div>
+                <div class="input-wrapper z-2 col-span-5">
+                    <label class="label-override mb-2">
+                        Expiry Month
+                        <TimerIcon />
+                    </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-wrapper z-0 col-span-6 md:col-span-4">
+                    <label class="label-override mb-2">
+                        CVV
+                        <ShieldIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('cvv') ? 'error' : ''}`">
                         <input
                             placeholder="183"
@@ -96,51 +100,88 @@
                             max="9999"
                             maxlength="4"
                             minlength="3"
-                            v-model="profile.cvv"
-                        />
+                            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-wrapper z-0 col-span-6 md:col-span-4">
+                    <label class="label-override mb-2">
+                        City
+                        <StadiumIcon />
+                    </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-0">
-                    <label class="label-override mb-2">State </label>
-                    <div :class="`input-default ${errors.includes('state') ? 'error' : ''}`">
-                        <input :disabled="profile.country !== 'US'" placeholder="CO" v-model="profile.state" />
+                <div class="input-wrapper z-1 col-span-6 md:col-span-4">
+                    <label class="label-override mb-2">
+                        State
+                        <SandclockIcon />
+                    </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"
+                            :value="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-wrapper z-0 col-span-6 md:col-span-4">
+                    <label class="label-override mb-2">
+                        Zip
+                        <KeyIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('zipCode') ? 'error' : ''}`">
-                        <input placeholder="80281" type="number" min="1" max="12" v-model="profile.zipCode" />
+                        <input placeholder="10005" 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-wrapper z-0 col-span-6 md:col-span-4">
+                    <label class="label-override mb-2">
+                        Address
+                        <HandIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('address') ? 'error' : ''}`">
-                        <input placeholder="Denver" v-model="profile.address" />
+                        <input placeholder="100 5th Avenue" 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">
+                <div class="input-wrapper z-0 col-span-6 md:col-span-4">
+                    <label class="label-override mb-2">
+                        Fake ID
+                        <WildcardIcon />
+                    </label>
+                    <div class="input-default mt-2 flex h-10 w-full items-center">
                         <button
                             @click="generate"
-                            class="text-white w-full button-default text-xs flex items-center justify-center"
-                        >
+                            class="flex w-full items-center justify-center gap-2 text-xs text-white">
+                            <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>
@@ -149,10 +190,10 @@
         </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 />
+            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
+            @click="done()">
+            Save
+            <EditIcon />
         </button>
     </Modal>
 </template>
@@ -165,6 +206,12 @@
 .z-0 {
     z-index: 0 !important;
 }
+.z-1 {
+    z-index: 1 !important;
+}
+.z-2 {
+    z-index: 2 !important;
+}
 
 .error {
     border-width: 2px !important;
@@ -173,22 +220,89 @@
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
+import {
+    MailIcon,
+    CartIcon,
+    ShieldIcon,
+    StadiumIcon,
+    KeyIcon,
+    HandIcon,
+    ProfileIcon,
+    SandclockIcon,
+    TimerIcon,
+    TagIcon,
+    WildcardIcon
+} from "@/components/icons";
 import { EditIcon } from "@/components/icons";
-import ProfileCountryChooser from "@/components/editors/Profile/ProfileCountryChooser.vue";
+import ProfileCountryChooser from "@/components/Editors/Profile/ProfileCountryChooser.vue";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
-import { ref } from "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],
+    tag: ui.profile.tags[0],
     state: "",
     country: "US",
     zipCode: ""
@@ -196,6 +310,54 @@ const profile = ref({
 
 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;
@@ -220,7 +382,13 @@ const validate = (p) => {
     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");
-    if (!/^[345]\d{14,15}$/.test(p.cardNumber)) errors.value.push("cardNumber");
+    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");
@@ -229,12 +397,30 @@ const validate = (p) => {
 
 const handleCreditCardUpdate = (event) => {
     const value = event.target.value.replace(/\D/g, "");
-    const subs = value.substring(0, 16);
+
+    // 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);
-    profile.value.cardNumber = cardInfo.formatted;
+
+    // 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("");