style: some clean up

2026-09-07 20:05:41 +00:00 · 2026-06-19 16:24:20 +03:00
parent 2b4da2397c
commit 9caf9bbd59
6 changed files with 344 additions and 170 deletions
--- a/apps/edr-freight-web/backoffice/src/pages/auth/LoginPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/auth/LoginPage.tsx
@@ -1,6 +1,15 @@
 import { type FormEvent, useState } from "react";
 import { parsePhoneNumberFromString } from "libphonenumber-js";
-import { Eye, EyeOff, Mail, Smartphone, UserRound, ArrowUpRight, Globe, ChevronDown } from "lucide-react";
+import {
+  Eye,
+  EyeOff,
+  Mail,
+  Smartphone,
+  UserRound,
+  ArrowUpRight,
+  Globe,
+  ChevronDown,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";

 import { useAuth } from "@/auth/useAuth";
@@ -13,10 +22,25 @@ const loginModes: Array<{
  icon: typeof Mail;
  placeholder: string;
 }> = [
-  { value: "email", label: "Email", icon: Mail, placeholder: "name@company.com" },
-  { value: "phone", label: "Phone", icon: Smartphone, placeholder: "09XXXXXXXX" },
-  { value: "username", label: "Username", icon: UserRound, placeholder: "username" },
-];
+    {
+      value: "email",
+      label: "Email",
+      icon: Mail,
+      placeholder: "name@company.com",
+    },
+    {
+      value: "phone",
+      label: "Phone",
+      icon: Smartphone,
+      placeholder: "09XXXXXXXX",
+    },
+    {
+      value: "username",
+      label: "Username",
+      icon: UserRound,
+      placeholder: "username",
+    },
+  ];

 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const usernamePattern = /^[a-zA-Z0-9._-]{3,32}$/;
@@ -43,7 +67,9 @@ const normalizeIdentifier = (mode: LoginMode, value: string) => {
  }

  if (!usernamePattern.test(trimmed)) {
-    throw new Error("Username must be 3-32 characters and use letters, numbers, ., _, or -.");
+    throw new Error(
+      "Username must be 3-32 characters and use letters, numbers, ., _, or -.",
+    );
  }

  return trimmed;
@@ -59,14 +85,24 @@ const primaryButtonClass =
  "h-11 w-full rounded-full bg-primary text-sm font-semibold text-primary-foreground shadow-[0_8px_20px_-6px_rgba(16,94,52,0.5)] transition-all duration-200 hover:bg-primary/90 hover:shadow-[0_10px_24px_-6px_rgba(16,94,52,0.55)] active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none";

 const LeftPanelDecor = () => (
-  <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
+  <div
+    className="pointer-events-none absolute inset-0 overflow-hidden"
+    aria-hidden
+  >
    <svg
      className="absolute -bottom-24 -left-24 h-[420px] w-[420px] text-white/[0.07]"
      viewBox="0 0 400 400"
      fill="none"
    >
      {[0, 1, 2, 3, 4, 5].map((ring) => (
-        <circle key={ring} cx="200" cy="200" r={60 + ring * 36} stroke="currentColor" strokeWidth="1" />
+        <circle
+          key={ring}
+          cx="200"
+          cy="200"
+          r={60 + ring * 36}
+          stroke="currentColor"
+          strokeWidth="1"
+        />
      ))}
    </svg>
    <div className="absolute right-0 top-0 h-40 w-40 rounded-full bg-white/[0.06] blur-2xl" />
@@ -74,12 +110,23 @@ const LeftPanelDecor = () => (
 );

 const RightPanelDecor = () => (
-  <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
+  <div
+    className="pointer-events-none absolute inset-0 overflow-hidden"
+    aria-hidden
+  >
    <div className="absolute -right-16 -top-20 h-56 w-56 rounded-full bg-primary/[0.06] blur-3xl" />
    <div className="absolute -bottom-12 left-1/4 h-40 w-40 rounded-full bg-primary/[0.04] blur-2xl" />
-    <svg className="absolute inset-0 h-full w-full text-gray-200/40" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className="absolute inset-0 h-full w-full text-gray-200/40"
+      xmlns="http://www.w3.org/2000/svg"
+    >
      <defs>
-        <pattern id="login-grid" width="28" height="28" patternUnits="userSpaceOnUse">
+        <pattern
+          id="login-grid"
+          width="28"
+          height="28"
+          patternUnits="userSpaceOnUse"
+        >
          <circle cx="1" cy="1" r="0.75" fill="currentColor" />
        </pattern>
      </defs>
@@ -99,7 +146,11 @@ const LeftPanel = () => (
    <LeftPanelDecor />

    <div className="relative z-10 flex shrink-0 items-center justify-between px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
-      <img src={EDR_LOGO} alt="EDR Freight" className="h-7 w-auto brightness-0 invert sm:h-9" />
+      <img
+        src={EDR_LOGO}
+        alt="EDR Freight"
+        className="h-7 w-auto brightness-0 invert sm:h-9"
+      />
      <a
        href="#"
        className="flex items-center gap-1.5 rounded-full border border-white/70 bg-white/10 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/20 sm:px-4 sm:py-2 sm:text-sm"
@@ -118,8 +169,8 @@ const LeftPanel = () => (
          </span>
        </div>
        <p className="text-sm leading-relaxed text-white/85">
-          Sign in to manage bookings, track cargo, and run logistics operations on the
-          Ethio Djibouti Railway freight platform.
+          Sign in to manage bookings, track cargo, and run logistics operations
+          on the Ethio Djibouti Railway freight platform.
        </p>
      </div>
    </div>
@@ -138,13 +189,22 @@ const FormFooter = () => (
  <div className="relative z-10 flex shrink-0 flex-col items-center justify-between gap-3 border-t border-gray-100 px-4 py-4 text-xs text-gray-400 sm:flex-row sm:gap-4 sm:px-6 sm:py-4 lg:px-8 lg:pb-6">
    <span className="shrink-0">© 2026 EDR Freight</span>
    <div className="flex flex-wrap items-center justify-center gap-3 sm:justify-end sm:gap-6">
-      <a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
+      <a
+        href="#"
+        className="font-semibold text-gray-700 transition-colors hover:text-primary"
+      >
        Terms & Conditions
      </a>
-      <a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
+      <a
+        href="#"
+        className="font-semibold text-gray-700 transition-colors hover:text-primary"
+      >
        Privacy Policy
      </a>
-      <a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
+      <a
+        href="#"
+        className="font-semibold text-gray-700 transition-colors hover:text-primary"
+      >
        Help & Support
      </a>
    </div>
@@ -176,7 +236,7 @@ const LoginPage = () => {
      setNormalizedIdentifier(normalized);

      const result = await login({ email: normalized, password });
-      console.log(result)
+      console.log(result);
      if (result.mfaRequired) {
        setNeedsMfa(true);
        return;
@@ -212,15 +272,20 @@ const LoginPage = () => {
      </div>

      <div className="mb-4 space-y-1.5 text-center sm:mb-5">
-        <h1 className="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">Get Started</h1>
+        <h1 className="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
+          Get Started
+        </h1>
        <p className="text-sm leading-relaxed text-gray-500">
-          Log in to access the freight backoffice & explore all logistics resources.
+          Log in to access the freight backoffice & explore all logistics
+          resources.
        </p>
      </div>

      <div className="flex w-full flex-col gap-4">
        <div className="space-y-1.5">
-          <label className="text-sm font-medium text-gray-800">Sign in method</label>
+          <label className="text-sm font-medium text-gray-800">
+            Sign in method
+          </label>
          <div className="relative">
            <select
              value={mode}
@@ -267,32 +332,26 @@ const LoginPage = () => {
              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 transition-colors hover:text-gray-600"
              aria-label={showPassword ? "Hide password" : "Show password"}
            >
-              {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+              {showPassword ? (
+                <EyeOff className="h-5 w-5" />
+              ) : (
+                <Eye className="h-5 w-5" />
+              )}
            </button>
          </div>
        </div>

-        <label className="flex cursor-pointer items-start gap-2.5">
-          <input
-            type="checkbox"
-            className="mt-0.5 h-4 w-4 shrink-0 cursor-pointer rounded-md border-gray-300 text-primary transition-colors focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
-          />
-          <span className="text-sm leading-snug text-gray-600">
-            I agree to EDR Freight{" "}
-            <a href="#" className="font-semibold text-primary hover:underline">
-              Terms & Conditions
-            </a>
-            .
-          </span>
-        </label>
-
        {error ? (
          <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 text-sm text-red-700">
            {error}
          </div>
        ) : null}

-        <button type="submit" disabled={submitting} className={primaryButtonClass}>
+        <button
+          type="submit"
+          disabled={submitting}
+          className={primaryButtonClass}
+        >
          {submitting ? "Signing in..." : "Sign In"}
        </button>

@@ -318,8 +377,10 @@ const LoginPage = () => {
        </h1>
        <p className="text-sm leading-relaxed text-gray-500">
          We sent a verification code to{" "}
-          <span className="font-medium text-gray-700">{normalizedIdentifier}</span>. Enter it below
-          to complete sign in.
+          <span className="font-medium text-gray-700">
+            {normalizedIdentifier}
+          </span>
+          . Enter it below to complete sign in.
        </p>
      </div>

@@ -354,7 +415,11 @@ const LoginPage = () => {
          >
            Back
          </button>
-          <button type="submit" disabled={submitting} className={`${primaryButtonClass} min-w-0 flex-1`}>
+          <button
+            type="submit"
+            disabled={submitting}
+            className={`${primaryButtonClass} min-w-0 flex-1`}
+          >
            {submitting ? "Verifying..." : "Verify"}
          </button>
        </div>