④Elixirユーザ認証ライブラリ「phx_gen_auth」の本番向け改造ポイント：ログインページの変更

[Elixir Digitalization Implementors／fukuoka.ex／kokura.ex](https://fukuokaex.connpass.com/)のpiacereです
ご覧いただいて、ありがとうございます :bow:

[前回](https://qiita.com/piacerex/items/58c878efd81920c8aa22)に引き続き、Phoenixユーザ認証ライブラリ「phx_gen_auth」のプロダクション向け改造ポイントとして、今回は、ページデザインの変更について解説し、実際の変更例として、ログインページを変更してみます

phx_gen_authのログインページやパスワードリマインダページ等のUIやデザインを自サイトにフィットさせたいというとき、今回の内容が役に立つと思います

<h3>:ocean::ocean: Elixir ranked second on the Qiita Advent calendar :ocean::ocean:</h3>

In the programming language category ranking, Rust was 1st, Elixir was 2nd, Golang was 3rd, and all were modern programming languages.:laughing:
https://qiita.com/advent-calendar/2020/elixir
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/ea185203-c525-c778-dc10-6d2ecc391616.png)](https://qiita.com/advent-calendar/2020/elixir)

In addition, our Elixir community "fukuoka.ex" has won the top spot in the Web Technology category.
https://qiita.com/advent-calendar/2020/fukuokaex
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/8a22a81f-2917-6072-10bd-525e0fc24b75.png)](https://qiita.com/advent-calendar/2020/neosvr_reso)

# 本コラムの検証環境

本コラムは、以下環境で検証しています（Windowsで実施していますが、Linuxやmacでも動作する想定です）

- Windows 11
- Elixir 1.12.0 on WSL2 Ubuntu　※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacerex/items/6b64dfe70f48c89d8385)</b>
- Phoenix 1.6.0　　　　　　　　※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacere_ex/items/b7787580fce5f148242f#phoenix%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)</b>
- PostgreSQL 10.17　　　　　　※<b>[最新版のインストール手順はコチラ](https://qiita.com/piacere_ex/items/a7558adc6856e3577dc6#postgresql%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)</b>

なお、本コラム内で扱うPhoenix PJ名は「basic」、phx_gen_authのコンテキスト名は「Accounts」を前提にしています

# ④ページデザインの変更

## ④－１：デザイン先となる対象ページの構成

phx_gen_authでデザインをカスタマイズする先となる対象ページのファイルは、以下の通りです

ファイルパス | 役割
-|-
lib/basic_web/templates/account_confirmation/new.html.heex | ユーザ本登録用URL再送ページ
lib/basic_web/templates/account_registration/new.html.heex | ユーザ登録ページ
lib/basic_web/templates/account_reset_password/new.html.heex | パスワードリマインダページ
lib/basic_web/templates/account_reset_password/edit.html.heex | パスワードリマインダのパスワードリセットページ
lib/basic_web/templates/account_session/new.html.heex | ログインページ
lib/basic_web/templates/account_settings/edit.html.heex | メールアドレス／パスワード変更ページ

今回は、これらの中から、ログインページをカスタマイズしてみますが、他ページでも、基本的な要領は同じです

## ④－２：ログインページのデザイン変更

ログインページは、初期設定時は、下記のようなデザインになっています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/97f1d6e3-58b0-b45a-7a68-ffc6a23d2526.png)

これを定義しているファイルは、下記.heexファイルとなります

```erb:lib/basic_web/templates/account_confirmation/new.html.heex（変更前）
<h1>Log in</h1>

<.form let={f} for={@conn} action={Routes.account_session_path(@conn, :create)} as={:account}>
  <%= if @error_message do %>
    <div class="alert alert-danger">
      <p><%= @error_message %></p>
    </div>
  <% end %>

  <%= label f, :email %>
  <%= email_input f, :email, required: true %>

  <%= label f, :password %>
  <%= password_input f, :password, required: true %>

  <%= label f, :remember_me, "Keep me logged in for 60 days" %>
  <%= checkbox f, :remember_me %>

  <div>
    <%= submit "Log in" %>
  </div>
</.form>

<p>
  <%= link "Register", to: Routes.account_registration_path(@conn, :new) %> |
  <%= link "Forgot your password?", to: Routes.account_reset_password_path(@conn, :new) %>
</p>
```

ここでは、以下3つのカスタマイズを行ってみます

- キャプションを「Join NOW」に変更
- サブミットボタンを「Join NOW」に変更
- 「Join NOW」チェックボックスを削除

```erb:lib/basic_web/templates/account_confirmation/new.html.heex（変更後）
<h1>Join NOW</h1>

<.form let={f} for={@conn} action={Routes.account_session_path(@conn, :create)} as={:account}>
  <%= if @error_message do %>
    <div class="alert alert-danger">
      <p><%= @error_message %></p>
    </div>
  <% end %>

  <%= label f, :email %>
  <%= email_input f, :email, required: true %>

  <%= label f, :password %>
  <%= password_input f, :password, required: true %>

  <%= # label f, :remember_me, "Keep me logged in for 60 days" %>
  <%= # checkbox f, :remember_me %>

  <div>
    <%= submit "Join NOW" %>
  </div>
</.form>

<p>
  <%= link "Register", to: Routes.account_registration_path(@conn, :new) %> |
  <%= link "Forgot your password?", to: Routes.account_reset_password_path(@conn, :new) %>
</p>
```

キャプションとサブミットボタンが変更され、チェックボックスが削除されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/fa89ff88-ef28-cc44-65bf-06b7164c2227.png)

どのページも基本、ただのHTMLなので、もっと大胆なHTML変更や、CSSによるデザイン／レイアウト変更も可能です

たとえば[DD.Academyのログインページ](https://ddacademy.tech/users/log_in)は、下記のようなデザイン変更を行っていますが、特別な調整は行っておらず、上記カスタマイズの範疇で実現できています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/de9ca91c-48ee-f5d3-8657-6b7e7872cdb8.png)

# 最後に

今回は、「phx_gen_auth」のプロダクション向け改造ポイントの中でも、サイトのUIデザインに関係してくるログインページの変更を行いました

ログインページの変更は、単純なHTMLの変更なので、HTMLやCSSに覚えのある方なら、今回のような簡単な変更に留まらず、アグレッシブな変更にトライしてみてください

また、ログインページ以外のphx_gen_auth各種ページも同様なので、色々とカスタマイズを楽しんでください

Elixir／Phoenixで、会員制サイトのような、ユーザ認証付きWebサイトを開発する際は、phx_gen_authを活用するとハッピーになれますよ:kissing_heart:

なお、気が向いたら、上記を全てセッティングした会員制WebサイトのテンプレートをOSS化したいなぁって思っています … つまり、Elixir／Phoenixであれば、会員制Webサイトの構築をイチからやらなくて良くなります

[次回は、phx_gen_authの各種コントローラ内／テンプレート内のメッセージのカスタマイズ](https://qiita.com/piacerex/items/6d6963e18463eb920971)をします