[change] Refactor status component to simplify logic and improve maintainability

[pandafy]

The current status component in client/components/status/status.js has grown to be very large and complex. It handles multiple responsibilities, including authentication, verification, payment, session management, captive portal logic, and UI rendering. This makes the codebase difficult to understand and maintain. The complexity also increases the risk of bugs and makes testing more difficult.

I opened this issue to gather information. We need to discuss the changes before doing any changes.

[nemesifier]

Refactoring the entire component may be very risky. As discussed today, we can aim for surgical operations to make the code more readable in different iterations.

The following block of code is a good candidate for being rewritten:

openwisp-wifi-login-pages/client/components/status/status.js

Lines 219 to 268 in a2b6398

	const macaddr = cookies.get(`${orgSlug}_macaddr`);
	if (macaddr) {
	const params = {macaddr};
	await this.getUserActiveRadiusSessions(params);
	if (statusPage.radius_usage_enabled) {
	await this.getUserRadiusUsage();
	}
	/* request to captive portal is made only if there is
	no active session from macaddr stored in the cookie */
	const {activeSessions} = this.state;
	if (activeSessions && activeSessions.length === 0 && mustLogin) {
	if (this.loginFormRef && this.loginFormRef.current) {
	this.storeValue(
	captivePortalSyncAuth,
	`${orgSlug}_mustLogin`,
	false,
	cookies,
	);
	this.notifyCpLogin(userData);
	this.loginFormRef.current.submit();
	}
	}
	if (captivePortalSyncAuth) {
	this.finalOperations();
	}
	} else if (this.loginFormRef && this.loginFormRef.current && mustLogin) {
	if (
	method === "bank_card" &&
	isVerified === false &&
	!settings.payment_requires_internet
	) {
	this.finalOperations();
	return;
	}
	this.notifyCpLogin(userData);
	// When captivePortalSyncAuth is enabled, submitting the form causes a page reload,
	// which resets the component state and can trigger a redirect loop.
	// Storing the value in cookies preserves it across reloads and prevents the loop.
	this.storeValue(
	captivePortalSyncAuth,
	`${orgSlug}_mustLogin`,
	false,
	cookies,
	);
	this.loginFormRef.current.submit();
	// if user is already authenticated and coming from other pages
	} else if (!mustLogin) {
	this.finalOperations();
	}
	}

Here's the key questions I have for this block:

• Does actually getting & setting the mac address, filtering the open sessions by mac address give us any real advantage?
• Even if we keep the logic which makes the mac address available for filtering, why do we have to have 2 different branches doing mostly the same operations? I bet that we can get rid of that branching and execute the captive portal login if mustLogin is true, in the future we can add support for [feature] Add support for captive-portal API #947 to avoid performing the cp login if not needed.
• The macaddr block calls getUserActiveRadiusSessions and getUserRadiusUsage, these are also called in finalOperations(), which seems redundant to me
• The sync captive portal login code should be unambiguous: if we are in sync auth mode and we need to perform cp login, I think we it would be better to return and do not let componentDidMount execute more code.