Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tweaks to the Web interface #108

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Tweaks to the Web interface #108

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
15e5120
Update Bootstrap to v5.0.2
jorys-paulin Jun 25, 2021
7fca6ad
Added footer to HTML pages
jorys-paulin Jun 25, 2021
66ec727
Update the PIN page
jorys-paulin Jun 25, 2021
43df48b
Update the password page
jorys-paulin Jun 27, 2021
ed4643e
Update index page
jorys-paulin Jun 27, 2021
18915c9
Update clients page
jorys-paulin Jun 27, 2021
53d4778
Merge branch 'master' of https://github.com/loki-47-6F-64/sunshine in…
jorys-paulin Jun 30, 2021
a7eb1f0
Update config page
jorys-paulin Jul 1, 2021
30e2524
Update parts of the apps page
jorys-paulin Jul 1, 2021
74e7dbd
Update apps page
jorys-paulin Jul 18, 2021
a7c22ac
Merge branch 'master' of https://github.com/loki-47-6F-64/sunshine in…
jorys-paulin Jul 18, 2021
8c99f57
Update parts of apps page
jorys-paulin Jul 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions assets/web/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
</body>

</html>
12 changes: 6 additions & 6 deletions assets/web/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunshine</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected].0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected].2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>

<body>
Expand Down
87 changes: 60 additions & 27 deletions assets/web/pin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,64 @@

<div id="content" class="container">
<h1 class="my-4">PIN Pairing</h1>
<form action="" class="form d-flex flex-column align-items-center" id="form">
<div class="card flex-column d-flex p-4 mb-4">
<input type="number" placeholder="PIN" id="pin-input" class="form-control my-4">
<button class="btn btn-primary">Send</button>
</div>
<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!
<main role="main">
<div class="container-parent bg-light">
<div class="container py-3">
<h1>Pair a new device</h1>
<p class="mb-0">Allow a new client to connect to this computer by entering the PIN code given by Moonlight here.
</p>
</div>
</div>
<div class="container-parent">
<div class="container py-3">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> 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>
<form action="#" id="form">
<div class="mb-3">
<label for="input" class="form-label">PIN code</label>
<input type="text" class="form-control form-control-lg" id="input" name="pin" placeholder="1234"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Making this a type="number" can help on mobile keyboard, since it will show only the numbers on smartphones

minlength="4" maxlength="4" required />
<div class="valid-feedback">Pairing successful! Please check Moonlight to continue!</div>
<div class="invalid-feedback">The given PIN code doesn't match, please check that it's typed correctly.
</div>
</div>
<button type="submit" id="submit" class="btn w-100 btn-primary">Pair new device</button>
</form>
</div>
<div id="status"></div>
</form>
</div>
</div>
</div>
</div>
</main>

<script>
document.querySelector("#form").addEventListener("submit", (e) => {
e.preventDefault();
let pin = document.querySelector("#pin-input").value;
document.querySelector("#status").innerHTML = "";
let b = JSON.stringify({pin: pin});
fetch("/api/pin",{method: "POST",body: b}).then((response) => response.json()).then((response)=>{
if(response.status){
document.querySelector("#status").innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`;
} else {
document.querySelector("#status").innerHTML = `<div class="alert alert-danger" role="alert">PIN does not match, please check if it's typed correctly</div>`;
}
})
})
/** @type HTMLFormElement */
const formElement = document.querySelector("form#form");
/** @type HTMLInputElement */
const input = formElement.querySelector("input#input");
/** @type HTMLButtonElement */
const submit = formElement.querySelector("button#submit");

formElement.addEventListener("submit", (e) => {
e.preventDefault();
submit.disabled = true;
// TODO: Check for empty or null values
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

required on PIN should be enough IIRC

const body = JSON.stringify({ pin: input.value });
fetch("/api/pin", { method: "POST", body })
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove both is-valid and is-invalid before fetching? This way the feedback does not stay on screen while making multiple calls

.then((response) => response.json())
.then((response) => {
submit.disabled = false;
if (response.status === "true") {
input.classList.add("is-valid");
input.classList.remove("is-invalid");
} else {
input.classList.add("is-invalid");
input.classList.remove("is-valid");
}
})
.catch((err) => {
submit.disabled = false;
console.error(err);
});
});
</script>
18 changes: 12 additions & 6 deletions sunshine/confighttp.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,8 @@ void getIndexPage(resp_https_t response, req_https_t request) {

std::string header = read_file(WEB_DIR "header.html");
std::string content = read_file(WEB_DIR "index.html");
response->write(header + content);
std::string footer = read_file(WEB_DIR "footer.html");
response->write(header + content + footer);
}

void getPinPage(resp_https_t response, req_https_t request) {
Expand All @@ -143,7 +144,8 @@ void getPinPage(resp_https_t response, req_https_t request) {

std::string header = read_file(WEB_DIR "header.html");
std::string content = read_file(WEB_DIR "pin.html");
response->write(header + content);
std::string footer = read_file(WEB_DIR "footer.html");
response->write(header + content + footer);
}

void getAppsPage(resp_https_t response, req_https_t request) {
Expand All @@ -153,7 +155,8 @@ void getAppsPage(resp_https_t response, req_https_t request) {

std::string header = read_file(WEB_DIR "header.html");
std::string content = read_file(WEB_DIR "apps.html");
response->write(header + content);
std::string footer = read_file(WEB_DIR "footer.html");
response->write(header + content + footer);
}

void getClientsPage(resp_https_t response, req_https_t request) {
Expand All @@ -163,7 +166,8 @@ void getClientsPage(resp_https_t response, req_https_t request) {

std::string header = read_file(WEB_DIR "header.html");
std::string content = read_file(WEB_DIR "clients.html");
response->write(header + content);
std::string footer = read_file(WEB_DIR "footer.html");
response->write(header + content + footer);
}

void getConfigPage(resp_https_t response, req_https_t request) {
Expand All @@ -173,7 +177,8 @@ void getConfigPage(resp_https_t response, req_https_t request) {

std::string header = read_file(WEB_DIR "header.html");
std::string content = read_file(WEB_DIR "config.html");
response->write(header + content);
std::string footer = read_file(WEB_DIR "footer.html");
response->write(header + content + footer);
}

void getPasswordPage(resp_https_t response, req_https_t request) {
Expand All @@ -183,7 +188,8 @@ void getPasswordPage(resp_https_t response, req_https_t request) {

std::string header = read_file(WEB_DIR "header.html");
std::string content = read_file(WEB_DIR "password.html");
response->write(header + content);
std::string footer = read_file(WEB_DIR "footer.html");
response->write(header + content + footer);
}

void getApps(resp_https_t response, req_https_t request) {
Expand Down