mapleopentech/monorepo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

login page gui

Browse source
This commit is contained in:
Rodolfo Martinez 2025-12-03 00:48:57 -05:00
parent 1a67296a8f
commit 3c6899ace5
5 changed files with 87 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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">
<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>
<ProgressIndicator
steps={[
{ label: "Email" },
{ label: "Verify" },
{ label: "Access" }
]}
currentStep={1}
className="mb-0"
/>
{/* 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">
<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>
<Divider text="New to MapleFile?" className="pt-2" />
{/* Register Link */}
<Link to="/register">
@ -372,68 +346,7 @@ const RequestOTT = () => {
</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>
<GDPRFooter containerClassName={`${getThemeClasses("bg-card")}/75`} />
</div>
);
};