chore(demo): mask IDs in E2E mode

Author: fadi-george

examples/demo/src/components/sections/AppSection.tsx

@@ -1,6 +1,7 @@
 import { IonToggle } from '@ionic/react';
 import type { FC } from 'react';
 
+import { maskValue } from '../../utils/maskValue';
 import SectionCard from '../SectionCard';
 
 interface AppSectionProps {
@@ -23,7 +24,7 @@ const AppSection: FC<AppSectionProps> = ({
       <div className="kv-row">
         <span>App ID</span>
         <span className="id-value" data-testid="app_id_value">
-          {appId}
+          {maskValue(appId)}
         </span>
       </div>
     </div>

examples/demo/src/components/sections/PushSection.tsx

@@ -1,6 +1,7 @@
 import { IonToggle } from '@ionic/react';
 import type { FC } from 'react';
 
+import { maskValue } from '../../utils/maskValue';
 import ActionButton from '../ActionButton';
 import SectionCard from '../SectionCard';
 
@@ -26,7 +27,7 @@ const PushSection: FC<PushSectionProps> = ({
       <div className="kv-row">
         <span>Push ID</span>
         <span className="id-value" data-testid="push_id_value">
-          {pushSubscriptionId ?? '—'}
+          {maskValue(pushSubscriptionId ?? '—')}
         </span>
       </div>
       <div className="divider" />

examples/demo/src/utils/maskValue.ts

@@ -0,0 +1,11 @@
+// Mirrors the trim/strict-equals check used elsewhere so a stray newline
+// or whitespace in `.env` doesn't accidentally enable masking.
+const E2E_MODE = (import.meta.env.VITE_E2E_MODE ?? '').trim() === 'true';
+const MASK_CHAR = '•';
+
+export function maskValue(value: string): string {
+  if (E2E_MODE) {
+    return MASK_CHAR.repeat(value.length);
+  }
+  return value;
+}

examples/demo_pods/.env.example

@@ -1 +1,3 @@
+VITE_ONESIGNAL_APP_ID=your_onesignal_app_id
 VITE_ONESIGNAL_API_KEY=your_rest_api_key
+VITE_E2E_MODE=false

examples/demo_pods/src/components/sections/AppSection.tsx

@@ -1,6 +1,7 @@
 import { IonToggle } from '@ionic/react';
 import type { FC } from 'react';
 
+import { maskValue } from '../../utils/maskValue';
 import SectionCard from '../SectionCard';
 
 interface AppSectionProps {
@@ -23,7 +24,7 @@ const AppSection: FC<AppSectionProps> = ({
       <div className="kv-row">
         <span>App ID</span>
         <span className="id-value" data-testid="app_id_value">
-          {appId}
+          {maskValue(appId)}
         </span>
       </div>
     </div>

examples/demo_pods/src/components/sections/PushSection.tsx

@@ -1,6 +1,7 @@
 import { IonToggle } from '@ionic/react';
 import type { FC } from 'react';
 
+import { maskValue } from '../../utils/maskValue';
 import ActionButton from '../ActionButton';
 import SectionCard from '../SectionCard';
 
@@ -26,7 +27,7 @@ const PushSection: FC<PushSectionProps> = ({
       <div className="kv-row">
         <span>Push ID</span>
         <span className="id-value" data-testid="push_id_value">
-          {pushSubscriptionId ?? '—'}
+          {maskValue(pushSubscriptionId ?? '—')}
         </span>
       </div>
       <div className="divider" />

examples/demo_pods/src/utils/maskValue.ts

@@ -0,0 +1,11 @@
+// Mirrors the trim/strict-equals check used elsewhere so a stray newline
+// or whitespace in `.env` doesn't accidentally enable masking.
+const E2E_MODE = (import.meta.env.VITE_E2E_MODE ?? '').trim() === 'true';
+const MASK_CHAR = '•';
+
+export function maskValue(value: string): string {
+  if (E2E_MODE) {
+    return MASK_CHAR.repeat(value.length);
+  }
+  return value;
+}