How to customize login?

Question

I am using angular4. I want to customize the login page in the ngx-admin. Is there any solution? Or it is good to create a new login page in ngx-admin instead of customizing the existing one.

Answer 1

According to this link and this issue The following changes can be made to customize/ extend the existing the auth-pages/components in ngx-admin (without the npm dependency)

First Copy all source files from this repository folder to 'theme/components/auth' of your project

1. in file core.module.ts change following imports:

import { NbAuthModule, NbDummyAuthStrategy } from '@nebular/auth'; 

to

import { NbAuthModule, NbDummyAuthStrategy } from '../@theme/components/auth'; // '@nebular/auth';

2. in file app-routing.module.ts change following imports

import {
  NbAuthComponent,
  NbLoginComponent,
  NbLogoutComponent,
  NbRegisterComponent,
  NbRequestPasswordComponent,
  NbResetPasswordComponent,
} from '@nebular/auth';

to

import {
  NbAuthComponent,
  NbLoginComponent,
  NbLogoutComponent,
  NbRegisterComponent,
  NbRequestPasswordComponent,
  NbResetPasswordComponent,
} from './@theme/components/auth'; //'@nebular/auth'

4.in file theme.module.ts add following imports

// this line in import part of the file
import {NbAuthModule} from './components/auth';
import {NbPasswordAuthStrategy} from "./components/auth/strategies";

// inside of const NB_THEME_PROVIDERS
NbAuthModule.forRoot({
  providers: {
    email: {
      service: NbPasswordAuthStrategy,
      config: {},
    }
  }
}).providers,

References

• https://github.com/akveo/nebular/issues/37
• https://github.com/akveo/nebular/blob/8ef741268f0eab8821e0dd301e98ae58082afd1d/src/framework/auth/UPGRADE.md

Answer 2

In order to use customize login page you just have to do following steps.

Note:

I have created login component inside pages folder.

Version

Your global Angular CLI version (8.3.9) is greater than your local version (8.0.2). The local Angular CLI version is used.

Step#1

Replace route component with your component name like this inside app-routing.module.ts

 path: 'auth',
component: NbAuthComponent,
children: [
  {
    path: '',
    component: LoginComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },

Step#2

Import component in theme.modules.ts

located inside /src/app/@theme

 import {LoginComponent} from '../../app/pages/login/login.component'
 const COMPONENTS = [
 HeaderComponent,
 FooterComponent,
 SearchInputComponent,
 TinyMCEComponent,
 OneColumnLayoutComponent,
 ThreeColumnsLayoutComponent,
 TwoColumnsLayoutComponent,
 LoginComponent   // HERE
];

Step#3

Put component inside declaration of pages.module.ts

declarations: [
PagesComponent,
LoginComponent,
],

Results