ログイン・ページのカスタマイズ

ビジネスの必要に応じて、アプリケーションの「ログイン」ページをカスタマイズできます。

背景イメージのカスタマイズ

ログイン・ページの背景イメージをカスタム・イメージに置き換えるには、以下の手順を実行します。

SVG 形式のカスタム・イメージ・ファイルを <store-temp>/extensions/libs/styles/src/styles/images フォルダーにコピーします。

重要: SVG ファイル・フォーマットのみがサポートされています。
<store-temp>/extensions/override-static-assets/root-config/custom フォルダーを参照します。
extension-config.json ファイルを開きます。
以下のサンプル構成に示すように、カスタム・イメージのイメージ・ソースを構成します。
```
{
    "login": {
        "imageSrc": "./assets/styles/images/<custom-image>.svg"
    }
}
```
以下のコマンドを実行して、アプリケーションを開始します。
```
yarn start-app
```
カスタム・イメージが「ログイン」ページに表示されていることを確認します。

「ログイン」ページのフィールド・ラベルや著作権情報などのリテラルをカスタマイズできます。英語でリテラルをカスタマイズするには、翻訳バンドルをカスタマイズする場合と同じプロセスに従います。

<store-temp>/packages/features/login/src/assets/login/i18n フォルダーを参照します。
en.json ファイルを開き、更新するリテラルを識別します。
extensions/override-static-assets/login/i18n フォルダーを参照します。
login/i18n フォルダーが存在しない場合は、それらのフォルダーを作成します。
extensions/override-static-assets/login/i18n フォルダーを参照します。
en.json ファイルがこのフォルダーに存在しない場合は、ファイルを作成して同じフォルダーに保存します。
更新されたリテラルを en.json ファイルに追加して保存します。
以下のコマンドを実行して、アプリケーションを開始します。
```
yarn start-app
```
更新されたリテラルが「ログイン」ページに表示されていることを確認します。

「ログイン」ページのレイアウトをカスタマイズするには、 @store/functional-components 角度ライブラリーの一部である LoginFormComponent コンポーネントをオーバーライドします。

注: 「ログイン」ボタンのクリック時イベント・ハンドラーのアプリケーション提供のコードを保持する必要があります。

コンポーネント LoginFormComponent のオーバーライドに関する詳細については、「アプリケーションが提供する機能コンポーネントの変更」を参照してください。