@necrolab/dashboard 0.4.61 → 0.4.208

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

@@ -7,92 +7,88 @@
         </template>
 
         <div>
-            <div class="my-3 grid grid-cols-12 gap-3">
+            <div class="grid grid-cols-12 gap-3 my-3">
                 <!-- Profile tag -->
-                <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 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>
 
                 <!-- Card Number -->
-                <div class="input-wrapper z-0 col-span-8">
-                    <label class="label-override mb-2">
-                        Card Number
-                        <CartIcon />
-                    </label>
+                <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"
+                            v-model="profile.cardNumber"
+                            maxlength="19"
                             inputmode="numeric"
                             @input="handleCreditCardUpdate"
-                            @focus="formatCardNumberDisplay" />
+                        />
                     </div>
                 </div>
 
                 <!-- Country chooser -->
                 <div class="input-wrapper col-span-2">
-                    <label class="label-override mb-2">
-                        Country
-                        <SandclockIcon />
-                    </label>
+                    <label class="label-override mb-2">Country </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 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)" />
+                    <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>
                 </div>
 
                 <!-- Exp Month -->
-                <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 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>
 
                 <!-- CVV -->
-                <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-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"
@@ -100,88 +96,51 @@
                             max="9999"
                             maxlength="4"
                             minlength="3"
-                            v-model="profile.cvv" />
+                            v-model="profile.cvv"
+                        />
                     </div>
                 </div>
 
                 <!-- City -->
-                <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-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 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 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>
                 </div>
 
                 <!-- Zip -->
-                <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-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="10005" type="number" min="1" max="12" v-model="profile.zipCode" />
+                        <input placeholder="80281" type="number" min="1" max="12" v-model="profile.zipCode" />
                     </div>
                 </div>
 
                 <!-- Address -->
-                <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-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="100 5th Avenue" v-model="profile.address" />
+                        <input placeholder="Denver" v-model="profile.address" />
                     </div>
                 </div>
 
                 <!-- Generate -->
-                <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">
+                <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">
                         <button
                             @click="generate"
-                            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>
+                            class="text-white w-full button-default text-xs flex items-center justify-center"
+                        >
                             <span>Generate</span>
                         </button>
                     </div>
@@ -190,10 +149,10 @@
         </div>
 
         <button
-            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs hover:opacity-70 active:opacity-50"
-            @click="done()">
-            Save
-            <EditIcon />
+            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>
@@ -206,12 +165,6 @@
 .z-0 {
     z-index: 0 !important;
 }
-.z-1 {
-    z-index: 1 !important;
-}
-.z-1 {
-    z-index: 2 !important;
-}
 
 .error {
     border-width: 2px !important;
@@ -220,89 +173,22 @@
 </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, computed, watch, nextTick, onMounted } from "vue";
+import { ref } 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.tags[0],
+    tag: ui.profile.accountTags[0],
     state: "",
     country: "US",
     zipCode: ""
@@ -310,54 +196,6 @@ 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;
@@ -382,13 +220,7 @@ 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");
-    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 (!/^[345]\d{14,15}$/.test(p.cardNumber)) 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");
@@ -397,30 +229,12 @@ const validate = (p) => {
 
 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 subs = value.substring(0, 16);
     const cardInfo = validateCard(subs);
-
-    // Store clean number (without spaces) in profile
-    profile.value.cardNumber = subs;
-    // Display formatted number in input
-    displayCardNumber.value = cardInfo.formatted;
+    profile.value.cardNumber = 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("");