CINT-3870 Modernize examples, upgrade to latest framework versions, remediate Angular CVEs

.gitignore

@@ -16,3 +16,6 @@ npm-debug.log*
 
 # Coverage directory
 coverage
+
+# Android local properties
+**/android/local.properties

angular-example/README.md

@@ -1,5 +1,5 @@
 # arkose-angular-example
-This example project provides a simple Angular (14) component that wraps the Arkose Labs Client API.
+This example project provides a simple Angular 22 component that wraps the Arkose Labs Client API.
 More details of how to implement the Arkose Labs API can be found at https://developer.arkoselabs.com
 
 ## Run Locally
@@ -22,20 +22,20 @@ Replace `<YOUR_PUBLIC_KEY>` with the public key set up for your account in both
 
 ## Documentation
 
-It contains a shared module which has arkose component.
+It contains a standalone Arkose component.
 
 - arkose: Arkose Enforcement Challenge over a Modal mode or in Inline mode on HTML page
 
 #### To Show Arkose Modal
 
 ```http
-  http://localhost:4200/login/modal
+  http://localhost:4200/login-modal
 ```
 
 #### To Show Inline Arkose
 
 ```http
-  http://localhost:4200/login/inline
+  http://localhost:4200/
 ```
 
 Once Arkose Verification/Challenge is completed in login page, it will navigate to
@@ -44,6 +44,11 @@ Once Arkose Verification/Challenge is completed in login page, it will navigate
   http://localhost:4200/dashboard
 ```
 
-In the Shared Modules, we have integrated Arkose security enforcement components. There is an Arkose Script Service which injects the requisite script. When the script is injected, the passing public key which is stored on an environment file is also passed along. Once the script is loaded, the workflow binds the callback function to a Window Object. The various usages of Callback Functions are available for perusal in [Arkose Development Documentation](https://developer.arkoselabs.com)
+The Arkose integration uses a standalone component with an injectable script service. The public key is stored in environment files. Once the script loads, the callback function is bound to a Window Object. NgZone is used to re-enter Angular's zone from Arkose callbacks that execute outside it. The various usages of Callback Functions are available for perusal in [Arkose Development Documentation](https://developer.arkoselabs.com)
 
-#### We have used NgZone in order to reenter Angular zone from a arkose task that was executed outside of the Angular zone.
+## Notes
+
+- This demo navigates to `/dashboard` on the `completed` event. In production, send the token to your backend and verify it with the Arkose Verify API before trusting it — never authenticate on the client token alone.
+- Pass a `nonce` input to `<arkose>` if you serve a strict `script-src` Content Security Policy.
+- In modal mode, call the component's `run()` method (via `viewChild`) to trigger the challenge on form submit; inline mode renders the challenge in place via the `selector` input (a full CSS selector, e.g. `#arkose-inline`).
+- On error the component checks the Arkose status page and auto-retries up to `maxRetries` times (default 2) before emitting `error`. Pass `[maxRetries]="0"` to disable.

angular-example/angular.json

@@ -1,34 +1,29 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
   "cli": {
-    "analytics": "c475f8a9-c7b3-4a9d-8f3b-fc42e83355c5",
-    "defaultCollection": "@angular-eslint/schematics"
+    "analytics": false
   },
-  "version": 1,
   "newProjectRoot": "projects",
   "projects": {
     "arkose-angular-demo": {
       "projectType": "application",
-      "schematics": {
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/arkose-angular-demo",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
             "styles": [
               "src/styles.css"
@@ -40,13 +35,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                 }
               ],
               "fileReplacements": [
@@ -58,62 +53,29 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "arkose-angular-demo:build:production"
+              "buildTarget": "arkose-angular-demo:build:production"
             },
             "development": {
-              "browserTarget": "arkose-angular-demo:build:development"
+              "buildTarget": "arkose-angular-demo:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "arkose-angular-demo:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
-          }
+          "builder": "@angular/build:extract-i18n"
         }
       }
     }
-  },
-  "defaultProject": "arkose-angular-demo"
+  }
 }