n0emis
/
matrix-synapse-saml-mozilla
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Tabs in Web to allow connect and register

Browse Source
master
Leo Maroni 5 years ago
parent 60a8bde16b
commit cef5694519
No known key found for this signature in database
GPG Key ID: B1ADA545CD2CBACD
3 changed files with 77 additions and 11 deletions
Show Stats Download Patch File Download Diff File

31
matrix_synapse_saml_mozilla/res/index.html
Unescape Escape View File

@ -6,15 +6,28 @@
</head> </head>
<body> <body>
<div class="card"> <div class="card">
<form method="post" class="form__input" id="form" action="submit"> <div class="card-header">
<input type="text" name="username" id="field-username" autofocus=""> <div class="tab">
<label for="field-username"> <button class="tablinks active" data-tabid="connect">Connect</button>
<span><span aria-hidden="true">Please pick your </span>username</span> <button class="tablinks" data-tabid="register">Register</button>
</label> </div>
<input type="button" class="button button--full-width" id="button-submit" value="Submit"> </div>
</form> <div class="card-body">
<div role=alert class="tooltip hidden" id="message"></div> <div class="tabcontent active" id="connect">
<script src="script.js"></script> <form method="post" class="form__input" id="form" action="submit">
<input type="text" name="username" id="field-username" 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>
<div role=alert class="tooltip hidden" id="message"></div>
<script src="script.js"></script>
</div>
</div> </div>
</body> </body>
</html> </html>

16
matrix_synapse_saml_mozilla/res/script.js
Unescape Escape View File

@ -2,6 +2,8 @@ let inputField = document.getElementById("field-username");
let inputForm = document.getElementById("form"); let inputForm = document.getElementById("form");
let submitButton = document.getElementById("button-submit"); let submitButton = document.getElementById("button-submit");
let message = document.getElementById("message"); 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 // Remove input field placeholder if the text field is not empty
let switchClass = function(input) { let switchClass = function(input) {
@ -114,3 +116,17 @@ inputField.addEventListener('change', function() {
switchClass(inputField); 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")
})
}

41
matrix_synapse_saml_mozilla/res/style.css
Unescape Escape View File

@ -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 { body {
background: #ededf0; background: #ededf0;
color: #737373; color: #737373;
@ -10,15 +42,20 @@ body {
.card { .card {
background-color: #fff; background-color: #fff;
padding: 2em;
position: relative; position: relative;
margin: auto; margin: auto;
width: 100%; width: 100%;
box-shadow: 0 0.25em 0.25em 0 rgba(210, 210, 210, 0.5); 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) { @media (min-width: 25em) {
.card { .card {
max-width: 26em; max-width: 26em;
}
.card-body {
padding: 2.5em; } } padding: 2.5em; } }
@supports (display: grid) { @supports (display: grid) {
.card { .card {

Write Preview
Loading…
Cancel
Save