Yesod Authのカスタムログインフォーム

Yesod Authのカスタムログインフォーム

やっぱり次の要望としてログインフォームをイジりたくなってしまいます、英語で「Login」とか書かれても純粋日本男児としては体が受け付けません。
どうやったらカスタマイズ出きるかと調べたのでメモ。

Foundation.hsのYesodAuthインスタンスをイジる

authHashDBWithForm関数の宣言

import Yesod.Auth.HashDB (authHashDBWithForm, getAuthIdHashDB, HashDBUser(..))

authPluginsをauthHashDBからauthHashDBWithFormへ修正する

instance YesodAuth App where
    type AuthId App = UserId

    -- Where to send a user after successful login
    loginDest _ = HomeR
    -- Where to send a user after logout
    logoutDest _ = HomeR
    -- Override the above two destinations when a Referer: header is present
    redirectToReferer _ = True

    getAuthId creds = getAuthIdHashDB AuthR (Just . UniqueUser) creds
    authPlugins _ = [authHashDBWithForm loginForm (Just . UniqueUser)]
    ...
    ...

カスタムテンプレートを出力する関数を用意する

loginForm :: Route App -> Widget
loginForm action = $(whamletFile "templates/loginform.hamlet")

そして最後にhamletテンプレートファイルを作成

<div style="text-align:center">
    <h2>日本語でログインフォーム
    <form method="post" action="@{action}">
        <table border="0" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto">
            <tbody>
                <tr>
                    <td valign="top">ログインID：
                    <td valign="top">
                        <input name="username" style="width:250px">
                <tr>
                    <td valign="top">パスワード：
                    <td valign="top">
                        <input type="password" name="password" style="width:250px">
                <tr>
                    <td colspan="2" valign="top">
                        <input type="submit" value="乱入じゃなくてログインする">

これで起動すると

となりした、オリジナルのログインフォームはjavascriptが動いていましたがこのフォームは動きません。authHashDB関数辺りを調べれば分かるような気がします。

参考にしたサイト

Authentication plugin for Yesod.

って書いてあるじゃないか、ちゃんとドキュメントを最初にしっかり読みましょう