Frontend - Remove caching and add dev mode

frontend/httpd.conf

@@ -230,9 +230,23 @@ SSLProxyEngine On
 <IfModule unixd_module>
 
 # Cache rules
-<FilesMatch "\.(js|wasm)$">
-    Header set Cache-Control "public, max-age=31536000, immutable"
-</FilesMatch>
+
+# Add cache for web node files
+; <FilesMatch "\.(js|wasm)$">
+;     Header set Cache-Control "public, max-age=31536000, immutable"
+; </FilesMatch>
+
+# REMOVE CACHE
+<filesMatch "\.(html|htm|js|css)$">
+  FileETag None
+  <ifModule mod_headers.c>
+     Header unset ETag
+     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
+     Header set Pragma "no-cache"
+     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
+  </ifModule>
+</filesMatch>
+
 
 # Make sure mod_headers is enabled
 <IfModule !mod_headers.c>

frontend/src/app/core/services/web-node.service.ts

@@ -101,7 +101,7 @@ export class WebNodeService {
         // }
         if (!this.sentryEvents.firstPeerConnected && peers.some((p: any) => p.connection_status === DashboardPeerStatus.CONNECTED)) {
           const seconds = (Date.now() - this.webNodeStartTime) / 1000;
-          sendSentryEvent(`WebNode connected in ${seconds.toFixed(1)}s`);
+          sendSentryEvent(`WebNode connected in ${seconds.toFixed(1)}s`, 'info');
           this.sentryEvents.firstPeerConnected = true;
           this.webnodeProgress$.next('Connected');
         }

frontend/src/app/features/webnode/web-node-initialization/web-node-initialization.component.ts

@@ -105,14 +105,14 @@ export class WebNodeInitializationComponent extends StoreDispatcher implements O
 				this.loading[1].status = WebNodeStepStatus.LOADING;
 				this.advanceProgressFor2ndStep();
 			} else if (state === 'Started') {
-				this.updateLoadingMessage('~2 seconds left');
+				this.updateLoadingMessage('~3 seconds left');
 				setTimeout(() => {
 					if (!this.hasError && this.loading[2].status !== WebNodeStepStatus.DONE) {
 						this.updateLoadingMessage('Slower than usual');
 						this.hasWarn = true;
 						this.detect();
 					}
-				}, 2000);
+				}, 3500);
 				clearInterval(this.secondStepInterval);
 				this.loading[0].loaded = true;
 				this.loading[1].loaded = true;

frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.html

@@ -14,47 +14,54 @@
       <div>Switch to one of the following platforms</div>
       <div class="img-wrapper flex-row align-center w-100 flex-center">
         <div class="fx-col-full-cent tertiary">
-          <img src="assets/images/web-node-demo/windows.svg" alt="" class="mb-8">
+          <img src="assets/images/web-node-demo/windows.svg" alt="" class="mb-8" (click)="addDevKey(1)">
           Windows
         </div>
         <div class="fx-col-full-cent tertiary">
-          <img src="assets/images/web-node-demo/android.svg" alt="" class="mb-8">
+          <img src="assets/images/web-node-demo/android.svg" alt="" class="mb-8" (click)="addDevKey(2)">
           Android
         </div>
         <div class="fx-col-full-cent tertiary">
-          <img src="assets/images/web-node-demo/macos.svg" alt="" class="mb-8">
+          <img src="assets/images/web-node-demo/macos.svg" alt="" class="mb-8" (click)="addDevKey(3)">
           MacOS
         </div>
       </div>
     </div>
 
-    <div class="w-100 fx-col-vert-cent sub-headline">And use Chrome, Edge or Safari</div>
+    <div class="w-100 fx-col-vert-cent sub-headline">And use Chrome, Edge, Safari or Brave</div>
   </div>
 } @else {
   <div class="browser-content flex-column flex-center text-center">
     <div class="w-100 fx-col-vert-cent">
       <div class="headline mb-16">Your browser isn't supported</div>
       <div class="sub-headline tertiary">
         <div>To run a Mina node in your browser,</div>
-        <div>we recommend Chrome or similar.</div>
+        <div>we recommend one of the following.</div>
       </div>
     </div>
 
     <div class="browser w-100 fx-col-vert-cent sub-headline">
       <div class="img-wrapper flex-row align-center w-100 flex-between">
         <div class="fx-col-full-cent tertiary">
-          <img src="assets/images/web-node-demo/chrome.svg" alt="" class="mb-8">
+          <img src="assets/images/web-node-demo/chrome.svg" alt="" class="mb-8" (click)="addDevKey(1)">
           Chrome
         </div>
         <div class="fx-col-full-cent tertiary">
-          <img src="assets/images/web-node-demo/safari.svg" alt="" class="mb-8">
+          <img src="assets/images/web-node-demo/safari.svg" alt="" class="mb-8" (click)="addDevKey(2)">
           Safari
         </div>
         <div class="fx-col-full-cent tertiary">
-          <img src="assets/images/web-node-demo/edge.svg" alt="" class="mb-8">
+          <img src="assets/images/web-node-demo/edge.svg" alt="" class="mb-8" (click)="addDevKey(3)">
           Edge
         </div>
       </div>
     </div>
   </div>
 }
+@if (devMode) {
+  <div>You entered Dev mode!</div>
+  <div class="fx-row-vert-cent mt-10 mb-10">
+    <input type="password" placeholder="Password" class="mina-input mr-10 border-rad-8 h-xl p-12" #inp (keyup.enter)="c_hcK1_V_a_l_id(inp)">
+    <button class="bg-aware-container h-xl p-10 primary" (click)="c_hcK1_V_a_l_id(inp)">Run Web Node</button>
+  </div>
+}

frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.ts

@@ -1,4 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Platform } from '@angular/cdk/platform';
+import { sendSentryEvent } from '@shared/helpers/webnode.helper';
+
+const code = [1, 2, 3, 2];
 
 @Component({
   selector: 'mina-web-node-not-supported',
@@ -10,5 +14,31 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   host: { class: 'h-100 flex-column align-center' },
 })
 export class WebNodeNotSupportedComponent {
+
   @Input() isPhone!: boolean;
+
+  @Output() bypassUnsupportedDevice = new EventEmitter<void>();
+
+  devMode: boolean = false;
+  private codeVerifier: number[] = [];
+
+  constructor(private platform: Platform) {}
+
+  addDevKey(key: number): void {
+    this.codeVerifier.push(key);
+    if (this.codeVerifier.length === code.length) {
+      if (this.codeVerifier.every((v, i) => v === code[i])) {
+        this.devMode = true;
+      } else {
+        this.codeVerifier = [];
+      }
+    }
+  }
+
+  c_hcK1_V_a_l_id(input: HTMLInputElement): void {
+    if (input.value === 'allowme') {
+      sendSentryEvent('A developer is testing the app on ' + this.platform, 'debug');
+      this.bypassUnsupportedDevice.emit();
+    }
+  }
 }

frontend/src/app/features/webnode/webnode.component.html

@@ -1,5 +1,5 @@
 @if (supported) {
   <mina-web-node-initialization></mina-web-node-initialization>
 } @else {
-  <mina-web-node-not-supported [isPhone]="isPhone"></mina-web-node-not-supported>
+  <mina-web-node-not-supported [isPhone]="isPhone" (bypassUnsupportedDevice)="supported = true"></mina-web-node-not-supported>
 }

frontend/src/app/shared/helpers/webnode.helper.ts

@@ -1,5 +1,6 @@
 import * as Sentry from '@sentry/angular';
+import { SeverityLevel } from '@sentry/angular';
 
-export function sendSentryEvent(message: string): void {
-  Sentry.captureEvent({ message: message, tags: { type: 'webnode' } });
+export function sendSentryEvent(message: string, level: SeverityLevel = 'error'): void {
+  Sentry.captureEvent({ message: message, level, tags: { type: 'webnode' } });
 }