Change the login form to a Bootstrapped one - still needs some colours tweaked though

src/Foundation.hs

@@ -12,7 +12,7 @@ import Database.Persist.Sql (ConnectionPool, runSqlPool)
 import Text.Hamlet          (hamletFile)
 import Text.Jasmine         (minifym)
 
-import Yesod.Auth.HashDB    (authHashDB)
+import Yesod.Auth.HashDB    (authHashDBWithForm)
 import qualified Yesod.Auth.Message as AuthMsg
 
 import Yesod.Default.Util   (addStaticContentExternal)
@@ -182,7 +182,11 @@ instance YesodAuth App where
         toResult = UserError AuthMsg.InvalidLogin `maybe` (Authenticated . entityKey)
 
     -- You can add other plugins like Google Email, email or OAuth here
-    authPlugins _ = [authHashDB (Just . UniqueUser)]
+    authPlugins _ = [authHashDBWithForm loginForm (Just . UniqueUser)]
+      where loginForm :: Route App -> Widget
+            loginForm action = do
+              mtok <- reqToken <$> getRequest
+              $(widgetFile "auth/login")
     authHttpManager = getHttpManager
 
 -- | Access function to determine if a user is logged in.

templates/auth/login.cassius

@@ -0,0 +1,3 @@
+body > main
+  display: flex
+  align-items: center

templates/auth/login.hamlet

@@ -0,0 +1,24 @@
+<form .container method="post" action=@{action}>
+  $maybe tok <- mtok
+    <input type="hidden" name=#{defaultCsrfParamName} value=#{tok}>
+
+  <div .card.bg-dark>
+    <div .card-body>
+      <div .form-group>
+        <label .sr-only for="auth-login-username">Username
+        <div .input-group>
+          <span .input-group-addon aria-hidden>
+            <i .fa.fa-user>
+          <input #auth-login-username .form-control type="text" name="username" required>
+
+      <div .form-group>
+        <label .sr-only for="auth-login-password">Password
+        <div .input-group>
+          <span .input-group-addon aria-hidden>
+            <i .fa.fa-key>
+          <input #auth-login-password .form-control type="password" name="password" required>
+
+    <div .card-footer>
+      <button type="submit" class="btn btn-primary">
+        <i .fa.fa-sign-in>
+        Log In