diff options
| author | Petr Vobornik <pvoborni@redhat.com> | 2014-03-31 14:03:28 +0200 |
|---|---|---|
| committer | Petr Vobornik <pvoborni@redhat.com> | 2014-06-06 16:02:17 +0200 |
| commit | 3bc7934803ae713ac3e1cf766197f2ec17a2e625 (patch) | |
| tree | c38f67b1f3402b344c1e51f562d40dac8587ac7e | |
| parent | 6e7f50f51234a28e6f33eb50d1f3dd3be4d1e488 (diff) | |
| download | freeipa-3bc7934803ae713ac3e1cf766197f2ec17a2e625.tar.gz freeipa-3bc7934803ae713ac3e1cf766197f2ec17a2e625.tar.xz freeipa-3bc7934803ae713ac3e1cf766197f2ec17a2e625.zip | |
webui: apply PatternFly theme on config pages
https://fedorahosted.org/freeipa/ticket/4278
| -rw-r--r-- | install/html/browserconfig.html | 49 | ||||
| -rw-r--r-- | install/html/ffconfig.js | 32 | ||||
| -rw-r--r-- | install/html/ffconfig_page.js | 41 | ||||
| -rw-r--r-- | install/html/ssbrowser.html | 128 | ||||
| -rw-r--r-- | install/html/unauthorized.html | 44 | ||||
| -rw-r--r-- | install/ui/ipa.css | 82 | ||||
| -rw-r--r-- | install/ui/less/config-pages.less | 26 | ||||
| -rw-r--r-- | install/ui/less/ipa.less | 1 |
8 files changed, 203 insertions, 200 deletions
diff --git a/install/html/browserconfig.html b/install/html/browserconfig.html index d867a1941..d721a4ad2 100644 --- a/install/html/browserconfig.html +++ b/install/html/browserconfig.html @@ -7,13 +7,11 @@ <script type="text/javascript"> (function() { var styles = [ - '../ui/jquery-ui.css', - '../ui/ipa.css', - 'ipa_error.css' + '../ui/css/patternfly.css', + '../ui/css/ipa.css' ]; var scripts = [ '../ui/js/libs/jquery.js', - '../ui/js/libs/jquery-ui.js', 'krb.js', 'ffconfig.js', 'ffconfig_page.js' @@ -26,39 +24,42 @@ <body class="info-page"> - <div class="container_1"> - - <div class="header-logo"> - <img src="../ui/images/ipa-logo.png" /><img src="../ui/images/ipa-banner.png" /> - </div> + <nav class="navbar navbar-default navbar-pf" role="navigation"> + <div class="navbar-header"> + <a class="brand" href="../ui/index.html"><img src="../ui/images/header-logo.png" alt="FreeIPA"></a> + </div> + </nav> - <div class="textblockkrb browser-config"> + <div class="container-fluid"> + <div class="row"> + <div class="col-sm-12"> + <div class="browser-config"> <h1>Firefox configuration</h1> - <div id="wrongbrowser" style="display:none"> + <div id="wrongbrowser" style="display:none" class="step"> <h2>Wrong Browser!</h2> <p> - <a href="ssbrowser.html" id="notfirefox-link">Proceed to configuration for other browsers</a> + <a href="ssbrowser.html" id="notfirefox-link" class="btn btn-default" >Proceed to configuration for other browsers</a> </p> <p> You are not using Firefox. Please use configuration page for other browsers. </p> </div> - <div id="step1"> + <div id="step1" class="step"> <h2>Step 1</h2> <p> - <a href="ca.crt" id="ca-link">Import Certificate Authority certificate</a> + <a href="ca.crt" id="ca-link" class="btn btn-default">Import Certificate Authority certificate</a> </p> <p> Make sure you select <b>all three</b> checkboxes. </p> </div> - <div id="step2a" style="display:none"> + <div id="step2a" style="display:none" class="step"> <h2>Step 2a</h2> <p> - <a href="ssbrowser.html#oldfirefox" id="oldfirefox-link">Proceed to configuration page for older versions of Firefox</a> + <a href="ssbrowser.html#oldfirefox" id="oldfirefox-link" class="btn btn-default">Proceed to configuration page for older versions of Firefox</a> </p> <!--<p id="older-compatible"> Your version of Firefox can be configured by an older method. You don't have to use the Kerberos Configuration extension. @@ -68,38 +69,40 @@ <p> </div> - <div id="step2"> + <div id="step2" class="step"> <h2>Step 2</h2> <div id="ext-installed"> <p> - <a href="kerberosauth.xpi" id="reinstall-link">Re-install extension</a> + <a href="kerberosauth.xpi" id="reinstall-link" class="btn btn-default">Re-install extension</a> </p> <p> Extension installed. You can proceed to Step 3. </p> </div> <div id="ext-missing"> - <p><a href="kerberosauth.xpi" id="install-link">Install Kerberos Configuration Firefox extension</a></p> + <p><a href="kerberosauth.xpi" id="install-link" class="btn btn-default">Install Kerberos Configuration Firefox extension</a></p> <p>Kerberos Configuration extension is required for Step 3</p> </div> </div> - <div id="step3"> + <div id="step3" class="step"> <h2>Step 3</h2> - <p><a href="#configure-browser" id="configure-link">Configure browser</a></p> + <p><a href="#configure-browser" id="configure-link" class="btn btn-default">Configure browser</a></p> <p id="config-success" style="display:none">Browser successfully configured</p> <p id="config-aborted" style="display:none">Configuration aborted</p> <p id="config-noext" style="display:none">Configuration was not successful, extension isn't installed or is disabled. Please proceed to step 2.</p> <p id="config-error" style="display:none">Configuration was not successful, unknown error uccured.</p> </div> - <div id="step4"> + <div id="step4" class="step"> <h2>Step 4</h2> - <p><a href="../ui/index.html" id="return-link">Return to Web UI</a></p> + <p><a href="../ui/index.html" id="return-link" class="btn btn-default">Return to Web UI</a></p> </div> </div> </div> + </div> + </div> </body> diff --git a/install/html/ffconfig.js b/install/html/ffconfig.js index 3c9f34c77..ecb1a635f 100644 --- a/install/html/ffconfig.js +++ b/install/html/ffconfig.js @@ -111,6 +111,36 @@ IPA.browser_config = { var element = self.get_data_element(); var ext_installed = element.getAttribute('answer') === 'true'; return ext_installed; - } + }, + + get_browser: function() { + + var ua = window.navigator.userAgent.toLowerCase(); + + var match = (/(chrome)[ \/]([\w.]+)/.exec(ua)) || + (/(webkit)[ \/]([\w.]+)/.exec(ua)) || + (/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(ua)) || + (/(msie) ([\w.]+)/.exec(ua)) || + ua.indexOf("compatible") < 0 && (/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) || + []; + var matched = { + browser: match[ 1 ] || "", + version: match[ 2 ] || "0" + }; + var browser = {}; + + if (matched.browser) { + browser[matched.browser] = true; + browser.version = matched.version; + } + + // Chrome is Webkit, but Webkit is also Safari. + if (browser.chrome) { + browser.webkit = true; + } else if ( browser.webkit ) { + browser.safari = true; + } + return browser; + } };
\ No newline at end of file diff --git a/install/html/ffconfig_page.js b/install/html/ffconfig_page.js index 1c8386c5a..4e59db0aa 100644 --- a/install/html/ffconfig_page.js +++ b/install/html/ffconfig_page.js @@ -22,13 +22,9 @@ var set_enabled = function(steps, enabled) { - var method; - - if (enabled) method = function(el) { el.removeClass('ui-state-disabled'); }; - else method = function(el) { el.addClass('ui-state-disabled'); }; - for (var i=0; i<steps.length; i++) { - method($(steps[i])); + $(steps[i]).toggleClass('disabled', !enabled); + $(steps[i]+" .btn").toggleClass('disabled', !enabled); } }; @@ -46,7 +42,7 @@ var install = function(event) { - window.location = $(event.target).parent().attr('href'); + window.location = $(event.target).attr('href'); check_until_installed(); return false; }; @@ -87,10 +83,9 @@ var check_version = function() { - var firefox = $.browser.mozilla === true; - var version = $.browser.version; + var browser = IPA.browser_config.get_browser(); - if (!firefox) { + if (!browser.mozilla) { $('#wrongbrowser').show(); set_enabled(['#step1', '#step2', '#step3'], false); } else { @@ -98,7 +93,7 @@ // the extension is compatible with version 3.6, 10 and later // FF 4-9 are not compatible because there is an error in loading // resource from chrome.manifest - if (compare_version(version, '15') === -1) { + if (compare_version(browser.version, '15') === -1) { $('#step2a').show(); set_enabled(['#step2', '#step3'], false); }// else if (compare_version(version, '15') === -1) { @@ -131,17 +126,19 @@ return 0; }; - $('#install-link').click(install); - $('#reinstall-link').click(install); - $('#configure-link').click(configure); - - $('#notfirefox-link').button(); - $('#ca-link').button(); - $('#oldfirefox-link').button(); - $('#reinstall-link').button(); - $('#install-link').button(); - $('#configure-link').button(); - $('#return-link').button(); + var button_handler = function(handler) { + return function(e) { + if ($(this).hasClass('disabled')) { + e.preventDefault(); + return false; + } + return handler.call(this, e); + }; + }; + + $('#install-link').click(button_handler(install)); + $('#reinstall-link').click(button_handler(install)); + $('#configure-link').click(button_handler(configure)); check_version(); show_installed(IPA.browser_config.extension_installed()); diff --git a/install/html/ssbrowser.html b/install/html/ssbrowser.html index 896cabcec..d90103228 100644 --- a/install/html/ssbrowser.html +++ b/install/html/ssbrowser.html @@ -11,7 +11,8 @@ var domain = '.' + (IPA_DOMAIN || 'example.com'); $('.example-domain').text(domain); - if ($.browser.mozilla) { + var browser = IPA.browser_config.get_browser(); + if (browser.mozilla) { var ff_config = $("#configurefirefox"); var obj = $('<object/>', { type: 'text/html', @@ -25,13 +26,13 @@ } var styles = [ - '../ui/jquery-ui.css', - '../ui/ipa.css', - 'ipa_error.css' + '../ui/css/patternfly.css', + '../ui/css/ipa.css' ]; var scripts = [ '../ui/js/libs/jquery.js', - 'krb.js' + 'krb.js', + 'ffconfig.js' ]; ipa_loader.scripts(scripts, loaded); ipa_loader.styles(styles); @@ -42,59 +43,84 @@ <body class="info-page"> - <div class="container_1 ssbrowser"> - <div class="header-logo"> - <img src="../ui/images/ipa-logo.png" /><img src="../ui/images/ipa-banner.png" /> - </div> - <div class="textblockkrb"> - <h1>Browser Kerberos Setup</h1> - <img alt="Internet Explorer" src="../ui/images/ie-icon.png"><h2>Internet Explorer Configuration</h2> - <p>Once you are able to log into the workstation with your kerberos key you are now able to use that ticket in Internet Explorer. </p> + <nav class="navbar navbar-default navbar-pf" role="navigation"> + <div class="navbar-header"> + <a class="brand" href="../ui/index.html"><img src="../ui/images/header-logo.png" alt="FreeIPA"></a> + </div> + </nav> - <strong>Login to the Windows machine using an account of your Kerberos realm (administrative domain)</strong><br> - <strong>In Internet Explorer, click Tools, and then click Internet Options.</strong> - <br> - <ul> - <li> 1. Click the Security tab </li> - <li> 2. Click Local intranet </li> - <li> 3. Click Sites </li> - <li> 4. Click Advanced </li> - <li> 5. Add your domain to the list </li> - <br> - <li> 1. Click the Security tab </li> - <li> 2. Click Local intranet </li> - <li> 3. Click Custom Level </li> - <li> 4. Select Automatic logon only in Intranet zone </li> - <br> - <li> Visit a kerberized web site using IE (You must use the fully-qualified Domain Name in the URL)</li> - <li><strong> You are all set. </strong></li> - </ul> + <div class="container-fluid"> + <div class="row"> + <div class="col-sm-12"> + <div class="ssbrowser"> + <h1>Browser Kerberos Setup</h1> + <h2><img alt="Internet Explorer" src="../ui/images/ie-icon.png">Internet Explorer Configuration</h2> + <p> + Once you are able to log into the workstation with your kerberos key you are now able to use that ticket in Internet Explorer. + </p> + <p> + <strong>Login to the Windows machine using an account of your Kerberos realm (administrative domain)</strong> + </p> + <p> + <strong>In Internet Explorer, click Tools, and then click Internet Options.</strong> + </p> + <div> + <ol> + <li>Click the Security tab</li> + <li>Click Local intranet</li> + <li>Click Sites </li> + <li>Click Advanced </li> + <li>Add your domain to the list</li> + </ol> + <ol> + <li>Click the Security tab</li> + <li>Click Local intranet</li> + <li>Click Custom Level</li> + <li>Select Automatic logon only in Intranet zone</li> + </ol> - <br> + <ol> + <li> Visit a kerberized web site using IE (You must use the fully-qualified Domain Name in the URL)</li> + <li><strong> You are all set.</strong></li> + </ol> + </div> - <img alt="Firefox" src="../ui/images/firefox-icon.png"><h2>Firefox Configuration</h2> + <h2><img alt="Firefox" src="../ui/images/firefox-icon.png">Firefox Configuration</h2> - <p>You can configure Firefox to use Kerberos for Single Sign-on. The following instructions will guide you in configuring your web browser <br> - to send your Kerberos credentials to the appropriate Key Distribution Center which enables Single Sign-on. </p> + <p> + You can configure Firefox to use Kerberos for Single Sign-on. The following instructions will guide you in configuring your web browser to send your Kerberos credentials to the appropriate Key Distribution Center which enables Single Sign-on. + </p> - <ul><li> 1. In the address bar of Firefox, type <tt>about:config</tt> to display the list of current configuration options.</li> - <li> 2. In the Filter field, type <tt>negotiate</tt> to restrict the list of options. </li> - <li> 3. Double-click the <tt>network.negotiate-auth.trusted-uris</tt> entry to display the Enter string value dialog box. </li> - <li> 4. Enter the name of the domain against which you want to authenticate, for example, <tt class="example-domain">.example.com.</tt> </li> - <br> - <li><strong> You are all set. </strong></li> - </ul> + <ol> + <li> + In the address bar of Firefox, type <code>about:config</code> to display the list of current configuration options. + </li> + <li> + In the Filter field, type <code>negotiate</code> to restrict the list of options. + </li> + <li> + Double-click the <code>network.negotiate-auth.trusted-uris</code> entry to display the Enter string value dialog box. + </li> + <li> + Enter the name of the domain against which you want to authenticate, for example, <code class="example-domain">.example.com.</code> + </li> + <li><strong> You are all set. </strong></li> + </ol> - <h3><a name="oldfirefox"></a> Automatic Configuration of older versions</h3> - <p>You can configure older versions of Firefox (up to version 14) using signed code. Use <a href="browserconfig.html">Firefox configuration page</a> for newer versions.</p> - <ul> - <li>1. Import <a href="ca.crt">CA certificate</a>. Make sure you checked all three checkboxes.</li> - <li>2. Click on "Configure Browser" button below.</li> - <li id="configurefirefox" style="display:none"></li> - </ul> - </div> + <h3>Automatic Configuration of older versions</h3> + <p>You can configure older versions of Firefox (up to version 14) using signed code. Use <a href="browserconfig.html">Firefox configuration page</a> for newer versions.</p> + <ol> + <li>Import <a href="ca.crt">CA certificate</a>. Make sure you checked all three checkboxes.</li> + <li> + Click on "Configure Browser" button below. + <div id="configurefirefox" style="display:none"></div> + </li> + </ol> - </div> + </div> + </div> + </div> + </div> </body> diff --git a/install/html/unauthorized.html b/install/html/unauthorized.html index 5c5ed7e98..0b4414f55 100644 --- a/install/html/unauthorized.html +++ b/install/html/unauthorized.html @@ -7,8 +7,8 @@ <script type="text/javascript"> (function() { var styles = [ - '../ui/ipa.css', - 'ipa_error.css' + '../ui/css/patternfly.css', + '../ui/css/ipa.css' ]; ipa_loader.styles(styles); })(); @@ -17,30 +17,32 @@ <body class="info-page"> - <div class="container_1"> + <nav class="navbar navbar-default navbar-pf" role="navigation"> + <div class="navbar-header"> + <a class="brand" href="../ui/index.html"><img src="../ui/images/header-logo.png" alt="FreeIPA"></a> + </div> + </nav> - <div class="header-logo"> - <img src="../ui/images/ipa-logo.png" /><img src="../ui/images/ipa-banner.png" /> - </div> + <div class="container-fluid"> + <div class="row"> + <div class="col-sm-12"> - <div class="textblockkrb"> - <h1>Unable to verify your Kerberos credentials</h1> - <p> - Please make sure that you have valid Kerberos tickets (obtainable via <strong>kinit</strong>), - and that you have configured your browser correctly. - </p> + <h1>Unable to verify your Kerberos credentials</h1> + <p> + Please make sure that you have valid Kerberos tickets (obtainable via <strong>kinit</strong>), and that you have configured your browser correctly. + </p> - <h2> Browser configuration</h2> + <h2>Browser configuration</h2> - <div id="first-time"> - <p> - If this is your first time, please <strong>configure your browser</strong>. - Use <a href="browserconfig.html">Firefox configuration page</a> for Firefox - or <a href="ssbrowser.html">manual configuration page</a> for other browsers. - </p> - </div> + <div id="first-time"> + <p> + If this is your first time, please <strong>configure your browser</strong>. + Use <a href="browserconfig.html">Firefox configuration page</a> for Firefox + or <a href="ssbrowser.html">manual configuration page</a> for other browsers. + </p> </div> - + </div> + </div> </div> </body> diff --git a/install/ui/ipa.css b/install/ui/ipa.css index 835ec1cc6..28e9ab0f3 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -1069,87 +1069,6 @@ table.scrollable tbody { display: inline-block; } -/* Info and simple pages (not main app) */ - -body.info-page { - background: url(images/static-background.png) repeat-x scroll left top #EDEDED; -} - -.info-page p { - margin: 0.5em 0em 1em 0em; -} - -.info-page h1, .info-page h2, .info-page h3 { - margin-left: 0px; - font-weight: normal; - color: #555555; -} - -.info-page h1 { - font-size: 2em; -} - -.info-page h2 { - margin-top: 2em; -} - -.info-page .container_1 { - margin-left: auto; - margin-right: auto; - width: 960px; - background: url(images/centered-background.png) no-repeat scroll 0 7em transparent; - min-height: 40em; -} - -.info-page .textblock { - text-align: center; - margin-top: 6em; - font-size: 1.1em; -} - -.info-page .textblockkrb { - text-align: left; - margin-top: 5em; - font-size: 1.1em; - padding-left: 3em; - padding-right: 3em; -} - -.info-page .textblockkrb ul li { - list-style-type: none; - padding: .15em; -} - -.required-indicator { - color: #1d85d9; - font-weight: bold; - font-size: 125%; -} - -.section-cell-label .required-indicator { - float: right; - margin-right: -10px; -} - -.dialog-section .section-cell-label .required-indicator { - margin-right: 0px; -} - -/* Browser config page */ - - -.info-page .browser-config h1, -.info-page .browser-config h2, -.info-page .browser-config h3, -.info-page .browser-config.textblockkrb { - text-align: center; -} - -.browser-config h2 { - margin-left: 0em; - margin-top: 2em; - -} /* ---- HBAC Test ---- */ @@ -1256,7 +1175,6 @@ div.facet[data-name=run_test][data-entity=hbactest] .hbac-test-content { float: right; } - /* ---- DNS ---- */ .dnstype-table div[name=position] { diff --git a/install/ui/less/config-pages.less b/install/ui/less/config-pages.less new file mode 100644 index 000000000..d3d2dc520 --- /dev/null +++ b/install/ui/less/config-pages.less @@ -0,0 +1,26 @@ +// +// For config pages in /install/html/ and /install/migration/ +// + +.info-page .navbar-header { + line-height: 40px; +} + +.browser-config { + + h2 { + margin-top: 1.5em; + } + + .disabled { + color: #969696; + } +} + +.ssbrowser { + h2 > img { + height: 22px; + vertical-align: bottom; + margin-right: 0.5em; + } +}
\ No newline at end of file diff --git a/install/ui/less/ipa.less b/install/ui/less/ipa.less index 9d7497fd4..e01f2bc0e 100644 --- a/install/ui/less/ipa.less +++ b/install/ui/less/ipa.less @@ -11,3 +11,4 @@ @import "widgets"; @import "plugins/otp"; @import "login.less"; +@import "config-pages.less"; |