NAS-129885 / 24.10 / Add customer designed login banner

[denysbutenko]

Ready for testing. Unit tests in progress.

Note: Ensure you have the latest middleware

Demo:

[bugclerk]

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

[RehanY147]

I am using the latest build. If I am not already logged in, the sign in page never shows up.

[denysbutenko]

I am using the latest build. If I am not already logged in, the sign in page never shows up.

@RehanY147 have you seen any errors in console?

[codecov]

Codecov Report

Attention: Patch coverage is 79.51807% with 17 lines in your changes missing coverage. Please review.

Project coverage is 76.71%. Comparing base (27efed9) to head (62edca0).
Report is 11 commits behind head on master.

Files	Patch %	Lines
...vanced/access/access-form/access-form.component.ts	86.11%	5 Missing ⚠️
src/app/enums/system-state.enum.ts	0.00%	4 Missing ⚠️
...full-screen-dialog/full-screen-dialog.component.ts	0.00%	3 Missing ⚠️
src/app/views/sessions/signin/signin.component.ts	84.61%	2 Missing ⚠️
...rc/app/views/sessions/signin/store/signin.store.ts	84.61%	2 Missing ⚠️
src/app/modules/dialog/dialog.service.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10311      +/-   ##
==========================================
- Coverage   76.76%   76.71%   -0.05%     
==========================================
  Files        1597     1602       +5     
  Lines       54950    55097     +147     
  Branches     6487     6500      +13     
==========================================
+ Hits        42180    42268      +88     
- Misses      12770    12829      +59     

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

[RehanY147]

When the dialog shows up with the login banner, you can't click the "Continue" button if you click on the text part of it. You can click it on the empty part of the button only which is weird since the text is in the center and that's where the user is likely to click.

Also, I only see the login banner when I log out. When I first come to the UI with a page refresh, I don't see the login banner. See the video.

Screen.Recording.2024-07-17.at.4.45.33.AM.mov

[denysbutenko]

When the dialog shows up with the login banner, you can't click the "Continue" button if you click on the text part of it. You can click it on the empty part of the button only which is weird since the text is in the center and that's where the user is likely to click.

I tested it on Firefox 128, Chrome 126, and Safari, but I can't reproduce the problem on my end. Did you experience the same problem with other buttons?

Also, I only see the login banner when I log out. When I first come to the UI with a page refresh, I don't see the login banner. See the video.

Screen.Recording.2024-07-17.at.4.45.33.AM.mov

Okay fixed this case

[RehanY147]

I can consistently reproduce the button bug. It doesn't happen for me on other buttons. Only this one. @undsoft Can you review if you can get this error as well?

[RehanY147]

I can still reproduce the page refresh bug with the latest changes pulled in and on firfox up to date.

Screen.Recording.2024-07-18.at.4.30.12.AM.mov

[denysbutenko]

I can still reproduce the page refresh bug with the latest changes pulled in and on firfox up to date.

Screen.Recording.2024-07-18.at.4.30.12.AM.mov

Ah, I see now. It is another case. Made changes for it.

[RehanY147]

The missing banner on refresh after logout bug has been resolved. I still see the unclickable text on the continue button issue. If you want, you can create a new ticket for this and link it here. I will approve this PR.

[denysbutenko]

The missing banner on refresh after logout bug has been resolved. I still see the unclickable text on the continue button issue. If you want, you can create a new ticket for this and link it here. I will approve this PR.

Let's try to resolve it here. I assume it may be a z-index issue. In the past, we had a problem with password input overlapped popups. Can you check the selected element under the text button with Inspect Element? It may help to understand the root cause.

Kapture.2024-07-19.at.09.30.36.mp4

[RehanY147]

There is a some sort of cdk layout on top of the button. That's stopping it from being clickable. I've also tested this in incognito to confirm that no extension or plugins are messing with the UI and I could reproduce it.

[RehanY147]

Screen.Recording.2024-07-23.at.3.25.28.AM.mov

[denysbutenko]

There is a some sort of cdk layout on top of the button. That's stopping it from being clickable. I've also tested this in incognito to confirm that no extension or plugins are messing with the UI and I could reproduce it.

Autofocus directive intercepts active element to input that enables autocomplete. I added two possible fixes:

1. Increased z-index for full-screen dialog than input's autocomplete.
2. Skip autofocus when full-screen dialog appears and restore on username input when dialog is closed.

[RehanY147]

Seems to be working OK now. No longer see the issues. Great work!

[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.