login page gui

native/desktop/maplefile/frontend/package-lock.json

@@ -50,6 +50,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -463,6 +464,7 @@
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -530,6 +532,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -1213,6 +1216,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -1225,6 +1229,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -1411,6 +1416,7 @@
       "integrity": "sha512-K/jGKL/PgbIgKCiJo5QbASQhFiV02X9Jh+Qq0AKCRCRKZtOTVi4t6wh75FDpGf2N9rYOnzH87OEFQNaFy6pdxQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.15.9",
         "postcss": "^8.4.18",

web/maplefile-frontend/src/components/UIX/ProgressIndicator/ProgressIndicator.jsx

@@ -34,6 +34,8 @@ const ProgressIndicator = memo(function ProgressIndicator({
       textSecondary: getThemeClasses("text-secondary"),
       stepInactive: getThemeClasses("step-inactive"),
       stepInactiveText: getThemeClasses("step-inactive-text"),
+      stepCompleted: getThemeClasses("step-completed"),
+      stepCompletedLine: getThemeClasses("step-completed-line"),
     }),
     [getThemeClasses],
   );
@@ -67,7 +69,7 @@ const ProgressIndicator = memo(function ProgressIndicator({
                 <div
                   className={`flex items-center justify-center w-8 h-8 rounded-full text-white text-sm font-bold ${
                     isCompleted
-                      ? "bg-green-500"
+                      ? themeClasses.stepCompleted
                       : isActive
                       ? themeClasses.bgGradientSecondary
                       : themeClasses.stepInactive
@@ -96,7 +98,7 @@ const ProgressIndicator = memo(function ProgressIndicator({
               {index < steps.length - 1 && (
                 <div
                   className={`w-12 h-0.5 ${
-                    stepNumber < currentStep ? "bg-green-500" : themeClasses.stepInactive
+                    stepNumber < currentStep ? themeClasses.stepCompletedLine : themeClasses.stepInactive
                   }`}
                 ></div>
               )}

web/maplefile-frontend/src/components/UIX/themes/index.js

@@ -216,6 +216,8 @@ const getThemeConfigs = () => {
         "progress-bar-fill": "bg-blue-500",
         "step-inactive": "bg-gray-300",
         "step-inactive-text": "text-gray-600",
+        "step-completed": "bg-green-500",
+        "step-completed-line": "bg-green-500",
 
         // Search filter
         "search-bg": "bg-gray-50",
@@ -421,6 +423,8 @@ const getThemeConfigs = () => {
         "progress-bar-fill": "bg-red-500",
         "step-inactive": "bg-gray-300",
         "step-inactive-text": "text-gray-600",
+        "step-completed": "bg-green-500",
+        "step-completed-line": "bg-green-500",
 
         // Search filter
         "search-bg": "bg-gray-50",
@@ -627,6 +631,8 @@ const getThemeConfigs = () => {
         "progress-bar-fill": "bg-purple-500",
         "step-inactive": "bg-gray-300",
         "step-inactive-text": "text-gray-600",
+        "step-completed": "bg-green-500",
+        "step-completed-line": "bg-green-500",
 
         // Search filter
         "search-bg": "bg-gray-50",
@@ -832,6 +838,8 @@ const getThemeConfigs = () => {
         "progress-bar-fill": "bg-green-500",
         "step-inactive": "bg-gray-300",
         "step-inactive-text": "text-gray-600",
+        "step-completed": "bg-emerald-500",
+        "step-completed-line": "bg-emerald-500",
 
         // Search filter
         "search-bg": "bg-gray-50",
@@ -1037,6 +1045,8 @@ const getThemeConfigs = () => {
         "progress-bar-fill": "bg-slate-500",
         "step-inactive": "bg-gray-300",
         "step-inactive-text": "text-gray-600",
+        "step-completed": "bg-green-500",
+        "step-completed-line": "bg-green-500",
 
         // Search filter
         "search-bg": "bg-gray-50",

web/maplefile-frontend/src/index.css

@@ -242,7 +242,7 @@ h6 {
 @keyframes fade-in-up {
     from {
         opacity: 0;
-        transform: translateY(10px);
+        transform: translateY(30px);
     }
     to {
         opacity: 1;
@@ -293,13 +293,37 @@ h6 {
     }
 }
 
+@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);
+    }
+}
+
+@keyframes swipe {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
 /* Animation Classes */
 .animate-fade-in {
     animation: fade-in var(--transition-slow) ease-out;
 }
 
 .animate-fade-in-up {
-    animation: fade-in-up var(--transition-slow) ease-out;
+    animation: fade-in-up 0.6s ease-out forwards;
 }
 
 .animate-fade-in-down {
@@ -318,6 +342,34 @@ h6 {
     animation: pulse-soft 2s ease-in-out infinite;
 }
 
+.animate-blob {
+    animation: blob 7s infinite;
+}
+
+.animation-delay-2000 {
+    animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+    animation-delay: 4s;
+}
+
+/* Button swipe effect */
+.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;
+}
+
 /* Hover Lift Effect */
 .hover-lift {
     @apply transition-transform duration-200 hover:-translate-y-1;

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

@@ -3,7 +3,7 @@
 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 { Card, Input, Button, Alert, GDPRFooter, ProgressIndicator, Divider } from "../../../components/UIX";
 import { useUIXTheme } from "../../../components/UIX/themes/useUIXTheme";
 import {
   ArrowRightIcon,
@@ -205,32 +205,15 @@ const RequestOTT = () => {
       <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">
+          <ProgressIndicator
-            <div className="flex items-center space-x-4">
+            steps={[
-              <div className="flex items-center">
+              { label: "Email" },
-                <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`}>
+              { label: "Verify" },
-                  1
+              { label: "Access" }
-                </div>
+            ]}
-                <span className={`ml-2 text-sm font-semibold ${getThemeClasses("text-primary")}`}>
+            currentStep={1}
-                  Email
+            className="mb-0"
-                </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">
@@ -247,7 +230,7 @@ const RequestOTT = () => {
 
           {/* Login Form */}
           <Card
-            className="backdrop-blur-sm bg-white/95 shadow-2xl animate-fade-in-up"
+            className={`backdrop-blur-sm ${getThemeClasses("bg-card")}/95 shadow-2xl animate-fade-in-up`}
             style={{ animationDelay: "100ms" }}
           >
             <form onSubmit={handleSubmit} className="space-y-6">
@@ -332,16 +315,7 @@ const RequestOTT = () => {
                 </span>
               </Button>
 
-              <div className="relative pt-2">
+              <Divider text="New to MapleFile?" className="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">
@@ -372,68 +346,7 @@ const RequestOTT = () => {
       </div>
 
       {/* Footer */}
-      <GDPRFooter containerClassName="bg-white/75" />
+      <GDPRFooter containerClassName={`${getThemeClasses("bg-card")}/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>
   );
 };