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

Answer 3

I will recommend you to use Ngx-admin existing login page because it is very easy to customize. You can simply set it by setting the endpoint and you can also modify the existing by copying the source code from ngx-admin documentation.