make it look a little more like the mockup #794

- please not that this required upgrading to a pre-release version of Shibboleth EDS (revision 110)
IQSS · Sep 12, 2014 · 01414b0 · 01414b0
1 parent c0c4a4f
commit 01414b0
Show file tree

Hide file tree

Showing 6 changed files with 2,321 additions and 20 deletions.
diff --git a/src/main/webapp/loginpage.xhtml b/src/main/webapp/loginpage.xhtml
@@ -22,7 +22,7 @@
                     <div id="builtinColumn" class="col-md-5" style="margin-top:3em;">
                         <h:form id="loginForm" styleClass="form-horizontal">
                             <p:focus context="loginForm"/>
-                            <div class="form-group">
+                            <div class="form-group" style="visibility: hidden">
                                 <p:outputLabel value="Login System" for="loginSystemSelect" styleClass="col-sm-2 control-label"/>
                                 <h:selectOneMenu id="loginSystemSelect" value="#{LoginPage.credentialsAuthProviderId}">
                                     <f:selectItems value="#{LoginPage.listCredentialsAuthenticationProviders()}" var="ap" 
@@ -50,7 +50,7 @@
                         </h:form>
                     </div>
                     <div class="col-md-7" style="margin-top:3em;">
-                        <iframe src="shib-identity-picker.html" width="550" height="400"/>
+                        <iframe src="shib-identity-picker.html" width="450" height="320" style="background-color: lightgray"/>
                     </div>
                 </div>
                 <div style="float: bottom">

diff --git a/src/main/webapp/resources/css/shib-identity-picker.css b/src/main/webapp/resources/css/shib-identity-picker.css
@@ -3,8 +3,8 @@
 {
     width: 389px;
     text-align: left;
-    background-color: #FFFFFF;
-    border: 2px #A40000 solid;
+    background-color: lightgray;
+    border: 0px #A40000 solid;
     padding: 10px;
 }
 
@@ -46,6 +46,7 @@ div.IdPSelectPreferredIdPButton a
 div.IdPSelectTextDiv{
     height: 3.5ex; /* Add some height to separate the text from the boxes */
     font-size: 15px;
+    clear: left;
 }
 
 div.IdPSelectPreferredIdPImg

diff --git a/src/main/webapp/resources/dev/sample-shib-identities.json b/src/main/webapp/resources/dev/sample-shib-identities.json
@@ -0,0 +1,39 @@
+[
+    {
+        "entityID": "https://idp.testshib.org/idp/shibboleth",
+        "DisplayNames": [
+            {
+                "value": "TestShib Test IdP",
+                "lang": "en"
+            }
+        ],
+        "Descriptions": [
+            {
+                "value": "TestShib IdP. Use this as a source of attributes\n                        for your test SP.",
+                "lang": "en"
+            }
+        ],
+        "Logos": [
+            {
+                "value": "http://testshib.org/images/testshib-transp.png",
+                "height": "75",
+                "width": "88"
+            }
+        ]
+    }, {
+        "entityID": "https://stage.fed.huit.harvard.edu/idp/shibboleth",
+        "DisplayNames": [
+            {
+                "value": "Harvard Test IdP",
+                "lang": "en"
+            }
+        ],
+        "Logos": [
+            {
+                "value": "https://www.iq.harvard.edu/profiles/openscholar/themes/hwpi_basetheme/images/harvard-logo.png",
+                "height": "88",
+                "width": "253"
+            }
+        ]
+    }
+]
diff --git a/src/main/webapp/resources/js/shib/idpselect.js b/src/main/webapp/resources/js/shib/idpselect.js
diff --git a/src/main/webapp/resources/js/shib/idpselect_config.js b/src/main/webapp/resources/js/shib/idpselect_config.js
@@ -5,16 +5,18 @@ function IdPSelectUIParms() {
     // Adjust the following to fit into your local configuration
     //
     this.alwaysShow = true;          // If true, this will show results as soon as you start typing
-    this.dataSource = '/Shibboleth.sso/DiscoFeed';    // Where to get the data from
+//    this.dataSource = '/Shibboleth.sso/DiscoFeed';    // Where to get the data from
+    this.dataSource = '/resources/dev/sample-shib-identities.json'; // for use in development
     this.defaultLanguage = 'en';     // Language to use if the browser local doesnt have a bundle
     this.defaultLogo = 'flyingpiglogo.jpg';
     this.defaultLogoWidth = 90;
     this.defaultLogoHeight = 80;
-    //this.defaultReturn = null;       // If non null, then the default place to send users who are not approaching via the Discovery Protocol for example
-    // FIXME: don't hardcode URL here, use window.location.hostname or something
-    this.defaultReturn = "https://pdurbin.pagekite.me/Shibboleth.sso/Login?SAMLDS=1&target=http://pdurbin.pagekite.me/shib.xhtml";
+//    this.defaultReturn = null;       // If non null, then the default place to send users who are not
+    // Approaching via the Discovery Protocol for example
+    //this.defaultReturn = "https://example.org/Shibboleth.sso/DS?SAMLDS=1&target=https://example.org/secure";
+    this.defaultReturn = "https://" + window.location.hostname + "/Shibboleth.sso/Login?SAMLDS=1&target=http://" + window.location.hostname + "/shib.xhtml";
     this.defaultReturnIDParam = null;
-    this.helpURL = 'https://wiki.shibboleth.net/confluence/display/SHIB2/DSRoadmap';
+    this.helpURL = '/guides/index.html';
     this.ie6Hack = null;             // An array of structures to disable when drawing the pull down (needed to 
     // handle the ie6 z axis problem
     this.insertAtDiv = 'idpSelect';  // The div where we will insert the data
@@ -24,7 +26,9 @@ function IdPSelectUIParms() {
     this.preferredIdP = null;        // Array of entityIds to always show
     this.hiddenIdPs = null;          // Array of entityIds to delete
     this.ignoreKeywords = false;     // Do we ignore the <mdui:Keywords/> when looking for candidates
+    this.showListFirst = true;      // Do we start with a list of IdPs or just the dropdown
     this.samlIdPCookieTTL = 730;     // in days
+    this.setFocusTextBox = true;     // Set to false to supress focus 
     this.testGUI = false;
 
 
@@ -43,13 +47,13 @@ function IdPSelectUIParms() {
             'fatal.noReturnURL': "No URL return parameter provided",
             'fatal.badProtocol': "Return request must start with https:// or http://",
             'idpPreferred.label': 'Use a suggested selection:',
-            'idpEntry.label': 'Or enter your organization\'s name and click "Continue"',
-            'idpEntry.NoPreferred.label': 'Enter your organization\'s name and click "Continue"',
-            'idpList.label': 'Or select your organization from the list below',
-            'idpList.NoPreferred.label': 'Select your organization from the list below',
-            'idpList.defaultOptionLabel': 'Please select your organization...',
+            'idpEntry.label': 'Or enter your institutions\'s name',
+            'idpEntry.NoPreferred.label': 'Enter your institution\'s name',
+            'idpList.label': 'Or select your institution from the list below.',
+            'idpList.NoPreferred.label': 'Select your institution and click "Continue" to log in via your institution\'s authentication system.',
+            'idpList.defaultOptionLabel': 'Please select your institution...',
             'idpList.showList': 'Allow me to pick from a list',
-            'idpList.showSearch': 'Allow me to specify the site',
+            'idpList.showSearch': 'Allow me to type the name of my institution',
             'submitButton.label': 'Continue',
             'helpText': 'Help',
             'defaultLogoAlt': 'DefaultLogo'
@@ -74,6 +78,50 @@ function IdPSelectUIParms() {
             'submitButton.label': 'OK',
             'helpText': 'Hilfe',
             'defaultLogoAlt': 'Standard logo'
+        },
+        'ja': {
+            'fatal.divMissing': '"insertAtDiv" の ID を持つ <div> が HTML 中に存在しません',
+            'fatal.noXMLHttpRequest': 'ブラウザが XMLHttpRequest をサポートしていないので IdP 情報を取得できません',
+            'fatal.wrongProtocol': 'DSへ渡された Policy パラメータが "urn:oasis:names:tc:SAML:profiles:SSO:idpdiscovery-protocol:single" ではありません',
+            'fatal.wrongEntityId': 'SP から渡された entityId が設定値と異なります',
+            'fatal.noData': 'メタデータが空です',
+            'fatal.loadFailed': '次の URL からメタデータをダウンロードできませんでした: ',
+            'fatal.noparms': 'DSにパラメータが渡されておらず defaultReturn も設定されていません',
+            'fatal.noReturnURL': "戻り URL が指定されていません",
+            'fatal.badProtocol': "戻り URL は https:// か http:// で始まらなければなりません",
+            'idpPreferred.label': '選択候補の IdP:',
+            'idpEntry.label': 'もしくはあなたの所属機関名を入力してください',
+            'idpEntry.NoPreferred.label': 'あなたの所属機関名を入力してください',
+            'idpList.label': 'もしくはあなたの所属機関を選択してください',
+            'idpList.NoPreferred.label': 'あなたの所属機関を一覧から選択してください',
+            'idpList.defaultOptionLabel': '所属機関を選択してください...',
+            'idpList.showList': '一覧から選択する',
+            'idpList.showSearch': '機関名を入力する',
+            'submitButton.label': '選択',
+            'helpText': 'Help',
+            'defaultLogoAlt': 'DefaultLogo'
+        },
+        'pt-br': {
+            'fatal.divMissing': 'A tag <div> com "insertAtDiv" não foi encontrada no arquivo HTML',
+            'fatal.noXMLHttpRequest': 'Seu navegador não suporta "XMLHttpRequest", impossível de carregador os dados do IdP selecionado',
+            'fatal.wrongProtocol': 'A política "Policy" fornecida para o DS não foi "urn:oasis:names:tc:SAML:profiles:SSO:idpdiscovery-protocol:single"',
+            'fatal.wrongEntityId': 'entityId oferecido pelo SP não confere com o da configuração',
+            'fatal.noData': 'O arquivo de metadados não retornou nada;',
+            'fatal.loadFailed': 'Falhou ao realizar download do metadado de ',
+            'fatal.noparms': 'Sem parâmetros para sessão de descoberta e sem parâmetro "defaultReturn" configurado',
+            'fatal.noReturnURL': "Não foi definida um endereço (URL) de retorno no parâmetro",
+            'fatal.badProtocol': "Retorno do endereço requisitado deve começar com https:// ou http://",
+            'idpPreferred.label': 'Use estas Instituições sugeridas: ',
+            'idpEntry.label': 'Ou informe o nome da sua Instituição',
+            'idpEntry.NoPreferred.label': 'Informe o nome da sua Instituição',
+            'idpList.label': 'Ou selecione sua Instituição através da lista abaixo',
+            'idpList.NoPreferred.label': 'Selecione sua Instituição através da lista abaixo',
+            'idpList.defaultOptionLabel': 'Por favor, selecione sua Instituição: ',
+            'idpList.showList': 'Permitir que eu escolha um IdP através de uma lista',
+            'idpList.showSearch': 'Permitir que eu especifique o IdP',
+            'submitButton.label': 'Continuar ',
+            'helpText': 'Ajuda',
+            'defaultLogoAlt': 'Logo padrão'
         }
     };
 
@@ -83,6 +131,7 @@ function IdPSelectUIParms() {
     this.maxPreferredIdPs = 3;
     this.maxIdPCharsButton = 33;
     this.maxIdPCharsDropDown = 58;
+    this.maxIdPCharsAltTxt = 60;
 
     this.minWidth = 20;
     this.minHeight = 20;

diff --git a/src/main/webapp/shib-identity-picker.html b/src/main/webapp/shib-identity-picker.html
@@ -9,15 +9,13 @@
     </head>
 
     <body>
-        <p>Log in via your institution</p>
-        <p>Select your institution and click "Continue" to log in via your institution's authentication system.</p>
+        <p style="font-weight: bolder; font-size: x-large">Log in via your institution</p>
 
         <div id="idpSelect"></div>
 
         <script src="/resources/js/shib/idpselect_config.js" type="text/javascript" language="javascript"></script>
 
-        <!--tested with shibboleth-embedded-ds-1.0.2-2.2.noarch, consider using the /resources/js/shib/idpselect.js version instead-->
-        <script src="/shibboleth-ds/idpselect.js" type="text/javascript" language="javascript"></script>
+        <script src="/resources/js/shib/idpselect.js" type="text/javascript" language="javascript"></script>
 
         <noscript>
             <!-- If you need to care about non javascript browsers you will need to