Users list: copy to clipboard for IDs

Feature request by Francesco

src/styles/_user.sass

@@ -48,11 +48,11 @@
 		.button-login,
 		.button-submit
 			min-width: 200px
-			+button($color-primary, 999em, true)
+			+button($color-primary, 3px, true)
 
 		.button-register
 			min-width: 150px
-			+button($color-primary, 999em)
+			+button($color-primary, 3px)
 
 #settings
 	display: flex
@@ -133,7 +133,7 @@
 		clear: both
 		min-width: 200px
 		margin: 0 auto
-		+button($color-primary, 999em, true)
+		+button($color-primary, 3px, true)
 
 
 #settings-container
@@ -158,7 +158,7 @@
 
 		.settings-avatar
 			img
-				border-radius: 999em
+				border-radius: 3px
 			span
 				display: block
 				padding: 15px 0
@@ -175,17 +175,23 @@
 	#user-edit-header
 		.user-edit-name
 			font-size: 1.5em
-		.user-edit-username, .user-edit-email
+		.user-edit-username,
+		.user-edit-email,
+		.user-edit-id
 			color: $color-text-dark-secondary
+			padding: 3px 0
+
+			i
+				margin-right: 5px
 
 	#user-edit-form
 		padding: 10px 0
 
 		#submit_edit_user
-			+button($color-success, 999em, true)
+			+button($color-success, 3px, true)
 
 		#button-cancel
-			+button(#aaa, 999em)
+			+button(#aaa, 3px)
 			margin: 0 10px
 
 		#user-edit-notification

src/templates/users/edit_embed.jade

@@ -3,9 +3,25 @@
 #user-edit-container
 
 	#user-edit-header
-		.user-edit-name {{user.full_name}}
+		.user-edit-name(title="Full Name") {{user.full_name}}
-		.user-edit-username {{user.username}}
+		.user-edit-username(title="Username")
-		.user-edit-email {{user.email}}
+			i.pi-users
+			| {{user.username}}
+		.user-edit-email(title="E-mail")
+			i.pi-email
+			| {{user.email}}
+		.user-edit-id(title="User ID")
+			i.pi-vcard
+			| {{user._id}}  
+
+			a.copy-to-clipboard(
+				style="margin-left: auto",
+				name="Copy to Clipboard",
+				type="button",
+				href="javascript:void(0)",
+				data-clipboard-text="{{ user._id }}",
+				title="Copy ID to clipboard")
+				| (copy to clipboard)
 
 	form(
 		id="user-edit-form",
@@ -52,7 +68,7 @@
 
 		#user-edit-notification
 
-
+script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}")
 script(type="text/javascript").
 	$('#roles').select2();
 
@@ -73,6 +89,6 @@ script(type="text/javascript").
 		$('#user-container').html('')
 	});
 
-
+	new Clipboard('.copy-to-clipboard');
 
 | {% endblock %}