Elixir Digitalization Implementors／fukuoka.ex／kokura.exのpiacereです
ご覧いただいて、ありがとうございます

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

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

Elixir ranked second on the Qiita Advent calendar

In the programming language category ranking, Rust was 1st, Elixir was 2nd, Golang was 3rd, and all were modern programming languages.
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

本コラムの検証環境

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

Windows 11
Elixir 1.12.0 on WSL2 Ubuntu　※最新版のインストール手順はコチラ
Phoenix 1.6.0　　　　　　　　※最新版のインストール手順はコチラ
PostgreSQL 10.17　　　　　　※最新版のインストール手順はコチラ

なお、本コラム内で扱う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	メールアドレス／パスワード変更ページ

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

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

ログインページは、初期設定時は、下記のようなデザインになっています

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

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」チェックボックスを削除

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>