Change fields to inputs by default. Add form population logic

app/templates/auth/SignUp.html

@@ -10,7 +10,31 @@
     console.info('Room ID: {{ room_id }}');
     var socket = io.connect('http://' + document.domain + ':' + location.port);
 
+    function autofill_form() {
+        var username = document.getElementById("username");
+        let fullname = document.getElementById("fullname");
+        let email = document.getElementById("email");
+
+        if (('{{ username }}'.localeCompare("None")) !== 0) {
+            username.value = "{{ username }}";
+            username.disabled = "true";
+        }
+
+        if (('{{ fullname }}'.localeCompare("None")) !== 0) {
+            fullname.value = "{{ fullname }}";
+            fullname.disabled = "true";
+        }
+
+        if (('{{ email }}'.localeCompare("None")) !== 0) {
+            email.value = "{{ email }}";
+            email.disabled = "true";
+        }
+    }
+
     socket.on( 'connect', function() {
+
+        autofill_form();
+
         socket.emit( 'join_room', {
             referrer: '{{ referrer }}'
         });
@@ -93,16 +117,19 @@
 
 
     <div id="test">
-    <form action="." method="post" onsubmit="" class=".bg-light">
+    <form id="signup" action="." method="post" onsubmit="" class=".bg-light">
       <div class="signUpContainer">
-          <label for="username">Blazer Id:</label>&#9;<span id="username">{{ username }}</span><br>
+          <label for="username">Blazer Id:</label>&#9;<input id="username" class="form-control"
+                                                             placeholder="Enter username" required><br>
 
-          <label for="fullname">Full Name:</label>&#9;<span id="fullname">{{ fullname }}</span><br>
+          <label for="fullname">Full Name:</label>&#9;<input id="fullname" class="form-control"
+                                                             placeholder="Enter fullname"required><br>
 
-          <label for="email">Email:</label>&#9;<span id="email">{{ email }}</span><br>
+          <label for="email">Email:</label>&#9;<input id="email" class="form-control"
+                                                      placeholder="Enter email"required><br>
 
           <label for="reason">Reason for Requesting Account:</label><br>
-            <textarea class="form-control" id="reason" name="reason" placeholder="Enter Reason for Account Request" required=""></textarea>
+            <textarea class="form-control" id="reason" name="reason" placeholder="Enter Reason for Account Request" required></textarea>
 
           <div class="row-no-gutters">
               <div class="col-lg-6">