Change login from http basic auth to cookies
This commit is contained in:
@@ -407,14 +407,18 @@
|
||||
};
|
||||
},
|
||||
created() {
|
||||
fetch("/api/apps")
|
||||
fetch("/api/apps", {
|
||||
credentials: 'include'
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((r) => {
|
||||
console.log(r);
|
||||
this.apps = r.apps;
|
||||
});
|
||||
|
||||
fetch("/api/config")
|
||||
fetch("/api/config", {
|
||||
credentials: 'include'
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(r => this.platform = r.platform);
|
||||
},
|
||||
@@ -473,7 +477,10 @@
|
||||
"Are you sure to delete " + this.apps[id].name + "?"
|
||||
);
|
||||
if (resp) {
|
||||
fetch("/api/apps/" + id, { method: "DELETE" }).then((r) => {
|
||||
fetch("/api/apps/" + id, {
|
||||
credentials: 'include',
|
||||
method: "DELETE"
|
||||
}).then((r) => {
|
||||
if (r.status == 200) document.location.reload();
|
||||
});
|
||||
}
|
||||
@@ -569,6 +576,7 @@
|
||||
useCover(cover) {
|
||||
this.coverFinderBusy = true;
|
||||
fetch("/api/covers/upload", {
|
||||
credentials: 'include',
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
key: cover.key,
|
||||
@@ -584,6 +592,7 @@
|
||||
save() {
|
||||
this.editForm["image-path"] = this.editForm["image-path"].toString().replace(/"/g, '');
|
||||
fetch("/api/apps", {
|
||||
credentials: 'include',
|
||||
method: "POST",
|
||||
body: JSON.stringify(this.editForm),
|
||||
}).then((r) => {
|
||||
|
||||
@@ -283,7 +283,9 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
fetch("/api/config")
|
||||
fetch("/api/config", {
|
||||
credentials: 'include'
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((r) => {
|
||||
this.config = r;
|
||||
@@ -372,6 +374,7 @@
|
||||
});
|
||||
|
||||
return fetch("/api/config", {
|
||||
credentials: 'include',
|
||||
method: "POST",
|
||||
body: JSON.stringify(config),
|
||||
}).then((r) => {
|
||||
|
||||
@@ -4,7 +4,7 @@ import {createI18n} from "vue-i18n";
|
||||
import en from './public/assets/locale/en.json'
|
||||
|
||||
export default async function() {
|
||||
let r = await (await fetch("/api/configLocale")).json();
|
||||
let r = await (await fetch("/api/configLocale", { credentials: 'include' })).json();
|
||||
let locale = r.locale ?? "en";
|
||||
document.querySelector('html').setAttribute('lang', locale);
|
||||
let messages = {
|
||||
@@ -12,7 +12,7 @@ export default async function() {
|
||||
};
|
||||
try {
|
||||
if (locale !== 'en') {
|
||||
let r = await (await fetch(`/assets/locale/${locale}.json`)).json();
|
||||
let r = await (await fetch(`/assets/locale/${locale}.json`, { credentials: 'include' })).json();
|
||||
messages[locale] = r;
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
82
src_assets/common/assets/web/login.html
Normal file
82
src_assets/common/assets/web/login.html
Normal file
@@ -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>
|
||||
@@ -95,6 +95,7 @@
|
||||
};
|
||||
this.error = null;
|
||||
fetch("/api/password", {
|
||||
credentials: 'include',
|
||||
method: "POST",
|
||||
body: JSON.stringify(this.passwordData),
|
||||
}).then((r) => {
|
||||
|
||||
@@ -78,7 +78,11 @@
|
||||
let name = document.querySelector("#name-input").value;
|
||||
document.querySelector("#status").innerHTML = "";
|
||||
let b = JSON.stringify({pin: pin, name: name});
|
||||
fetch("/api/pin", {method: "POST", body: b})
|
||||
fetch("/api/pin", {
|
||||
credentials: 'include',
|
||||
method: "POST",
|
||||
body: b
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
if (response.status.toString().toLowerCase() === "true") {
|
||||
@@ -95,7 +99,9 @@
|
||||
});
|
||||
},
|
||||
requestOTP() {
|
||||
fetch(`/api/otp?passphrase=${this.passphrase}${this.deviceName && `&deviceName=${this.deviceName}` || ''}`)
|
||||
fetch(`/api/otp?passphrase=${this.passphrase}${this.deviceName && `&deviceName=${this.deviceName}` || ''}`, {
|
||||
credentials: 'include'
|
||||
})
|
||||
.then(resp => resp.json())
|
||||
.then(resp => {
|
||||
if (resp.status !== 'true') {
|
||||
|
||||
@@ -423,6 +423,7 @@
|
||||
"create_creds_alert": "The credentials below are needed to access Apollo's Web UI. Keep them safe, since you will never see them again!",
|
||||
"greeting": "Welcome to Apollo!",
|
||||
"login": "Login",
|
||||
"welcome_success": "This page will reload soon, your browser will ask you for the new credentials"
|
||||
"welcome_success": "This page will reload soon, your browser will ask you for the new credentials",
|
||||
"login_success": "This page will reload soon."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -424,6 +424,7 @@
|
||||
"create_creds_alert": "需要下面的账户信息才能访问 Apollo 的 Web UI 。请妥善保存,因为你再也不会见到它们!",
|
||||
"greeting": "欢迎使用 Apollo!",
|
||||
"login": "登录",
|
||||
"welcome_success": "此页面将很快重新加载,您的浏览器将询问您新的账户信息"
|
||||
"welcome_success": "此页面将很快重新加载,您的浏览器将询问您新的账户信息",
|
||||
"login_success": "此页面将重新加载。"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -163,7 +163,7 @@
|
||||
logs: 'Loading...',
|
||||
logFilter: null,
|
||||
logInterval: null,
|
||||
serterRestarting: false,
|
||||
serverRestarting: false,
|
||||
serverQuitting: false,
|
||||
serverQuit: false,
|
||||
showApplyMessage: false,
|
||||
@@ -191,7 +191,7 @@
|
||||
},
|
||||
methods: {
|
||||
refreshLogs() {
|
||||
fetch("/api/logs",)
|
||||
fetch("/api/logs", { credentials: 'include' })
|
||||
.then((r) => r.text())
|
||||
.then((r) => {
|
||||
this.logs = r;
|
||||
@@ -199,7 +199,10 @@
|
||||
},
|
||||
closeApp() {
|
||||
this.closeAppPressed = true;
|
||||
fetch("/api/apps/close", { method: "POST" })
|
||||
fetch("/api/apps/close", {
|
||||
credentials: 'include',
|
||||
method: "POST"
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((r) => {
|
||||
this.closeAppPressed = false;
|
||||
@@ -211,7 +214,10 @@
|
||||
},
|
||||
unpairAll() {
|
||||
this.unpairAllPressed = true;
|
||||
fetch("/api/clients/unpair-all", { method: "POST" })
|
||||
fetch("/api/clients/unpair-all", {
|
||||
credentials: 'include',
|
||||
method: "POST"
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((r) => {
|
||||
this.unpairAllPressed = false;
|
||||
@@ -223,13 +229,16 @@
|
||||
});
|
||||
},
|
||||
unpairSingle(uuid) {
|
||||
fetch("/api/clients/unpair", { method: "POST", body: JSON.stringify({ uuid }) }).then(() => {
|
||||
fetch("/api/clients/unpair", { credentials: 'include',
|
||||
method: "POST",
|
||||
body: JSON.stringify({ uuid })
|
||||
}).then(() => {
|
||||
this.showApplyMessage = true;
|
||||
this.refreshClients();
|
||||
});
|
||||
},
|
||||
refreshClients() {
|
||||
fetch("/api/clients/list")
|
||||
fetch("/api/clients/list", { credentials: 'include' })
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
const clientList = document.querySelector("#client-list");
|
||||
@@ -254,13 +263,26 @@
|
||||
this.serverRestarting = false;
|
||||
}, 5000);
|
||||
fetch("/api/restart", {
|
||||
credentials: 'include',
|
||||
method: "POST",
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status !== 200) {
|
||||
location.href = './login'
|
||||
return
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
this.serverRestarting = false;
|
||||
console.error(e);
|
||||
alert("Restart error!");
|
||||
});
|
||||
},
|
||||
quit() {
|
||||
if (window.confirm("Do you really want to quit Apollo? You'll not be able to start Apollo again if you have no other methods to operate your computer.")) {
|
||||
this.serverQuitting = true;
|
||||
fetch("/api/quit", {
|
||||
credentials: 'include',
|
||||
method: "POST",
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
Reference in New Issue
Block a user