Experiment to see if iOS devices can connect better w/ JWT auth

This commit is contained in:
Noah 2023-02-24 16:47:28 -08:00
parent 03c3dd4f2e
commit ac55fc2c50
2 changed files with 23 additions and 1 deletions

View File

@ -44,6 +44,7 @@ const app = Vue.createApp({
channel: "lobby", channel: "lobby",
username: "", //"test", username: "", //"test",
autoLogin: false, // e.g. from JWT auth
message: "", message: "",
typingNotifDebounce: null, typingNotifDebounce: null,
@ -180,16 +181,21 @@ const app = Vue.createApp({
// TODO: JWT validation on the WebSocket as well. // TODO: JWT validation on the WebSocket as well.
if (this.jwt.valid && this.jwt.claims.sub) { if (this.jwt.valid && this.jwt.claims.sub) {
this.username = this.jwt.claims.sub; this.username = this.jwt.claims.sub;
this.autoLogin = true;
} }
// Scrub JWT token from query string parameters. // Scrub JWT token from query string parameters.
history.pushState(null, "", location.href.split("?")[0]); history.pushState(null, "", location.href.split("?")[0]);
// XX: always show login dialog to test if this helps iOS devices.
this.loginModal.visible = true;
/*
if (!this.username) { if (!this.username) {
this.loginModal.visible = true; this.loginModal.visible = true;
} else { } else {
this.signIn(); this.signIn();
} }
*/
}, },
computed: { computed: {
chatHistory() { chatHistory() {

View File

@ -24,6 +24,21 @@
<div class="card-content"> <div class="card-content">
<form @submit.prevent="signIn()"> <form @submit.prevent="signIn()">
<div v-if="autoLogin" class="content">
<p>
Welcome to {{AsHTML .Config.Branding}}! Please just click on the "Enter Chat"
button below to log on. Your username has been pre-filled from the website that
sent you here.
</p>
<p>
This dialog box is added as an experiment to see whether it
helps iOS devices (iPads and iPhones) to log in to the chat more reliably, by
having you interact with the page before it connects to the server. Let us
know in chat if your iPhone or iPad is able to log in this way!
</p>
</div>
<div class="field"> <div class="field">
<label class="label">Username</label> <label class="label">Username</label>
<input class="input" <input class="input"
@ -31,12 +46,13 @@
placeholder="Username" placeholder="Username"
autocomplete="off" autocomplete="off"
autofocus autofocus
:disabled="autoLogin"
required> required>
</div> </div>
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<button class="button is-link">Submit</button> <button class="button is-link">Enter Chat</button>
</div> </div>
</div> </div>