FREEI-2880 SCIM token masking in directory add/edit form

functions.inc/auth/modules/Scim.php

@@ -90,15 +90,20 @@ public static function getConfig($userman, $freepbx, $config) {
 				'title'		=> _("SCIM Token"),
 				'type' 		=> 'raw',
 				'value'		=> sprintf(
-					'<textarea id="%1$s-token" class="form-control" name="%1$s-token" rows="2" readonly></textarea>
+					'<input type="password" id="%1$s-token" class="form-control" name="%1$s-token" readonly autocomplete="off" spellcheck="false" />
 					<div class="scim-token-actions" style="margin-top: 8px;">
 						<button class="btn btn-warning" type="button" id="%1$s-rotate-token"><i class="fa fa-refresh"></i> %2$s</button>
+						<button class="btn btn-default" type="button" id="%1$s-copy-token"><i class="fa fa-clipboard"></i> %3$s</button>
+						<button class="btn btn-default" type="button" id="%1$s-toggle-token" data-show-label="%4$s" data-hide-label="%5$s"><i class="fa fa-eye"></i> <span class="scim-toggle-label">%4$s</span></button>
 					</div>
 					<div id="%1$s-token-message" class="alert alert-info hidden" style="margin-top: 10px;"></div>',
 					$typeauth,
-					_("Refresh Token")
+					_("Refresh Token"),
+					_("Copy Token"),
+					_("Show Token"),
+					_("Hide Token")
 				),
-				'help'		=> _("Use this token for SCIM provisioning"),
+				'help'		=> _("Use this token for SCIM provisioning. The value is masked by default; use the Show/Hide and Copy buttons to view or copy it."),
 			),
 			array('type' => 'fieldset_init', 'legend' => _("Operational Settings")),
 			array(

views/directories.php

@@ -464,6 +464,78 @@ function rotateScimToken() {
 		rotateScimToken();
 	});
 
+	function copyScimTokenFallback(token) {
+		var $field = $("#scim-token");
+		if (!$field.length) {
+			return false;
+		}
+		var originalType = $field.attr("type");
+		$field.attr("type", "text");
+		var node = $field[0];
+		try {
+			node.focus();
+			node.select();
+			if (typeof node.setSelectionRange === "function") {
+				node.setSelectionRange(0, token.length);
+			}
+		} catch (e) {}
+		var copied = false;
+		try {
+			copied = document.execCommand("copy");
+		} catch (e) {
+			copied = false;
+		}
+		$field.attr("type", originalType);
+		try { node.blur(); } catch (e) {}
+		return copied;
+	}
+
+	$(document).on("click", "#scim-copy-token", function() {
+		var token = ($("#scim-token").val() || "").toString();
+		if (!token) {
+			showScimMessage("<?php echo _('No SCIM token available to copy.'); ?>", "danger");
+			return;
+		}
+		if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+			navigator.clipboard.writeText(token).then(function() {
+				showScimMessage("<?php echo _('SCIM token copied to clipboard.'); ?>", "success");
+			}).catch(function() {
+				if (copyScimTokenFallback(token)) {
+					showScimMessage("<?php echo _('SCIM token copied to clipboard.'); ?>", "success");
+				} else {
+					showScimMessage("<?php echo _('Failed to copy SCIM token. Please copy it manually.'); ?>", "danger");
+				}
+			});
+			return;
+		}
+		if (copyScimTokenFallback(token)) {
+			showScimMessage("<?php echo _('SCIM token copied to clipboard.'); ?>", "success");
+		} else {
+			showScimMessage("<?php echo _('Failed to copy SCIM token. Please copy it manually.'); ?>", "danger");
+		}
+	});
+
+	$(document).on("click", "#scim-toggle-token", function() {
+		var $btn = $(this);
+		var $field = $("#scim-token");
+		if (!$field.length) {
+			return;
+		}
+		var $label = $btn.find(".scim-toggle-label");
+		var $icon = $btn.find("i");
+		var showLabel = $btn.data("show-label");
+		var hideLabel = $btn.data("hide-label");
+		if ($field.attr("type") === "password") {
+			$field.attr("type", "text");
+			$label.text(hideLabel);
+			$icon.removeClass("fa-eye").addClass("fa-eye-slash");
+		} else {
+			$field.attr("type", "password");
+			$label.text(showLabel);
+			$icon.removeClass("fa-eye-slash").addClass("fa-eye");
+		}
+	});
+
 	function generateScimToken() {
 		var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 		var token = "";