Customizing Login Guide

You can customize the login screen both visually and functionally.

You can also override it entirely by providing your own handler.

Login Screen Example

Basics

In your client configuration you can override certain aspects of the login:

{
  auth: {
    ui: {
      title: 'Welcome to Company',
      stamp: 'custom-build version 1234'
    }
  }
}

Adding fields

You can set your own fields:

{
  auth: {
    ui: {
      fields: [{
        tagName: 'input',
        attributes: {
          name: 'username',
          type: 'text',
          placeholder: 'Username'
        }
      }, {
        tagName: 'input',
        attributes: {
          name: 'password',
          type: 'password',
          placeholder: 'Password'
        }
      }, {
        tagName: 'select',
        attributes: {
          name: 'provider'
        },
        choices: [{
          value: 'company-1',
          label: 'Company 1'
       }, {
          value: 'company-2',
          label: 'Company 2'
       }]
      }, {
        tagName: 'input',
        attributes: {
          type: 'submit',
          value: 'Login'
        }
      }]
    }
  }
}

Customizing styles

By default the login container uses the DOM id #osjs-login, which you can override in your configuration:

{
  auth: {
    ui: {
      id: 'custom-osjs-login'
    }
  }
}

You can now add your own styles to src/client/index.scss.

You can also add a logo via configuration and customize via CSS:

Login Logo Example

{
  auth: {
    ui: {
      logo: {
        position: 'top', // top, bottom, left, right
        src: require('../logo.png')
      }
    }
  }
}
.osjs-login-logo {
 /* Your style here */
}

results matching ""

    No results matching ""