From dd2ff2074f53b6fa7529c4d507977722c910e340 Mon Sep 17 00:00:00 2001 From: dwindown Date: Tue, 11 Nov 2025 00:03:14 +0700 Subject: [PATCH] fix: Login logo 401, link focus styles, payment/shipping active colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 1. Fix Logo 401 Error on Login ✅ **Issue:** Logo image returns 401 Unauthorized on login page **Root Cause:** `/store/settings` endpoint requires authentication **Solution:** Created public branding endpoint ```php // GET /woonoow/v1/store/branding (PUBLIC) public function get_branding() { return [ 'store_name' => get_option('blogname'), 'store_logo' => get_option('woonoow_store_logo'), 'store_icon' => get_option('woonoow_store_icon'), 'store_tagline' => get_option('woonoow_store_tagline'), ]; } ``` **Frontend:** Updated Login.tsx to use `/store/branding` instead **Result:** Logo loads without authentication ✅ --- ## 2. Override WordPress Link Focus Styles ✅ **Issue:** WordPress common.css applies focus/active styles to links **Solution:** Added CSS override ```css a:focus, a:active { outline: none !important; box-shadow: none !important; } ``` **Result:** Clean focus states, no WordPress interference --- ## 3. Active Color for Manual Payment Methods ✅ **Issue:** Manual payments use static gray icon, online payments use green/primary **Solution:** Applied same active color logic ```tsx
``` **Result:** - ✅ Enabled = Green background + green icon - ✅ Disabled = Primary background + primary icon - ✅ Consistent with online payments --- ## 4. Active Color for Shipping Icons ✅ **Issue:** Shipping icons always gray, no visual indicator of enabled state **Solution:** Applied active color to all shipping icons - Zone summary view - Desktop accordion view - Mobile accordion view ```tsx
``` **Result:** - ✅ Enabled shipping = Green icon - ✅ Disabled shipping = Primary icon - ✅ Consistent visual language across payments & shipping --- ## 5. Notification Strategy ✅ **Acknowledged:** Clean structure, ready for implementation --- ## Summary ✅ Public branding endpoint (no auth required) ✅ Logo loads on login page ✅ WordPress link focus styles overridden ✅ Manual payments have active colors ✅ Shipping methods have active colors ✅ Consistent visual language (green = active, primary = inactive) **Visual Consistency Achieved:** - Payments (manual & online) ✓ - Shipping methods ✓ - All use same color system ✓ --- admin-spa/src/index.css | 7 ++++++ admin-spa/src/routes/Login.tsx | 4 +-- admin-spa/src/routes/Settings/Payments.tsx | 6 ++--- admin-spa/src/routes/Settings/Shipping.tsx | 12 ++++++--- includes/Api/StoreController.php | 29 ++++++++++++++++++++++ 5 files changed, 50 insertions(+), 8 deletions(-) diff --git a/admin-spa/src/index.css b/admin-spa/src/index.css index e3c6e76..d457ffa 100644 --- a/admin-spa/src/index.css +++ b/admin-spa/src/index.css @@ -66,6 +66,13 @@ * { @apply border-border; } body { @apply bg-background text-foreground; } h1, h2, h3, h4, h5, h6 { @apply text-foreground; } + + /* Override WordPress common.css focus/active styles */ + a:focus, + a:active { + outline: none !important; + box-shadow: none !important; + } } /* Command palette input: remove native borders/shadows to match shadcn */ diff --git a/admin-spa/src/routes/Login.tsx b/admin-spa/src/routes/Login.tsx index dbf35bd..ea30f61 100644 --- a/admin-spa/src/routes/Login.tsx +++ b/admin-spa/src/routes/Login.tsx @@ -19,9 +19,9 @@ export function Login() { }); const navigate = useNavigate(); - // Fetch branding + // Fetch branding (public endpoint - no auth required) useEffect(() => { - fetch((window.WNW_CONFIG?.restUrl || '') + '/store/settings') + fetch((window.WNW_CONFIG?.restUrl || '') + '/store/branding') .then(res => res.json()) .then(data => { setBranding({ diff --git a/admin-spa/src/routes/Settings/Payments.tsx b/admin-spa/src/routes/Settings/Payments.tsx index afc0e90..ea78b13 100644 --- a/admin-spa/src/routes/Settings/Payments.tsx +++ b/admin-spa/src/routes/Settings/Payments.tsx @@ -302,11 +302,11 @@ export default function PaymentsPage() {
{manualGateways.map((gateway: PaymentGateway) => ( -
+
-
- +
+

{gateway.method_title || gateway.title}

diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx index 78142fb..6b28dae 100644 --- a/admin-spa/src/routes/Settings/Shipping.tsx +++ b/admin-spa/src/routes/Settings/Shipping.tsx @@ -342,7 +342,9 @@ export default function ShippingPage() { className="flex items-center justify-between gap-2 py-2 px-2 md:px-3 bg-muted/50 rounded-md" >
- +
+ +
- +
+ +
@@ -684,7 +688,9 @@ export default function ShippingPage() {
- +
+ +
diff --git a/includes/Api/StoreController.php b/includes/Api/StoreController.php index 4a9f488..aee9be3 100644 --- a/includes/Api/StoreController.php +++ b/includes/Api/StoreController.php @@ -32,6 +32,15 @@ class StoreController extends WP_REST_Controller { * Register routes */ public function register_routes() { + // GET /woonoow/v1/store/branding (PUBLIC - for login page) + register_rest_route($this->namespace, '/' . $this->rest_base . '/branding', [ + [ + 'methods' => WP_REST_Server::READABLE, + 'callback' => [$this, 'get_branding'], + 'permission_callback' => '__return_true', // Public endpoint + ], + ]); + // GET /woonoow/v1/store/settings register_rest_route($this->namespace, '/' . $this->rest_base . '/settings', [ [ @@ -78,6 +87,26 @@ class StoreController extends WP_REST_Controller { ]); } + /** + * Get store branding (PUBLIC - for login page) + * + * @param WP_REST_Request $request Request object + * @return WP_REST_Response Response object + */ + public function get_branding(WP_REST_Request $request) { + $branding = [ + 'store_name' => get_option('blogname', 'WooNooW'), + 'store_logo' => get_option('woonoow_store_logo', ''), + 'store_icon' => get_option('woonoow_store_icon', ''), + 'store_tagline' => get_option('woonoow_store_tagline', ''), + ]; + + $response = rest_ensure_response($branding); + $response->header('Cache-Control', 'max-age=300'); // Cache for 5 minutes + + return $response; + } + /** * Get store settings *