# 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`.*