mirror of
https://github.com/LizardByte/Sunshine.git
synced 2025-02-25 12:41:03 +00:00
dc22e24744
This makes it faster to input the PIN after clicking on the PIN notification on the desktop, since you no longer need to click the PIN input or focus on it by pressing Tab many times.
64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<%- header %>
|
|
</head>
|
|
|
|
<body id="app" v-cloak>
|
|
<Navbar></Navbar>
|
|
<div id="content" class="container">
|
|
<h1 class="my-4">{{ $t('pin.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="text" pattern="\d*" placeholder="PIN" autofocus id="pin-input" class="form-control my-4" />
|
|
<button class="btn btn-primary">{{ $t('pin.send') }}</button>
|
|
</div>
|
|
<div class="alert alert-warning">
|
|
<b>{{ $t('_common.warning') }}</b> {{ $t('pin.warning_msg') }}
|
|
</div>
|
|
<div id="status"></div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="module">
|
|
import { createApp } from 'vue'
|
|
import i18n from './locale.js'
|
|
import Navbar from './Navbar.vue'
|
|
|
|
let app = createApp({
|
|
components: {
|
|
Navbar
|
|
}
|
|
});
|
|
|
|
//Wait for locale initialization, then render
|
|
i18n().then(i18n => {
|
|
app.use(i18n);
|
|
app.mount('#app');
|
|
|
|
// this must be after mounting the app
|
|
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.toString().toLowerCase() === "true") {
|
|
document.querySelector(
|
|
"#status"
|
|
).innerHTML = `<div class="alert alert-success" role="alert">${i18n.global.t('pin.pair_success')}</div>`;
|
|
document.querySelector("#pin-input").value = "";
|
|
} else {
|
|
document.querySelector(
|
|
"#status"
|
|
).innerHTML = `<div class="alert alert-danger" role="alert">${i18n.global.t('pin.pair_failure')}</div>`;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|