refactor(demo): replace LogManager with console and add E2E value masking

Author: fadi-george

.gitignore

@@ -4,6 +4,7 @@ node_modules
 # Build & test output
 dist/
 coverage/
+.capacitor-sdk-source.stamp
 
 # macOS
 .DS_Store

examples/build.md

@@ -51,6 +51,13 @@ rm -rf android/app/src/main/res/mipmap-anydpi-v26 \
        android/app/src/main/res/mipmap-*/ic_launcher_foreground.png
 ```
 
+Then verify both platforms picked up the OneSignal logo and not a default Capacitor icon:
+
+- iOS: open `ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png`
+- Android: open `android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png`
+
+If either still shows the default Capacitor blue X, re-run the generator. `@capacitor/assets generate` has been observed to silently skip the iOS output on a first run.
+
 Local SDK reference via packed tarball:
 
 ```json

examples/demo/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png

@@ -1,10 +1,10 @@
 {
   "images": [
     {
-      "filename": "AppIcon-512@2x.png",
       "idiom": "universal",
-      "platform": "ios",
-      "size": "1024x1024"
+      "size": "1024x1024",
+      "filename": "AppIcon-512@2x.png",
+      "platform": "ios"
     }
   ],
   "info": {

examples/demo/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -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/AppSection.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/components/sections/PushSection.tsx

@@ -27,7 +27,7 @@ const TriggersSection: FC<TriggersSectionProps> = ({
   <SectionCard title="TRIGGERS" sectionKey="triggers" onInfoTap={onInfoTap}>
     <PairList
       items={triggerItems}
-      emptyText="No Triggers Added"
+      emptyText="No triggers added"
       onRemove={onRemoveTrigger}
       sectionKey="triggers"
     />

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

@@ -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/src/utils/maskValue.ts

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