Расширение фронтэнда

2026-02-04 04:31:09 +00:00 · 2025-12-22 01:38:52 +03:00
parent 5096b45243
commit 9d25d2e5de
35 changed files with 4901 additions and 288 deletions
@@ -1,4 +1,73 @@
-$(function () {
+$(() => {
+  $("#login-tab").on("click", function () {
+    $("#login-tab")
+      .removeClass("text-gray-400 hover:text-gray-600")
+      .addClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500");
+    $("#register-tab")
+      .removeClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500")
+      .addClass("text-gray-400 hover:text-gray-600");
+
+    $("#login-form").removeClass("hidden");
+    $("#register-form").addClass("hidden");
+  });
+
+  $("#register-tab").on("click", function () {
+    $("#register-tab")
+      .removeClass("text-gray-400 hover:text-gray-600")
+      .addClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500");
+    $("#login-tab")
+      .removeClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500")
+      .addClass("text-gray-400 hover:text-gray-600");
+
+    $("#register-form").removeClass("hidden");
+    $("#login-form").addClass("hidden");
+  });
+
+  $("#register-password").on("input", function () {
+    const password = $(this).val();
+    let strength = 0;
+
+    if (password.length >= 8) strength++;
+    if (password.length >= 12) strength++;
+    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
+    if (/\d/.test(password)) strength++;
+    if (/[^a-zA-Z0-9]/.test(password)) strength++;
+
+    const levels = [
+      { width: "0%", color: "", text: "" },
+      { width: "20%", color: "bg-red-500", text: "Очень слабый" },
+      { width: "40%", color: "bg-orange-500", text: "Слабый" },
+      { width: "60%", color: "bg-yellow-500", text: "Средний" },
+      { width: "80%", color: "bg-lime-500", text: "Хороший" },
+      { width: "100%", color: "bg-green-500", text: "Отличный" },
+    ];
+
+    const level = levels[strength];
+    const $bar = $("#password-strength-bar");
+
+    $bar.css("width", level.width);
+    $bar.attr("class", "h-full transition-all duration-300 " + level.color);
+    $("#password-strength-text").text(level.text);
+
+    checkPasswordMatch();
+  });
+
+  function checkPasswordMatch() {
+    const password = $("#register-password").val();
+    const confirm = $("#register-password-confirm").val();
+    const $error = $("#password-match-error");
+
+    if (confirm && password !== confirm) {
+      $error.removeClass("hidden");
+      return false;
+    } else {
+      $error.addClass("hidden");
+      return true;
+    }
+  }
+
+  $("#register-password-confirm").on("input", checkPasswordMatch);
+
  $("#login-form").on("submit", async function (event) {
    event.preventDefault();
    const $submitBtn = $("#login-submit");