WP Manifestindependent plugin directory
manifest / forms / wordpress-login-ui-plugin

Dabilux Login

Thêm Rive animation vào trang login WordPress (Giao diện 2 side - Glassmorphism)

by Dabilux · github.com/danthienphuc/wordpress-login-ui-plugin · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/danthienphuc/wordpress-login-ui-plugin/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/danthienphuc/wordpress-login-ui-plugin ↗

Dabilux Login UI

WordPress plugin — Giao diện đăng nhập 2 cột với Rive Animation & Glassmorphism

Giới thiệu

Dabilux Login UI thay thế trang đăng nhập mặc định của WordPress bằng giao diện hiện đại gồm:

  • Cột trái — Logo thương hiệu, tên website và hoạt hình Rive (chú gấu Teddy tương tác).
  • Cột phải — Form đăng nhập / đăng ký / quên mật khẩu được làm đẹp với icon Lucide và hiệu ứng Glassmorphism.

Tính năng

  • 🎨 Bố cục Split-Layout 2 cột, tự động thích ứng với màn hình nhỏ (responsive).
  • 🐻 Hoạt hình Rive tương tác (Teddy Bear) — nhìn theo con trỏ khi gõ email, che mắt khi gõ mật khẩu.
  • 🪟 Hiệu ứng Glassmorphism (kính mờ) cho card form.
  • 🔤 Thêm icon vào các trường nhập liệu (username, password, email…).
  • 📄 Hỗ trợ cả 3 trang: Đăng nhập, Đăng ký, Quên mật khẩu.
  • 📂 Cho phép upload file .riv lên Media Library để thay thế animation mặc định.

Cấu trúc thư mục

dabilux-login-ui/
├── dabilux-login.php          # File plugin chính
├── uninstall.php              # Dọn dẹp khi gỡ cài đặt
├── readme.md
└── assets/
    ├── css/
    │   └── login.css          # Style Glassmorphism & Split Layout
    ├── js/
    │   └── login.js           # Logic DOM, Rive init, icon Lucide
    └── rive/
        └── 520-990-teddy-login-screen.riv   # File animation mặc định

Yêu cầu

Yêu cầu Phiên bản tối thiểu
WordPress 5.0+
PHP 7.4+
Trình duyệt Hỗ trợ ES6 / Canvas API

Cài đặt

  1. Tải toàn bộ thư mục dabilux-login-ui vào /wp-content/plugins/.
  2. Vào WordPress Admin → Plugins, kích hoạt plugin Dabilux Login.
  3. Truy cập /wp-login.php để xem giao diện mới.

Tuỳ chỉnh

Thay file animation Rive

Mặc định plugin dùng file assets/rive/520-990-teddy-login-screen.riv.
Để dùng file khác:

  1. Upload file .riv lên Media Library (plugin đã đăng ký MIME type application/octet-stream cho .riv).
  2. Lưu URL của file vào option dabilux_login_rive_url:
update_option('dabilux_login_rive_url', 'https://example.com/path/to/your.riv');

Thay Logo

Mở dabilux-login.php, tìm biến $logo_url và thay bằng URL logo của bạn:

$logo_url = 'https://your-site.com/logo.png';

Tuỳ chỉnh CSS

Thêm CSS vào Appearance → Customize → Additional CSS hoặc chỉnh trực tiếp assets/css/login.css.

Thư viện sử dụng

Thư viện Phiên bản Mục đích
@rive-app/canvas 2.10.3 Render hoạt hình Rive
Lucide latest Icon cho form inputs

Cả hai thư viện được tải qua CDN (unpkg), không cần cài đặt thêm.

Changelog

v2.0.0

  • Thiết kế lại toàn bộ sang bố cục 2 cột (Split Layout).
  • Thêm hiệu ứng Glassmorphism.
  • Tích hợp icon Lucide cho form inputs.
  • Hỗ trợ trang Đăng ký và Quên mật khẩu.

Tác giả

Dabilux — dabilux.com

Giấy phép

Distributed under the GPLv2 or later license.