update marketing

walkthroughs/2026-04-13_e2512454_Walkthrough__Login_API_Integration.md

@@ -0,0 +1,51 @@
+# Walkthrough - Login API Integration
+
+I have successfully integrated the login API into the Employee Portal application.
+
+## Changes Made
+
+### API Layer
+- Created `lib/api/login/login_api.dart` using the **`dio`** package (the Flutter equivalent of Axios).
+- Implemented a robust `login` method that handles JSON serialization and error states automatically.
+- Added **detailed debug logging** for requests (URL, payload, headers) and responses/errors (status code, data, error types) to simplify troubleshooting.
+- Integrated **`flutter_dotenv`** to manage the API base URL via an `.env` file, removing hardcoded URLs from the code.
+- Created `lib/api/profile/profile_api.dart` for **Profile API Integration**, implementing token acquisition and employee detail retrieval.
+- Fixed a critical **URL formatting bug** (leading space) in `LoginApi.dart` that caused connection errors.
+- Enhanced **login validation** to properly handle successful authentication and store the logged-in NIK in a global `auth_state`.
+- Refactored `ProfilePage.dart` to use the **dynamic `loggedInNik`**, ensuring it loads relevant employee data automatically after login.
+- Implemented `lib/utils/dialog_utils.dart`, a **modular Error Dialog utility** that provides premium-styled popups for login failures and validation errors.
+- Structured the API code to follow the `axios` style configuration highly requested by you.
+
+### UI Layer
+- Modified `lib/pages/login_page.dart` to use the new `LoginApi`.
+- Added a `CircularProgressIndicator` to the "Sign In" button to indicate an ongoing request.
+- Implemented error handling to display messages from the API (e.g., "Invalid credentials" or connection issues).
+- Maintained the existing CAPTCHA verification before proceeding with the API call.
+
+### Configuration
+- Added the `http` package to `pubspec.yaml` to enable network requests.
+
+## Verification
+
+### Manual Test Steps
+1. **Enter Credentials**: Input `nik: "2231487"` and `password: "Eko54r99"`.
+2. **CAPTCHA**: Enter the verification code displayed on the screen.
+3. **Submit**: Click "Sign In".
+4. **Loading State**: Observe the loading indicator on the button.
+5. **Success**: Verify that you are redirected to the dashboard.
+6. **Failure**: Try with incorrect credentials to verify the error message display.
+
+---
+## Troubleshooting CORS (Flutter Web)
+
+If you are running the app on **Flutter Web**, you will encounter a CORS error because the API server does not allow requests from `localhost`.
+
+### Recommended Fixes:
+1.  **Mobile Emulator**: Run the app on an Android Emulator or iOS Simulator.
+2.  **Disable Web Security**: Run the app with the following flag:
+    ```bash
+    flutter run -d chrome --web-browser-flag "--disable-web-security"
+    ```
+
+---
+*Note: Make sure your device has internet access to reach `https://ess-api.ebi-ict.my.id`.*