Change login from http basic auth to cookies

2024-08-30 06:17:02 +08:00
parent c0e65632f6
commit 652661ea50
11 changed files with 289 additions and 109 deletions
--- a/src_assets/common/assets/web/login.html
+++ b/src_assets/common/assets/web/login.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="auto">
+
+<head>
+  <%- header %>
+</head>
+
+<body id="app" v-cloak>
+  <main role="main" style="max-width: 1200px; margin: 1em auto">
+    <div class="d-flex justify-content-center">
+      <div class="card p-2">
+        <header>
+          <h1 class="mb-0">
+            <img src="/images/logo-apollo-45.png" height="45" alt="">
+            {{ $t('welcome.greeting') }}
+          </h1>
+        </header>
+        <form @submit.prevent="save" class="mt-4">
+          <div class="mb-2">
+            <label for="usernameInput" class="form-label">{{ $t('_common.username') }}</label>
+            <input type="text" class="form-control" id="usernameInput" autocomplete="username"
+              v-model="passwordData.username" />
+          </div>
+          <div class="mb-4">
+            <label for="passwordInput" class="form-label">{{ $t('_common.password') }}</label>
+            <input type="password" class="form-control" id="passwordInput" autocomplete="new-password"
+              v-model="passwordData.password" required />
+          </div>
+          <button type="submit" class="btn btn-primary w-100 mb-2" v-bind:disabled="loading">
+            {{ $t('welcome.login') }}
+          </button>
+          <div class="alert alert-danger" v-if="error"><b>{{ $t('_common.error') }}</b> {{error}}</div>
+          <div class="alert alert-success" v-if="success">
+            <b>{{ $t('_common.success') }}</b> {{ $t('welcome.login_success') }}
+          </div>
+        </form>
+      </div>
+      </div>
+    </div>
+  </main>
+</body>
+
+<script type="module">
+  import { createApp } from "vue"
+  import { initApp } from './init'
+
+  let app = createApp({
+    data() {
+      return {
+        error: null,
+        success: false,
+        loading: false,
+        passwordData: {
+          username: "",
+          password: ""
+        },
+      };
+    },
+    methods: {
+      save() {
+        this.error = null;
+        this.loading = true;
+        fetch("/api/login", {
+          method: "POST",
+          body: JSON.stringify(this.passwordData),
+        }).then((res) => {
+          this.loading = false;
+          if (res.status === 200) {
+            this.success = true;
+            location.href = './';
+          } else {
+            throw new Error(`Server returned ${res.status}`);
+          }
+        }).catch((e) => {
+          this.error = `Login failed: ${e.message}`;
+        });
+      },
+    },
+  });
+
+  initApp(app);
+</script>