feat: 비밀번호 표시 토글, 로그인 실패 시 아이디 유지

frontend/index.html

@@ -124,7 +124,17 @@
       <p>조직 내부 웹페이지 통합 포털</p>
     </div>
     <div class="form-group"><label>아이디</label><input type="text" id="login-user" placeholder="사용자명 입력"/></div>
-    <div class="form-group"><label>비밀번호</label><input type="password" id="login-pass" placeholder="비밀번호 입력" onkeydown="if(event.key==='Enter')doLogin()"/></div>
+    <div class="form-group">
+      <label>비밀번호</label>
+      <div style="position:relative">
+        <input type="password" id="login-pass" placeholder="비밀번호 입력" onkeydown="if(event.key==='Enter')doLogin()" style="width:100%;padding-right:44px"/>
+        <button type="button" onclick="togglePw('login-pass','toggle-eye')" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:0;width:auto">
+          <svg id="toggle-eye" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
+          </svg>
+        </button>
+      </div>
+    </div>
     <button class="btn" onclick="doLogin()">로그인</button>
     <div id="login-error" class="error-msg"></div>
   </div>
@@ -335,6 +345,7 @@ async function doLogin() {
     }
   } catch (e) {
     document.getElementById('login-error').textContent = e.message;
+    document.getElementById('login-pass').value = '';
   }
 }
 
@@ -579,6 +590,19 @@ async function saveAccess() {
   alert('권한이 저장되었습니다.');
 }
 
+// ── Password Toggle ──────────────────────────────────────
+function togglePw(inputId, iconId) {
+  const input = document.getElementById(inputId);
+  const icon = document.getElementById(iconId);
+  if (input.type === 'password') {
+    input.type = 'text';
+    icon.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/>';
+  } else {
+    input.type = 'password';
+    icon.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>';
+  }
+}
+
 // ── Utils ────────────────────────────────────────────────
 function escHtml(s) { return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
 function escJs(s) { return String(s||'').replace(/\\/g,'\\\\').replace(/'/g,"\\'"); }