Add Tabs in Web to allow connect and register

5 years ago · cef5694519
parent 60a8bde16b
commit cef5694519
3 changed files with 77 additions and 11 deletions
--- a/matrix_synapse_saml_mozilla/res/index.html
+++ b/matrix_synapse_saml_mozilla/res/index.html
@ -6,6 +6,14 @@
  </head>
  <body>
    <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>
        </div>
      </div>
      <div class="card-body">
        <div class="tabcontent active" id="connect">
          <form method="post" class="form__input" id="form" action="submit">
            <input type="text" name="username" id="field-username" autofocus="">
            <label for="field-username">
@ -13,8 +21,13 @@
            </label>
            <input type="button" class="button button--full-width" id="button-submit" value="Submit">
          </form>
        </div>
        <div class="tabcontent" id="register">
          FOO
        </div>
        <div role=alert class="tooltip hidden" id="message"></div>
        <script src="script.js"></script>
      </div>
    </div>
  </body>
 </html>
--- a/matrix_synapse_saml_mozilla/res/script.js
+++ b/matrix_synapse_saml_mozilla/res/script.js
@ -2,6 +2,8 @@ let inputField = document.getElementById("field-username");
 let inputForm = document.getElementById("form");
 let submitButton = document.getElementById("button-submit");
 let message = document.getElementById("message");
 let tabLinkButtons = document.getElementsByClassName("tablinks");
 let tabContentBlocks = document.getElementsByClassName("tabcontent");
 // Remove input field placeholder if the text field is not empty
 let switchClass = function(input) {
@ -114,3 +116,17 @@ inputField.addEventListener('change', function() {
  switchClass(inputField);
 });
 for (let i = 0; i < tabLinkButtons.length; i++) {
    tabLinkButtons[i].addEventListener('click', function(event) {
        for (let i = 0; i < tabContentBlocks.length; i++) {
            tabContentBlocks[i].classList.remove("active");
        }
        for (let i = 0; i < tabLinkButtons.length; i++) {
            tabLinkButtons[i].classList.remove("active");
        }
        document.getElementById(event.target.dataset.tabid).classList.add('active')
        event.target.classList.add("active")
    })
 }
--- a/matrix_synapse_saml_mozilla/res/style.css
+++ b/matrix_synapse_saml_mozilla/res/style.css
@ -1,3 +1,35 @@
 .tab {
  overflow: hidden;
  background-color: #ededf0;
 }
 .tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px;
  transition: 0.1s;
  width: 50%;
 }
 .tab button:hover {
  background-color: #ddd;
 }
 .tab button.active {
  background-color: #0060df;
  color: #ffffff;
 }
 .tabcontent {
  display: none;
 }
 .tabcontent.active {
  display: block;
 }
 body {
  background: #ededf0;
  color: #737373;
@ -10,15 +42,20 @@ body {
 .card {
  background-color: #fff;
  padding: 2em;
  position: relative;
  margin: auto;
  width: 100%;
  box-shadow: 0 0.25em 0.25em 0 rgba(210, 210, 210, 0.5);
-  border-radius: 0.125em; }
+  border-radius: 0.125em;
 }
 .card-body {
  padding: 2em;
 }
  @media (min-width: 25em) {
    .card {
      max-width: 26em;
    }
    .card-body {
      padding: 2.5em; } }
  @supports (display: grid) {
    .card {