Amplify UI – 新しいAuthenticatorコンポーネントのスタイル設定を試してみた

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

先日、新しくリリースされたAmplify UIのAuthenticatorコンポーネントを試してみました。

このコンポーネントはスタイル設定も簡単にできるようですので、今回はスタイル設定を試してみたいと思います。

前提

下記のエントリで実施したAuthenticatorコンポーネントの表示と日本語化までができていることを前提としています。

スタイル設定の方法

ドキュメントの下記の箇所に記載されている通りに対応すれば、うまく変更できそうです。

• Authenticator | Customization | Styling
• Authenticator | Customization | Additional CSS Styling

スタイル設定してみる

では、実際にやってみます。今回やりたいポイントとしては以下の２つです。

• アカウト作成をログイン画面ではさせたくないので、「アカウトを作る」表示を消したい
• ちょっと格好いいログイン画面にしたい

それぞれ1つずつやっていきます。

「アカウトを作る」表示を消す

こちらはドキュメントにずばりそのものが記載されているので簡単です。

以下のようにstyles.scssにタブを表示しないようにスタイル設定すればOKです。

src/styles.scss

/* You can add global styles to this file, and also import other style files */
@import '~@aws-amplify/ui-angular/theme.css';

.amplify-tabs {
    display: none;
}

注意点としては、*.component.scssにスタイル設定をしても、設定は効かないという点はポイントになるかなと思いました。

実際、最初は以下のようなapp.component.htmlに対するapp.component.scssに設定してみましたが、 Authenticatorコンポーネントはapp.componentとは別コンポーネント扱いになるようなので、styles.scssに設定する必要がありました。

src/app/app.component.html

<amplify-authenticator>
  <ng-template amplifySlot="authenticated" let-user="user" let-signOut="signOut">
    <h2>Welcome, {{ user.username }}!</h2>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>

<router-outlet></router-outlet>

設定後に表示すると以下のようになります。

想定通りに上部のタブが消えました！

ちょっと格好いいログイン画面にする

次に、このログイン画面をちょっと格好よくしたいと思います。

少し画面が寂しいので、背景画像とロゴを指定して、メインカラーも少し違う色にしてみます。

画像リソース

背景画像とロゴの画像リソースは下記の通り配置しておきます。

assets
┣ background.png
┗ logo.png

CSSの設定

次に、スタイル設定をしていきます。

背景画像を隙間なく表示させたいので、bodyのマージンを設定します。また、[data-amplify-authenticator]にスタイル設定をすることで、ログインフォームのボタンやリンクの色を変えています。

今回はちょっと茶色っぽい感じの色味にしたいと思います。

src/styles.scss

/* You can add global styles to this file, and also import other style files */
@import '~@aws-amplify/ui-angular/theme.css';

.amplify-tabs {
    display: none;
}

body {
    margin: 0px;
}

[data-amplify-authenticator] {
    --amplify-components-button-primary-background-color: chocolate;
    --amplify-components-button-primary-active-background-color: chocolate;
    --amplify-components-button-primary-visited-background-color: chocolate;
    --amplify-components-button-primary-focus-background-color: chocolate;
    --amplify-components-button-primary-hover-background-color: sandybrown;
    --amplify-components-button-link-color: chocolate;
    --amplify-components-button-link-hover-color: chocolate;
    --amplify-components-button-link-focus-color: chocolate;
    --amplify-components-button-link-active-color: peachpuff;
    --amplify-components-button-link-hover-background-color: peachpuff;
    --amplify-components-button-link-active-background-color: sandybrown;
}

data-amplify-authenticatorに設定する値を見つけるのがちょっと難しく、結局はChromeの開発者ツールを利用してそれっぽい値を設定していく、という流れをとりました。

もう少しスマートな方法が見つかれば、別途試したいと思います。

また、コンポーネント側は以下のように設定をしました。

背景画像とロゴを設定しており、ログインフォームは画面の中央に寄せてみました。

src/app/app.component.scss

.auth-screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: url('/assets/background.png');
    background-size: cover;
}

.auth-form {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-logo {
    width: 100%;
}

src/app/app.component.html

<div class="auth-screen">
  <div class="auth-form">
    <amplify-authenticator>
      <ng-template amplifySlot="sign-in-header">
        <div style="padding: var(--amplify-space-large); text-align: center">
          <img alt="DevIO Logo" class="auth-logo" src="/assets/logo.png" />
        </div>
      </ng-template>
      <ng-template amplifySlot="authenticated" let-user="user" let-signOut="signOut">
        <h2>Welcome, {{ user.username }}!</h2>
        <button (click)="signOut()">Sign Out</button>
      </ng-template>
    </amplify-authenticator>
  </div>
</div>

<router-outlet></router-outlet>

ロゴの設定ですが、<ng-template amplifySlot="sign-in-header">を定義することで、フォームの上部にコンテンツを差し込んでいます。

以下のスロットが定義可能となっており、必要に応じて同様にカスタマイズすることができます。

• header
• footer
• sign-in-header
• sign-in-footer
• sign-up-header
• sign-up-footer

表示してみる

では、実際に動かして表示してみましょう。

それっぽいログイン画面になりましたね！

まとめ

以上、Amplify UIの新しいAuthenticatorコンポーネントのスタイル設定を試してみました。

CSSでのスタイル設定に少し手間取りましたが、スロット毎にカスタマイズ可能な作りになっているので比較的容易にカスタマイズできるのではないでしょうか。

どなたかのお役に立てば幸いです。それでは！