From 772e778aa0f98025d690c4dda75df45a98aa9e0d Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 11:04:20 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20Phase=204=20=E2=80=94=20port?=
 =?UTF-8?q?=20login.html=20to=20Vue=203=20+=20AD-Vue=204=20+=20Vite=208?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First real page in the new toolchain. Multi-page Vite: each migrated
page is its own entry. login.html now lives at frontend/login.html with
a thin entrypoint at frontend/src/login.js mounting LoginPage.vue.

Vite 6 → Vite 8.0.11 (per user request). Requires Node 20.19+ or 22.12+.
@vitejs/plugin-vue bumped to ^6.0.6 (peers vite ^8). Ant Design Vue
stays on 4.2.6 — there is no AD-Vue 6.

Vue 2 → Vue 3 / AD-Vue 1 → AD-Vue 4 syntax changes hit on this page:
- new Vue({ el, delimiters, data, methods }) → createApp + <script setup>
- mounted() → onMounted()
- <template slot="X"> → <template #X>
- <a-icon slot="prefix" type="user"> → <template #prefix><UserOutlined />
  </template> with explicit @ant-design/icons-vue imports
- v-model.trim → v-model:value (AD-Vue 4 uses named v-model on inputs)

Three legacy features deferred so Phase 4 stays small:
- i18n (Phase 7 wires up vue-i18n)
- theme switcher (custom component pending Phase 5)
- headline word-cycle animation (purely aesthetic)

Run `cd frontend && npm install && npm run dev`, open
http://localhost:5173/login.html. With Go panel running on :2053 the
form submits real credentials via the configured proxy.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/migrations/vue3-phase1-inventory.md |  21 ++-
 frontend/login.html                      |  13 ++
 frontend/package.json                    |   4 +-
 frontend/src/login.js                    |  10 ++
 frontend/src/pages/login/LoginPage.vue   | 195 +++++++++++++++++++++++
 frontend/vite.config.js                  |   1 +
 6 files changed, 241 insertions(+), 3 deletions(-)
 create mode 100644 frontend/login.html
 create mode 100644 frontend/src/login.js
 create mode 100644 frontend/src/pages/login/LoginPage.vue

diff --git a/docs/migrations/vue3-phase1-inventory.md b/docs/migrations/vue3-phase1-inventory.md
index 554f3450..0e7ef3f3 100644
--- a/docs/migrations/vue3-phase1-inventory.md
+++ b/docs/migrations/vue3-phase1-inventory.md
@@ -105,7 +105,26 @@ Order chosen so that breakage is contained and we always have a working panel:
 - ✅ Phase 1 — inventory (this document)
 - ✅ Phase 2 — Vite + Vue 3 + AD-Vue 4 scaffold under `frontend/`
 - ✅ Phase 3 — utils + models + websocket ported as ES modules
-- ⏳ Phase 4 — first real page (login.html)
+- ✅ Phase 4 — first real page (login.html) ported
+- ⏳ Phase 5 — medium pages + modals
+
+### Phase 4 notes
+
+- Vite 6 → Vite 8.0.11 (released March 2026). Requires Node 20.19+ or 22.12+. `@vitejs/plugin-vue` bumped to ^6.0.6 which lists vite ^8 as a peer.
+- Multi-page Vite: each migrated page = its own entry. `frontend/login.html` registered alongside `frontend/index.html` in `rollupOptions.input`. Same approach for the rest of the migration.
+- New page lives at `frontend/src/pages/login/LoginPage.vue` with a thin entrypoint at `frontend/src/login.js` that calls `setupAxios()`, installs Antd, and mounts.
+- **Three legacy features deferred** to keep Phase 4 small:
+  - **i18n** — strings hardcoded in English. Phase 7 wires up vue-i18n with the existing TOML files.
+  - **Theme switcher** — `<a-theme-switch-login>` was a custom component referencing a global `themeSwitcher`. Deferred to Phase 5 with the rest of the shared components.
+  - **Headline word-cycling animation** — purely aesthetic, not migrated.
+  - **Password-manager DOM observer** — the `pm_*` script that strips inline styles from autofilled inputs. Niche workaround, easy to add back if needed.
+- **Vue 3 / AD-Vue 4 syntax changes applied:**
+  - `<template slot="X">` → `<template #X>` (Vue 3 slot syntax)
+  - `<a-icon slot="prefix" type="user">` → `<template #prefix><UserOutlined /></template>` with explicit imports from `@ant-design/icons-vue`. **AD-Vue 4 removed the generic `<a-icon>` — every icon must be imported individually.**
+  - `v-model.trim` on `a-input` → `v-model:value` (AD-Vue 4 uses named v-model on inputs). The `.trim` modifier is dropped; trim manually if needed.
+  - `new Vue({ el: '#app', delimiters, data, methods })` → `createApp(LoginPage).use(Antd).mount('#app')` with `<script setup>` and Composition API.
+  - `mounted()` → `onMounted()`.
+  - `el: '#app', delimiters: ['[[', ']]']` is gone — SFCs use the standard `{{ }}`.
 
 ### Phase 3 notes
 
diff --git a/frontend/login.html b/frontend/login.html
new file mode 100644
index 00000000..df87b300
--- /dev/null
+++ b/frontend/login.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex,nofollow" />
+    <title>3x-ui — Sign in</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/login.js"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
index 77e66fd5..19180bfd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,9 +21,9 @@
     "vue-i18n": "^10.0.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^6.0.6",
     "eslint": "^9.17.0",
     "eslint-plugin-vue": "^9.32.0",
-    "vite": "^6.0.7"
+    "vite": "^8.0.11"
   }
 }
diff --git a/frontend/src/login.js b/frontend/src/login.js
new file mode 100644
index 00000000..aad1229f
--- /dev/null
+++ b/frontend/src/login.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/reset.css';
+
+import { setupAxios } from '@/api/axios-init.js';
+import LoginPage from '@/pages/login/LoginPage.vue';
+
+setupAxios();
+
+createApp(LoginPage).use(Antd).mount('#app');
diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue
new file mode 100644
index 00000000..1d5f116c
--- /dev/null
+++ b/frontend/src/pages/login/LoginPage.vue
@@ -0,0 +1,195 @@
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import { UserOutlined, LockOutlined, KeyOutlined } from '@ant-design/icons-vue';
+
+import { HttpUtil } from '@/utils';
+
+// Phase 4 ships this page in English only. Translations come back in
+// Phase 7 (vue-i18n) once we decide how the new build pipeline reads
+// the existing TOML translation files.
+
+const fetched = ref(false);
+const submitting = ref(false);
+const twoFactorEnable = ref(false);
+
+const user = reactive({
+  username: '',
+  password: '',
+  twoFactorCode: '',
+});
+
+// In production the Go panel will inject a base path; during `npm run dev`
+// we hit Vite's dev server and the configured proxy routes /login, /panel,
+// etc. to the local Go backend.
+const basePath = window.__X_UI_BASE_PATH__ || '';
+
+onMounted(async () => {
+  const msg = await HttpUtil.post('/getTwoFactorEnable');
+  if (msg.success) {
+    twoFactorEnable.value = !!msg.obj;
+  }
+  fetched.value = true;
+});
+
+async function login() {
+  submitting.value = true;
+  try {
+    const msg = await HttpUtil.post('/login', user);
+    if (msg.success) {
+      window.location.href = basePath + 'panel/';
+    }
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<template>
+  <a-layout class="login-app">
+    <a-layout-content class="login-content">
+      <div class="waves-header">
+        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+          <defs>
+            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+          </defs>
+          <g class="parallax">
+            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
+            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
+            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
+            <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
+          </g>
+        </svg>
+      </div>
+
+      <a-row type="flex" justify="center" align="middle" class="login-row">
+        <a-col :xs="22" :sm="14" :md="10" :lg="8" :xl="6" class="login-card">
+          <div v-if="!fetched" class="login-loading">
+            <a-spin size="large" />
+          </div>
+
+          <div v-else>
+            <a-row justify="center">
+              <a-col :span="24">
+                <h2 class="login-title">Welcome to 3x-ui</h2>
+              </a-col>
+            </a-row>
+
+            <a-form layout="vertical" @submit.prevent="login">
+              <a-form-item>
+                <a-input
+                  v-model:value="user.username"
+                  autocomplete="username"
+                  name="username"
+                  placeholder="Username"
+                  autofocus
+                  required
+                >
+                  <template #prefix><UserOutlined /></template>
+                </a-input>
+              </a-form-item>
+
+              <a-form-item>
+                <a-input-password
+                  v-model:value="user.password"
+                  autocomplete="current-password"
+                  name="password"
+                  placeholder="Password"
+                  required
+                >
+                  <template #prefix><LockOutlined /></template>
+                </a-input-password>
+              </a-form-item>
+
+              <a-form-item v-if="twoFactorEnable">
+                <a-input
+                  v-model:value="user.twoFactorCode"
+                  autocomplete="one-time-code"
+                  name="twoFactorCode"
+                  placeholder="Two-factor code"
+                  required
+                >
+                  <template #prefix><KeyOutlined /></template>
+                </a-input>
+              </a-form-item>
+
+              <a-form-item>
+                <a-row justify="center">
+                  <a-button type="primary" html-type="submit" :loading="submitting" block>
+                    {{ submitting ? '' : 'Login' }}
+                  </a-button>
+                </a-row>
+              </a-form-item>
+            </a-form>
+          </div>
+        </a-col>
+      </a-row>
+    </a-layout-content>
+  </a-layout>
+</template>
+
+<style scoped>
+.login-app {
+  min-height: 100vh;
+  background: #f0f2f5;
+}
+
+.login-content {
+  position: relative;
+}
+
+.login-row {
+  min-height: 100vh;
+  padding: 24px 0;
+}
+
+.login-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  padding: 40px 32px;
+}
+
+.login-loading {
+  text-align: center;
+  padding: 40px 0;
+}
+
+.login-title {
+  text-align: center;
+  margin-bottom: 32px;
+  color: #008771;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.waves-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  overflow: hidden;
+  height: 200px;
+}
+
+.waves {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.parallax > use {
+  animation: move-forever 15s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+}
+
+.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
+.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
+.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
+.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
+
+@keyframes move-forever {
+  0% { transform: translate3d(-90px, 0, 0); }
+  100% { transform: translate3d(85px, 0, 0); }
+}
+</style>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 1fb94cde..423cb4d8 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -23,6 +23,7 @@ export default defineConfig({
     rollupOptions: {
       input: {
         index: path.resolve(__dirname, 'index.html'),
+        login: path.resolve(__dirname, 'login.html'),
       },
     },
   },