Save username to cookie, autostart video on loggin

static/galene.html

@@ -117,11 +117,11 @@
                     <label for="username">Username</label>
                     <input id="username" type="text" name="username"
                            autocomplete="username" class="form-control"/>
-                    <label for="password">Password</label>
-                    <input id="password" type="password" name="password"
-                           autocomplete="current-password" class="form-control"/>
-                    <label>Enable at start:</label>
-                    <div class="present-switch">
+                    <label for="password" class="invisible">Password</label>
+                    <input id="password" type="password" name="password" readonly
+                           autocomplete="current-password" class="form-control invisible"/>
+                    <label class="invisible">Enable at start:</label>
+                    <div class="present-switch invisible">
                       <!--<p class="switch-radio">
                         <input id="presentoff" type="radio" name="presentradio" value=""/>
                         <label for="presentoff">Nothing</label>

static/galene.js

@@ -314,6 +314,7 @@ async function gotConnected(username) {
         username = getInputElement('username').value.trim();
         let pw = getInputElement('password').value;
         getInputElement('password').value = '';
+
         if(!groupStatus.authServer)
             credentials = pw;
         else
@@ -2404,6 +2405,7 @@ async function gotJoined(kind, group, perms, status, data, message) {
         setTitle((status && status.displayName) || capitalise(group));
         displayUsername();
         setButtonsVisibility();
+        setUsernameCookie(serverConnection.username);
         if(kind === 'change')
             return;
         break;
@@ -4002,6 +4004,34 @@ async function serverConnect() {
     }
 }
 
+function getUsernameCookie() {
+    let user = document.cookie.split("; ")
+        .find((row) => row.startsWith("u="));
+    if(user) {
+        let values = user.split('=')[1].split('+');
+        if(values.length === 2) {
+            if(values[1] === document.location.origin + document.location.pathname)
+                return values[0];
+        }
+        // delete that value
+        deleteUsernameCookie();
+    }
+    return "";
+}
+
+/**
+ * @param {string} username
+ */
+function setUsernameCookie(username) {
+    deleteUsernameCookie();
+    document.cookie = 'u=' + username + '+' +
+      document.location.origin + document.location.pathname;
+}
+
+function deleteUsernameCookie() {
+    document.cookie = 'u=; Max-Age=0';
+}
+
 async function start() {
     group = decodeURIComponent(
         location.pathname.replace(/^\/[a-z]*\//, '').replace(/\/$/, '')
@@ -4019,6 +4049,7 @@ async function start() {
     }
 
     let parms = new URLSearchParams(window.location.search);
+    let username = getUsernameCookie();
     if(window.location.search)
         window.history.replaceState(null, '', window.location.pathname);
     setTitle(groupStatus.displayName || capitalise(group));
@@ -4031,9 +4062,9 @@ async function start() {
         await serverConnect();
     } else if(groupStatus.authPortal) {
         window.location.href = groupStatus.authPortal;
-    } else if(window.location.hash) {
+    } else if(username) {
       let connect = document.getElementById('connectbutton');
-      getInputElement('username').value = window.location.hash.slice(1);
+      getInputElement('username').value = username;
       getInputElement('password').value = "";
       connect.click();
     } else {