NAS-130956 / 25.04 / Reduce numbers of layout shifts on login page

[AlexKarpov98]

Changes:
Reduced numbers of layout shifts on login page

Testing:
See ticket and try it in action.

See how it works if I log in for the first time, see layout shifts fixes.
As well once I was logged in, I reloaded the page. (see)👇

BEFORE:

Screen.Recording.2024-09-03.at.13.52.19.mov

AFTER:

Screen.Recording.2024-09-03.at.15.24.23.mov

Note: No tests added before the final approve.

[bugclerk]

Jira URL: https://ixsystems.atlassian.net/browse/NAS-130956

[bvasilenko]

Loading of the login page looks good!

[undsoft]

1. If you restart middleware with service middlewared restart you'll still get Please wait with the message, even though you are not being logged in and waiting may not help if there is no connectivity. We should only show that message when we are actively logging user in.
2. We should change Please wait to Logging in...
3. There is a lot of empty space on main login form now, I think we should do something about it.
4. If the system is managed by truecommand and has HA, there is a scrollbar.
5. I'm fine with changing how FailoverStatusComponent works. For example, we could show HA is enabled (?) with a tooltip for active IP addresses. We could show HA is disabled: reason when there is one reason and HA is disabled (?) when there are many.
6. We could also avoid showing validation errors in the form, but we need to make snackbar more prominent then.
7. Page doesn't look correct when you connect to a standby controller. This is how used to look. You can test it by connecting by adding a or b to hostname of our m40.

8. If set password form has scrollbar, we need to make to make adjustments to it as well. I'm fine with it having a different height there.

[AlexKarpov98]

@undsoft please give it a try now. It's a bit tricky with that Logging in show up.

I think we can remove it, if it created more problems than benefits?

[undsoft]

Initial login flow looks fine, however I could live without Logging you in after submitting the form.
When reloading the page, I could live without "Connecting to TrueNAS" message at least for some time. I think there should be some period where we expect connection to happen and we don't show this dialog.
Also "Connecting to TrueNAS" is too wide now for some reason.

[AlexKarpov98]

@undsoft - updatred:

Screen.Recording.2024-09-10.at.15.28.25.mov

[undsoft]

Better, but still some things to fix:

1. When connecting to a standby controller, I think it would be helpful to disable inputs as well, otherwise it's not immediately obvious why I cannot click Login.
2. I've used Reset Configuration option in General Settings and it kept saying Logging in.
3. If you use non-existent url for webui, it will still present a login form for a second before switching to "Connecting to TrueNAS" message. I think we should keep longer in previous loading state before showing login form as we attempt to establish a WS connection.

[AlexKarpov98]

Better, but still some things to fix:

1. When connecting to a standby controller, I think it would be helpful to disable inputs as well, otherwise it's not immediately obvious why I cannot click Login.
2. I've used Reset Configuration option in General Settings and it kept saying Logging in.
3. If you use non-existent url for webui, it will still present a login form for a second before switching to "Connecting to TrueNAS" message. I think we should keep longer in previous loading state before showing login form as we attempt to establish a WS connection.

@undsoft we show LOGGING IN only if user has token and if token isTokenWithinTimeline
probably there may be cases when token is not cleared up?
for this one: I've used Reset Configuration option in General Settings and it kept saying Logging in.

[AlexKarpov98]

@undsoft

3. If you use non-existent url for webui, it will still present a login form for a second before switching to "Connecting to TrueNAS" message. I think we should keep longer in previous loading state before showing login form as we attempt to establish a WS connection.

Problem is that if we'll show loading screen on invalid url, it as well will be shown before valid TRUE NAS url for web ui. And we'll loose that immediate sign in form rendering.

We show LOGGING IN message only if user has token and isTokenWithinTimeline

As discussed - <ix-disconnected-message /> is showed with delay, currently it's 2 sec.
SO we only show it if we are not connected yet after 2 seconds.

[AlexKarpov98]

2. I've used Reset Configuration option in General Settings and it kept saying Logging in.

See, we have active token and isTokenWithinTimeline and as well system is connected, that's why LOGGIN IN is shown.

After some period of time I see Connecting to TrueNAS ... Make sure the TrueNAS system is powered on and connected to the network.. So !(isConnected$ | async) works in this case.

[undsoft]

I understand how it currently works, but I am saying that maybe we could keep showing flashing TrueNAS login animation until websocket connection is established. This way we won't have situations where it says "logging in" for an offline system.

[AlexKarpov98]

I understand how it currently works, but I am saying that maybe we could keep showing flashing TrueNAS login animation until websocket connection is established. This way we won't have situations where it says "logging in" for an offline system.

Yeah, I got it, I think that's the only way.
@undsoft could you give it a final shot?

[undsoft]

It's a bit worse now. My WS connection took 500ms to establish, yet I still saw establishing connection on initial page load.

2024-09-16.14.07.48.mov

[AlexKarpov98]

@undsoft now it's updated to show True NAS logo as a fallback if we are not logged in or not connected to the WS (for < 1 second)

User Logged In and connected to WS

Screen.Recording.2024-09-16.at.15.47.31.mov

And screen like that if we are not connected and more than 1 sec waiting

Screen.Recording.2024-09-16.at.15.48.32.mov

[undsoft]

Thanks. Nice work 👍🏼

[codecov]

Codecov Report

Attention: Patch coverage is 88.40580% with 8 lines in your changes missing coverage. Please review.

Project coverage is 79.72%. Comparing base (515e04a) to head (73c7ed8).
Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
src/app/services/token-lifetime.service.ts	0.00%	3 Missing ⚠️
src/app/services/auth/auth.service.ts	60.00%	2 Missing ⚠️
.../pages/signin/signin-form/signin-form.component.ts	90.00%	1 Missing ⚠️
src/app/pages/signin/signin.component.ts	92.85%	1 Missing ⚠️
src/app/services/token-last-used.service.ts	96.87%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10612      +/-   ##
==========================================
- Coverage   79.78%   79.72%   -0.07%     
==========================================
  Files        1563     1564       +1     
  Lines       51483    51521      +38     
  Branches     5852     5856       +4     
==========================================
- Hits        41075    41073       -2     
- Misses      10408    10448      +40     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[bugclerk]

This PR has been merged and conversations have been locked.
If you would like to discuss more about this issue please use our forums or raise a Jira ticket.