Better Login
A theming module that replaces Drupal's default login, registration, password recovery, and password reset pages with cleaner, WordPress-inspired templates.
betterlogin
インストール
composer require 'drupal/betterlogin:^2.0'
概要
Better Loginは、Drupalのユーザー認証フォームのスタイリングという一般的な課題を解決するために設計された軽量なテーマモジュールです。設定なしで、ログイン、登録、パスワード回復、パスワードリセットページにクリーンで最小限かつプロフェッショナルな外観を提供します。
WordPressのログインフォームデザインにインスパイアされたこのモジュールは、デフォルトのDrupalユーザーフォームページを完全に置き換える専用のページテンプレートを使用します。インストール直後からモジュールが動作し、すべてのユーザー認証ページに即座に視覚的な改善を提供します。
各認証ページには、サイトロゴ、フォームタイトル、関連するフォームコンテンツ、および他の認証ページへの便利なナビゲーションリンクが表示されます。テンプレートは簡単にカスタマイズできるように設計されており、テーマでオーバーライドするか、提供されているCSSを修正してサイトのブランディングに合わせることができます。
Features
- ユーザー認証ページ用の4つの専用ページテンプレートを提供：ログイン、登録、パスワード回復、パスワードリセット
- 各認証フォームの上にサイトロゴを目立つように表示
- 汎用的な「ユーザーアカウント」タイトルの代わりに意味のあるページタイトルを設定（例：「ログイン」、「登録」、「パスワードをお忘れですか？」、「パスワードのリセット」）
- ユーザー名/メールフィールドにオートフォーカスを追加し、即座に入力可能に
- よりクリーンな外観のためにデフォルトのフォームフィールド説明を削除
- 認証ページ間のナビゲーションリンクを提供（ログイン、登録、パスワードを忘れた場合、サイトに戻る）
- ユーザー登録権限に基づいて登録リンクを条件付きで表示
- よりクリーンなインターフェースのためにユーザーページからデフォルトのDrupalローカルタスクタブを削除
- 中央揃えのフォームボックスデザインを備えたレスポンシブCSSスタイリングを含む
- クエリパラメータ付きでユーザーページにアクセスする匿名ユーザーのリダイレクトを処理
- 設定不要でインストール直後から動作
Use Cases
Quick Visual Improvement for User Authentication Pages
For site builders who want an immediate visual upgrade to Drupal's default login pages without spending time on custom theming. Simply install the module and all user authentication pages will have a clean, professional appearance with the site logo and improved typography.
Starting Point for Custom Authentication Page Design
For themers who want a solid foundation for custom authentication page designs. Copy the four template files from the module's /templates directory to your theme, then customize the HTML structure and add your own CSS to match your site's design language.
WordPress-Style Login Experience
For organizations migrating from WordPress or those whose users are familiar with WordPress's login experience. The centered form design with logo and minimal distractions provides a similar user experience to WordPress login pages.
Improved User Experience for Public-Facing Sites
For sites with public registration where the login and registration pages are frequently visited. The cleaner design with clear navigation between login, registration, and password recovery reduces user confusion and improves conversion rates.
Tips
- To customize templates, copy them from the module's /templates directory to your theme's /templates directory and modify as needed
- The CSS uses the #auth_box wrapper ID - use this selector to add custom styles in your theme without modifying the module
- Each template has a unique class on the #auth_box element (login, password, register, reset) for page-specific styling
- The module adds 'route' cache context to ensure proper caching of different authentication pages
- Consider adding your theme's CSS reset/normalization to ensure consistent styling across browsers
Technical Details
Hooks 5
hook_help
Provides help text for the module on the admin help page, explaining that the module uses four templates and how to customize them.
hook_form_alter
Modifies user authentication forms by adding autofocus to the username field, removing field descriptions, and attaching the betterlogin CSS library.
hook_theme
Registers four page template theme hooks for the user authentication pages with a custom preprocess function.
hook_local_tasks_alter
Removes the default Drupal local task tabs (Log in, Register, Reset password) from user pages to provide a cleaner interface.
hook_preprocess_html
Sets custom page titles for each authentication page: 'Login', 'Forgot your password?', 'Register', and 'Reset password'.
Troubleshooting 5
Clear all Drupal caches (drush cr) and ensure the module is properly enabled. If using a custom theme, check if the theme is overriding page templates and adjust accordingly.
Ensure your theme has a logo configured in Appearance settings. The module uses theme_get_setting('logo.url') to retrieve the logo path.
The registration link only appears when user registration is allowed. Check your account settings at /admin/config/people/accounts to ensure registration is enabled.
The module's CSS may conflict with your theme's styles. Either increase CSS specificity in your theme or copy and modify the module's CSS to match your theme's styling approach.
The module's templates render {{ page.content }} which includes the full form. If fields are missing, check your user account field configuration rather than the module.