How to use the login.html

williamjieh · 05 Aug 2017, 00:59

Hi All,

I'm trying to add login page in my angular app, I found the login.html template page under :
/src/assets/pages/login.html
but this html looks like not run in angular, it's outside of angular app. It's not in <app-root>.
So how should I use this login.html file to make a login page ?

Thank you

williamjieh · 08 Aug 2017, 01:05

Finally find a way to use it.

1. create a custom structural directive, name it 'showAuthed' or what ever you like. In this directive, check if current visitor is logged or not. if Yes, show the view content; if No, do not show.

2. Copy the html code into /src/app/app.component.html file , and use it like this:

Code: Select all

<!-- This is login page  -->
<div  *showAuthed="false">
...
</div>

<!-- This is admin home  -->
<div class="layout-wrapper" [ngClass]="{'layout-compact':layoutCompact}" *showAuthed="true" >
...
</div>

15 Aug 2017, 17:10

login.html is not necessarily Angular, it is static HTML that can be used with a backend of your choice. Of course you need to post the login info to your backend. Other alternative is what you have already done with embedding login into main template.

paulswan · 17 Aug 2017, 01:33

I managed to use part of login.html as a component by using 2 layouts. The main layout is basically what you have in app.component.html and the other will just have the following:

Code: Select all

<router-outlet></router-outlet>

The app.component.html will also just have the router-outlet

The router in app.routes.ts would look like this:

Code: Select all

export const routes: Routes = [
    {
        path: '',
        component: MainLayoutComponent,
        children: [
            {path: '',  redirectTo: 'home', pathMatch: 'full'},
            {path: 'home', loadChildren: 'app/home/home.module#HomeModule', canActivate: [AuthGuardService]},
            {path: 'about', loadChildren: 'app/about/about.module#AboutModule', canActivate: [AuthGuardService]},
        ]
    },
    {
        path: 'authentication', component: AuthLayoutComponent, 
        loadChildren: 'app/authentication/authentication.module#AuthenticationModule'
    },
    {path: '**', component: PageNotFoundComponent}
];

The routes in the AuthenticationModule will be:

Code: Select all

{path: '', redirectTo: 'login', pathMatch: 'full'},
{path: 'login', component: LoginComponent},
{path: 'logout', component: LogoutComponent, canActivate: [AuthGuardService]}

The LoginComponent will just have what's inside the <body> tag of login.html or something similar.

I hope this helps.

How to use the login.html

Who is online