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

web/static/js/BareRTC.js

@@ -44,6 +44,7 @@ const app = Vue.createApp({
 
             channel: "lobby",
             username: "", //"test",
+            autoLogin: false,  // e.g. from JWT auth
             message: "",
             typingNotifDebounce: null,
 
@@ -180,16 +181,21 @@ const app = Vue.createApp({
         // TODO: JWT validation on the WebSocket as well.
         if (this.jwt.valid && this.jwt.claims.sub) {
             this.username = this.jwt.claims.sub;
+            this.autoLogin = true;
         }
 
         // Scrub JWT token from query string parameters.
         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) {
             this.loginModal.visible = true;
         } else {
             this.signIn();
         }
+        */
     },
     computed: {
         chatHistory() {

web/templates/chat.html

@@ -24,6 +24,21 @@
                 <div class="card-content">
                     <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">
                             <label class="label">Username</label>
                             <input class="input"
@@ -31,12 +46,13 @@
                                 placeholder="Username"
                                 autocomplete="off"
                                 autofocus
+                                :disabled="autoLogin"
                                 required>
                         </div>
 
                         <div class="field">
                             <div class="control">
-                                <button class="button is-link">Submit</button>
+                                <button class="button is-link">Enter Chat</button>
                             </div>
                         </div>