[java-identity-provider] branch main updated: IDP-1669 - Accessibility on IdP pages

Scott Cantor cantor.2 at osu.edu
Mon Feb 28 19:43:41 UTC 2022


This is an automated email from the git hooks/post-receive script.

scantor pushed a commit to branch main
in repository java-identity-provider.

View the commit online:
http://git.shibboleth.net/view/?p=java-identity-provider.git;a=commit;h=589a46d0fb36a3575cd3944e64b8c1268911d37f

The following commit(s) were added to refs/heads/main by this push:
     new 589a46d0f IDP-1669 - Accessibility on IdP pages
589a46d0f is described below

commit 589a46d0fb36a3575cd3944e64b8c1268911d37f
Author: Scott Cantor <cantor.2 at osu.edu>
AuthorDate: Mon Feb 28 14:43:37 2022 -0500

    IDP-1669 - Accessibility on IdP pages
    
    https://shibboleth.atlassian.net/browse/IDP-1669
    
    Updated the rest of the views.
    Adjusted default style in a couple minor areas.
---
 .../net/shibboleth/idp/module/views/admin/hello.vm | 103 ++++++-----
 .../idp/module/views/admin/unlock-keys.vm          | 108 ++++++------
 .../net/shibboleth/idp/module/views/duo.vm         | 106 ++++++------
 .../module/views/intercept/expiring-password.vm    |  38 ++--
 .../idp/module/views/intercept/impersonate.vm      | 110 ++++++------
 .../idp/module/views/intercept/terms-of-use.vm     |  89 +++++-----
 .../net/shibboleth/idp/module/views/login-error.vm |   4 +-
 .../net/shibboleth/idp/module/views/login.vm       | 192 +++++++++------------
 .../idp/module/views/spnego-unavailable.vm         |  57 +++---
 idp-war/src/main/webapp/css/placeholder.css        |   2 +-
 10 files changed, 376 insertions(+), 433 deletions(-)

diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/admin/hello.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/admin/hello.vm
index 33a0528de..cc3b77094 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/admin/hello.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/admin/hello.vm
@@ -14,60 +14,57 @@
 ##
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>#springMessageText("idp.title", "Web Login Service") - #springMessageText("hello-world.title", "Hello World")</title>
-    <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
-  </head>
+    <head>
+        <title>#springMessageText("idp.title", "Web Login Service") - #springMessageText("hello-world.title", "Hello World")</title>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")" media="all">
+        #parse("custom-styles.vm")
+    </head>
   
-  <body>
-    <div class="wrapper">
-      <div class="container" style="width: 100%">
-        <header>
-          <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-          <h3>#springMessageText("idp.title", "Web Login Service")</h3>
-        </header>
+    <body>
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")">
+            </header>
                 
-        <div class="content">
-          <h4>#springMessageText("hello-world.greeting", "Greetings"), <em>$encoder.encodeForHTML($subjectContext.getPrincipalName())</em></h4>
-          <br/>
-          <h4>Authenticated By</h4>
-          #foreach ($result in $subjectContext.getAuthenticationResults().entrySet())
-            <blockquote>$encoder.encodeForHTML($result.getKey())</blockquote>
-          #end
-          <br/>
-          <h4>Java Principals in Subjects</h4>
-          #foreach ($s in $subjectContext.getSubjects())
-            #foreach ($p in $s.getPrincipals())
-              <blockquote>$encoder.encodeForHTML($p)<blockquote>
-            #end
-          #end
-          #if ($attributeContext && !$attributeContext.getUnfilteredIdPAttributes().isEmpty())
-            <br/>
-            <h4>Attributes:</h4>
-            #foreach ($a in $attributeContext.getUnfilteredIdPAttributes())
-              #if (!$a.getValues().isEmpty())
-                <br/>
-                <h5>$encoder.encodeForHTML($a.getId())</h5>
-                  #foreach ($v in $a.getValues())
-                    <blockquote>$encoder.encodeForHTML($v.getDisplayValue())</blockquote>
-                  #end
-              #end
-            #end
-          #end
-        </div>
-
-        <header>
-          <h3><a href="$request.getContextPath()/profile/admin/hello">#springMessageText("hello-world.reload", "Reload the Page")</a></h3>
-        </header>
-      </div>
+            <section>
+                <h1>#springMessageText("idp.title", "Web Login Service")</h1>
+                <h2>#springMessageText("hello-world.greeting", "Greetings"), <em>$encoder.encodeForHTML($subjectContext.getPrincipalName())</em></h2>
+                <p><strong>Authenticated by</strong><br />
+                  #foreach ($result in $subjectContext.getAuthenticationResults().entrySet())
+                   <small>$encoder.encodeForHTML($result.getKey())</small><br/>
+                  #end</p>
+                  
+                <p><strong>Java Principals in Subjects</strong><br/>
+                #foreach ($s in $subjectContext.getSubjects())
+                    #foreach ($p in $s.getPrincipals())
+                      <small>$encoder.encodeForHTML($p)</small></br/>
+                    #end
+                  #end</p>
+                
+                #if ($attributeContext && !$attributeContext.getUnfilteredIdPAttributes().isEmpty())
 
-      <footer>
-        <div class="container container-footer">
-          <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        </div>
-      </footer>
-    </div>
-  </body>
+                    <p><strong>Attributes</strong><br />
+                        #foreach ($a in $attributeContext.getUnfilteredIdPAttributes())
+                          #if (!$a.getValues().isEmpty())
+                            <small><strong>$encoder.encodeForHTML($a.getId())</strong></small><br/>
+                              #foreach ($v in $a.getValues())
+                                <small>$encoder.encodeForHTML($v.getDisplayValue())</small><br/>
+                              #end
+                          #end
+                        #end
+                      #end
+                    </p>
+                    
+                <a class="button button--secondary" href="$request.getContextPath()/profile/admin/hello">#springMessageText("hello-world.reload", "Reload the Page")</a>
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
+        </footer>
+    </body>
 </html>
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/admin/unlock-keys.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/admin/unlock-keys.vm
index a8228ae02..0aa32bbf8 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/admin/unlock-keys.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/admin/unlock-keys.vm
@@ -16,82 +16,80 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>$title - $titleSuffix</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")" media="all">
+        #parse("custom-styles.vm")
     </head>
     
     <body>
-    <div class="wrapper">
-        <div class="container">
+        <main class="main">
             <header>
-                <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-                <h3>$title - $titleSuffix</h3>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
             </header>
-        
-            <div class="content">
+
+            <section>
             #if ($state == "end")
-                <strong>#springMessageText("idp.unlock-keys.complete", "The system is unlocked and ready for use.")</strong>
+                <p>#springMessageText("idp.unlock-keys.complete", "The system is unlocked and ready for use.")</p>
                 <p><a href="$request.getContextPath()/profile/SAML2/Unsolicited/SSO?providerId=https://sp.example.org/shibboleth">Validation Link</a></p>
             #else
                 #if ($eventId == "InvalidMessage")
-                    <p class="form-element form-error">
-                    #springMessageText("idp.unlock-keys.error", "Unlock failed; check log for specific message.")
-                    </p>
-                    <br/><br/>
+                    <div class="output-message output--error">
+                        <p>#springMessageText("idp.unlock-keys.error", "Unlock failed; check log for specific message.")</p>
+                    </div>
                 #end
             
                 <form action="$flowExecutionUrl" method="post">
-                  #parse("csrf/csrf.vm")
+                    #parse("csrf/csrf.vm")
                   
-                  <!--
-                  If you have multiple key strategies defined, you'll need multiple pairs of form fields for
-                  the passwords, labeled in the order they're fed into the shibboleth.unlock-keys.KeyStrategies
-                  bean. If you have none, remove the fields.
-                  -->
-
-                  <div class="form-element-wrapper">
-                    <label for="password">#springMessageText("idp.unlock-keys.keystorePassword", "DataSealer Keystore Password")</label>
-                    <input class="form-element form-field" id="password" name="keystorePassword" type="password" />
-                  </div>
-
-                  <div class="form-element-wrapper">
-                    <label for="password">#springMessageText("idp.unlock-keys.keyPassword", "DataSealer Key Password")</label>
-                    <input class="form-element form-field" id="password" name="keyPassword" type="password" />
-                  </div>
+                    <!--
+                    If you have multiple key strategies defined, you'll need multiple pairs of form fields for
+                    the passwords, labeled in the order they're fed into the shibboleth.unlock-keys.KeyStrategies
+                    bean. If you have none, remove the fields.
+                    -->
 
-                  <!--
-                  If you have multiple private keys defined, you'll need a form field for each passwords, labeled in the order
-                  they're fed into the shibboleth.unlock-keys.Credentials/PrivateKeys beans. If you have none, remove the fields.
-                  -->
+                    <fieldset>
+                        <legend><span>Passwords</span></legend>
+                        <label for="password">#springMessageText("idp.unlock-keys.keystorePassword", "DataSealer Keystore Password")</label>
+                        <input type="password" name="keystorePassword" id="password" />
+                    </fieldset>
+                    
+                    <fieldset>
+                        <legend><span>Passwords</span></legend>
+                        <label for="password">#springMessageText("idp.unlock-keys.keyPassword", "DataSealer Key Password")</label>
+                        <input type="password" name="keyPassword" id="password" />
+                    </fieldset>
 
-                  <div class="form-element-wrapper">
-                    <label for="password">#springMessageText("idp.unlock-keys.privateKeyPassword", "Private Key Password")</label>
-                    <input class="form-element form-field" id="password" name="privateKeyPassword" type="password" />
-                  </div>
-                  
-                  <div class="form-element-wrapper">
-                    <button class="form-element form-button" type="submit" name="_eventId_proceed"
-                        >#springMessageText("idp.unlock-keys.unlock", "Unlock")</button>
-                  </div>
+                    <!--
+                    If you have multiple private keys defined, you'll need a form field for each passwords, labeled in the order
+                    they're fed into the shibboleth.unlock-keys.Credentials/PrivateKeys beans. If you have none, remove the fields.
+                    -->
 
-                  <div class="form-element-wrapper">
-                    <button class="form-element form-button" type="submit" name="_eventId_cancel"
-                        >#springMessageText("idp.unlock-keys.cancel", "Cancel")</button>
-                  </div>
+                    <fieldset>
+                        <legend><span>Passwords</span></legend>
+                        <label for="password">#springMessageText("idp.unlock-keys.privateKeyPassword", "Private Key Password")</label>
+                        <input type="password" name="privateKeyPassword" id="password" />
+                    </fieldset>
                   
+                    <div class="grid md-2">
+                        <div class="grid-item">
+                            <button type="submit" name="_eventId_proceed">#springMessageText("idp.unlock-keys.unlock", "Unlock")</button>
+                        </div>
+                        
+                        <div class="grid-item">
+                            <button class="button--secondary button--full" type="submit" name="_eventId_cancel">#springMessageText("idp.unlock-keys.cancel", "Cancel")</button>
+                        </div>
+                    </div>
                 </form>
             #end
-            </div>
-        </div>
-
-        <footer>
-            <div class="container container-footer">
-                <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
             </div>
         </footer>
-        
-    </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/duo.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/duo.vm
index 2541bc6b3..1d549429f 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/duo.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/duo.vm
@@ -20,64 +20,54 @@
 ##
 <!DOCTYPE html>
 <html>
-<head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>#springMessageText("idp.title", "Web Login Service")</title>
-    <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
-    <style>
-      #duo_iframe {
-        width: 100%;
-        min-width: 304px;
-        max-width: 620px;
-        height: 330px;
-      }
-    </style>
-</head>
-<body>
-    <div class="wrapper">
-      <div class="container">
-        <header>
-          <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-        </header>
+    <head>
+        <title>#springMessageText("idp.title", "Web Login Service")</title>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")" media="all">
+        #parse("custom-styles.vm")
+        <style>
+          #duo_iframe {
+            width: 100%;
+            min-width: 304px;
+            max-width: 620px;
+            height: 330px;
+          }
+        </style>
+    </head>
+    <body>
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
+            </header>
 
-        <div class="content">
-          <div class="column one">
-          
-            <h3>#springMessageText("idp.login.duoRequired", "Authentication with Duo is required for the requested service.")</h3>
+            <section>
+                <h2>#springMessageText("idp.login.duoRequired", "Authentication with Duo is required for the requested service.")</h2>
+                <noscript>#springMessageText("idp.login.duoNoScript", "The Duo service requires JavaScript.")</noscript>
+                <script src="$request.getContextPath()$duoScriptPath"></script>
+                <iframe id="duo_iframe"
+                    data-host="$duoHost"
+                    data-sig-request="$duoRequest"
+                    data-post-action="$flowExecutionUrl"
+                    frameborder="0"
+                >
+                </iframe>
+                <form id="duo_form" method="post">
+                    #parse("csrf/csrf.vm")
+                    <input type="hidden" name="_eventId" value="proceed" />
+                </form>
 
-            <noscript>#springMessageText("idp.login.duoNoScript", "The Duo service requires JavaScript.")</noscript>          
-            <script src="$request.getContextPath()$duoScriptPath"></script>
-            <iframe id="duo_iframe"
-                data-host="$duoHost"
-                data-sig-request="$duoRequest"
-                data-post-action="$flowExecutionUrl"
-                frameborder="0"
-            >
-            </iframe>
-            <form id="duo_form" method="post">
-                #parse("csrf/csrf.vm")
-                <input type="hidden" name="_eventId" value="proceed" />
-            </form>
-            
-            <h3 style="text-align: center">
-                <a href="$flowExecutionUrl&_eventId=cancel#parse("csrf/csrf-qparam.vm")">#springMessageText("idp.login.duoCancel", "Cancel this Request")</a>
-            </h3>
-          </div>
-          <div class="column two">
-            <ul class="list list-help">
-              <li class="list-help-item"><a href="#springMessageText("idp.url.helpdesk", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.needHelp", "Need Help?")</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <footer>
-        <div class="container container-footer">
-          <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        </div>
-      </footer>
-    </div>
-</body>
+                <p><a class="button button--secondary" href="$flowExecutionUrl&_eventId=cancel#parse("csrf/csrf-qparam.vm")">#springMessageText("idp.login.duoCancel", "Cancel this Request")</a></p>
+                <ul>
+                    <li><a href="#springMessageText("idp.url.helpdesk", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.needHelp", "Need Help?")</a></li>
+                </ul>
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
+        </footer>
+    </body>
 </html>
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/expiring-password.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/expiring-password.vm
index 4395844a2..5bb83a328 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/expiring-password.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/expiring-password.vm
@@ -19,36 +19,32 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>#springMessageText("idp.title", "Web Login Service")</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
         <meta http-equiv="refresh" content="20;url=$flowExecutionUrl&_eventId_proceed=1">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
     </head>
-      
     <body>
-      <div class="wrapper">
-        <div class="container">
+        <main class="main">
             <header>
-                <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-                <h3>#springMessageText("idp.login.expiringSoon", "Your password will be expiring soon!")</h3>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "../media/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
             </header>
         
-            <div class="content">
-                <p>#springMessageText("idp.login.changePassword", "To create a new password now, go to")
-                <strong><a href="#" target="_blank">#</a></strong>.</p>
+            <section>
+                <h2>#springMessageText("idp.login.expiringSoon", "Your password will be expiring soon!")</h2>
+                <p>#springMessageText("idp.login.changePassword", "To create a new password now, go to") <a href="#" target="_blank">#</a>.</p>
+                <p>Your login will proceed in <strong>20</strong> seconds or you may <a href="login-retry">click here</a> to continue</p>
                 <p>#springMessageText("idp.login.proceedBegin", "Your login will proceed in 20 seconds or you may click")
-                <strong><a href="$flowExecutionUrl&_eventId_proceed=1">#springMessageText("idp.login.proceedHere", "here")</a></strong>
-                #springMessageText("idp.login.proceedEnd", "to continue").</p>
+                <a href="$flowExecutionUrl&_eventId_proceed=1">#springMessageText("idp.login.proceedHere", "here")</a> #springMessageText("idp.login.proceedEnd", "to continue").</p>
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
             </div>
-        </div>
-
-        <footer>
-          <div class="container container-footer">
-            <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-          </div>
         </footer>
-          
-      </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/impersonate.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/impersonate.vm
index a3acc8a67..de9c7f6bf 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/impersonate.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/impersonate.vm
@@ -17,74 +17,66 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>#springMessageText("idp.title", "Web Login Service")</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
     </head>
       
     <body>
-      <div class="wrapper">
-        <div class="container">
-          <header>
-            <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-              <h3>#springMessageText("idp.impersonate.header", "Account Impersonation")</h3>
-          </header>
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
+            </header>
         
-          <div class="content">
-
-            <form action="$flowExecutionUrl" method="post">
-            #parse("csrf/csrf.vm")
-            #set ($serviceName = $rpUIContext.serviceName)
-            #if ($serviceName && !$rpContext.getRelyingPartyId().contains($serviceName))
-              <legend>
-                $encoder.encodeForHTML($serviceName)
-              </legend>
-            #end
-
-              <legend>
-                #springMessageText("idp.impersonate.text", "Enter an account name to impersonate to this service or continue normally.")
-              </legend>
-
-              <div class="form-element-wrapper">
-                <label for="impersonation">#springMessageText("idp.impersonate.login-as", "Login as")</label>
-                <input class="form-element form-field" id="impersonation" name="principal" type="text" />
-                
-                <!-- Defaults to input box above, example below populates a select list from an IdPAttribute. -->
-                <!--
-                #set ($attributeContext = $rpContext.getSubcontext('net.shibboleth.idp.attribute.context.AttributeContext'))
-                #set ($usernamesAttribute = $attributeContext.getUnfilteredIdPAttributes().get("impersonatableUsernames"))
-                <select class="form-element form-field" id="impersonation" name="principal">
-                #if ($usernamesAttribute)
-                  #foreach ($username in $usernamesAttribute.getValues())
-                    <option value="$encoder.encodeForHTML($username.getValue())">$encoder.encodeForHTML($username.getValue())</option>
-                  #end
+            <section>
+                <h1>#springMessageText("idp.impersonate.header", "Account Impersonation")</h1>
+                #set ($serviceName = $rpUIContext.serviceName)
+                #if ($serviceName && !$rpContext.getRelyingPartyId().contains($serviceName))
+                    <p>$encoder.encodeForHTML($serviceName)</p>
                 #end
-                </select>
-                -->
-              </div>
-
-              <div class="form-element-wrapper">
-                <button class="form-element form-button" type="submit" name="_eventId_impersonate"
-                    >#springMessageText("idp.impersonate.impersonate", "Impersonate")</button>
-              </div>
-
-              <div class="form-element-wrapper">
-                <button class="form-element form-button" type="submit" name="_eventId_proceed"
-                    >#springMessageText("idp.impersonate.continue", "Continue Normally")</button>
-              </div>
                 
-            </form>
+                <p>#springMessageText("idp.impersonate.text", "Enter an account name to impersonate to this service or continue normally.")</p>
+
+                <form action="$flowExecutionUrl" method="post">
+                #parse("csrf/csrf.vm")
 
-          </div>
-        </div>
+                    <fieldset>
+                        <label for="impersonation">#springMessageText("idp.impersonate.login-as", "Login as")</label>
+                        <input class="form-element form-field" id="impersonation" name="principal" type="text" />
+                        
+                        <!-- Defaults to input box above, example below populates a select list from an IdPAttribute. -->
+                        <!--
+                        #set ($attributeContext = $rpContext.getSubcontext('net.shibboleth.idp.attribute.context.AttributeContext'))
+                        #set ($usernamesAttribute = $attributeContext.getUnfilteredIdPAttributes().get("impersonatableUsernames"))
+                        <select class="form-element form-field" id="impersonation" name="principal">
+                        #if ($usernamesAttribute)
+                            #foreach ($username in $usernamesAttribute.getValues())
+                                <option value="$encoder.encodeForHTML($username.getValue())">$encoder.encodeForHTML($username.getValue())</option>
+                            #end
+                        #end
+                        </select>
+                        -->
+                    </fieldset>
 
-        <footer>
-          <div class="container container-footer">
-            <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-          </div>
+                    <div class="grid md-2">
+                        <div class="grid-item">
+                            <button class="button--full" type="submit" name="_eventId_impersonate">#springMessageText("idp.impersonate.impersonate", "Impersonate")</button>
+                        </div>
+                        
+                        <div class="grid-item">
+                            <button class="button--secondary button--full" type="submit" name="_eventId_proceed">#springMessageText("idp.impersonate.continue", "Continue Normally")</button>
+                        </div>
+                    </div>
+                </form>
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
         </footer>
-          
-      </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/terms-of-use.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/terms-of-use.vm
index 67b2c1509..c0989caae 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/terms-of-use.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/intercept/terms-of-use.vm
@@ -18,52 +18,59 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/consent.css">
         <title>#springMessageText("${termsOfUseId}.title", "Terms of Use")</title>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
     </head>
     <body>
-        <div class="box">
+        <main class="main">
             <header>
-                <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")" class="federation_logo">
-                #if ($rpOrganizationLogo)
-                    <img src="$encoder.encodeForHTMLAttribute($rpOrganizationLogo)" alt="$encoder.encodeForHTMLAttribute($serviceName)" class="organization_logo">
-                #end
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
             </header>
-            #if ($rpOrganizationLogo)
-                <div style="float:left;">
-                    <h1>#springMessageText("${termsOfUseId}.title", "Terms of Use")</h1>
-                </div>
-            #end
-            <div id="tou-content">
-                #springMessageText("${termsOfUseId}.text", "Terms of Use Text...")
-            </div>
-            <div id="tou-acceptance">
-                <div style="float:left;">
-                    <form action="$flowExecutionUrl" method="post" >
-                        #parse("csrf/csrf.vm")
-                        <input type="submit" name="_eventId_TermsRejected" value="#springMessageText("idp.terms-of-use.reject", "Refuse")" style="margin-right: 30px;">
-                    </form>
-                </div>
-                <div style="float:right;">
-                    <form action="$flowExecutionUrl" method="post" >
-                        #parse("csrf/csrf.vm")
-                        <input id="accept" type="checkbox" name="_shib_idp_consentIds" value="$encoder.encodeForHTML($termsOfUseId)" required>
-                        <label for="accept">#springMessageText("idp.terms-of-use.accept", "I accept the terms of use")</label>
-                        #if ($requireCheckbox)
-                            <p class="form-error">#springMessageText("idp.terms-of-use.required", "Please check this box if you want to proceed.")</p>
-                        #end
-                        <input type="submit" name="_eventId_proceed" value="#springMessageText("idp.terms-of-use.submit", "Submit")">
-                    </form>
-                </div>
-                <div style="clear:both;"></div>
+            
+            <section>
+                <h1>#springMessageText("${termsOfUseId}.title", "Terms of Use")</h1>
+                #if ($rpOrganizationLogo)
+                    <img class="service-logo" src="$encoder.encodeForHTMLAttribute($rpOrganizationLogo)" alt="logo for $encoder.encodeForHTMLAttribute($serviceName)" />
+                #end    
+                
+                <p>#springMessageText("${termsOfUseId}.text", "Terms of Use Text...")</p>
+                <form action="$flowExecutionUrl" method="post">
+                    <fieldset>
+                        <legend><span>Agreement</span></legend>
+                            <form action="$flowExecutionUrl" method="post" >
+                                #parse("csrf/csrf.vm")
+                                <input id="accept" type="checkbox" name="_shib_idp_consentIds" value="$encoder.encodeForHTML($termsOfUseId)" required>
+                                <label for="accept">#springMessageText("idp.terms-of-use.accept", "I accept the terms of use")
+                                #if ($requireCheckbox)
+                                    <br/><small>#springMessageText("idp.terms-of-use.required", "Please check this box if you want to proceed.")</small>
+                                #end
+                                </label>
+                    </fieldset>
+                    
+                    <div class="grid md-2">
+                        <div class="grid-item">
+                            <button class="button--full" type="submit" name="_eventId_proceed">#springMessageText("idp.terms-of-use.submit", "Submit")</button> 
+                        </div>
+                        </form>
+                        <div class="grid-item">
+                            <form action="$flowExecutionUrl" method="post">
+                                #parse("csrf/csrf.vm")
+                                <button class="button--secondary button--full" type="submit" name="_eventId_TermsRejected">#springMessageText("idp.terms-of-use.reject", "Refuse")</button>
+                            </form>
+                        </div>
+                    </div>
+                </form>
+            </section>
+        </main>
+        
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
             </div>
-            <footer>
-                <div class="container container-footer">
-                    <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-                </div>
-            </footer>
-        </div>
+        </footer>
     </body>
 </html>
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/login-error.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/login-error.vm
index 224976b44..f2f69bd17 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/login-error.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/login-error.vm
@@ -20,7 +20,5 @@
 #end
 
 #if ($message)
-    <section>
-        <p class="form-element form-error">$encoder.encodeForHTML($message)</p>
-    </section>
+    <h3 class="output-message output--error">$encoder.encodeForHTML($message)</h3>
 #end
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/login.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/login.vm
index c7b15c98d..0679f3b4a 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/login.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/login.vm
@@ -11,8 +11,6 @@
 ## authenticationWarningContext - context with login warning state
 ## ldapResponseContext - context with LDAP state (if using native LDAP)
 ## rpUIContext - the context with SP UI information from the metadata
-## extendedAuthenticationFlows - collection of "extended" AuthenticationFlowDescriptor objects
-## passwordPrincipals - contents of the shibboleth.authn.Password.PrincipalOverride bean
 ## encoder - HTMLEncoder class
 ## request - HttpServletRequest
 ## response - HttpServletResponse
@@ -21,124 +19,96 @@
 ##
 #set ($rpContext = $profileRequestContext.getSubcontext('net.shibboleth.idp.profile.context.RelyingPartyContext'))
 #set ($username = $authenticationContext.getSubcontext('net.shibboleth.idp.authn.context.UsernamePasswordContext', true).getUsername())
-#set ($passwordEnabled = false)
-#if (!$passwordPrincipals or $passwordPrincipals.isEmpty() or $authenticationContext.isAcceptable($passwordPrincipals))
-  #set ($passwordEnabled = true)
-#end
 ##
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <title>#springMessageText("idp.title", "Web Login Service")</title>
-        <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
     </head>
     <body>
-    <div class="wrapper">
-      <div class="container">
-        <header>
-          <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-        </header>
-
-        <div class="content">
-          <div class="column one">
-            #parse("login-error.vm")
-
-            <form action="$flowExecutionUrl" method="post">
-            #parse("csrf/csrf.vm")
-            #set ($serviceName = $rpUIContext.serviceName)
-            #if ($serviceName && !$rpContext.getRelyingPartyId().contains($serviceName))
-              <legend>
-                #springMessageText("idp.login.loginTo", "Login to") $encoder.encodeForHTML($serviceName)
-              </legend>
-            #end
-                        
-            #if ($passwordEnabled)
-              <div class="form-element-wrapper">
-                <label for="username">#springMessageText("idp.login.username", "Username")</label>
-                <input class="form-element form-field" id="username" name="j_username" type="text"
-                    value="#if($username)$encoder.encodeForHTML($username)#end" />
-              </div>
-
-              <div class="form-element-wrapper">
-                <label for="password">#springMessageText("idp.login.password", "Password")</label>
-                <input class="form-element form-field" id="password" name="j_password" type="password" value="" />
-              </div>
-
-              ## You may need to modify this to taste, such as changing the flow name its checking for to authn/MFA.
-              #if (!$authenticationContext.getActiveResults().containsKey('authn/Password'))
-              <div class="form-element-wrapper">
-                <input type="checkbox" name="donotcache" value="1" id="donotcache">
-                <label for="donotcache">#springMessageText("idp.login.donotcache", "Don't Remember Login")</label>
-               </div>
-              #end
-              
-            #end
-
-              <div class="form-element-wrapper">
-                <input id="_shib_idp_revokeConsent" type="checkbox" name="_shib_idp_revokeConsent" value="true" />
-                <label for="_shib_idp_revokeConsent">#springMessageText("idp.attribute-release.revoke", "Clear prior granting of permission for release of your information to this service.")</label>
-              </div>
-
-            #if ($passwordEnabled)
-              <div class="form-element-wrapper">
-                <button class="form-element form-button" type="submit" name="_eventId_proceed"
-                    onClick="this.childNodes[0].nodeValue='#springMessageText("idp.login.pleasewait", "Logging in, please wait...")'"
-                    >#springMessageText("idp.login.login", "Login")</button>
-              </div>
-            #end
-
-            #foreach ($extFlow in $extendedAuthenticationFlows)
-              #if ($authenticationContext.isAcceptable($extFlow) and $extFlow.test(profileRequestContext))
-                <div class="form-element-wrapper">
-                  <button class="form-element form-button" type="submit" name="_eventId_$extFlow.getId()">
-                    #springMessageText("idp.login.$extFlow.getId().replace('authn/','')", $extFlow.getId().replace('authn/',''))
-                  </button>
-                </div>
-              #end
-            #end
-            </form>
-
-            #*
-              //
-              //    SP Description & Logo (optional)
-              //    These idpui lines will display added information (if available
-              //    in the metadata) about the Service Provider (SP) that requested
-              //    authentication. These idpui lines are "active" in this example
-              //    (not commented out) - this extra SP info will be displayed.
-              //    Remove or comment out these lines to stop the display of the
-              //    added SP information.
-              //
-            *#
-            #set ($logo = $rpUIContext.getLogo())
-            #if ($logo)
-              <img src= "$encoder.encodeForHTMLAttribute($logo)"
-                  alt="$encoder.encodeForHTMLAttribute($serviceName)">
-            #end
-            #set ($desc = $rpUIContext.getServiceDescription())
-            #if ($desc)
-              $encoder.encodeForHTML($desc)
-            #end
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")" />
+                
+                #set ($serviceName = $rpUIContext.serviceName)
+                #if ($serviceName && !$rpContext.getRelyingPartyId().contains($serviceName))
+                    <h2>#springMessageText("idp.login.loginTo", "Login to") $encoder.encodeForHTML($serviceName)</h2>
+                #end
+            </header>
             
-          </div>
-          <div class="column two">
-            <ul class="list list-help">
-              #if ($passwordEnabled)
-                <li class="list-help-item"><a href="#springMessageText("idp.url.password.reset", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.forgotPassword", "Forgot your password?")</a></li>
-              #end
-              <li class="list-help-item"><a href="#springMessageText("idp.url.helpdesk", '#')"><span class="item-marker">›</span> #springMessageText("idp.login.needHelp", "Need Help?")</a></li>
-            </ul>
-          </div>
-        </div>
-      </div>
+            <section>
+                <form action="$flowExecutionUrl" method="post">
+                    #parse("csrf/csrf.vm")
+
+                    #*
+                    //
+                    //    SP Description & Logo (optional)
+                    //    These idpui lines will display added information (if available
+                    //    in the metadata) about the Service Provider (SP) that requested
+                    //    authentication. These idpui lines are "active" in this example
+                    //    (not commented out) - this extra SP info will be displayed.
+                    //    Remove or comment out these lines to stop the display of the
+                    //    added SP information.
+                    //
+                    *#
+                    #set ($logo = $rpUIContext.getLogo())
+                    #if ($logo)
+                        <img class="service-logo" src= "$encoder.encodeForHTMLAttribute($logo)" alt="$encoder.encodeForHTMLAttribute($serviceName)">
+                    #end
+                    #set ($desc = $rpUIContext.getServiceDescription())
+                    #if ($desc)
+                        <p>$encoder.encodeForHTML($desc)</p>
+                    #end
+                            
+                    #parse("login-error.vm")
 
-      <footer>
-        <div class="container container-footer">
-          <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        </div>
-      </footer>
-    </div>
+                    <fieldset>
+                        <label for="username">#springMessageText("idp.login.username", "Username")</label>
+                        <input id="username" name="j_username" type="text"
+                            value="#if($username)$encoder.encodeForHTML($username)#end" />
+                    </fieldset>
+                  
+                    <fieldset>
+                        <label for="password">#springMessageText("idp.login.password", "Password")</label>
+                        <input type="password" name="j_password" id="password" value="" />
+                    </fieldset>
+    
+                    ## You may need to modify this to taste, such as changing the flow name checked to authn/MFA.
+                    #if (!$authenticationContext.getActiveResults().containsKey('authn/Password'))
+                    <fieldset>
+                        <input type="checkbox" name="donotcache" value="1" id="donotcache" />
+                        <label for="donotcache">#springMessageText("idp.login.donotcache", "Don't Remember Login")</label>
+                    </fieldset>
+                    #end
+    
+                    <fieldset>
+                        <legend><span>Login Permissions</span></legend>
+                        <input id="_shib_idp_revokeConsent" type="checkbox" name="_shib_idp_revokeConsent" value="true" />
+                        <label for="_shib_idp_revokeConsent">#springMessageText("idp.attribute-release.revoke", "Clear prior granting of permission for release of your information to this service.")</label>
+                    </fieldset>
+    
+                    <fieldset>
+                        <button type="submit" name="_eventId_proceed"
+                            onClick="this.childNodes[0].nodeValue='#springMessageText("idp.login.pleasewait", "Logging in, please wait...")'"
+                            >#springMessageText("idp.login.login", "Login")</button>
+                    </fieldset>
+                </form>
     
+                <ul>
+                    <li><a href="#springMessageText("idp.url.password.reset", '#')">#springMessageText("idp.login.forgotPassword", "Forgot your password?")</a></li>
+                    <li><a href="#springMessageText("idp.url.helpdesk", '#')">#springMessageText("idp.login.needHelp", "Need Help?")</a></li>
+                </ul>
+            </section>
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
+        </footer>
      </body>
 </html>
\ No newline at end of file
diff --git a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/spnego-unavailable.vm b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/spnego-unavailable.vm
index 8f7867a6a..c74f8564a 100644
--- a/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/spnego-unavailable.vm
+++ b/idp-conf-impl/src/main/resources/net/shibboleth/idp/module/views/spnego-unavailable.vm
@@ -14,36 +14,31 @@
 #set ($eventKey = $springMacroRequestContext.getMessage("SPNEGOUnavailable", "spnego-unavailable"))
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>#springMessageText("idp.title", "Web Login Service") - #springMessageText("${eventKey}.title", "Error")</title>
-    <link rel="stylesheet" type="text/css" href="$request.getContextPath()/css/main.css">
-  </head>
-  
-  <body onload="window.location = '$errorUrl'">
-    <div class="wrapper">
-      <div class="container">
-        <header>
-          <img src="$request.getContextPath()#springMessage("idp.logo")" alt="#springMessageText("idp.logo.alt-text", "logo")">
-          <h3>#springMessageText("idp.title", "Web Login Service") - #springMessage("idp.title.suffix", "Error")</h3>
-        </header>
-                
-        <div class="content">
-          #springMessageText("${eventKey}.message", "Your web browser doesn't support authentication with your desktop login credentials.")
-          <ul class="list list-help">
-            <li class="list-help-item">
-              <a href="$errorUrl"><span class="item-marker">›</span> #springMessageText("spnego-unavailable.return", "Cancel the attempt.")</a>
-            </li>
-          </ul>
-        </div>
-      </div>
+    <head>
+        <title>#springMessageText("idp.title", "Web Login Service") - #springMessageText("${eventKey}.title", "Error")</title>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+        <link rel="stylesheet" type="text/css" href="$request.getContextPath()#springMessageText("idp.css", "/css/placeholder.css")">
+        #parse("custom-styles.vm")
+    </head>
+    <body onload="window.location = '$errorUrl'">
+        <main class="main">
+            <header>
+                <img class="main-logo" src="$request.getContextPath()#springMessageText("idp.logo", "/images/placeholder-logo.png")" alt="#springMessageText("idp.logo.alt-text", "logo")">
+            </header>
 
-      <footer>
-        <div class="container container-footer">
-          <p class="footer-text">#springMessageText("idp.footer", "Insert your footer text here.")</p>
-        </div>
-      </footer>
-    </div>
-  </body>
+            <section>
+                <h2>#springMessageText("idp.title", "Web Login Service") - #springMessage("idp.title.suffix", "Error")</h2>
+                <p>#springMessageText("${eventKey}.message", "Your web browser doesn't support authentication with your desktop login credentials.")</p>
+                <p><a class="button secondary--button" href="$errorUrl">#springMessageText("spnego-unavailable.return", "Cancel the attempt.")</a></p>
+            </section>
+            
+        </main>
+        <footer class="footer">
+            <div class="cc">
+                <p>#springMessageText("idp.footer", "Insert your footer text here.")</p>
+            </div>
+        </footer>
+    </body>
 </html>
diff --git a/idp-war/src/main/webapp/css/placeholder.css b/idp-war/src/main/webapp/css/placeholder.css
index b23eda0e0..359c89c9d 100644
--- a/idp-war/src/main/webapp/css/placeholder.css
+++ b/idp-war/src/main/webapp/css/placeholder.css
@@ -262,7 +262,7 @@ main {
   clear: both;
   margin: 0 auto;
   width: 100%;
-  max-width: 649px;
+  max-width: 800px;
   background-color: #fff;
   -webkit-border-radius: 8px;
   -ms-border-radius: 8px;

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.


More information about the commits mailing list