.

thinkst · Oct 10, 2024 · 3429433 · 3429433
1 parent 8e12365
commit 3429433
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 20 deletions.
diff --git a/canarytokens/models.py b/canarytokens/models.py
@@ -1093,6 +1093,7 @@ class MySQLTokenResponse(TokenResponse):
 
 class CreditCardV2TokenResponse(TokenResponse):
     token_type: Literal[TokenTypes.CREDIT_CARD_V2] = TokenTypes.CREDIT_CARD_V2
+    name_on_card: Literal["Canarytokens.org"] = "Canarytokens.org"
     card_number: str
     cvv: str
     expiry_month: int

diff --git a/frontend_vue/src/components/tokens/credit_card_v2/ActivatedToken.vue b/frontend_vue/src/components/tokens/credit_card_v2/ActivatedToken.vue
@@ -20,9 +20,10 @@ const props = defineProps<{
 }>();
 
 const tokenData = ref({
-	card_name: props.tokenData.card_name || '',
+	name_on_card: props.tokenData.name_on_card || '',
 	card_number: props.tokenData.card_number || '',
-	expiry: props.tokenData.expiry || '',
-	cvc: props.tokenData.cvc || '',
+	expiry_month: props.tokenData.expiry_month || '',
+	expiry_year: props.tokenData.expiry_year || '',
+	cvv: props.tokenData.cvv || '',
 });
 </script>
diff --git a/frontend_vue/src/components/tokens/credit_card_v2/ManageToken.vue b/frontend_vue/src/components/tokens/credit_card_v2/ManageToken.vue
@@ -14,16 +14,18 @@ const props = defineProps<{
 
 // TODO: these fields are coming empty from the backend
 // const tokenData = ref({
-// 	card_name: props.tokenData.card_name || 'Paul Ndegwa Gichuki',
+// 	name_on_card: props.tokenData.name_on_card || 'Paul Ndegwa Gichuki',
 // 	card_number: props.tokenData.card_number || '0000 0000 0000 0000 0000',
-// 	expiry: props.tokenData.expiry || '11/27',
-// 	cvc: props.tokenData.cvc || '344',
+// expiry_month: props.tokenData.expiry_month || '11',
+// expiry_year: props.tokenData.expiry_year || '27',
+// 	cvv: props.tokenData.cvv || '344',
 // });
 
 const tokenInfo = ref({
-	card_name: 'Paul Ndegwa Gichuki',
+	name_on_card: 'Paul Ndegwa Gichuki',
 	card_number:'0000 0000 0000 0000',
-	expiry: '11/2027',
-	cvc: '344',
+	expiry_month: '11',
+	expiry_year: '27',
+	cvv: '344',
 });
 </script>
diff --git a/frontend_vue/src/components/tokens/credit_card_v2/TokenDisplay.vue b/frontend_vue/src/components/tokens/credit_card_v2/TokenDisplay.vue
@@ -22,7 +22,7 @@ const props = defineProps<{
 }>();
 
 const href = ref('download?fmt=cc'+'&token=mwnioj2ijoij2223'+'&auth=wkoowmwojojoow')
-const download = ref(props.tokenData.card_name.concat('_'))
+const download = ref(props.tokenData.name_on_card.concat('_'))
 
 const handleDownloadCC = () =>  {
 	console.log('Download CC')

diff --git a/frontend_vue/src/components/tokens/credit_card_v2/howToUse.ts b/frontend_vue/src/components/tokens/credit_card_v2/howToUse.ts
@@ -1,5 +1,5 @@
 export const howToUse = [
-	'You can use any name or address in association with the card number and CVC',
+	'You can use any name or address in association with the card number and CVV',
 	'Stick this in a database that stores payment information and get alerted if it is ever breached.',
 	'Put it in a document with other personal information regarding e.g., travel preferences in case someone snoops around your computer'
 ];
diff --git a/frontend_vue/src/components/tokens/types.ts b/frontend_vue/src/components/tokens/types.ts
@@ -248,8 +248,9 @@ export type HistoryTokenBackendType = {
 };
 
 export type CCtokenDataType = {
-	card_name: string;
+	name_on_card: string;
 	card_number: string;
-	expiry: string;
-	cvc: string;
+	expiry_month: string;
+	expiry_year: string;
+	cvv: string;
 };
diff --git a/frontend_vue/src/components/ui/CreditCardToken.vue b/frontend_vue/src/components/ui/CreditCardToken.vue
@@ -1,19 +1,19 @@
 <template>
 	<div id="cc-card" class="w-[280px] h-[11em] sm:w-[20.5em] sm:h-[13em] relative m-auto text-white">
-		<span class="absolute top-[50px] sm:top-[65px] left-[20px] sm:left-[25px]">{{ props.tokenData.card_name }}</span>
+		<span class="absolute top-[50px] sm:top-[65px] left-[20px] sm:left-[25px]">{{ props.tokenData.name_on_card }}</span>
 		<span class="absolute top-[75px] sm:top-[90px] left-[20px] sm:left-[25px]">{{ props.tokenData.card_number }}</span>
-		<span class="absolute top-[135px] sm:top-[160px] left-[20px] sm:left-[25px]">{{ props.tokenData.expiry }}</span>
-		<span class="absolute top-[135px] sm:top-[160px] left-[135px] sm:left-[165px]">{{ props.tokenData.cvc }}</span>
+		<span class="absolute top-[135px] sm:top-[160px] left-[20px] sm:left-[25px]">{{ props.tokenData.expiry_month }}/{{ props.tokenData.expiry_year }}</span>
+		<span class="absolute top-[135px] sm:top-[160px] left-[135px] sm:left-[165px]">{{ props.tokenData.cvv }}</span>
 	</div>
 	<div class="grid grid-cols-6 p-16 text-sm grid-flow-row-dense gap-8 mt-24 items-center border border-grey-200 rounded-xl shadow-solid-shadow-grey">
 		<BaseContentBlock
-			class="col-span-6 sm:col-span-4" :label="'Card Name'" :text="props.tokenData.card_name" :icon-name="'id-card'" copy-content />
+			class="col-span-6 sm:col-span-4" :label="'Card Name'" :text="props.tokenData.name_on_card" :icon-name="'id-card'" copy-content />
 		<BaseContentBlock
 			class="col-span-6 sm:col-span-4" :label="'Card Number'" :text="props.tokenData.card_number" :icon-name="'credit-card'" copy-content />
 		<BaseContentBlock
-			class="col-span-3 sm:col-span-2" :label="'Expires'" :text="props.tokenData.expiry" :icon-name="'calendar-day'" copy-content />
+			class="col-span-3 sm:col-span-2" :label="'Expiry'" :text="`${props.tokenData.expiry_month}/${props.tokenData.expiry_year}`" :icon-name="'calendar-day'" copy-content />
 		<BaseContentBlock
-			class="col-span-3 sm:col-span-2" :label="'CVC'" :text="props.tokenData.cvc" :icon-name="'lock'" copy-content />
+			class="col-span-3 sm:col-span-2" :label="'CVV'" :text="props.tokenData.cvv" :icon-name="'lock'" copy-content />
 	</div>
 </template>