add login page

auth.js

@@ -0,0 +1,80 @@
+export const AUTH_STORAGE_KEY = 'authUser';
+
+const FAKE_ACCOUNTS = [
+  { username: 'admin', password: 'admin123', displayName: 'Admin' },
+  {
+    username: 'editor',
+    password: 'editor123',
+    displayName: 'Editor',
+  },
+  {
+    username: 'viewer',
+    password: 'viewer123',
+    displayName: 'Viewer',
+  },
+];
+
+function normalizeIdentifier(identifier = '') {
+  return String(identifier || '')
+    .trim()
+    .toLowerCase();
+}
+
+export function getFakeAccounts() {
+  return [...FAKE_ACCOUNTS];
+}
+
+export function findAccount(username, password) {
+  const normalizedUser = normalizeIdentifier(username);
+  return FAKE_ACCOUNTS.find(
+    (account) =>
+      normalizeIdentifier(account.username) === normalizedUser &&
+      account.password === String(password || '')
+  );
+}
+
+export function getAuthUser() {
+  try {
+    const raw = localStorage.getItem(AUTH_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed?.username) return null;
+    return parsed;
+  } catch (error) {
+    console.error('Failed to read auth user', error);
+    return null;
+  }
+}
+
+export function saveAuthUser(account) {
+  if (!account) return null;
+  const payload = {
+    username: account.username,
+    displayName: account.displayName || account.username,
+    loggedInAt: Date.now(),
+  };
+  localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(payload));
+  return payload;
+}
+
+export function clearAuthUser() {
+  localStorage.removeItem(AUTH_STORAGE_KEY);
+}
+
+export function ensureAuthenticated(redirectOnMissing = true) {
+  const user = getAuthUser();
+  if (!user && redirectOnMissing && typeof window !== 'undefined') {
+    window.location.href = 'login.html';
+  }
+  return user;
+}
+
+export function startAuthWatcher(intervalMs = 5000) {
+  if (typeof window === 'undefined') return () => {};
+  const timerId = window.setInterval(() => {
+    if (!getAuthUser()) {
+      window.location.href = 'login.html';
+    }
+  }, intervalMs);
+  return () => window.clearInterval(timerId);
+}

i18n.js

@@ -1,6 +1,16 @@
 const translations = {
   en: {
     pageTitle: 'News Verification',
+    loginTitle: 'Sign in',
+    loginSubtitle: 'Use one of the sample accounts to continue.',
+    usernameLabel: 'Username or email',
+    passwordLabel: 'Password',
+    usernamePlaceholder: 'Enter your username or email',
+    passwordPlaceholder: 'Enter your password',
+    loginButton: 'Continue',
+    loginError: 'Incorrect credentials. Please try again.',
+    fakeAccountsLabel: 'Sample accounts',
+    logoutButton: 'Log out',
     languageLabel: 'Language',
     languageJapanese: 'Japanese',
     languageEnglish: 'English',
@@ -44,7 +54,8 @@ const translations = {
     noDataToSave: 'No data to save.',
     downloadPrepareFailedNetwork:
       'Unable to prepare the download. Please check your connection and try again.',
-    downloadPrepareFailed: 'Unable to prepare the download. Please try again later.',
+    downloadPrepareFailed:
+      'Unable to prepare the download. Please try again later.',
     notificationTitle: 'Notification',
     movNotSupported: 'The system does not support preview for .mov files.',
     videoTagNotSupported: 'Your browser does not support the video tag.',
@@ -124,6 +135,16 @@ const translations = {
   },
   ja: {
     pageTitle: 'ニュース検証',
+    loginTitle: 'サインイン',
+    loginSubtitle: '以下のサンプルアカウントのいずれかでログインしてください。',
+    usernameLabel: 'ユーザー名またはメール',
+    passwordLabel: 'パスワード',
+    usernamePlaceholder: 'ユーザー名またはメールを入力',
+    passwordPlaceholder: 'パスワードを入力',
+    loginButton: '続行',
+    loginError: '認証情報が正しくありません。もう一度お試しください。',
+    fakeAccountsLabel: 'サンプルアカウント',
+    logoutButton: 'ログアウト',
     languageLabel: '言語',
     languageJapanese: '日本語',
     languageEnglish: '英語',
@@ -131,8 +152,7 @@ const translations = {
     uploadMediaLabel: 'メディアファイルをアップロード',
     uploadHint:
       '<span class="primary-1">ここをクリック</span>してファイルをアップロードするか、ドラッグしてください。',
-    supportedFormats:
-      '対応形式: PNG, JPG, JPEG, GIF, WEBP, SVG, MOV, MP4',
+    supportedFormats: '対応形式: PNG, JPG, JPEG, GIF, WEBP, SVG, MOV, MP4',
     additionalInformation: '追加情報',
     socialMediaPostUrl: 'ソーシャルメディア投稿のURL',
     titleNewsArticle: '記事のタイトル',
@@ -167,10 +187,12 @@ const translations = {
     noDataToSave: '保存するデータがありません。',
     downloadPrepareFailedNetwork:
       'ダウンロードの準備に失敗しました。接続を確認して再試行してください。',
-    downloadPrepareFailed: 'ダウンロードの準備に失敗しました。後でもう一度お試しください。',
+    downloadPrepareFailed:
+      'ダウンロードの準備に失敗しました。後でもう一度お試しください。',
     notificationTitle: '通知',
     movNotSupported: '.mov ファイルのプレビューには対応していません。',
-    videoTagNotSupported: 'お使いのブラウザは video タグをサポートしていません。',
+    videoTagNotSupported:
+      'お使いのブラウザは video タグをサポートしていません。',
     previewUnavailable: 'このファイルタイプはプレビューできません。',
     imageLabel: '画像',
     feedbackHeader: '改善にご協力ください！',
@@ -207,12 +229,10 @@ const translations = {
     moderatelyClear: 'やや明確',
     slightlyClear: '少し明確',
     notClear: '不明瞭',
-    q6Title:
-      '2.2 ストーリーの中心となる主張や行動を正しく特定していましたか？',
+    q6Title: '2.2 ストーリーの中心となる主張や行動を正しく特定していましたか？',
     partially: '部分的に',
     noOption: 'いいえ',
-    q7Title:
-      '2.3 元の情報がいつ公開・発生したかを明確に示していましたか？',
+    q7Title: '2.3 元の情報がいつ公開・発生したかを明確に示していましたか？',
     q8Title: '2.4 イベントの場所（「どこ」）は特定・検証されていましたか？',
     notApplicable: '該当なし',
     q9Title:
@@ -245,6 +265,16 @@ const translations = {
   },
   vi: {
     pageTitle: 'Kiểm chứng tin tức',
+    loginTitle: 'Đăng nhập',
+    loginSubtitle: 'Dùng một trong các tài khoản mẫu để tiếp tục.',
+    usernameLabel: 'Tên đăng nhập hoặc email',
+    passwordLabel: 'Mật khẩu',
+    usernamePlaceholder: 'Nhập tên đăng nhập hoặc email',
+    passwordPlaceholder: 'Nhập mật khẩu',
+    loginButton: 'Tiếp tục',
+    loginError: 'Sai thông tin đăng nhập, vui lòng thử lại.',
+    fakeAccountsLabel: 'Tài khoản mẫu',
+    logoutButton: 'Đăng xuất',
     languageLabel: 'Ngôn ngữ',
     languageJapanese: 'Tiếng Nhật',
     languageEnglish: 'Tiếng Anh',
@@ -288,7 +318,8 @@ const translations = {
     noDataToSave: 'Không có dữ liệu để lưu.',
     downloadPrepareFailedNetwork:
       'Không thể chuẩn bị tệp tải xuống. Vui lòng kiểm tra kết nối và thử lại.',
-    downloadPrepareFailed: 'Không thể chuẩn bị tệp tải xuống. Vui lòng thử lại sau.',
+    downloadPrepareFailed:
+      'Không thể chuẩn bị tệp tải xuống. Vui lòng thử lại sau.',
     notificationTitle: 'Thông báo',
     movNotSupported: 'Hệ thống chưa hỗ trợ xem trước tệp .mov.',
     videoTagNotSupported: 'Trình duyệt của bạn không hỗ trợ thẻ video.',
@@ -334,8 +365,7 @@ const translations = {
     noOption: 'Không',
     q7Title:
       '2.3 Ứng dụng có hiển thị rõ thời điểm sự kiện/thông tin gốc được công bố không?',
-    q8Title:
-      '2.4 Địa điểm sự kiện ("Ở đâu") có được chỉ rõ và xác minh không?',
+    q8Title: '2.4 Địa điểm sự kiện ("Ở đâu") có được chỉ rõ và xác minh không?',
     notApplicable: 'Không áp dụng',
     q9Title:
       '2.5 Ứng dụng giải thích động cơ/mục đích đằng sau tuyên bố gốc tốt thế nào?',

index.html

@@ -16,15 +16,18 @@
   <body>
     <div class="container">
       <header class="header-face-check">
-        <div></div>
+        <div class="header-placeholder"></div>
         <h1 class="title-header-face-check" data-i18n="pageTitle">News Verification</h1>
-        <div class="language-switcher">
-          <label class="language-label" for="language-select" data-i18n="languageLabel">Language</label>
-          <select id="language-select" class="language-select">
-            <option value="ja" data-i18n="languageJapanese">Japanese</option>
-            <option value="en" data-i18n="languageEnglish" selected>English</option>
-            <option value="vi" data-i18n="languageVietnamese">Vietnamese</option>
-          </select>
+        <div class="header-actions">
+          <div class="language-switcher">
+            <label class="language-label" for="language-select" data-i18n="languageLabel">Language</label>
+            <select id="language-select" class="language-select">
+              <option value="ja" data-i18n="languageJapanese">Japanese</option>
+              <option value="en" data-i18n="languageEnglish" selected>English</option>
+              <option value="vi" data-i18n="languageVietnamese">Vietnamese</option>
+            </select>
+          </div>
+          <button id="btn-logout" class="btn btn-logout" data-i18n="logoutButton">Log out</button>
         </div>
       </header>
       <main class="main-content">

login.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" translate="no">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="login-layout">
+      <div class="login-language-switcher">
+        <label class="language-label" for="language-select" data-i18n="languageLabel">Language</label>
+        <select id="language-select" class="language-select">
+          <option value="ja" data-i18n="languageJapanese">Japanese</option>
+          <option value="en" data-i18n="languageEnglish" selected>English</option>
+          <option value="vi" data-i18n="languageVietnamese">Vietnamese</option>
+        </select>
+      </div>
+      <div class="login-card">
+        <div class="login-header">
+          <h1 data-i18n="loginTitle">Sign in</h1>
+          <p class="login-subtitle" data-i18n="loginSubtitle">
+            Use one of the sample accounts to continue.
+          </p>
+        </div>
+        <form id="login-form" class="login-form">
+          <label class="login-label" for="username" data-i18n="usernameLabel">Username or email</label>
+          <input
+            id="username"
+            name="username"
+            class="login-input"
+            type="text"
+            autocomplete="username"
+            required
+            data-i18n-placeholder="usernamePlaceholder"
+            placeholder="Enter your username or email"
+          />
+
+          <label class="login-label" for="password" data-i18n="passwordLabel">Password</label>
+          <input
+            id="password"
+            name="password"
+            class="login-input"
+            type="password"
+            autocomplete="current-password"
+            required
+            data-i18n-placeholder="passwordPlaceholder"
+            placeholder="Enter your password"
+          />
+
+          <div id="login-error" class="login-error" role="alert" aria-live="assertive"></div>
+
+          <button id="login-submit" class="btn login-submit" type="submit" data-i18n="loginButton">
+            Continue
+          </button>
+        </form>
+      </div>
+    </div>
+
+    <script type="module" src="login.js"></script>
+  </body>
+</html>

login.js

@@ -0,0 +1,57 @@
+import { initI18n, bindLanguageSelector, t, onLanguageChange } from './i18n.js';
+import {
+  findAccount,
+  getAuthUser,
+  getFakeAccounts,
+  saveAuthUser,
+} from './auth.js';
+
+const form = document.getElementById('login-form');
+const usernameInput = document.getElementById('username');
+const passwordInput = document.getElementById('password');
+const errorElement = document.getElementById('login-error');
+
+initI18n();
+bindLanguageSelector('#language-select');
+
+function redirectToApp() {
+  window.location.href = 'index.html';
+}
+
+function setError(message) {
+  errorElement.textContent = message || '';
+}
+
+function applyLoginTitle() {
+  document.title = t('loginTitle');
+}
+
+const existingUser = getAuthUser();
+if (existingUser) {
+  redirectToApp();
+}
+
+applyLoginTitle();
+
+onLanguageChange(() => {
+  applyLoginTitle();
+  if (errorElement.textContent) {
+    setError(t('loginError'));
+  }
+});
+
+form?.addEventListener('submit', (event) => {
+  event.preventDefault();
+  const username = usernameInput?.value;
+  const password = passwordInput?.value;
+  const account = findAccount(username, password);
+
+  if (!account) {
+    setError(t('loginError'));
+    return;
+  }
+
+  saveAuthUser(account);
+  setError('');
+  redirectToApp();
+});

main.js

@@ -1,5 +1,27 @@
-import { t, initI18n, bindLanguageSelector, onLanguageChange, getCurrentLanguage } from './i18n.js';
+import {
+  t,
+  initI18n,
+  bindLanguageSelector,
+  onLanguageChange,
+  getCurrentLanguage,
+} from './i18n.js';
 import { closeIcon, eyeIcon, trashIcon } from './constants.js';
+import {
+  ensureAuthenticated,
+  startAuthWatcher,
+  clearAuthUser,
+} from './auth.js';
+
+ensureAuthenticated();
+startAuthWatcher();
+
+const logoutButton = document.getElementById('btn-logout');
+if (logoutButton) {
+  logoutButton.addEventListener('click', () => {
+    clearAuthUser();
+    window.location.href = 'login.html';
+  });
+}
 
 const inputElement = document.getElementById('file-input');
 const textInputElement = document.getElementById('text-input-additional');
@@ -288,7 +310,9 @@ Object.defineProperty(selectedTab, 'value', {
     if (data.value) {
       const menuItems =
         newValue === 'verified_evidence'
-          ? buildVerifiedEvidenceMenu(selectedTabChildren.value || 'source_details')
+          ? buildVerifiedEvidenceMenu(
+              selectedTabChildren.value || 'source_details'
+            )
           : '';
 
       outputElement.innerHTML =
@@ -561,7 +585,10 @@ async function handleSubmit() {
 
   const formData = new FormData();
   formData.append('metadata_file', metadataFile);
-  formData.append('additional_text', sanitizeTextareaValue(textInputElement?.value));
+  formData.append(
+    'additional_text',
+    sanitizeTextareaValue(textInputElement?.value)
+  );
   const selectedLanguage = getCurrentLanguage();
   formData.append('language', languageApiMap[selectedLanguage] || 'English');
 
@@ -615,7 +642,9 @@ async function handleSubmit() {
 
     const menuItems =
       selectedTab.value === 'verified_evidence'
-        ? buildVerifiedEvidenceMenu(selectedTabChildren.value || 'source_details')
+        ? buildVerifiedEvidenceMenu(
+            selectedTabChildren.value || 'source_details'
+          )
         : '';
 
     outputElement.innerHTML =

styles.css

@@ -72,6 +72,29 @@ body {
   padding: 15px 24px;
 }
 
+.header-placeholder {
+  width: 120px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.btn-logout {
+  width: auto;
+  padding: 8px 14px;
+  background-color: #f1f3f5;
+  color: #374151;
+  border: 1px solid #d6d9de;
+  border-radius: 8px;
+}
+
+.btn-logout:hover {
+  background-color: #e9ecef;
+}
+
 .title-header-face-check {
   font-size: 28px;
   font-weight: 600;
@@ -87,6 +110,7 @@ body {
   font-size: 14px;
   color: #454545;
   font-weight: 600;
+  white-space: nowrap;
 }
 
 .language-select {
@@ -1041,3 +1065,125 @@ textarea:focus {
   margin-bottom: 12px;
   text-align: left;
 }
+
+/* Login Page */
+.login-layout {
+  position: relative;
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: radial-gradient(circle at 20% 20%, #fff4e6, #f8f9fa 35%),
+    radial-gradient(circle at 80% 0%, #e7f5ff, #f8f9fa 35%),
+    #f8f9fa;
+}
+
+.login-language-switcher {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.login-card {
+  width: min(420px, 100%);
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.login-header h1 {
+  font-size: 26px;
+  font-weight: 700;
+  color: #1f2933;
+}
+
+.login-subtitle {
+  margin-top: 6px;
+  color: #52606d;
+  line-height: 1.4;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.login-label {
+  font-weight: 600;
+  color: #374151;
+}
+
+.login-input {
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid #d1d5db;
+  border-radius: 10px;
+  background: #f9fafb;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.login-input:focus {
+  outline: none;
+  border-color: #fd7e14;
+  box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.15);
+  background: #ffffff;
+}
+
+.login-error {
+  min-height: 20px;
+  color: #d14343;
+  font-weight: 600;
+}
+
+.login-submit {
+  width: 100%;
+  background: linear-gradient(90deg, #fd7e14, #ff9f43);
+  color: #ffffff;
+  border: none;
+  border-radius: 12px;
+  padding: 12px 16px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.2s ease;
+}
+
+.login-submit:hover {
+  box-shadow: 0 10px 25px rgba(253, 126, 20, 0.28);
+}
+
+.login-submit:active {
+  transform: translateY(1px);
+}
+
+.login-fake-accounts {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 14px;
+}
+
+.login-fake-accounts-title {
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: #1f2937;
+}
+
+.login-fake-accounts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+    monospace;
+  color: #334155;
+  font-size: 14px;
+}