During my last talk about JHipster I was asked if it is possible to replace the modal login dialog with a dedicated login page.
I remember doing that for the angular 1 frontend as it was possible to configure in the router if the content was rendered on a modal dialog or not.
As this is not possible anymore with the new AngularX frontend I will describe how to extend a default JHipster application such that the login is at a dedicated route /login.
Create Login Page Component and Routes
In order to be able to upgrade JHipster continously I strongly advice you not to change genereated code (too much).
Therefore the first step is to create a new module instead of modifying the existing LoginComponent under src/main/webapp/shared/login.
To do so create a new folder /src/main/webapp/app/login with following files:
The layout of the login page. You can copy the content of the modal-body from src/main/webapp/shared/login/login.component.html
The logic of the new login page, which at the core a modified version of the original login-component.ts
Exposing the new component and route as a separate angular module
Defining the new route.
Prevent opening the modal dialog
The tricky part is how to prevent the modal login dialog to open and instead route the the new /login route.
Instead of removing the call to LoginModalService.open() at multiple places I suggest to change the implementation
of LoginModalService.open() ([lst-login-modal-service]) as this is very minimal change which should not make much problems when updating JHipster.
You migth need to adapt some calls to LoginModalService.open() as the method now returns nothing anymore.
But just let the compiler guide you if in doubt.
Now the new login page instead of the old modal dialog should open when you click login in the navbar.
Lock down the whole page
As we don’t want to have any public page we need to make sure even the homepage can’t be accessed without being logged in.
In order to do so you need to add needed authorities to home.route.ts along with a custom canActivate function.
Now you should be prompted with the new login page when trying to access the application.
You might have notices that the menu items in the navbar are still visible even when not logged in.
To hide all items unless the user is logged in you can add *jhiHasAnyAuthority="'ROLE_USER'" to the navbar.
With minimal code change we have removed the usage of the default login modal dialog and replaced it with a simple login page.
Furthermore we have changed the application from havin a public part to an application which requires to be logged in.
The source code of the complete project is available on gitlab.