From 96708c65628851c784ad5829e1a673a32cfab1e6 Mon Sep 17 00:00:00 2001
From: Morris Jobke <hey@morrisjobke.de>
Date: Thu, 30 Jun 2016 16:41:12 +0200
Subject: [PATCH] Replace tab based design with a scrollable design

---
 css/admin.css       | 27 +++++++++++--
 js/admin.js         | 33 +++++++++++++++-
 templates/admin.php | 96 ++++++++++++++++++++++++++++-----------------
 3 files changed, 115 insertions(+), 41 deletions(-)

diff --git a/css/admin.css b/css/admin.css
index fe38d77..5c53798 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -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;
 }
\ No newline at end of file
diff --git a/js/admin.js b/js/admin.js
index d10d5bc..0e561fa 100644
--- a/js/admin.js
+++ b/js/admin.js
@@ -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');
+	});
 });
diff --git a/templates/admin.php b/templates/admin.php
index 2f751ae..d5282ba 100644
--- a/templates/admin.php
+++ b/templates/admin.php
@@ -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'): ?>
-					<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>
+						<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'): ?>
-					<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>
+						<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 -->