demo:

Mod này được viết với ý tưởng của ligerv. Lúc đầu, mình nghĩ chỉ là thêm màu mè một chút, nhưng nghĩ lại vẫn thấy có lợi. Nếu như bạn đăng nhập sai, bạn sẽ bị chuyển về trang kiểm tra lỗi, như thế thì các mod đăng nhập không chuyển trang trước đây xem như bó tay. Nếu bạn nhập sai 2 lần, 3 lần thì bạn phải tải trang 4, 6 lần với đầy đủ css, js... Với cách này có thể nói là khắc phục các vấn đề trên, khi sử dụng mod này bạn không cần đến các mod đăng nhập không chuyển trang nào khác. Và bây giờ là cách viết.

Đầu tiên bạn cần một form đăng nhập với đủ các thông tin cơ bản để khi thành viên không bật javascript vẫn đăng nhập được. Nên đặt ở Templates overall_header

CSS

HTML:

HTML đã xong, bạn có thể tùy biến các kiểu, hoặc sử dụng form login của forum bạn để làm khi đã hiểu cách dùng javascript mà mình sẽ hướng dẫn sau đây:
Đầu tiên bạn cần chặn form chạy khi submit để không bị chuyển trang.

Dùng ajax để gửi dữ liệu đăng nhập:

Bây giờ khi có kết quả trả về, ta sẽ phân ra 3 trường hợp đăng nhập: Thành công, lỗi và bị chặn. Nếu đăng nhập thành công thì trên thanh nav bar sẽ có nút thoát, nếu forum bạn không dùng nav bar thì dùng cách khác để xác định, vì thế lưu ý khi xem hướng dẫn này.

Bị chặn sẽ có 2 trường hợp: Bị ban và nhập sai PW quá giới hạn (10 lần). Các trường hợp khác là lỗi thông tin đăng nhập.

Xử lý đăng nhập thành công mình dùng cách refresh, Zero đề nghị dùng cách load body, tùy các bạn vậy.

Khi bị chặn thì mình dùng alert box để thông báo, nó có thể bị addon better popup của chrome chặn, nếu bạn có thể thì dùng một lightbox hoặc làm dòng thông báo đâu đó cho đẹp.

Trường hợp lỗi đăng nhập mình phân ra lỗi ID và PW. Trước tiên là kiểm tra ID, mình sẽ dùng ajax tìm thành viên. Mình sẽ kiểm tra giá trị ID mình nhập vào có trùng với kết quả tìm kiếm không? Nếu không trùng là sai ID (xem như sai luôn PW), nếu trùng là sai PW (vì đang bị lỗi đăng nhập).

Về mặt kiểm tra như thế là ổn, giờ mình sẽ thêm chút màu mè làm hiệu ứng cho thành viên biết. Ở đây mình dùng một ảnh loading cho lúc đang kiểm tra dữ liệu. Màu lục để đánh dấu ID đúng. Màu đỏ để đánh dấu ID và PW sai. Nếu ID và PW đúng thì refresh trang rồi chẳng cần hiệu ứng nữa.

Dưới đây là toàn bô javascript hoàn chỉnh cho bước 2 đã bổ sung phần hiệu ứng và một bước kiểm tra khi ID đúng PW sai. Bạn có thể tạo dùng chức năng tạo file javascript và đặt ở toàn diễn đàn.

xem