mirror of
https://github.com/LizardByte/Sunshine.git
synced 2025-01-29 09:32:39 +00:00
120 lines
3.6 KiB
HTML
120 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<%- header %>
|
|
<style>
|
|
.config-page {
|
|
padding: 1em;
|
|
border: 1px solid #dee2e6;
|
|
border-top: none;
|
|
}
|
|
|
|
.buttons {
|
|
padding: 1em 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body id="app">
|
|
<Navbar></Navbar>
|
|
<div class="container">
|
|
<h1 class="my-4">Password Change</h1>
|
|
<form @submit.prevent="save">
|
|
<div class="card d-flex p-4 flex-row">
|
|
<div class="col-md-6 px-4">
|
|
<h4>Current Credentials</h4>
|
|
<div class="mb-3">
|
|
<label for="currentUsername" class="form-label">Username</label>
|
|
<input required type="text" class="form-control" id="currentUsername"
|
|
v-model="passwordData.currentUsername" />
|
|
<div class="form-text"> </div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="currentPassword" class="form-label">Password</label>
|
|
<input autocomplete="current-password" type="password" class="form-control" id="currentPassword"
|
|
v-model="passwordData.currentPassword" />
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 px-4">
|
|
<h4>New Credentials</h4>
|
|
<div class="mb-3">
|
|
<label for="newUsername" class="form-label">New Username</label>
|
|
<input type="text" class="form-control" id="newUsername" v-model="passwordData.newUsername" />
|
|
<div class="form-text">
|
|
If not specified, the username will not change
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="newPassword" class="form-label">Password</label>
|
|
<input autocomplete="new-password" required type="password" class="form-control" id="newPassword"
|
|
v-model="passwordData.newPassword" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="confirmNewPassword" class="form-label">Confirm Password</label>
|
|
<input autocomplete="new-password" required type="password" class="form-control" id="confirmNewPassword"
|
|
v-model="passwordData.confirmNewPassword" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div>
|
|
<div class="alert alert-success" v-if="success">
|
|
<b>Success! </b>This page will reload soon, your browser will ask you for
|
|
the new credentials
|
|
</div>
|
|
<div class="mb-3 buttons">
|
|
<button class="btn btn-primary">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
<script type="module">
|
|
import { createApp } from 'vue'
|
|
import Navbar from './Navbar.vue'
|
|
|
|
const app = createApp({
|
|
components: {
|
|
Navbar
|
|
},
|
|
data() {
|
|
return {
|
|
error: null,
|
|
success: false,
|
|
passwordData: {
|
|
currentUsername: "",
|
|
currentPassword: "",
|
|
newUsername: "",
|
|
newPassword: "",
|
|
confirmNewPassword: "",
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
save() {
|
|
this.error = null;
|
|
fetch("/api/password", {
|
|
method: "POST",
|
|
body: JSON.stringify(this.passwordData),
|
|
}).then((r) => {
|
|
if (r.status == 200) {
|
|
r.json().then((rj) => {
|
|
if (rj.status.toString() === "true") {
|
|
this.success = true;
|
|
setTimeout(() => {
|
|
document.location.reload();
|
|
}, 5000);
|
|
} else {
|
|
this.error = rj.error;
|
|
}
|
|
});
|
|
} else {
|
|
this.error = "Internal Server Error";
|
|
}
|
|
});
|
|
},
|
|
},
|
|
});
|
|
|
|
app.mount("#app");
|
|
</script>
|