feat: add username/password login, account settings, and changelog (#133) (#134)

- Add username/password login as additional auth mechanism alongside existing token
- First login must use token; password can be configured in Settings > Account
- Password login returns the existing static token (no auth middleware changes)
- Add account settings: setup, change password, change username, remove password
- Add logout button to sidebar footer
- Add version changelog popup (click version number in sidebar)
- Support all 8 locales (en, zh, de, es, fr, ja, ko, pt)
- Bump version to 0.4.3

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/views/LoginView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { setApiKey, hasApiKey } from "@/api/client";
+import { fetchAuthStatus, loginWithPassword } from "@/api/auth";
 
 const { t } = useI18n();
 const router = useRouter();
@@ -11,14 +12,41 @@ const router = useRouter();
 const urlToken = (window as any).__LOGIN_TOKEN__ || "";
 
 const token = ref(urlToken);
+const username = ref("");
+const password = ref("");
 const loading = ref(false);
 const errorMsg = ref("");
+
+// Login method: 'token' or 'password'
+const loginMethod = ref<"token" | "password">("token");
+const hasPasswordLogin = ref(false);
+
 // If already has a key, try to go to main page
 if (hasApiKey()) {
   router.replace("/hermes/chat");
 }
 
+onMounted(async () => {
+  try {
+    const status = await fetchAuthStatus();
+    hasPasswordLogin.value = status.hasPasswordLogin;
+    if (status.hasPasswordLogin && !urlToken) {
+      loginMethod.value = "password";
+    }
+  } catch {
+    // Fallback to token-only
+  }
+});
+
 async function handleLogin() {
+  if (loginMethod.value === "token") {
+    await handleTokenLogin();
+  } else {
+    await handlePasswordLogin();
+  }
+}
+
+async function handleTokenLogin() {
   const key = token.value.trim();
   if (!key) {
     errorMsg.value = t("login.tokenRequired");
@@ -29,7 +57,6 @@ async function handleLogin() {
   errorMsg.value = "";
 
   try {
-    // Validate token by calling an auth-required endpoint
     const res = await fetch("/api/sessions", {
       headers: { Authorization: `Bearer ${key}` },
     });
@@ -48,6 +75,26 @@ async function handleLogin() {
     loading.value = false;
   }
 }
+
+async function handlePasswordLogin() {
+  if (!username.value.trim() || !password.value) {
+    errorMsg.value = t("login.credentialsRequired");
+    return;
+  }
+
+  loading.value = true;
+  errorMsg.value = "";
+
+  try {
+    const sessionToken = await loginWithPassword(username.value.trim(), password.value);
+    setApiKey(sessionToken);
+    router.replace("/hermes/chat");
+  } catch (err: any) {
+    errorMsg.value = err.message || t("login.invalidCredentials");
+  } finally {
+    loading.value = false;
+  }
+}
 </script>
 
 <template>
@@ -56,17 +103,53 @@ async function handleLogin() {
       <div class="login-logo">
         <img src="/logo.png" alt="Hermes" width="80" height="80" />
       </div>
-      <h1 class="login-title">{{ t('login.title') }}</h1>
+      <h1 class="login-title">{{ t("login.title") }}</h1>
       <p class="login-desc">{{ t("login.description") }}</p>
 
+      <!-- Method toggle -->
+      <div v-if="hasPasswordLogin" class="login-method-toggle">
+        <button
+          class="toggle-btn"
+          :class="{ active: loginMethod === 'password' }"
+          @click="loginMethod = 'password'"
+        >{{ t("login.passwordLogin") }}</button>
+        <button
+          class="toggle-btn"
+          :class="{ active: loginMethod === 'token' }"
+          @click="loginMethod = 'token'"
+        >{{ t("login.tokenLogin") }}</button>
+      </div>
+
       <form class="login-form" @submit.prevent="handleLogin">
-        <input
-          v-model="token"
-          type="password"
-          class="login-input"
-          :placeholder="t('login.placeholder')"
-          autofocus
-        />
+        <!-- Token login -->
+        <template v-if="loginMethod === 'token'">
+          <input
+            v-model="token"
+            type="password"
+            class="login-input"
+            :placeholder="t('login.placeholder')"
+            autofocus
+          />
+        </template>
+
+        <!-- Password login -->
+        <template v-if="loginMethod === 'password'">
+          <input
+            v-model="username"
+            type="text"
+            class="login-input"
+            :placeholder="t('login.usernamePlaceholder')"
+            autofocus
+          />
+          <input
+            v-model="password"
+            type="password"
+            class="login-input"
+            :placeholder="t('login.passwordPlaceholder')"
+            @keyup.enter="handleLogin"
+          />
+        </template>
+
         <div v-if="errorMsg" class="login-error">{{ errorMsg }}</div>
         <button type="submit" class="login-btn" :disabled="loading">
           {{ loading ? "..." : t("login.submit") }}
@@ -115,10 +198,38 @@ async function handleLogin() {
 .login-desc {
   font-size: 14px;
   color: $text-muted;
-  margin: 0 0 40px;
+  margin: 0 0 32px;
   line-height: 1.6;
 }
 
+.login-method-toggle {
+  display: flex;
+  margin-bottom: 24px;
+  border: 1px solid $border-color;
+  border-radius: $radius-sm;
+  overflow: hidden;
+
+  .toggle-btn {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    background: transparent;
+    color: $text-muted;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all $transition-fast;
+
+    &.active {
+      background: $text-primary;
+      color: var(--text-on-accent);
+    }
+
+    &:not(.active):hover {
+      background: rgba(var(--accent-primary-rgb), 0.06);
+    }
+  }
+}
+
 .login-form {
   display: flex;
   flex-direction: column;

packages/client/src/views/hermes/SettingsView.vue

@@ -13,6 +13,7 @@ import MemorySettings from "@/components/hermes/settings/MemorySettings.vue";
 import SessionSettings from "@/components/hermes/settings/SessionSettings.vue";
 import PrivacySettings from "@/components/hermes/settings/PrivacySettings.vue";
 import ModelSettings from "@/components/hermes/settings/ModelSettings.vue";
+import AccountSettings from "@/components/hermes/settings/AccountSettings.vue";
 
 const settingsStore = useSettingsStore();
 const { t } = useI18n();
@@ -35,6 +36,9 @@ onMounted(() => {
         :description="t('common.loading')"
       >
         <NTabs type="line" animated>
+          <NTabPane name="account" :tab="t('settings.tabs.account')">
+            <AccountSettings />
+          </NTabPane>
           <NTabPane name="display" :tab="t('settings.tabs.display')">
             <DisplaySettings />
           </NTabPane>