Initial commit: Open sourcing all of the Maple Open Technologies code.

web/maplefile-frontend/src/pages/Anonymous/Login/RequestOTT.jsx

@@ -0,0 +1,441 @@
+// File: monorepo/web/maplefile-frontend/src/pages/Anonymous/Login/RequestOTT.jsx
+// UIX version - Step 1: Request One-Time Token
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useNavigate, Link } from "react-router";
+import { useServices } from "../../../services/Services";
+import { Card, Input, Button, Alert, GDPRFooter } from "../../../components/UIX";
+import { useUIXTheme } from "../../../components/UIX/themes/useUIXTheme";
+import {
+  ArrowRightIcon,
+  LockClosedIcon,
+  ShieldCheckIcon,
+  SparklesIcon,
+} from "@heroicons/react/24/outline";
+
+const RequestOTT = () => {
+  const navigate = useNavigate();
+  const { authManager } = useServices();
+  const { getThemeClasses } = useUIXTheme();
+
+  // Refs for cleanup and preventing state updates after unmount
+  const isMountedRef = useRef(true);
+  const timeoutRef = useRef(null);
+
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState("");
+  const [generalError, setGeneralError] = useState("");
+  const [fieldErrors, setFieldErrors] = useState({});
+
+  // Cleanup effect - prevents memory leaks
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    return () => {
+      isMountedRef.current = false;
+      // Clear any pending timeouts
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  const handleSubmit = useCallback(async (e) => {
+    e.preventDefault();
+
+    // Prevent state updates if component is unmounted
+    if (!isMountedRef.current) return;
+
+    setLoading(true);
+    setGeneralError("");
+    setFieldErrors({});
+    setMessage("");
+
+    try {
+      // Validate services
+      if (!authManager) {
+        throw new Error(
+          "Authentication service not available. Please refresh the page.",
+        );
+      }
+
+      const trimmedEmail = email.trim().toLowerCase();
+
+      // Log only in development
+      if (import.meta.env.DEV) {
+        console.log("[RequestOTT] Requesting OTT via AuthManager");
+      }
+
+      // Store email BEFORE making the request
+      sessionStorage.setItem("loginEmail", trimmedEmail);
+
+      // Make the OTT request
+      let response;
+      if (typeof authManager.requestOTT === "function") {
+        response = await authManager.requestOTT(trimmedEmail);
+      } else if (typeof authManager.requestOTP === "function") {
+        response = await authManager.requestOTP({ email: trimmedEmail });
+      } else {
+        // Generic error message - don't expose implementation details
+        throw new Error("Authentication service is temporarily unavailable.");
+      }
+
+      // Check if component is still mounted before updating state
+      if (!isMountedRef.current) return;
+
+      setMessage(response.message || "Verification code sent successfully!");
+
+      // Store email in localStorage via authManager if available
+      try {
+        if (
+          authManager.setCurrentUserEmail &&
+          typeof authManager.setCurrentUserEmail === "function"
+        ) {
+          authManager.setCurrentUserEmail(trimmedEmail);
+        }
+      } catch (storageError) {
+        // Silently handle storage errors - non-critical
+        if (import.meta.env.DEV) {
+          console.warn("[RequestOTT] Could not store email via authManager:", storageError);
+        }
+      }
+
+      // Wait a moment to show the success message, then navigate
+      // Store timeout ID for cleanup
+      timeoutRef.current = setTimeout(() => {
+        if (isMountedRef.current) {
+          navigate("/login/verify-ott");
+        }
+      }, 2000);
+    } catch (err) {
+      // Check if component is still mounted before updating state
+      if (!isMountedRef.current) return;
+
+      // Log only in development
+      if (import.meta.env.DEV) {
+        console.error("[RequestOTT] OTT request failed:", err);
+      }
+
+      // Parse RFC 9457 error response
+      if (err.fieldErrors && Object.keys(err.fieldErrors).length > 0) {
+        setFieldErrors(err.fieldErrors);
+        setGeneralError("Please fix the following issues:");
+      } else if (err.message) {
+        // Sanitize error messages - remove technical details
+        let userMessage = err.message;
+
+        // Remove technical prefixes
+        userMessage = userMessage.replace(/^Failed to request OTT:\s*/i, '');
+        userMessage = userMessage.replace(/^Request failed:\s*/i, '');
+        userMessage = userMessage.replace(/^Error:\s*/i, '');
+        userMessage = userMessage.replace(/^Authentication service.*$/i, 'Service temporarily unavailable.');
+
+        // Replace generic validation message with friendlier one
+        if (userMessage.includes('One or more fields failed validation')) {
+          userMessage = 'Please check your email address and try again.';
+        }
+
+        // Prevent information disclosure - sanitize technical errors
+        if (userMessage.includes('method not found') ||
+            userMessage.includes('not defined') ||
+            userMessage.includes('undefined')) {
+          userMessage = 'Service temporarily unavailable. Please try again later.';
+        }
+
+        setGeneralError(userMessage);
+      } else {
+        setGeneralError("Could not send login code. Please try again.");
+      }
+    } finally {
+      // Check if component is still mounted before updating state
+      if (isMountedRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [email, authManager, navigate]); // Include all dependencies
+
+  const handleKeyPress = useCallback((e) => {
+    if (e.key === "Enter" && email && !loading) {
+      handleSubmit(e);
+    }
+  }, [email, loading, handleSubmit]); // Include all dependencies
+
+  return (
+    <div className={`min-h-screen relative overflow-hidden ${getThemeClasses("bg-gradient-primary")}`}>
+      {/* Decorative background blobs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className={`absolute -top-40 -right-40 w-80 h-80 ${getThemeClasses("decorative-blob-1")} rounded-full filter blur-xl opacity-30 animate-blob`}></div>
+        <div className={`absolute -bottom-40 -left-40 w-80 h-80 ${getThemeClasses("decorative-blob-2")} rounded-full filter blur-xl opacity-30 animate-blob animation-delay-2000`}></div>
+        <div className={`absolute top-40 left-40 w-80 h-80 ${getThemeClasses("decorative-blob-3")} rounded-full filter blur-xl opacity-30 animate-blob animation-delay-4000`}></div>
+      </div>
+
+      {/* Header */}
+      <div className="relative z-10 flex-shrink-0">
+        <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex justify-between items-center">
+          <Link to="/" className="inline-flex items-center space-x-3 group">
+            <div className="relative">
+              <div className={`absolute inset-0 ${getThemeClasses("bg-gradient-secondary")} rounded-xl opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300`}></div>
+              <div className={`relative flex items-center justify-center h-10 w-10 ${getThemeClasses("bg-gradient-secondary")} rounded-xl shadow-md group-hover:shadow-lg transform group-hover:scale-105 transition-all duration-200`}>
+                <LockClosedIcon className="h-5 w-5 text-white" />
+              </div>
+            </div>
+            <span className={`text-xl font-bold ${getThemeClasses("text-primary")} transition-colors duration-200`}>
+              MapleFile
+            </span>
+          </Link>
+          <div className="flex items-center space-x-6">
+            <Link
+              to="/register"
+              className={`text-base font-medium ${getThemeClasses("link-secondary")} transition-colors duration-200`}
+            >
+              Need an account?
+            </Link>
+            <Link
+              to="/recovery"
+              className={`text-base font-medium ${getThemeClasses("link-secondary")} transition-colors duration-200`}
+            >
+              Forgot password?
+            </Link>
+          </div>
+        </nav>
+      </div>
+
+      {/* Main Content */}
+      <div className="relative z-10 flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 py-12">
+        <div className="w-full max-w-md space-y-8 animate-fade-in-up">
+          {/* Progress Indicator */}
+          <div className="flex items-center justify-center">
+            <div className="flex items-center space-x-4">
+              <div className="flex items-center">
+                <div className={`flex items-center justify-center w-8 h-8 ${getThemeClasses("bg-gradient-secondary")} rounded-full text-white text-sm font-bold shadow-md`}>
+                  1
+                </div>
+                <span className={`ml-2 text-sm font-semibold ${getThemeClasses("text-primary")}`}>
+                  Email
+                </span>
+              </div>
+              <div className="w-12 h-0.5 bg-gray-300"></div>
+              <div className="flex items-center">
+                <div className="flex items-center justify-center w-8 h-8 bg-gray-200 rounded-full text-gray-500 text-sm font-bold">
+                  2
+                </div>
+                <span className={`ml-2 text-sm ${getThemeClasses("text-secondary")}`}>Verify</span>
+              </div>
+              <div className="w-12 h-0.5 bg-gray-300"></div>
+              <div className="flex items-center">
+                <div className="flex items-center justify-center w-8 h-8 bg-gray-200 rounded-full text-gray-500 text-sm font-bold">
+                  3
+                </div>
+                <span className={`ml-2 text-sm ${getThemeClasses("text-secondary")}`}>Access</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Welcome Message */}
+          <div className="text-center">
+            <div className="flex justify-center mb-6">
+              <div className="relative">
+                <div className={`absolute inset-0 ${getThemeClasses("bg-gradient-secondary")} rounded-2xl blur-2xl opacity-20`}></div>
+                <div className={`relative h-16 w-16 ${getThemeClasses("bg-gradient-secondary")} rounded-2xl flex items-center justify-center shadow-xl`}>
+                  <ShieldCheckIcon className="h-8 w-8 text-white" />
+                </div>
+              </div>
+            </div>
+            <h1 className={`text-3xl font-bold ${getThemeClasses("text-primary")}`}>Secure Sign In</h1>
+          </div>
+
+          {/* Login Form */}
+          <Card
+            className="backdrop-blur-sm bg-white/95 shadow-2xl animate-fade-in-up"
+            style={{ animationDelay: "100ms" }}
+          >
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Error Alert */}
+              {(generalError || Object.keys(fieldErrors).length > 0) && (
+                <Alert type="error" dismissible onDismiss={() => { setGeneralError(""); setFieldErrors({}); }}>
+                  <div>
+                    {generalError && (
+                      <p className="text-sm font-medium mb-2">
+                        {generalError}
+                      </p>
+                    )}
+                    {Object.keys(fieldErrors).length > 0 && (
+                      <ul className="list-disc list-inside text-sm space-y-1">
+                        {Object.entries(fieldErrors).map(([field, error]) => (
+                          <li key={field}>
+                            <span className="font-medium capitalize">{field}:</span> {error}
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                </Alert>
+              )}
+
+              {/* Success Message */}
+              {message && (
+                <Alert type="success">
+                  <div>
+                    <p className="text-sm">{message}</p>
+                    <p className="text-sm mt-1">
+                      Redirecting to verification...
+                    </p>
+                  </div>
+                </Alert>
+              )}
+
+              {/* GDPR Notice */}
+              <Alert type="info">
+                <div className="text-xs">
+                  <p className="font-semibold mb-1">Data Processing Notice</p>
+                  <p>
+                    Your email is temporarily stored in your browser to send you a login code—see our{" "}
+                    <Link to="/privacy" className={`${getThemeClasses("link-primary")} underline`}>
+                      Privacy Policy
+                    </Link>{" "}
+                    for full details.
+                  </p>
+                </div>
+              </Alert>
+
+              {/* Email Input - UIX Component */}
+              <Input
+                label="Email Address"
+                type="email"
+                name="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(value) => setEmail(value)}
+                onKeyPress={handleKeyPress}
+                disabled={loading}
+                required
+                error={fieldErrors.email}
+                autoComplete="email"
+                icon={ShieldCheckIcon}
+                helperText="We'll send a verification code to this email address"
+              />
+
+              {/* Submit Button - UIX Component */}
+              <Button
+                type="submit"
+                variant="primary"
+                fullWidth
+                disabled={loading || !authManager}
+                loading={loading}
+                loadingText="Sending login code..."
+                className="button-swipe-effect overflow-hidden relative"
+              >
+                <span className="inline-flex items-center justify-center gap-2 relative z-10">
+                  <span>Continue with Email</span>
+                  <ArrowRightIcon className="h-5 w-5" />
+                </span>
+              </Button>
+
+              <div className="relative pt-2">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-200"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className={`px-4 bg-white ${getThemeClasses("text-secondary")}`}>
+                    New to MapleFile?
+                  </span>
+                </div>
+              </div>
+
+              {/* Register Link */}
+              <Link to="/register">
+                <Button
+                  type="button"
+                  variant="outline"
+                  fullWidth
+                >
+                  <span className="inline-flex items-center justify-center gap-2">
+                    <span>Create an Account</span>
+                    <SparklesIcon className="h-5 w-5" />
+                  </span>
+                </Button>
+              </Link>
+
+              {/* Help Link */}
+              <div className="text-center pt-2">
+                <Link
+                  to="/recovery"
+                  className={`text-sm ${getThemeClasses("link-primary")} font-medium hover:underline`}
+                >
+                  Forgot your password?
+                </Link>
+              </div>
+            </form>
+          </Card>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <GDPRFooter containerClassName="bg-white/75" />
+
+      {/* Animation Styles */}
+      <style>{`
+        @keyframes fade-in-up {
+          from {
+            opacity: 0;
+            transform: translateY(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-fade-in-up {
+          animation: fade-in-up 0.6s ease-out forwards;
+        }
+        @keyframes swipe {
+          0% {
+            transform: translateX(-100%);
+          }
+          100% {
+            transform: translateX(100%);
+          }
+        }
+        .button-swipe-effect::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+          transform: translateX(-100%);
+        }
+        .button-swipe-effect:active:not(:disabled)::before {
+          animation: swipe 0.6s ease-out;
+        }
+        @keyframes blob {
+          0% {
+            transform: translate(0px, 0px) scale(1);
+          }
+          33% {
+            transform: translate(30px, -50px) scale(1.1);
+          }
+          66% {
+            transform: translate(-20px, 20px) scale(0.9);
+          }
+          100% {
+            transform: translate(0px, 0px) scale(1);
+          }
+        }
+        .animate-blob {
+          animation: blob 7s infinite;
+        }
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+        .animation-delay-4000 {
+          animation-delay: 4s;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default RequestOTT;