From 0e9cb1e92e8af6f7bf8607d2d589e8fad2c5ea77 Mon Sep 17 00:00:00 2001 From: pahmiudahgede Date: Sun, 6 Jul 2025 21:20:02 +0700 Subject: [PATCH] refact: refactoring code for optimization style --- app/root.tsx | 3 +- ...ig-administator.emailotpverifyrequired.tsx | 380 +++++++++++------- .../sys-rijig-administrator.sign-infirst.tsx | 146 ++++--- 3 files changed, 326 insertions(+), 203 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index 26eb76d..3b0beb3 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -67,11 +67,10 @@ export function App() { { const timer = setInterval(() => { setTimeLeft((prev) => { @@ -143,6 +148,7 @@ export default function AdminVerifyOTP() { return () => clearInterval(timer); }, []); + // Reset timer when OTP is resent useEffect(() => { if (actionData?.success && actionData?.otpSentAt) { setTimeLeft(expiryMinutes * 60); @@ -189,163 +195,235 @@ export default function AdminVerifyOTP() { const maskedEmail = email.replace(/(.{2})(.*)(@.*)/, "$1***$3"); return ( -
-
- - -
- -
- - Verifikasi Email - -

- Masukkan kode OTP 4 digit yang telah dikirim ke -

-

{maskedEmail}

- +
+ {/* Background overlay with theme-aware gradient */} +
- - {/* Success Alert */} - {actionData?.success && actionData?.message && ( - - - - {actionData.message} - - - )} + {/* Animated background boxes */} + - {/* Error Alert */} - {actionData?.errors?.otp && ( - - - {actionData.errors.otp} - - )} + {/* Theme Toggle - Positioned at top-right */} + - {/* OTP Input Form */} -
- - - - -
- {/* OTP Input Fields */} -
- {otp.map((digit, index) => ( - (inputRefs.current[index] = el)} - type="text" - maxLength={1} - value={digit} - onChange={(e) => handleOtpChange(index, e.target.value)} - onKeyDown={(e) => handleKeyDown(index, e)} - onPaste={handlePaste} - className={cn( - "w-12 h-12 text-center text-lg font-bold", - actionData?.errors?.otp && "border-red-500" - )} - autoFocus={index === 0} - /> - ))} -
- - {/* Timer */} -
- {timeLeft > 0 ? ( -
- - Kode kedaluwarsa dalam {formatTime(timeLeft)} -
- ) : ( -
- Kode OTP telah kedaluwarsa -
- )} -
- - {/* Verify Button */} - + {/* Main content container */} +
+
+ + +
+
- - - {/* Resend OTP */} -
-

Tidak menerima kode?

-
- - - -
-
- - {/* Back to Login */} - - - {/* Demo Info */} -
-

- Demo OTP: + + Verifikasi Email + +

+ Masukkan kode OTP 4 digit yang telah dikirim ke

-
-

- Gunakan kode:{" "} - 1234 +

+ {maskedEmail} +

+ + + + {/* Success Alert */} + {actionData?.success && actionData?.message && ( + + + + {actionData.message} + + + )} + + {/* Error Alert */} + {actionData?.errors?.otp && ( + + + {actionData.errors.otp} + + )} + + {/* OTP Input Form */} +
+ + + + +
+ {/* OTP Input Fields */} +
+
+ {otp.map((digit, index) => ( + (inputRefs.current[index] = el)} + type="text" + maxLength={1} + value={digit} + onChange={(e) => + handleOtpChange(index, e.target.value) + } + onKeyDown={(e) => handleKeyDown(index, e)} + onPaste={handlePaste} + className={cn( + "w-14 h-14 text-center text-xl font-bold bg-background border-input transition-all duration-200 focus:scale-105", + actionData?.errors?.otp && + "border-red-500 dark:border-red-400" + )} + autoFocus={index === 0} + /> + ))} +
+ +

+ Tempel kode OTP atau ketik manual +

+
+ + {/* Timer */} +
+ {timeLeft > 0 ? ( +
+ + + Kode kedaluwarsa dalam {formatTime(timeLeft)} + +
+ ) : ( +
+ Kode OTP telah kedaluwarsa +
+ )} +
+ + {/* Verify Button */} + +
+
+ + {/* Resend OTP */} +
+

+ Tidak menerima kode?

-

Atau tunggu countdown habis untuk test resend

+
+ + + +
+
+ + {/* Security Info */} +
+
+ +
+

+ Keamanan Email +

+

+ Kode OTP dikirim melalui email terenkripsi untuk + memastikan keamanan akun administrator Anda. +

+
+
+
+ + {/* Demo Info */} +
+

+ Demo OTP: +

+
+

+ Gunakan kode:{" "} + + 1234 + +

+

Atau tunggu countdown habis untuk test resend

+
+
+ + {/* Back to Login */} +
+ + + Kembali ke Login + +
+ + + + {/* Footer */} +
+
+

Portal Administrator - Sistem Pengelolaan Sampah Terpadu

+
- - - - {/* Footer */} -
-

- Sistem Pengelolaan Sampah Terpadu -

+
diff --git a/app/routes/sys-rijig-administrator.sign-infirst.tsx b/app/routes/sys-rijig-administrator.sign-infirst.tsx index e7e928f..f9be2ec 100644 --- a/app/routes/sys-rijig-administrator.sign-infirst.tsx +++ b/app/routes/sys-rijig-administrator.sign-infirst.tsx @@ -107,23 +107,30 @@ export default function AdminLogin() { const isSubmitting = navigation.state === "submitting"; return ( -
-
+
+ {/* Background overlay with theme-aware gradient */} +
+ + {/* Animated background boxes */} - {/*
*/} -
-
- + + {/* Theme Toggle - Positioned at top-right */} + + + {/* Main content container */} +
+
+ {/* Form Login */} -
+
{/* Header */}
-
- +
+
-

+

Portal Administrator

@@ -143,23 +150,26 @@ export default function AdminLogin() { {/* Email Field */}

- +
- +
{actionData?.errors?.email && ( -

+

{actionData.errors.email}

)} @@ -168,31 +178,34 @@ export default function AdminLogin() { {/* Password Field */}
- + Lupa password?
- +
{actionData?.errors?.password && ( -

+

{actionData.errors.password}

)} @@ -214,9 +227,12 @@ export default function AdminLogin() { id="remember" name="remember" type="checkbox" - className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" + className="h-4 w-4 text-green-600 focus:ring-green-500 border-input rounded accent-green-600" /> -
@@ -224,7 +240,7 @@ export default function AdminLogin() { {/* Submit Button */} {/* Demo Credentials */} -
-

+

+

Demo Credentials:

-
+

Email: admin@wastemanagement.com

Password: admin123

@@ -250,17 +266,17 @@ export default function AdminLogin() {
- {/* Side Image */} -
-
+ {/* Side Illustration */} +
+
-
+

Kelola Sistem Sampah

-

+

Platform terpadu untuk mengelola pengumpulan, pengolahan, dan monitoring sampah di seluruh wilayah dengan efisiensi maksimal. @@ -268,29 +284,59 @@ export default function AdminLogin() { {/* Features List */}

-
-
- Monitoring Real-time -
-
-
- Manajemen Armada -
-
-
- Laporan Analytics -
-
-
- Koordinasi Tim -
+ {[ + "Monitoring Real-time", + "Manajemen Armada", + "Laporan Analytics", + "Koordinasi Tim" + ].map((feature, index) => ( +
+
+ + {feature} + +
+ ))}
+ + {/* Decorative Elements */} +
+
+ + {/* Footer */} +
+ +

© 2025 Waste Management System. Semua hak dilindungi.

+
-
);