Clean up html

Prior to this change the html was not accessible and used the section element far to royally. This change: - cleans up the html, - adds some accessibility improvements - fixes a security concern with the copyright link - ensures the screen is centered in IE 11
RallySoftware · Sep 1, 2021 · b3d61a1 · b3d61a1
1 parent 52c6a0e
commit b3d61a1
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 35 deletions.
diff --git a/mujina-idp/src/main/resources/public/main.css b/mujina-idp/src/main/resources/public/main.css
@@ -1,5 +1,6 @@
 body {
     font-family: Helvetica, Verdana, serif;
+    font-size: 100%;
 }
 
 ul {
@@ -27,12 +28,18 @@ ul {
     transform: rotate(15deg);
 }
 
+_:-ms-fullscreen, .login-container, .user-container {
+    justify-content: space-around;
+}
+
+
 .login {
     display: flex;
     position: relative;
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    -ms-flex-direction: column;
     align-self: center;
     margin: auto;
 }
@@ -116,7 +123,7 @@ label.persist-me {
     font-size: 14px;
 }
 
-section.add-attribute {
+div.add-attribute {
     display: flex;
     margin-bottom: 10px;
     align-items: center;
@@ -199,7 +206,7 @@ span.explain-link:hover {
     height: 99%;
 }
 
-section.title {
+.title {
     position: relative;
     padding: 20px 10px;
     background-color: #4DB3CF;
@@ -208,11 +215,12 @@ section.title {
     font-size: larger;
 }
 
-section.title p {
+.title h2 {
     margin: 0;
+    font-size: 1.2rem
 }
 
-section.explanation-content {
+div.explanation-content {
     padding: 0 10px;
 }
 
@@ -230,3 +238,12 @@ a.close:focus {
     border: none;
     outline: none;
 }
+
+.sr-only {
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
diff --git a/mujina-idp/src/main/resources/public/main.js b/mujina-idp/src/main/resources/public/main.js
@@ -32,14 +32,14 @@ document.addEventListener("DOMContentLoaded", function () {
     var val = selectedOption.value;
     var text = selectedOption.text;
     var multiplicity = selectedOption.dataset.multiplicity === "true";
-    var newElement = document.createElement("div");
+    var newElement = document.createElement("li");
     newElement.setAttribute("class", "attribute-value");
     var mainId = guid();
     newElement.setAttribute("id", mainId);
     var spanId = guid();
     var inputId = guid();
     newElement.innerHTML = "<label>" + val + "</label>" +
-      "<input class='input-attribute-value' type='text' id='" + inputId + "' name='" + val + "'></input>" +
+      "<input class='input-attribute-value' type='text' id='" + inputId + "' name='" + val + "'>" +
       "<span id='" + spanId + "' class='remove-attribute-value'>🗑</span>";
     document.getElementById("attribute-list").appendChild(newElement);
     document.getElementById(spanId).addEventListener("click", function () {

diff --git a/mujina-idp/src/main/resources/templates/login.html b/mujina-idp/src/main/resources/templates/login.html
@@ -1,68 +1,75 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
 <head>
     <title>Login page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="/main.css"/>
     <script th:src="@{/main.js}"></script>
 </head>
 <body>
-<section id="explanation" class="explain hide">
-    <section class="container">
-        <section class="title">
-            <p>SAML Attribute Manipulation</p>
-            <a href="/close" id="close" class="close">&#9747;</a>
-        </section>
-        <section class="explanation-content"><p>
-            When the Mujina IDP sends a SAML assertion back to the service provider, all the attributes will be added as
-            SAML AttributeStatement elements.
-        </p>
+<aside id="explanation" class="explain hide">
+    <div class="container">
+        <header class="title">
+            <h2>SAML Attribute Manipulation</h2>
+            <a href="/close" id="close" class="close"><span class="sr-only">Close </span>&#9747;</a>
+        </header>
+        <div class="explanation-content">
+            <p>
+                When the Mujina IDP sends a SAML assertion back to the service provider, all the attributes will be
+                added as SAML AttributeStatement elements.
+            </p>
             <p>
                 Based on the Attribute Release Policy of the service provider they will be included in the authenticated
                 user identity.
             </p>
             <p>If you want to add multiple values for one attribute - for example isMemberOf - then add them multiple
-                times.</p>
-            <p></p>
+                times.
+            </p>
 
             <hr/>
 
-            <p>If you add attributes and check the 'Persist me' box then the attributes will be saved under the 'Username'
-                you have entered. </p>
-            <p>On subsequent logins with the same username the same set of attributes will be send to the Service
-                Provider.</p>
-        </section>
-
-    </section>
-</section>
+            <p>
+                If you add attributes and check the 'Persist me' box then the attributes will be saved under the
+                'Username' you have entered.
+            </p>
+            <p>
+                On subsequent logins with the same username the same set of attributes will be send to the Service
+                Provider.
+            </p>
+        </div>
+    </div>
+</aside>
 
-<section class="login-container">
-    <section class="login">
+<main class="login-container">
+    <div class="login">
         <h1>Mujina Identity Provider</h1>
         <p th:if="${param.error}" class="error">Wrong user or password</p>
         <form class="login-form" th:action="@{/login}" method="post">
+            <label for="username" class="sr-only">Username</label>
             <input type="text" id="username" name="username" autofocus="autofocus" placeholder="Username"/>
+            <label for="password" class="sr-only">Password</label>
             <input type="password" id="password" name="password" placeholder="Password"/>
             <input class="button" type="submit" value="Log in"/>
             <div>
                 <input id="persist-me" name="persist-me" type="checkbox"/>
                 <label class="persist-me" for="persist-me">Persist me?</label>
             </div>
 
-            <section class="add-attribute">
+            <div class="add-attribute">
+                <label for="add-attribute" class="sr-only">Select attributes</label>
                 <select class="attribute-select" id="add-attribute">
                     <option value="Add attribute...">Add attribute...</option>
                     <option th:each="attr : ${samlAttributes}" th:value="${attr.get('name')}"
                             th:text="${attr.get('id')}"
                             th:attr="data-multiplicity=${attr.get('multiplicity')}"></option>
                 </select>
                 <div class="help"><span class="explain-link">?</span></div>
-            </section>
-            <section id="attribute-list" class="attribute-list"></section>
+            </div>
+            <ul id="attribute-list" class="attribute-list"></ul>
 
         </form>
-    </section>
-    <a class="powered-by" href="https://openconext.org/" target="_blank">Copyright © 2018 OpenConext</a>
-</section>
+    </div>
+    <a class="powered-by" href="https://openconext.org/" target="_blank" rel="noreferrer noopener">Copyright © 2018 OpenConext</a>
+</main>
 </body>
 </html>