npm - iri-shield - Versions diffs - 1.2.4 → 1.2.5 - Mend

iri-shield 1.2.4 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/package.json +1 -1
package/src/dashboard.js +83 -21

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "iri-shield",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Enterprise Express.js security middleware — explainable risk scoring, multi-signal identity profiling, behavioural anomaly detection, attack correlation, sensitive-data redaction, and dashboard monitoring.",
   "keywords": [
     "iri-shield",

package/src/dashboard.js CHANGED Viewed

@@ -1479,31 +1479,93 @@ function renderLogin(config, failed) {
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>iri-shield — Login</title>
+  <title>iri-shield - Dashboard Login</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+            display: ['Syne', 'Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+            mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace']
+          },
+          colors: {
+            paper: '#fbfbf8',
+            line: '#e5e7eb',
+            cobalt: '#d81d87',
+            rose: '#be123c',
+            pine: '#047857'
+          }
+        }
+      }
+    };
+  </script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Syne:wght@600;700;800&display=swap" rel="stylesheet">
 </head>
-<body class="min-h-screen bg-gray-50 text-gray-900">
-  <main class="flex min-h-screen items-center justify-center px-4">
-    <div class="w-full max-w-sm">
-      <div class="text-center mb-8">
-        <div class="inline-flex w-12 h-12 rounded-xl bg-blue-600 items-center justify-center mb-3 shadow-md">
-          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-          </svg>
+<body class="min-h-screen bg-paper text-slate-950 antialiased">
+  <main class="grid min-h-screen grid-cols-1 lg:grid-cols-[0.58fr_0.42fr]">
+    <section class="flex items-center border-b border-line bg-white px-6 py-12 lg:border-b-0 lg:border-r lg:px-12">
+      <div class="mx-auto w-full max-w-3xl">
+        <div class="mb-8 flex items-center gap-3">
+          <div class="grid h-11 w-11 place-items-center rounded-md bg-cobalt text-sm font-black text-white shadow-sm">IS</div>
+          <div>
+            <p class="text-sm font-extrabold">iri-shield</p>
+            <p class="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-500">Security dashboard</p>
+          </div>
+        </div>
+        <!-- <p class="mb-5 inline-flex rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs font-bold uppercase tracking-[0.18em] text-cobalt">Research telemetry console</p> -->
+        <h1 class="font-display text-5xl font-extrabold leading-[0.98] tracking-normal md:text-6xl">Monitor API threats with explainable decisions.</h1>
+        <p class="mt-6 max-w-2xl text-lg leading-8 text-slate-600">Sign in to inspect alerts, event traces, identity drift, blocked IPs, storage health, and redaction activity generated by the Iri-Shield middleware.</p>
+        <div class="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <div class="rounded-lg border border-line bg-slate-50 p-4">
+            <p class="font-mono text-xs font-bold text-cobalt">01</p>
+            <p class="mt-2 text-sm font-extrabold">Detect</p>
+            <p class="mt-1 text-xs leading-5 text-slate-500">Rules, anomalies, and attack sequences.</p>
+          </div>
+          <div class="rounded-lg border border-line bg-slate-50 p-4">
+            <p class="font-mono text-xs font-bold text-cobalt">02</p>
+            <p class="mt-2 text-sm font-extrabold">Explain</p>
+            <p class="mt-1 text-xs leading-5 text-slate-500">Risk scores with evidence breakdowns.</p>
+          </div>
+          <div class="rounded-lg border border-line bg-slate-50 p-4">
+            <p class="font-mono text-xs font-bold text-cobalt">03</p>
+            <p class="mt-2 text-sm font-extrabold">Mitigate</p>
+            <p class="mt-1 text-xs leading-5 text-slate-500">Alerts, blocking, and redaction.</p>
+          </div>
         </div>
-        <h1 class="text-2xl font-bold text-gray-900">iri-shield</h1>
-        <p class="text-sm text-gray-500 mt-1">Enterprise Security Dashboard</p>
       </div>
-      <form method="post" action="${escapeHtml(config.dashboard?.path || '/iri-shield')}/login" class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
-        ${failed ? '<div class="mb-4 rounded-lg bg-red-50 border border-red-200 px-3 py-2 text-sm text-red-700 font-medium">Invalid username or password.</div>' : ''}
-        <label class="block text-sm font-medium text-gray-700 mb-1" for="username">Username</label>
-        <input class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 mb-4" id="username" name="username" autocomplete="username" required />
-        <label class="block text-sm font-medium text-gray-700 mb-1" for="password">Password</label>
-        <input class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 mb-5" id="password" name="password" type="password" autocomplete="current-password" required />
-        <button class="w-full rounded-lg bg-blue-600 px-4 py-2.5 font-semibold text-white hover:bg-blue-700 transition-colors shadow-sm" type="submit">Sign in</button>
-      </form>
-      <p class="text-center text-xs text-gray-400 mt-4">${escapeHtml(config.appName || 'iri-shield')} Security Platform</p>
-    </div>
+    </section>
+    <section class="flex items-center px-6 py-12 lg:px-12">
+      <div class="mx-auto w-full max-w-md">
+        <div class="rounded-lg border border-line bg-white p-6 shadow-xl shadow-slate-200/60">
+          <div class="mb-6">
+            <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-500">Authenticated access</p>
+            <h2 class="mt-2 font-display text-3xl font-bold tracking-normal">Dashboard sign in</h2>
+            <p class="mt-2 text-sm leading-6 text-slate-600">Use the configured administrator credentials for ${escapeHtml(config.appName || 'iri-shield')}.</p>
+          </div>
+          ${failed ? '<div class="mb-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm font-semibold text-red-700">Invalid username or password.</div>' : ''}
+          <form method="post" action="${escapeHtml(config.dashboard?.path || '/iri-shield')}/login" class="space-y-4">
+            <label class="block">
+              <span class="mb-1 block text-sm font-bold text-slate-700">Username</span>
+              <input class="w-full rounded-md border border-line bg-white px-3 py-2.5 text-sm outline-none transition focus:border-cobalt focus:ring-4 focus:ring-blue-100" id="username" name="username" autocomplete="username" required />
+            </label>
+            <label class="block">
+              <span class="mb-1 block text-sm font-bold text-slate-700">Password</span>
+              <input class="w-full rounded-md border border-line bg-white px-3 py-2.5 text-sm outline-none transition focus:border-cobalt focus:ring-4 focus:ring-blue-100" id="password" name="password" type="password" autocomplete="current-password" required />
+            </label>
+            <button class="w-full rounded-md bg-cobalt px-4 py-3 text-sm font-extrabold text-white shadow-sm transition hover:bg-blue-700" type="submit">Sign in to dashboard</button>
+          </form>
+        </div>
+        <div class="mt-4 rounded-lg border border-dashed border-slate-300 bg-slate-50 p-4">
+          <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-500">Media slot</p>
+          <p class="mt-2 text-sm leading-6 text-slate-600">Optional future visual: a compact looping animation of alert cards entering the dashboard, risk scores rising, and sensitive fields being masked.</p>
+        </div>
+      </div>
+    </section>
   </main>
 </body>
 </html>`;