Tweaks to the Web interface #108
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,14 @@ | ||
| <main role="main"> | ||
| <div class="container-parent bg-light"> | ||
| <div class="container py-3"> | ||
| <h1 class="mb-0">Clients</h1> | ||
| </div> | ||
| </div> | ||
| <div class="container-parent"> | ||
| <div class="container py-3"> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, perspiciatis possimus cupiditate repellat | ||
| ducimus, accusantium, voluptatem recusandae ipsa non commodi aliquam fugit reprehenderit nostrum soluta | ||
| tenetur molestias corporis quia! Debitis!</p> | ||
| </div> | ||
| </div> | ||
| </main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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].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> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,13 @@ | ||
| <main role="main"> | ||
| <div class="container-parent"> | ||
| <div class="container py-3"> | ||
| <div class="row justify-content-center"> | ||
| <div class="col-md-6"> | ||
| <h1>Hello, Sunshine!</h1> | ||
| <p>Sunshine is a Gamestream host for Moonlight</p> | ||
| <p><a href="https://github.com/loki-47-6F-64/sunshine">Official GitHub Repository</a></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,115 @@ | ||
| <main role="main" id="app"> | ||
| <div class="container-parent bg-light"> | ||
| <div class="container py-3"> | ||
| <h1>Update credentials</h1> | ||
| <p class="mb-0">Update the credentials used to connect to this web interface, including the username and | ||
| password.</p> | ||
| </div> | ||
| </div> | ||
| <div class="container-parent"> | ||
| <div class="container py-3"> | ||
| <form action="#" @submit.prevent="save"> | ||
| <div class="row"> | ||
| <div class="col-12"> | ||
| <div class="alert alert-danger" role="alert" v-if="error"> | ||
| <b>An error has occured</b>. Here's what the server sent back: {{error}}. | ||
| </div> | ||
| <div class="alert alert-success" role="alert" v-if="success"> | ||
| <b>Credentials have been updated</b>, your browser should reload and ask you for the new | ||
| credentials. | ||
| </div> | ||
| </div> | ||
| <div class="col-md-6"> | ||
| <h2>Current credentials</h2> | ||
| <p>You need to enter your current credentials to change them, you need to enter both the | ||
| username and password.</p> | ||
| <div class="mb-3"> | ||
| <label for="currentUsername" class="form-label">Current username</label> | ||
| <input type="text" class="form-control" id="currentUsername" autocomplete="username" | ||
| required v-model="passwordData.currentUsername"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label for="currentPassword" class="form-label">Current password</label> | ||
| <input type="password" class="form-control" id="currentPassword" | ||
| autocomplete="current-password" required v-model="passwordData.currentPassword"> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-6"> | ||
| <h2>New credentials</h2> | ||
| <p>Enter the new credentials you want to use, if you just want to change the password you can | ||
| leave the username field empty.</p> | ||
| <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> | ||
| <div class="mb-3"> | ||
| <label for="newPassword" class="form-label">New password</label> | ||
| <input type="password" class="form-control" id="newPassword" autocomplete="new-password" | ||
| required v-model="passwordData.newPassword"> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label for="confirmNewPassword" class="form-label">New password (confirm)</label> | ||
| <input type="password" class="form-control" id="confirmNewPassword" | ||
| autocomplete="new-password" required v-model="passwordData.confirmNewPassword"> | ||
| </div> | ||
| </div> | ||
| <div class="col-12"> | ||
| <button type="submit" id="submitButton" class="btn w-100 btn-primary" | ||
| v-bind:disabled="isLoading">Update credentials</button> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
| <script> | ||
| new Vue({ | ||
| el: "#app", | ||
| data() { | ||
| return { | ||
| error: null, | ||
| success: false, | ||
| isLoading: false, | ||
| passwordData: { | ||
| currentUsername: "", | ||
| currentPassword: "", | ||
| newUsername: "", | ||
| newPassword: "", | ||
| confirmNewPassword: "", | ||
| }, | ||
| }; | ||
| }, | ||
| methods: { | ||
| save() { | ||
| this.error = null; | ||
| this.isLoading = true; | ||
| fetch("/api/password", { | ||
| method: "POST", | ||
| body: JSON.stringify(this.passwordData), | ||
| }) | ||
| .then((r) => { | ||
| this.isLoading = false; | ||
| 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"; | ||
| } | ||
| }) | ||
| .catch((err) => { | ||
| this.isLoading = false; | ||
| console.error(err); | ||
| }); | ||
| }, | ||
| }, | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,64 @@ | ||
| <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" | ||
| 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> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
| <script> | ||
| /** @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 | ||
|
There was a problem hiding this comment. required on PIN should be enough IIRC |
||
| const body = JSON.stringify({ pin: input.value }); | ||
| fetch("/api/pin", { method: "POST", body }) | ||
|
There was a problem hiding this comment. 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> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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