update function login

2026-06-16 09:57:55 +07:00
parent 6fa15b69e7
commit 9aee5f4100
19 changed files with 2272 additions and 64 deletions
--- a/www/index.html
+++ b/www/index.html
@@ -7,7 +7,88 @@
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
-    <div class="shell">
+    <div id="loginScreen" class="loginScreen">
+      <div class="loginFrame">
+        <header class="loginHeader">
+          <div class="loginHeaderBrand" id="loginRobotLabel">RobotApp</div>
+          <div class="loginHeaderRight">
+            <span class="loginHeaderPrompt">Chọn cách đăng nhập:</span>
+            <div class="loginTabs" role="tablist">
+              <button id="loginTabPassword" type="button" class="loginTab active" role="tab" aria-selected="true">
+                Tên đăng nhập và mật khẩu
+              </button>
+              <button id="loginTabPin" type="button" class="loginTab" role="tab" aria-selected="false">
+                Mã PIN
+              </button>
+            </div>
+          </div>
+        </header>
+
+        <div class="loginCard">
+          <div id="loginPanelPassword" class="loginPanel">
+            <div id="loginHelpPassword" class="loginHelp">
+              <h2 class="loginHelpTitle">Đăng nhập bằng tên và mật khẩu</h2>
+              <p>Nhập tên đăng nhập và mật khẩu để truy cập robot.</p>
+              <p>Tài khoản do quản trị viên cấp hoặc xem trong tài liệu hướng dẫn robot.</p>
+              <p>Nếu chưa có tài khoản, vui lòng liên hệ quản trị viên robot.</p>
+            </div>
+            <div class="loginForms">
+              <form id="loginForm" class="loginForm" action="#" method="post">
+                <label class="loginField">
+                  <span class="loginFieldLabel">Tên đăng nhập:</span>
+                  <input id="loginUsername" name="username" type="text" autocomplete="username" placeholder="Admin" required />
+                </label>
+                <label class="loginField">
+                  <span class="loginFieldLabel">Mật khẩu:</span>
+                  <input id="loginPasswordInput" name="password" type="password" autocomplete="current-password" placeholder="" required />
+                </label>
+                <button type="submit" class="loginSubmit" data-mode="password">
+                  <svg class="loginSubmitIcon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+                    <path fill="currentColor" d="M12.65 10A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v2h3v-2h1v-3h-3V9h-1.35zM7 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>
+                  </svg>
+                  <span class="loginSubmitLabel">Đăng nhập</span>
+                </button>
+              </form>
+              <p id="loginError" class="loginError" hidden></p>
+            </div>
+          </div>
+
+          <div id="loginPanelPin" class="loginPanel loginPanel--pin" hidden>
+            <div class="loginPinLeft">
+              <div class="loginHelp">
+                <h2 class="loginHelpTitle">Đăng nhập bằng mã PIN</h2>
+                <p>Người dùng được kích hoạt PIN có thể đăng nhập tại đây.</p>
+                <p>Nếu chưa có mã PIN 4 chữ số, vui lòng liên hệ quản trị viên robot.</p>
+                <p class="loginHelpNote">Không có mã PIN cấu hình sẵn — quản trị viên phải gán PIN trước.</p>
+              </div>
+              <div class="loginPinBoxes" id="loginPinBoxes" role="group" aria-label="Mã PIN 4 chữ số">
+                <div class="loginPinCell" data-idx="0"></div>
+                <div class="loginPinCell" data-idx="1"></div>
+                <div class="loginPinCell" data-idx="2"></div>
+                <div class="loginPinCell" data-idx="3"></div>
+              </div>
+              <input id="loginPin" type="hidden" value="" autocomplete="off" />
+              <p id="loginPinError" class="loginError loginPinError" hidden></p>
+            </div>
+            <div class="loginKeypad" id="loginKeypad" aria-label="Bàn phím số">
+              <button type="button" class="loginKey" data-key="1">1</button>
+              <button type="button" class="loginKey" data-key="2">2</button>
+              <button type="button" class="loginKey" data-key="3">3</button>
+              <button type="button" class="loginKey" data-key="4">4</button>
+              <button type="button" class="loginKey" data-key="5">5</button>
+              <button type="button" class="loginKey" data-key="6">6</button>
+              <button type="button" class="loginKey" data-key="7">7</button>
+              <button type="button" class="loginKey" data-key="8">8</button>
+              <button type="button" class="loginKey" data-key="9">9</button>
+              <button type="button" class="loginKey loginKey--wide" data-key="0">0</button>
+              <button type="button" class="loginKey loginKey--back" data-key="back" aria-label="Xóa">✕</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="shell auth-locked">
      <aside class="sidebar">
        <div class="brand">
          <div class="brandIcon">R</div>
@@ -56,6 +137,17 @@
            <div class="pageTitle">Cấu Hình</div>
          </div>
          <div class="topbarActions">
+            <div class="userMenuWrap">
+              <button id="userMenuBtn" type="button" class="btn subtle userMenuBtn" aria-haspopup="true">…</button>
+              <div id="userMenuPanel" class="userMenuPanel" hidden>
+                <div class="userMenuHeader">
+                  <div id="userMenuName" class="userMenuName">—</div>
+                  <div id="userMenuGroup" class="userMenuGroup mutedNote">—</div>
+                </div>
+                <button id="userMenuChangePasswordBtn" type="button" class="userMenuItem">Đổi mật khẩu</button>
+                <button id="userMenuSignOutBtn" type="button" class="userMenuItem userMenuItemDanger">Đăng xuất</button>
+              </div>
+            </div>
            <button id="refreshBtn" type="button" class="btn subtle">Tải lại</button>
            <button id="saveLayoutBtn" class="btn primary" type="button">Lưu layout</button>
          </div>
@@ -922,6 +1014,35 @@ GET /api/v2.0.0/status</pre>
      </form>
    </dialog>

+    <dialog id="changePasswordDialog" class="missionDialog">
+      <form id="changePasswordForm" method="dialog" class="missionDialogForm">
+        <div class="missionDialogHeader">
+          <h3>Đổi mật khẩu</h3>
+          <button type="button" class="iconBtn missionDialogClose" onclick="document.getElementById('changePasswordDialog').close()" aria-label="Đóng">×</button>
+        </div>
+        <div class="missionDialogBody">
+          <div class="row rowWide">
+            <label for="changePasswordCurrent">Mật khẩu hiện tại</label>
+            <input id="changePasswordCurrent" type="password" autocomplete="current-password" required />
+          </div>
+          <div class="row rowWide">
+            <label for="changePasswordNew">Mật khẩu mới</label>
+            <input id="changePasswordNew" type="password" autocomplete="new-password" required minlength="4" />
+          </div>
+          <div class="row rowWide">
+            <label for="changePasswordConfirm">Xác nhận mật khẩu mới</label>
+            <input id="changePasswordConfirm" type="password" autocomplete="new-password" required minlength="4" />
+          </div>
+          <p id="changePasswordError" class="loginError"></p>
+        </div>
+        <div class="missionDialogFooter">
+          <button type="button" class="btn subtle" onclick="document.getElementById('changePasswordDialog').close()">Hủy</button>
+          <button type="submit" class="btn primary">Lưu</button>
+        </div>
+      </form>
+    </dialog>
+
+    <script src="/auth.js"></script>
    <script src="/missions.js"></script>
    <script src="/dashboard.js"></script>
    <script src="/integrations.js"></script>