login page gui
This commit is contained in:
parent
1a67296a8f
commit
3c6899ace5
5 changed files with 87 additions and 104 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue