Replace tab based design with a scrollable design

This commit is contained in:
Morris Jobke 2016-06-30 16:41:12 +02:00
parent 1abff7050e
commit 96708c6562
No known key found for this signature in database
GPG Key ID: 9CE5ED29E7FCD38A
3 changed files with 115 additions and 41 deletions

View File

@ -1,11 +1,30 @@
#user-saml input[type="text"],textarea {
max-width: 600px;
width: 100%;
}
#user-saml input.required {
background-color: lightgoldenrodyellow;
}
#user-saml input[type="checkbox"] {
vertical-align:middle;
}
#user-saml h4 {
font-size: 14px;
font-weight: 300;
margin: 12px 0;
}
#user-saml-settings > div {
margin-bottom: 10px;
}
.indent {
padding-left: 14px;
}
#user-saml-settings .toggle {
clear: both;
padding: 7px 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .5;
}

View File

@ -6,7 +6,6 @@ function setSAMLConfigValue(category, setting, value) {
$(function() {
// Enable tabs
$('#user-saml-settings').tabs();
$('input:checkbox[value="1"]').attr('checked', true);
$('#user-saml-sp input[type="text"], #user-saml-sp textarea').change(function(e) {
@ -70,4 +69,36 @@ $(function() {
setSAMLConfigValue('security', key, $(this).val());
});
});
$('#user-saml-settings .toggle').on('click', function() {
var el = $(this),
nextSibling = el.parent().next(),
parentSettingId = el.closest('div').attr('id'),
text = '';
switch(parentSettingId) {
case 'user-saml-security':
if (nextSibling.hasClass('hidden')) {
text = 'Hide security settings ...';
} else {
text = 'Show security settings ...';
}
break;
case 'user-saml-idp':
if (nextSibling.hasClass('hidden')) {
text = 'Hide optional Identity Provider settings ...';
} else {
text = 'Show optional Identity Provider settings ...';
}
break;
case 'user-saml-sp':
if (nextSibling.hasClass('hidden')) {
text = 'Hide Service Provider settings ...';
} else {
text = 'Show Service Provider settings ...';
}
break;
}
el.html(t('user_saml', text));
nextSibling.toggleClass('hidden');
});
});

View File

@ -9,51 +9,75 @@ style('user_saml', 'admin');
<div id="user-saml-save-indicator" class="msg success inlineblock" style="display: none;">Saved</div>
<div id="user-saml-settings">
<ul>
<li><a href="#user-saml-sp"><?php p($l->t('Service Provider Data')) ?></a></li>
<li><a href="#user-saml-idp"><?php p($l->t('Identity Provider Data')) ?></a></li>
<li><a href="#user-saml-security"><?php p($l->t('Security settings')) ?></a></li>
<li><a href="#user-saml-general"><?php p($l->t('General')) ?></a></li>
</ul>
<div id="user-saml-sp">
<p><?php print_unescaped($l->t('If your Service Provider should use certificates you can optionally specify them here.')) ?></p>
<?php foreach($_['sp'] as $key => $text): ?>
<textarea name="<?php p($key) ?>" placeholder="<?php p($text) ?>"><?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'sp-'.$key, '')) ?></textarea>
<?php endforeach; ?>
</div>
<div id="user-saml-idp">
<p><?php print_unescaped($l->t('Configure your IdP settings here, all yellow input fields are required, others optional.')) ?></p>
<input name="entityId" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'idp-entityId', '')) ?>" type="text" class="required" placeholder="<?php p($l->t('Identifier of the IdP entity (must be a URI)')) ?>"/>
<input name="singleSignOnService.url" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'idp-singleSignOnService.url', '')) ?>" type="text" class="required" placeholder="<?php p($l->t('URL Target of the IdP where the SP will send the Authentication Request Message')) ?>"/>
<input name="singleLogoutService.url" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'idp-singleLogoutService.url', '')) ?>" type="text" placeholder="<?php p($l->t('URL Location of the IdP where the SP will send the SLO Request')) ?>"/>
<textarea name="x509cert" placeholder="<?php p($l->t('Public X.509 certificate of the IdP')) ?>"><?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'idp-x509cert', '')) ?></textarea>
</div>
<div id="user-saml-security">
<p><?php print_unescaped($l->t('For increased security we recommend enabling the following settings if supported by your environment.')) ?></p>
<h3><?php p($l->t('Signatures and encryption offered')) ?></h3>
<?php foreach($_['security-offer'] as $key => $text): ?>
<input type="checkbox" id="user-saml-<?php p($key)?>" name="<?php p($key)?>" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'security-'.$key, '0')) ?>">
<label for="user-saml-<?php p($key)?>"><?php p($text) ?></label><br/>
<?php endforeach; ?>
<h3><?php p($l->t('Signatures and encryption required')) ?></h3>
<?php foreach($_['security-required'] as $key => $text): ?>
<input type="checkbox" id="user-saml-<?php p($key)?>" name="<?php p($key)?>" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'security-'.$key, '0')) ?>">
<label for="user-saml-<?php p($key)?>"><?php p($text) ?></label><br/>
<?php endforeach; ?>
</div>
<div id="user-saml-general">
<h3><?php p($l->t('General')) ?></h3>
<?php foreach($_['general'] as $key => $attribute): ?>
<?php if($attribute['type'] === 'checkbox'): ?>
<p>
<input type="checkbox" id="user-saml-general-<?php p($key)?>" name="<?php p($key)?>" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'general-'.$key, '0')) ?>">
<label for="user-saml-general-<?php p($key)?>"><?php p($attribute['text']) ?></label><br/>
</p>
<?php elseif($attribute['type'] === 'line'): ?>
<p>
<input name="<?php p($key) ?>" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'general-'.$key, '')) ?>" type="text" <?php if(isset($attribute['required']) && $attribute['required'] === true): ?>class="required"<?php endif;?> placeholder="<?php p($attribute['text']) ?>"/>
</p>
<?php endif; ?>
<?php endforeach; ?>
<!-- FIXME: Add "Disable timeout from SAML" switch (checked by default)-->
</div>
<div id="user-saml-sp">
<h3><?php p($l->t('Service Provider Data')) ?></h3>
<p>
<?php print_unescaped($l->t('If your Service Provider should use certificates you can optionally specify them here.')) ?>
<span class="toggle"><?php p($l->t('Show Service Provider settings ...')) ?></span>
</p>
<div class="hidden">
<?php foreach($_['sp'] as $key => $text): ?>
<p>
<textarea name="<?php p($key) ?>" placeholder="<?php p($text) ?>"><?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'sp-'.$key, '')) ?></textarea>
</p>
<?php endforeach; ?>
</div>
</div>
<div id="user-saml-idp">
<h3><?php p($l->t('Identity Provider Data')) ?></h3>
<p>
<?php print_unescaped($l->t('Configure your IdP settings here.')) ?>
</p>
<p><input name="entityId" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'idp-entityId', '')) ?>" type="text" class="required" placeholder="<?php p($l->t('Identifier of the IdP entity (must be a URI)')) ?>"/></p>
<p><input name="singleSignOnService.url" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'idp-singleSignOnService.url', '')) ?>" type="text" class="required" placeholder="<?php p($l->t('URL Target of the IdP where the SP will send the Authentication Request Message')) ?>"/></p>
<p><span class="toggle"><?php p($l->t('Show optional Identity Provider settings ...')) ?></span></p>
<div class="hidden">
<p><input name="singleLogoutService.url" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'idp-singleLogoutService.url', '')) ?>" type="text" placeholder="<?php p($l->t('URL Location of the IdP where the SP will send the SLO Request')) ?>"/></p>
<p><textarea name="x509cert" placeholder="<?php p($l->t('Public X.509 certificate of the IdP')) ?>"><?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'idp-x509cert', '')) ?></textarea></p>
</div>
</div>
<div id="user-saml-security">
<h3><?php p($l->t('Security settings')) ?></h3>
<p>
<?php print_unescaped($l->t('For increased security we recommend enabling the following settings if supported by your environment.')) ?>
<span class="toggle"><?php p($l->t('Show security settings ...')) ?></span>
</p>
<div class="indent hidden">
<h4><?php p($l->t('Signatures and encryption offered')) ?></h4>
<?php foreach($_['security-offer'] as $key => $text): ?>
<p>
<input type="checkbox" id="user-saml-<?php p($key)?>" name="<?php p($key)?>" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'security-'.$key, '0')) ?>" class="checkbox">
<label for="user-saml-<?php p($key)?>"><?php p($text) ?></label><br/>
</p>
<?php endforeach; ?>
<h4><?php p($l->t('Signatures and encryption required')) ?></h4>
<?php foreach($_['security-required'] as $key => $text): ?>
<p>
<input type="checkbox" id="user-saml-<?php p($key)?>" name="<?php p($key)?>" value="<?php p(\OC::$server->getConfig()->getAppValue('user_saml', 'security-'.$key, '0')) ?>" class="checkbox">
<label for="user-saml-<?php p($key)?>"><?php p($text) ?></label>
</p>
<?php endforeach; ?>
</div>
</div>
<a href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('user_saml.SAML.getMetadata')) ?>" class="button"><?php p($l->t('Download metadata XML')) ?></a>
<!-- FIXME: Add test settings -->