mirror/Sunshine
1
0
Fork 0
mirror of https://github.com/LizardByte/Sunshine.git synced 2025-01-27 12:35:25 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Fixed Formatting of HTML pages, added Prettier Support

Browse Source
This commit is contained in:
Elia Zammuto 2021-08-17 19:12:15 +02:00
parent 62c3faaacb
commit 81317ce672
10 changed files with 1325 additions and 868 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc.json Normal file
View File

@ -0,0 +1 @@
{}

174
assets/web/apps.html
View File

@ -14,8 +14,11 @@
<tbody> <tbody>
<tr v-for="(app,i) in apps" :key="i"> <tr v-for="(app,i) in apps" :key="i">
<td>{{app.name}}</td> <td>{{app.name}}</td>
<td><button class="btn btn-primary" @click="editApp(i)">Edit</button> <td>
<button class="btn btn-danger" @click="showDeleteForm(i)">Delete</button> <button class="btn btn-primary" @click="editApp(i)">Edit</button>
<button class="btn btn-danger" @click="showDeleteForm(i)">
Delete
</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -26,62 +29,132 @@
<!--name--> <!--name-->
<div class="mb-3"> <div class="mb-3">
<label for="appName" class="form-label">Application Name</label> <label for="appName" class="form-label">Application Name</label>
<input type="text" class="form-control" id="appName" aria-describedby="appNameHelp" v-model="editForm.name"> <input
<div id="appNameHelp" class="form-text">Application Name, as shown on Moonlight</div> type="text"
class="form-control"
id="appName"
aria-describedby="appNameHelp"
v-model="editForm.name"
/>
<div id="appNameHelp" class="form-text">
Application Name, as shown on Moonlight
</div>
</div> </div>
<!--output--> <!--output-->
<div class="mb-3"> <div class="mb-3">
<label for="appOutput" class="form-label">Output</label> <label for="appOutput" class="form-label">Output</label>
<input type="text" class="form-control monospace" id="appOutput" aria-describedby="appOutputHelp" <input
v-model="editForm.output"> type="text"
<div id="appOutputHelp" class="form-text">The file where the output of the command is stored, if it is not class="form-control monospace"
specified, the output is ignored</div> id="appOutput"
aria-describedby="appOutputHelp"
v-model="editForm.output"
/>
<div id="appOutputHelp" class="form-text">
The file where the output of the command is stored, if it is not
specified, the output is ignored
</div>
</div> </div>
<!--prep-cmd--> <!--prep-cmd-->
<div class="mb-3 d-flex flex-column"> <div class="mb-3 d-flex flex-column">
<label for="appName" class="form-label">Command Preparations</label> <label for="appName" class="form-label">Command Preparations</label>
<div class="form-text">A list of commands to be run before/after the application. <br> If any of the <div class="form-text">
prep-commands fail, starting the application is aborted</div> A list of commands to be run before/after the application. <br />
If any of the prep-commands fail, starting the application is aborted
</div>
<table v-if="editForm['prep-cmd'].length > 0"> <table v-if="editForm['prep-cmd'].length > 0">
<thead> <thead>
<th class="precmd-head">Do</th> <th class="precmd-head">Do</th>
<th class="precmd-head">Undo</th> <th class="precmd-head">Undo</th>
<th style="width: 48px;"></th> <th style="width: 48px"></th>
</thead> </thead>
<tbody> <tbody>
<tr v-for="(c,i) in editForm['prep-cmd']"> <tr v-for="(c,i) in editForm['prep-cmd']">
<td><input type="text" class="form-control monospace" v-model="c.do"></td> <td>
<td><input type="text" class="form-control monospace" v-model="c.undo"></td> <input
<td><button class="btn btn-danger" @click="editForm['prep-cmd'].splice(i,1)">&times;</button></td> type="text"
class="form-control monospace"
v-model="c.do"
/>
</td>
<td>
<input
type="text"
class="form-control monospace"
v-model="c.undo"
/>
</td>
<td>
<button
class="btn btn-danger"
@click="editForm['prep-cmd'].splice(i,1)"
>
&times;
</button>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<button class="mt-2 btn btn-success" style="margin: 0 auto;" @click="addPrepCmd">&plus; Add</button> <button
class="mt-2 btn btn-success"
style="margin: 0 auto"
@click="addPrepCmd"
>
&plus; Add
</button>
</div> </div>
<!--detatched--> <!--detatched-->
<div class="mb-3"> <div class="mb-3">
<label for="appName" class="form-label">Detached Commands</label> <label for="appName" class="form-label">Detached Commands</label>
<div v-for="(c,i) in editForm.detached" class="d-flex justify-content-between my-2"> <div
v-for="(c,i) in editForm.detached"
class="d-flex justify-content-between my-2"
>
<pre>{{c}}</pre> <pre>{{c}}</pre>
<button class="btn btn-danger mx-2" @click="editForm.detached.splice(i,1)">&times;</button> <button
class="btn btn-danger mx-2"
@click="editForm.detached.splice(i,1)"
>
&times;
</button>
</div> </div>
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<input type="text" class="form-control monospace" v-model="detachedCmd"> <input
<button class="btn btn-success mx-2" @click="editForm.detached.push(detachedCmd);detachedCmd = '';">+</button> type="text"
class="form-control monospace"
v-model="detachedCmd"
/>
<button
class="btn btn-success mx-2"
@click="editForm.detached.push(detachedCmd);detachedCmd = '';"
>
+
</button>
</div>
<div class="form-text">
A list of commands to be run and forgotten about
</div> </div>
<div class="form-text">A list of commands to be run and forgotten about</div>
</div> </div>
<!--command--> <!--command-->
<div class="mb-3"> <div class="mb-3">
<label for="appCmd" class="form-label">Command</label> <label for="appCmd" class="form-label">Command</label>
<input type="text" class="form-control monospace" id="appCmd" aria-describedby="appCmdHelp" <input
v-model="editForm.cmd"> type="text"
<div id="appCmdHelp" class="form-text">The main application, if it is not specified, a processs is started that class="form-control monospace"
sleeps indefinitely</div> id="appCmd"
aria-describedby="appCmdHelp"
v-model="editForm.cmd"
/>
<div id="appCmdHelp" class="form-text">
The main application, if it is not specified, a processs is started
that sleeps indefinitely
</div>
</div> </div>
<!--buttons--> <!--buttons-->
<div class="d-flex"> <div class="d-flex">
<button @click="showEditForm = false" class="btn btn-secondary m-2">Cancel</button> <button @click="showEditForm = false" class="btn btn-secondary m-2">
Cancel
</button>
<button class="btn btn-primary m-2" @click="save">Save</button> <button class="btn btn-primary m-2" @click="save">Save</button>
</div> </div>
</div> </div>
@ -93,30 +166,32 @@
<script> <script>
new Vue({ new Vue({
el: '#app', el: "#app",
data() { data() {
return { return {
apps: [], apps: [],
showEditForm: false, showEditForm: false,
editForm: null, editForm: null,
detachedCmd: '', detachedCmd: "",
} };
}, },
created() { created() {
fetch("/api/apps").then(r => r.json()).then((r) => { fetch("/api/apps")
console.log(r); .then((r) => r.json())
this.apps = r.apps; .then((r) => {
}) console.log(r);
this.apps = r.apps;
});
}, },
methods: { methods: {
newApp() { newApp() {
this.editForm = { this.editForm = {
name: '', name: "",
output: '', output: "",
cmd: [], cmd: [],
index: -1, index: -1,
"prep-cmd": [], "prep-cmd": [],
"detached": [] detached: [],
}; };
this.editForm.index = -1; this.editForm.index = -1;
this.showEditForm = true; this.showEditForm = true;
@ -124,12 +199,16 @@
editApp(id) { editApp(id) {
this.editForm = JSON.parse(JSON.stringify(this.apps[id])); this.editForm = JSON.parse(JSON.stringify(this.apps[id]));
this.$set(this.editForm, "index", id); this.$set(this.editForm, "index", id);
if (this.editForm["prep-cmd"] === undefined) this.$set(this.editForm, "prep-cmd", []); if (this.editForm["prep-cmd"] === undefined)
if (this.editForm["detached"] === undefined) this.$set(this.editForm, "detached", []); this.$set(this.editForm, "prep-cmd", []);
if (this.editForm["detached"] === undefined)
this.$set(this.editForm, "detached", []);
this.showEditForm = true; this.showEditForm = true;
}, },
showDeleteForm(id) { showDeleteForm(id) {
let resp = confirm("Are you sure to delete " + this.apps[id].name + "?"); let resp = confirm(
"Are you sure to delete " + this.apps[id].name + "?"
);
if (resp) { if (resp) {
fetch("/api/apps/" + id, { method: "DELETE" }).then((r) => { fetch("/api/apps/" + id, { method: "DELETE" }).then((r) => {
if (r.status == 200) document.location.reload(); if (r.status == 200) document.location.reload();
@ -137,18 +216,21 @@
} }
}, },
addPrepCmd() { addPrepCmd() {
this.editForm['prep-cmd'].push({ this.editForm["prep-cmd"].push({
do: '', do: "",
undo: '', undo: "",
}); });
}, },
save() { save() {
fetch("/api/apps", { method: "POST", body: JSON.stringify(this.editForm) }).then((r) => { fetch("/api/apps", {
method: "POST",
body: JSON.stringify(this.editForm),
}).then((r) => {
if (r.status == 200) document.location.reload(); if (r.status == 200) document.location.reload();
}); });
} },
} },
}) });
</script> </script>
<style> <style>
@ -159,4 +241,4 @@
.monospace { .monospace {
font-family: monospace; font-family: monospace;
} }
</style> </style>

4
assets/web/clients.html
View File

@ -1,3 +1,3 @@
<div id="content" class="container"> <div id="content" class="container">
<h1>Clients</h1> <h1>Clients</h1>
</div> </div>

1451
assets/web/config.html
View File

File diff suppressed because it is too large Load Diff

32
assets/web/header-no-nav.html
View File

@ -1,17 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunshine</title> <title>Sunshine</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" <link
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" rel="stylesheet"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"> integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
</script> crossorigin="anonymous"
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> />
</head> <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body> <body></body>
</html>

99
assets/web/header.html
View File

@ -1,45 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunshine</title> <title>Sunshine</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" <link
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" rel="stylesheet"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"> integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
</script> crossorigin="anonymous"
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> />
</head> <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #ffc400;"> <nav
<div class="container-fluid"> class="navbar navbar-expand-lg navbar-light"
<span class="navbar-brand">Sunshine</span> style="background-color: #ffc400"
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" >
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" <div class="container-fluid">
aria-label="Toggle navigation"> <span class="navbar-brand">Sunshine</span>
<span class="navbar-toggler-icon"></span> <button
</button> class="navbar-toggler"
<div class="collapse navbar-collapse" id="navbarSupportedContent"> type="button"
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> data-bs-toggle="collapse"
<li class="nav-item"> data-bs-target="#navbarSupportedContent"
<a class="nav-link" href="/">Home</a> aria-controls="navbarSupportedContent"
</li> aria-expanded="false"
<li class="nav-item"> aria-label="Toggle navigation"
<a class="nav-link" href="/pin">PIN</a> >
</li> <span class="navbar-toggler-icon"></span>
<li class="nav-item"> </button>
<a class="nav-link" href="/apps">Applications</a> <div class="collapse navbar-collapse" id="navbarSupportedContent">
</li> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/config">Configuration</a> <a class="nav-link" href="/">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/password">Change Password</a> <a class="nav-link" href="/pin">PIN</a>
</li> </li>
</ul> <li class="nav-item">
</div> <a class="nav-link" href="/apps">Applications</a>
</nav> </li>
<li class="nav-item">
<a class="nav-link" href="/config">Configuration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/password">Change Password</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>

16
assets/web/index.html
View File

@ -1,9 +1,11 @@
<div id="content" class="container"> <div id="content" class="container">
<div class="row"> <div class="row">
<div class="col-md-6 py-4" style="margin: 0 auto;"> <div class="col-md-6 py-4" style="margin: 0 auto">
<h1>Hello, Sunshine!</h1> <h1>Hello, Sunshine!</h1>
<p>Sunshine is a Gamestream host for Moonlight</p> <p>Sunshine is a Gamestream host for Moonlight</p>
<a href="https://github.com/loki-47-6F-64/sunshine">Official GitHub Repository</a> <a href="https://github.com/loki-47-6F-64/sunshine"
</div> >Official GitHub Repository</a
>
</div> </div>
</div> </div>
</div>

208
assets/web/password.html
View File

@ -1,97 +1,133 @@
<div id="app" class="container"> <div id="app" class="container">
<h1 class="my-4">Password Change</h1> <h1 class="my-4">Password Change</h1>
<form @submit.prevent="save"> <form @submit.prevent="save">
<div class="card d-flex p-4 flex-row"> <div class="card d-flex p-4 flex-row">
<div class="col-md-6 px-4"> <div class="col-md-6 px-4">
<h4>Current Credentials</h4> <h4>Current Credentials</h4>
<div class="mb-3"> <div class="mb-3">
<label for="currentUsername" class="form-label">Username</label> <label for="currentUsername" class="form-label">Username</label>
<input required type="text" class="form-control" id="currentUsername" v-model="passwordData.currentUsername"> <input
<div class="form-text">&nbsp;</div> required
</div> type="text"
<div class="mb-3"> class="form-control"
<label for="currentPassword" class="form-label">Password</label> id="currentUsername"
<input autocomplete="current-password" type="password" class="form-control" id="currentPassword" v-model="passwordData.currentPassword"> v-model="passwordData.currentUsername"
</div> />
</div> <div class="form-text">&nbsp;</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>
<div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div> <div class="mb-3">
<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> <label for="currentPassword" class="form-label">Password</label>
<div class="mb-3 buttons"> <input
<button class="btn btn-primary">Save</button> autocomplete="current-password"
type="password"
class="form-control"
id="currentPassword"
v-model="passwordData.currentPassword"
/>
</div> </div>
</form> </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> </div>
<script> <script>
new Vue({ new Vue({
el: '#app', el: "#app",
data() { data() {
return { return {
error: null, error: null,
success: false, success: false,
passwordData: { passwordData: {
currentUsername: '', currentUsername: "",
currentPassword: '', currentPassword: "",
newUsername: '', newUsername: "",
newPassword: '', newPassword: "",
confirmNewPassword: '' confirmNewPassword: "",
}
}
}, },
methods: { };
save() { },
this.error = null; methods: {
fetch("/api/password", { save() {
method: "POST", this.error = null;
body: JSON.stringify(this.passwordData) fetch("/api/password", {
}).then((r) => { method: "POST",
if (r.status == 200){ body: JSON.stringify(this.passwordData),
r.json().then((rj) => { }).then((r) => {
if(rj.status.toString() === "true"){ if (r.status == 200) {
this.success = true; r.json().then((rj) => {
setTimeout(()=>{ if (rj.status.toString() === "true") {
document.location.reload(); this.success = true;
},5000); setTimeout(() => {
} else { document.location.reload();
this.error = rj.error; }, 5000);
} } else {
}) this.error = rj.error;
} }
else { });
this.error = "Internal Server Error" } else {
} this.error = "Internal Server Error";
}); }
} });
} },
}) },
});
</script> </script>
<style> <style>
.config-page { .config-page {
padding: 1em; padding: 1em;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
border-top: none; border-top: none;
} }
.buttons { .buttons {
padding: 1em 0; padding: 1em 0;
} }
</style> </style>

65
assets/web/pin.html
View File

@ -1,31 +1,42 @@
<div id="content" class="container"> <div id="content" class="container">
<h1 class="my-4">PIN Pairing</h1> <h1 class="my-4">PIN Pairing</h1>
<form action="" class="form d-flex flex-column align-items-center" id="form"> <form action="" class="form d-flex flex-column align-items-center" id="form">
<div class="card flex-column d-flex p-4 mb-4"> <div class="card flex-column d-flex p-4 mb-4">
<input type="number" placeholder="PIN" id="pin-input" class="form-control my-4"> <input
<button class="btn btn-primary">Send</button> type="number"
</div> placeholder="PIN"
<div class="alert alert-warning"> id="pin-input"
<b>Warning!</b> Make sure you have access to the client you are pairing with.<br> class="form-control my-4"
This software can give total control to your computer, so be careful! />
</div> <button class="btn btn-primary">Send</button>
<div id="status"></div> </div>
</form> <div class="alert alert-warning">
<b>Warning!</b> Make sure you have access to the client you are pairing
with.<br />
This software can give total control to your computer, so be careful!
</div>
<div id="status"></div>
</form>
</div> </div>
<script> <script>
document.querySelector("#form").addEventListener("submit", (e) => { document.querySelector("#form").addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
let pin = document.querySelector("#pin-input").value; let pin = document.querySelector("#pin-input").value;
document.querySelector("#status").innerHTML = ""; document.querySelector("#status").innerHTML = "";
let b = JSON.stringify({pin: pin}); let b = JSON.stringify({ pin: pin });
fetch("/api/pin",{method: "POST",body: b}).then((response) => response.json()).then((response)=>{ fetch("/api/pin", { method: "POST", body: b })
if(response.status){ .then((response) => response.json())
document.querySelector("#status").innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`; .then((response) => {
} else { if (response.status) {
document.querySelector("#status").innerHTML = `<div class="alert alert-danger" role="alert">PIN does not match, please check if it's typed correctly</div>`; document.querySelector(
} "#status"
}) ).innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`;
}) } else {
</script> document.querySelector(
"#status"
).innerHTML = `<div class="alert alert-danger" role="alert">PIN does not match, please check if it's typed correctly</div>`;
}
});
});
</script>

143
assets/web/welcome.html
View File

@ -1,69 +1,90 @@
<main role="main" id="app" style="max-width: 600px;margin: 0 auto;"> <main role="main" id="app" style="max-width: 600px; margin: 0 auto">
<div class="container-parent"> <div class="container-parent">
<div class="container py-3"> <div class="container py-3">
<h1 class="mb-0">Welcome to Sunshine!</h1> <h1 class="mb-0">Welcome to Sunshine!</h1>
<p class="mb-0 align-self-start">Before Getting Started, write down below these credentials</p> <p class="mb-0 align-self-start">
</div> Before Getting Started, write down below these credentials
</p>
</div> </div>
<div class="alert alert-warning">These Credentials down below are needed to access the rest of the application.<br> Keep them safe, since <b>you will never see them again!</b></div> </div>
<form @submit.prevent="save" class="card p-4" style="width: 100%;"> <div class="alert alert-warning">
<div class="mb-2"> These Credentials down below are needed to access the rest of the
<label for="" class="form-label">Username: </label> application.<br />
<input type="text" class="form-control" v-model="passwordData.newUsername"> Keep them safe, since <b>you will never see them again!</b>
</div> </div>
<div class="mb-2"> <form @submit.prevent="save" class="card p-4" style="width: 100%">
<label for="" class="form-label">Password: </label> <div class="mb-2">
<input type="password" class="form-control" v-model="passwordData.newPassword" required> <label for="" class="form-label">Username: </label>
</div> <input
<div class="mb-2"> type="text"
<label for="" class="form-label">Password: </label> class="form-control"
<input type="password" class="form-control" v-model="passwordData.confirmNewPassword" required> v-model="passwordData.newUsername"
</div> />
<button class="mb-2 btn btn-primary" style="margin: 1em auto;">Login</button> </div>
<div class="alert alert-danger" v-if="error"><b>Error: </b>{{error}}</div> <div class="mb-2">
<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> <label for="" class="form-label">Password: </label>
</form> <input
</div> type="password"
class="form-control"
v-model="passwordData.newPassword"
required
/>
</div>
<div class="mb-2">
<label for="" class="form-label">Password: </label>
<input
type="password"
class="form-control"
v-model="passwordData.confirmNewPassword"
required
/>
</div>
<button class="mb-2 btn btn-primary" style="margin: 1em auto">Login</button>
<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>
</form>
</main> </main>
<script> <script>
new Vue({ new Vue({
el: '#app', el: "#app",
data() { data() {
return { return {
error: null, error: null,
success: false, success: false,
passwordData: { passwordData: {
newUsername: 'sunshine', newUsername: "sunshine",
newPassword: '', newPassword: "",
confirmNewPassword: '' 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";
} }
});
}, },
methods: { },
save() { });
this.error = null; </script>
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"
}
});
}
}
})
</script>