Customizing login page

You can customize the Login page of the application as needed for your business.

Customizing the background image

To replace the background image of the Login page with a custom image, complete the following steps:

Copy the custom image file that is in the SVG format to the <store-temp>/extensions/libs/styles/src/styles/images folder.

Important: Only the SVG file format is supported.
Browse to the <store-temp>/extensions/override-static-assets/root-config/custom folder.
Open the extension-config.json file.
Configure the image source for the custom image as illustrated in the following sample configuration:
```
{
    "login": {
        "imageSrc": "./assets/styles/images/<custom-image>.svg"
    }
}
```
Start the application by running the following command:
```
yarn start-app
```
Verify that your custom image is displayed in the Login page.

Customizing the Login page literals

You can customize literals such as field labels or copyright information of the Login page. To customize literals in the English language, follow the same process that you do to customize translation bundles.

Browse to the <store-temp>/packages/features/login/src/assets/login/i18n folder.
Open the en.json file and identify the literals that you want to update.
Browse to the extensions/override-static-assets/login/i18n folder.
If the login/i18n folders do not exist, create the folders.
Browse to the extensions/override-static-assets/login/i18n folder.
If the en.json file does not exist in this folder, create and save the file to the same folder.
Add and save the updated literals in the en.json file.
Start the application by running the following command:
```
yarn start-app
```
Verify that the updated literals are displayed on the Login page.

Customizing the layout

To customize the layout of the Login page, override the LoginFormComponent component, which is part of the @store/functional-components angular library.

Note: You must retain the application-provided code of the on click event handler of the Login button.

For more information about overriding the LoginFormComponent component, see Modifying application-provided functional components.