Skip to content

GitLab

S
SWITCHwayf
Commit 1feda93e authored by Geoffroy ARNOUD's avatar Geoffroy ARNOUD
Browse files
Options

Added select2 dropdown into header and default-settings page #K7

parent 66ebb341
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 497 additions and 388 deletions
lib/default-header.php
View file @ 1feda93e
......@@ -2,37 +2,48 @@
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo getLocalString('title') ?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title><?php echo getLocalString('title') ?></title>
<!-- <meta http-equiv="content-type" content="text/html; charset=utf-8"> -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Home Organisation, Discovery Service, WAYF, Shibboleth, Login, AAI">
<meta name="description" content="Choose your home organisation to authenticate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="<?php echo $_SERVER['SCRIPT_NAME'] ?>/styles.css" type="text/css">
<link rel="stylesheet" href="<?php echo $_SERVER['SCRIPT_NAME'] ?>/ImprovedDropDown.css" type="text/css">
<script type="text/javascript" src="<?php echo $javascriptURL ?>/jquery.js"></script>
<script type="text/javascript" src="<?php echo $javascriptURL ?>/improvedDropDown.js"></script>
<?php
if ($useSelect2) {
echo '<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />'.PHP_EOL;
echo '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>'.PHP_EOL;
echo '<script type="text/javascript" src="'.$javascriptURL .'/select2Functions.js"></script>'.PHP_EOL;
} elseif ($useImprovedDropDownList) {
echo '<link rel="stylesheet" href="'. $_SERVER['SCRIPT_NAME'] .'/ImprovedDropDown.css" type="text/css">'.PHP_EOL;
echo '<script type="text/javascript" src="'. $javascriptURL .'/improvedDropDown.js"></script>'.PHP_EOL;
}
?>
<script type="text/javascript">
<!--
// Prevent that WAYF is loaded in an IFRAME
function preventIframeEmbedding(){
if (top != self) {
top.location = self.location;
}
}
// Set focus to submit button or drop down list
function setFocus(){
// Skip this if we cannot access the form elements
if (
!document.IdPList ||
!document.IdPList ||
!document.IdPList.Select
){
return;
}
if (
document.IdPList.user_idp &&
document.IdPList.user_idp &&
document.IdPList.user_idp.selectedIndex == 0
){
// Set focus to select
......@@ -42,11 +53,11 @@
document.IdPList.Select.focus();
}
}
// Perform input validation on WAYF form
function checkForm(){
if(
document.IdPList.user_idp &&
document.IdPList.user_idp &&
document.IdPList.user_idp.selectedIndex == 0
){
alert(unescape('<?php echo getLocalString('make_selection', 'js') ?>'));
......@@ -55,18 +66,49 @@
return true;
}
}
// Init WAYF
function init(){
preventIframeEmbedding();
setFocus();
if (<?php echo ($useImprovedDropDownList) ? 'true' : 'false' ?>){
if (<?php echo ($useSelect2) ? 'true' : 'false' ?>){
$('.userIdPSelection').select2({
ajax: {
url: <?php echo "'".$_SERVER['REQUEST_URI']."api/idps'" ?>,
delay: 1000,
dataType: 'json',
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
},
error: function(jqxhr, status, exception) {
console.error('Exception:', exception);
<?php
if ($developmentMode) {
echo("alert('Exception:', exception);");
}
?>
}
},
placeholder: "<?php echo getLocalString('select_idp') ?>",
allowClear: true,
// templateResult: formatList,
// templateSelection: formatRepoSelection,
escapeMarkup: function (text) { return text; }
});
} else if (<?php echo ($useImprovedDropDownList) ? 'true' : 'false' ?>){
var searchText = '<?php echo getLocalString('search_idp', 'js') ?>';
$("#userIdPSelection:enabled option[value='-']").text(searchText);
// Convert select element into improved drop down list
$("#userIdPSelection:enabled").improveDropDown({
iconPath:'<?php echo $imageURL ?>/drop_icon.png',
......@@ -76,10 +118,10 @@
});
}
}
// Call init function when DOM is ready
$(document).ready(init);
-->
</script>
</head>
......@@ -89,26 +131,38 @@
<div id="container">
<div class="box">
<div id="header">
<?php if (!empty($logoURL)) { ?>
<?php if (!empty($logoURL)) {
?>
<a href="<?php echo sprintf($federationURL, $language) ?>"><img src="<?php echo $logoURL ?>" alt="Federation Logo" id="federationLogo"></a>
<?php } ?>
<?php if (!empty($organizationLogoURL)) { ?>
<?php
} ?>
<?php if (!empty($organizationLogoURL)) {
?>
<a href="<?php echo sprintf($organizationURL, $language) ?>"><img src="<?php echo $organizationLogoURL ?>" alt="Organization Logo" id="organisationLogo"></a>
<?php } ?>
<?php
} ?>
</div>
<div id="content">
<ul class="menu">
<?php if (!empty($federationURL) && getLocalString('about_federation') != '') { ?>
<?php if (!empty($federationURL) && getLocalString('about_federation') != '') {
?>
<li><a href="<?php echo sprintf($federationURL, $language) ?>"><?php echo getLocalString('about_federation'); ?></a></li>
<?php } ?>
<?php if (!empty($faqURL) && getLocalString('faq') != '') { ?>
<?php
} ?>
<?php if (!empty($faqURL) && getLocalString('faq') != '') {
?>
<li class="last"><a href="<?php echo sprintf($faqURL, $language) ?>"><?php echo getLocalString('faq') ?></a></li>
<?php } ?>
<?php if (!empty($helpURL) && getLocalString('help') != '') { ?>
<?php
} ?>
<?php if (!empty($helpURL) && getLocalString('help') != '') {
?>
<li class="last"><a href="<?php echo sprintf($helpURL, $language) ?>"><?php echo getLocalString('help') ?></a></li>
<?php } ?>
<?php if (!empty($privacyURL) && getLocalString('privacy') != '') { ?>
<?php
} ?>
<?php if (!empty($privacyURL) && getLocalString('privacy') != '') {
?>
<li class="last"><a href="<?php echo sprintf($privacyURL, $language) ?>"><?php echo getLocalString('privacy') ?></a></li>
<?php } ?>
<?php
} ?>
</ul>
<!-- Body: Start -->
lib/default-settings.php
View file @ 1feda93e
<?php // Copyright (c) 2019, SWITCH ?>
<!-- Identity Provider Selection: Start -->
<h1><?php echo getLocalString('permanent_select_header'); ?></h1>
<h1><?php echo getLocalString('permanent_select_header'); ?></h1>
<form id="IdPList" name="IdPList" method="post" onSubmit="return checkForm()" action="<?php echo $actionURL ?>">
<div id="userInputArea">
<p class="promptMessage"><?php echo getLocalString('permanent_cookie'); ?></p>
<p><?php echo getLocalString('select_idp'); ?></p>
<div style="text-align: center">
<select name="user_idp" id="userIdPSelection">
<option value="-" <?php echo $defaultSelected ?>><?php echo getLocalString('select_idp') ?> ...</option>
<?php printDropDownList($IDProviders, $selectedIDP) ?>
<select name="user_idp" id="userIdPSelection" class="userIdPSelection" tabindex="0">
<?php
// If we use select2, we don't want IDP to be in DOM, but to use AJAX instead
if (!$useSelect2) {
echo '<option value="-" '.$defaultSelected.'>'.getLocalString('select_idp').' ...</option>';
printDropDownList($IDProviders, $selectedIDP);
}
?>
</select>
<input type="submit" name="Select" accesskey="s" value="<?php echo getLocalString('save_button') ?>" >
</div>
<!-- Value permanent must be a number which is equivalent to the days the cookie should be valid -->
......
lib/templates.php
View file @ 1feda93e
This diff is collapsed.
www/js/select2Functions.js 0 → 100644
View file @ 1feda93e
/* Functions for handlng IDP select2 dropdown
* Author: RENATER
*
* Inspired from https://select2.org/data-sources/ajax
*/
/*
* Format for list items
*/
function formatList (repo) {
if (repo.loading) {
return repo.text;
}
console.log(repo);
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
/*
* Format for selected element
*/
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment