add content cor connect form

matrix_synapse_saml_mozilla/res/index.html

@@ -8,22 +8,37 @@
     <div class="card">
       <div class="card-header">
         <div class="tab">
-          <button class="tablinks active" data-tabid="connect">Connect</button>
-          <button class="tablinks" data-tabid="register">Register</button>
+          <button class="tablinks" data-tabid="connect">Connect</button>
+          <button class="tablinks active" data-tabid="register">Register</button>
         </div>
       </div>
       <div class="card-body">
-        <div class="tabcontent active" id="connect">
+        <div class="tabcontent active" id="register">
           <form method="post" class="form__input" id="form" action="submit">
-            <input type="text" name="username" id="field-username" autofocus="">
+            <input type="text" name="username" id="field-username" class="field" autofocus="">
             <label for="field-username">
               <span><span aria-hidden="true">Please pick your </span>username</span>
             </label>
             <input type="button" class="button button--full-width" id="button-submit" value="Submit">
           </form>
         </div>
-        <div class="tabcontent" id="register">
-          FOO
+        <div class="tabcontent" id="connect">
+          <form method="post" id="form" action="submit">
+            <div class="form__input">
+              <input type="text" name="username" id="connect-field-username" class="field" autofocus="">
+              <label for="connect-field-username">
+                <span><span aria-hidden="true">Your Matrix </span>username</span>
+              </label>
+            </div>
+            <br>
+            <div class="form__input">
+              <input type="password" name="password" id="connect-field-password">
+              <label for="connect-field-password">
+                <span><span aria-hidden="true">Your old Matrix </span>password</span>
+              </label>
+            </div>
+            <input type="button" class="button button--full-width" id="button-submit" value="Submit">
+          </form>
         </div>
         <div role=alert class="tooltip hidden" id="message"></div>
         <script src="script.js"></script>

matrix_synapse_saml_mozilla/res/script.js

@@ -1,5 +1,6 @@
-let inputField = document.getElementById("field-username");
-let inputForm = document.getElementById("form");
+let regiterFields = document.getElementById("field-username");
+let inputFields = document.getElementsByClassName("field");
+let registerForm = document.getElementById("form");
 let submitButton = document.getElementById("button-submit");
 let message = document.getElementById("message");
 let tabLinkButtons = document.getElementsByClassName("tablinks");
@@ -23,12 +24,17 @@ let showMessage = function(messageText) {
   message.innerHTML = messageText;
 };
 
+let hideMessage = function() {
+  // Hide the message text
+  message.classList.add("hidden");
+};
+
 let onResponse = function(response, success) {
   // Display message
   showMessage(response);
 
   if(success) {
-    inputForm.submit();
+    registerForm.submit();
     return;
   }
 
@@ -97,24 +103,26 @@ let clickSubmit = function() {
 
   // Submit username
   submitButton.value = "Checking...";
-  submitUsername(inputField.value);
+  submitUsername(regiterFields.value);
 };
 
 submitButton.onclick = clickSubmit;
 
-// Listen for events on inputField
-inputField.addEventListener('keypress', function(event) {
-  // Listen for Enter on input field
-  if(event.which === 13) {
-    event.preventDefault();
-    clickSubmit();
-    return true;
-  }
-  switchClass(inputField);
-});
-inputField.addEventListener('change', function() {
-  switchClass(inputField);
-});
+// Listen for events on inputFields
+for (let i = 0; i < inputFields.length; i++) {
+    inputFields[i].addEventListener('keypress', function (event) {
+        // Listen for Enter on input field
+        if (event.which === 13) {
+            event.preventDefault();
+            clickSubmit();
+            return true;
+        }
+        switchClass(inputFields[i]);
+    });
+    inputFields[i].addEventListener('change', function () {
+        switchClass(inputFields[i]);
+    });
+}
 
 for (let i = 0; i < tabLinkButtons.length; i++) {
     tabLinkButtons[i].addEventListener('click', function(event) {
@@ -128,5 +136,6 @@ for (let i = 0; i < tabLinkButtons.length; i++) {
 
         document.getElementById(event.target.dataset.tabid).classList.add('active')
         event.target.classList.add("active")
+        hideMessage()
     })
 }