diff --git a/Data/Engine/web-interface/src/Login.jsx b/Data/Engine/web-interface/src/Login.jsx index 593a3d81..244eb113 100644 --- a/Data/Engine/web-interface/src/Login.jsx +++ b/Data/Engine/web-interface/src/Login.jsx @@ -1,7 +1,17 @@ import React, { useMemo, useState } from "react"; import { Box, TextField, Button, Typography } from "@mui/material"; +/** + * Borealis MagicUI Login + * - Preserves original auth + MFA logic + * - Adds MagicUI-inspired visuals: + * • Aurora gradient background + * • Flickering Grid backdrop + * • ShineBorder card container + * - Minimal, component-local CSS (no external deps) + */ export default function Login({ onLogin }) { + // ----------------- Original state & logic ----------------- const [username, setUsername] = useState("admin"); const [password, setPassword] = useState(""); const [error, setError] = useState(""); @@ -156,179 +166,337 @@ export default function Login({ onLogin }) { ? "Multi-Factor Authentication" : "Borealis - Automation Platform"; + // ----------------- UI helpers ----------------- + const FieldLabel = ({ children }) => ( + + {children} + + ); + return ( - - - Borealis Logo - - {formTitle} - + <> + {/* Component-scoped styles for MagicUI effects */} + + +
+ {/* Background layers */} +
+
+ + {/* Card with ShineBorder */} +
+
+ +
+ Borealis Automation +
+ + + {step === "mfa" ? "Multi‑Factor Authentication" : ""} - )} - - - - )} - - + + {step === "credentials" ? ( + <> + Username + setUsername(e.target.value)} + margin="dense" + InputProps={{ sx: { borderRadius: 2 } }} + /> + + Password + setPassword(e.target.value)} + margin="dense" + InputProps={{ sx: { borderRadius: 2 } }} + /> + + {error &&
{error}
} + + + + ) : ( + <> + {mfaStage === "setup" ? ( + <> + + Scan the QR code with your authenticator app, then enter the 6‑digit code to + complete setup for {username}. + + {setupQr ? ( + + MFA enrollment QR code + + ) : null} + {formattedSecret ? ( +
+ Manual code +
{formattedSecret}
+
+ ) : null} + {setupUri ? ( + + {setupUri} + + ) : null} + + ) : ( + + Enter the 6‑digit code from your authenticator app for {username}. + + )} + + One‑time code + { + const raw = e.target.value || ""; + const digits = raw.replace(/\D/g, "").slice(0, 6); + setMfaCode(digits); + }} + disabled={isSubmitting} + margin="dense" + inputProps={{ + inputMode: "numeric", + pattern: "[0-9]*", + maxLength: 6, + style: { letterSpacing: "0.4rem", textAlign: "center", fontSize: "1.15rem" } + }} + autoComplete="one-time-code" + placeholder="• • • • • •" + /> + + {error &&
{error}
} + + + + + + )} + +
+
+
+ ); } +