initial work on new user management

4 files changed, 131 insertions, 431 deletions

diff --git a/admin/css/users.css b/admin/css/users.css
new file mode 100644
index 00000000000..521217df4f4
--- /dev/null
+++ b/admin/css/users.css
@@ -0,0 +1,5 @@
+form {display:inline}
+td.remove>img,td.select>input{display:none;cursor:pointer}
+td.select,td.remove{width:1em}
+tr:hover>td.remove>img{display:inline}
+li.selected{background-color:#ddd}
diff --git a/admin/js/users.js b/admin/js/users.js
index 5a99362726c..7e643fb60a2 100644
--- a/admin/js/users.js
+++ b/admin/js/users.js
@@ -1,340 +1,100 @@
 $(document).ready(function(){
-	// Vars we need
-	var uid = "";
-	var gid = "";
-	var togglepassword = "";
-	var togglegroup = "";
-
-	//#########################################################################
-	// Stuff I don't understand
-	//#########################################################################
-
-	function doToggleGroup( group ){
-		$("#changegroupgid").val(group);
-
-		// Serialize the data
-		var post = $( "#changegroupsform" ).serialize();
-		// Ajax foo
-		$.post( 'ajax/togglegroups.php', post, function(data){
-			if( data.status == "success" ){
-				var groups = [];
-				$("input[x-use='togglegroup']").each( function(index){
-					if( $(this).attr("checked")){
-						groups.push($(this).val());
-					}
-				});
-				if( groups.length == 0 ){
-					$("#changegroups").prev().html( ' ' );
-				}
-				else{
-					$("#changegroups").prev().html( groups.join(", "));
-				}
-			}
-			else{
-				printError( data.data.message );
+	$('select[multiple]').chosen();
+	
+	$('td.remove>img').live('click',function(event){
+		var uid=$(this).parent().parent().data('uid');
+		$.post(
+			OC.filePath('admin','ajax','removeuser.php'),
+			{username:uid},
+			function(result){
+			
 			}
-		});
-		return false;
-	}
-
-	function printError( message ){
-		$("#errormessage").text( message );
-		$("#errordialog").dialog( "open" );
-		return false;
-	}
-
-	//#########################################################################
-	// Functions for editing the dom after user manipulation
-	//#########################################################################
-
-	// Manipulating the page after crteating a user
-	function userCreated( username, groups ){
-		// We need at least a space for showing the div
-		if( groups == "" ){
-			groups = ' ';
-		}
-
-		// Add user to table
-		var newrow = '<tr x-uid="'+username+'"><td x-use="username"><div x-use="usernamediv">'+username+'</div></td>';
-		newrow = newrow+'<td x-use="usergroups"><div x-use="usergroupsdiv">'+groups+'</td>';
-		newrow = newrow+'<td><input type="submit" class="removeuserbutton" value="Remove" /></td></tr>';
-		$("#usertable").append( newrow  );
-
-		// Clear forms
-		$("input[x-use='createuserfield']").val( "" );
-		$("input[x-use='createusercheckbox']").attr( "checked", false );
-	}
-
-	function userRemoved( username ){
-		$( "tr[x-uid='"+username+"']" ).remove();
-	}
-
-	function groupCreated( groupname ){
-		var newrow = '<tr x-gid="'+groupname+'"><td>' + groupname + '</td>';
-		newrow = newrow + '<td><input type="submit" class="removeuserbutton" value="Remove" /></td></tr>';
-		$("#grouptable").append( newrow  );
-
-		// Delete form content
-		$("input[x-use='creategroupfield']").val( "" );
-
-		// Add group option to Create User and Edit User
-		var createuser = '<input x-use="createusercheckbox" x-gid="'+groupname+'" type="checkbox" name="groups[]" value="'+groupname+'" /> <span x-gid="'+groupname+'">'+groupname+'<br /></span>';
-		$("#createusergroups").append( createuser );
-		var changeuser = '<input x-use="togglegroup" x-gid="'+groupname+'" type="checkbox" name="groups[]" value="'+groupname+'" /> <span x-use="togglegroup" x-gid="'+groupname+'">'+groupname+'<br /></span>';
-		$("#changegroupsform").append( changeuser );
-	}
-
-	function groupRemoved( groupname ){
-		// Delete the options
-		$( "tr[x-gid='"+groupname+"']" ).remove();
-		$( "span[x-gid='"+groupname+"']" ).remove();
-		$( "input[x-gid='"+groupname+"']" ).remove();
-
-		// remove it from user list
-		$( "div[x-use='usergroupsdiv']" ).each(function(index){
-			var content = $(this).text();
-			var list = content.split( ", " );
-			var newlist = [];
-			for( var i = 0; i < list.length; i++ ){
-				var temp = list[i];
-				if( temp != groupname ){
-					newlist.push( temp );
-				}
+		);
+		$(this).parent().parent().remove();
+	});
+	
+	$('#newuser').submit(function(event){
+		event.preventDefault();
+		var username=$('#newusername').val();
+		var password=$('#newuserpassword').val();
+		var groups=$('#newusergroups').val();
+		$.post(
+			OC.filePath('admin','ajax','createuser.php'),
+			{
+				username:username,
+				password:password,
+				groups:groups,
+			},
+			function(result){
+				
 			}
-			var newstring = newlist.join( ", " );
-			$(this).html( newstring )
-		});
-
-	}
-
-	//#########################################################################
-	// Editing the users properties by clicking the cell
-	//#########################################################################
-
-	// Password (clicking on user name)
-	$("span[x-use='usernamediv']").live( "click", function(){
-		if( togglepassword == "" || $(this).parent().parent().attr("x-uid") != togglepassword ){
-			togglepassword = $(this).parent().parent().attr("x-uid");
-			// Set the username!
-			$("#changepassworduid").val(togglepassword);
-			$("#changepasswordpwd").val("");
-			$(this).parent().append( $('#changepassword') );
-			$('#changepassword').show();
-		}
-		else{
-			$('#changepassword').hide();
-			togglepassword = "";
+		);
+		var tr=$('#rightcontent tr').first().clone();
+		tr.attr('data-uid',username);
+		tr.find('td.name').text(username);
+		tr.find('td.groups').text(groups.join(', '));
+		$('#rightcontent tr').first().after(tr);
+		if(groups.indexOf($('#leftcontent li.selected').text().trim())!=-1){
+			tr.find('td.select input').attr('checked','checked');
 		}
 	});
-
-	$("#changepasswordbutton").click( function(){
-		// Serialize the data
-		var post = $( "#changepasswordform" ).serialize();
-		// Ajax foo
-		$.post( 'ajax/changepassword.php', post, function(data){
-			if( data.status == "success" ){
-				togglepassword = "";
-				$('#changepassword').hide();
-			}
-			else{
-				printError( data.data.message );
+	
+	$('#newgroup').submit(function(event){
+		event.preventDefault();
+		var name=$('#newgroupname').val();
+		$.post(
+			OC.filePath('admin','ajax','creategroup.php'),
+			{groupname:name},
+			function(result){
+			
 			}
-		});
-		return false;
+		);
+		$('#newusergroups').append('<option value="'+name+'">'+name+'</option>');
+		$('select[multiple]').trigger("liszt:updated");
+		var li=$('#leftcontent li').first().next().clone();
+		li.text(name);
+		$('#leftcontent li').first().after(li);
 	});
-
-	// Groups
-	$("div[x-use='usergroupsdiv']").live( "click", function(){
-		if( togglegroup == "" || $(this).parent().parent().attr("x-uid") != togglegroup){
-			togglegroup = $(this).parent().parent().attr("x-uid");
-			var groups = $(this).text();
-			groups = groups.split(", ");
-			$("input[x-use='togglegroup']").each( function(index){
-				var check = false;
-				// Group checked?
-				for( var i = 0; i < groups.length; i++ ){
-					if( $(this).val() == groups[i] ){
-						check = true;
-					}
-				}
-
-				// Check/uncheck
-				if( check ){
-					$(this).attr("checked","checked");
-				}
-				else{
-					$(this).removeAttr("checked");
-				}
-			});
-			$("#changegroupuid").val(togglegroup);
-			$(this).empty();
-			$(this).parent().append( $('#changegroups') );
-			$('#changegroups').show();
-		}
-		else{
-			var groups = [];
-			$("input[x-use='togglegroup']").each( function(index){
-				if( $(this).attr("checked")){
-					groups.push($(this).val());
-				}
-			});
-			if( groups.length == 0 ){
-				$("#changegroups").prev().html( '&nbsp;' );
-			}
-			else{
-				$("#changegroups").prev().html( groups.join(", "));
-			}
-			$('#changegroups').hide();
-			togglegroup = "";
-		}
+	
+	$('#leftcontent li').live('click',function(event){
+		$('#leftcontent li').removeClass('selected');
+		$(this).addClass('selected');
+		$('#rightcontent tr td.select input').show();
+		$('#rightcontent tr td.select input').removeAttr('checked');
+		var group=$(this).text().trim();
+		var rows=$('#rightcontent tr').filter(function(i,tr){
+			return ($(tr).children('td.groups').text().split(', ').indexOf(group)>-1);
+		});
+		rows.find('td.select input').attr('checked','checked');
 	});
-
-	$("span[x-use='togglegroup']").live( "click", function(){
-		if( $(this).prev().attr("checked")){
-			$(this).prev().removeAttr("checked")
-		}
-		else{
-			$(this).prev().attr("checked","checked")
+	$('#rightcontent tr td.select input').live('change',function(event){
+		var group=$('#leftcontent li.selected').text().trim();
+		var user=$(this).parent().parent().children('td.name').text().trim();
+		if(group=='admin' && user==OC.currentUser){
+			event.preventDefault();
+			$(this).attr('checked','checked');
+			return false;
 		}
-		doToggleGroup( $(this).attr("x-gid"));
-	});
-
-	$("input[x-use='togglegroup']").live( "click", function(){
-		doToggleGroup( $(this).attr("x-gid"));
-	});
-	//#########################################################################
-	// Clicking on buttons
-	//#########################################################################
-
-
-	// Create a new user
-	$( "#createuserbutton" )
-		.click(function(){
-			if(!$( "#createuserbutton" ).data('active')){
-				$( "#createuserbutton" ).data('active',true);
-				
-				// Create the post data
-				var post = $( "#createuserdata" ).serialize();
-				
-				// Ajax call
-				$.post( 'ajax/createuser.php', post, function(data){
-					$( "#createuserbutton" ).data('active',false);
+		if(group){
+			$.post(
+				OC.filePath('admin','ajax','togglegroups.php'),
+				{
+					username:user,
+					group:group
+				},
+				function(result){
 					
-					// If it says "success" then we are happy
-					if( data.status == "success" ){
-						userCreated( data.data.username, data.data.groups );
-					}
-					else{
-						printError( data.data.message );
-					}
-				});
-			}
-			return false;
-		});
-
-	$( ".removeuserbutton" ).live( 'click', function() {
-			uid = $( this ).parent().parent().attr( 'x-uid' );
-			$("#deleteuserusername").html(uid);
-			$("#deleteusernamefield").val(uid);
-			$("#removeuserform").dialog( "open" );
-			return false;
-		});
-
-	$( "#creategroupbutton" )
-		.click(function(){
-			// Serialize the data
-			var post = $( "#creategroupdata" ).serialize();
-			// Ajax foo
-			$.post( 'ajax/creategroup.php', post, function(data){
-				if( data.status == "success" ){
-					groupCreated( data.data.groupname );
-				}
-				else{
-					printError( data.data.message );
 				}
-			});
-			return false;
-		});
-
-	$( ".removegroupbutton" ).live( 'click', function(){
-			gid = $( this ).parent().parent().attr( 'x-gid' );
-			$("#removegroupgroupname").html(gid);
-			$("#removegroupnamefield").val(gid);
-			$("#removegroupform").dialog( "open" );
-			return false;
-		});
-
-	//#########################################################################
-	// Dialogs
-	//#########################################################################
-
-	// Removing users
-	$( "#errordialog" ).dialog({
-		autoOpen: false,
-		modal: true,
-		buttons: {
-			OK: function() {
-				$( this ).dialog( "close" );
-			}
-		}
-	});
-
-	// Removing users
-	$( "#removeuserform" ).dialog({
-		autoOpen: false,
-		height: 300,
-		width: 350,
-		modal: true,
-		buttons: {
-			"Remove user": function() {
-				var post = $( "#removeuserdata" ).serialize();
-				$.post( 'ajax/removeuser.php', post, function(data){
-					if( data.status == "success" ){
-						userRemoved( uid );
-					}
-					else{
-						printError( data.data.message );
-					}
-				});
-				$( this ).dialog( "close" );
-			},
-			Cancel: function() {
-				$( this ).dialog( "close" );
-			}
-		},
-		close: function() {
-			true;
-		}
-	});
-
-
-	// Dialog for adding users
-	$( "#removegroupform" ).dialog({
-		autoOpen: false,
-		height: 300,
-		width: 350,
-		modal: true,
-		buttons: {
-			"Remove group": function(){
-				var post = $( "#removegroupdata" ).serialize();
-				$.post( 'ajax/removegroup.php', post, function(data){
-					if( data.status == "success" ){
-						groupRemoved( gid );
-					}
-					else{
-						printError( data.data.message );
-					}
-				});
-				$( this ).dialog( "close" );
-			},
-			Cancel: function() {
-				$( this ).dialog( "close" );
+			);
+			var groups=$(this).parent().parent().children('td.groups').text().trim().split(', ');
+			if(groups[0]=='') groups.pop();
+			var index=groups.indexOf(group);
+			if(index==-1){
+				groups.push(group);
+			}else{
+				groups.splice(index,1);
 			}
-		},
-		close: function(){
-			true;
+			$(this).parent().parent().children('td.groups').text(groups.join(', '));
 		}
 	});
-
-} );
-
+});
diff --git a/admin/templates/users.php b/admin/templates/users.php
index fbb0fe79f39..8e34c908fcd 100644
--- a/admin/templates/users.php
+++ b/admin/templates/users.php
@@ -1,107 +1,39 @@
-<fieldset>
-	<legend><?php echo $l->t( 'Users' ); ?></legend>
-	<table id="usertable">
-		<thead>
-			<tr>
-				<th><?php echo $l->t( 'Name' ); ?></th>
-				<th><?php echo $l->t( 'Groups' ); ?></th>
-				<th></th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr id="createuserform">
-				<form id="createuserdata">
-					<td>
-						<input x-use="createuserfield" type="text" name="username" placeholder="<?php echo $l->t( 'Name' ); ?>" />
-						<input x-use="createuserfield" type="password" name="password" placeholder="<?php echo $l->t( 'Password' ); ?>" />
-					</td>
-					<td id="createusergroups">
-						<?php foreach($_["groups"] as $i): ?>
-							<input id='newuser_group_<?php echo $i["name"]; ?>' x-use="createusercheckbox" x-gid="<?php echo $i["name"]; ?>" type="checkbox" name="groups[]" value="<?php echo $i["name"]; ?>" />
-							<span x-gid="<?php echo $i["name"]; ?>"><label for='newuser_group_<?php echo $i["name"]; ?>'><?php echo $i["name"]; ?></label></span>
-						<?php endforeach; ?>
-					</td>
-					<td>
-						<input type="submit" id="createuserbutton" value="<?php echo $l->t( 'Add user' ); ?>" />
-					</td>
-				</form>
-			</tr>
-			<?php foreach($_["users"] as $user): ?>
-				<tr x-uid="<?php echo $user["name"] ?>">
-					<td x-use="username"><span x-use="usernamediv"><?php echo $user["name"]; ?></span></td>
-					<td x-use="usergroups"><div x-use="usergroupsdiv"><?php if( $user["groups"] ){ echo $user["groups"]; }else{echo "&nbsp";} ?></div></td>
-					<td>
-						<?php if($user['name']!=OC_User::getUser()):?>
-							<input type="submit" class="removeuserbutton" value="<?php echo $l->t( 'Remove' ); ?>" />
-						<?php endif;?>
-					</td>
-				</tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table>
-</fieldset>
-
-<fieldset>
-	<legend><?php echo $l->t( 'Groups' ); ?></legend>
-	<table id="grouptable">
-		<tbody>
-			<form id="creategroupdata">
-				<tr>
-					<td><input x-use="creategroupfield" type="text" name="groupname" placeholder="New group" /></td>
-					<td><input type="submit" id="creategroupbutton" value="<?php echo $l->t( 'Create group' ); ?>" /></td>
-				</tr>
-			</form>
-			<?php foreach($_["groups"] as $group): ?>
-				<tr x-gid="<?php echo $group["name"]; ?>">
-					<td><?php echo $group["name"] ?></td>
-					<td>
-						<?php if( $group["name"] != "admin" ): ?>
-							<input type="submit" class="removegroupbutton" value="<?php echo $l->t( 'Remove' ); ?>" />
-						<?php else: ?>
-							&nbsp;
-						<?php endif; ?>
-					</td>
-				</tr>
-			<?php endforeach; ?>
-		</tbody>
-	</table>
-</fieldset>
-
-
-<span id="changegroups" style="display:none">
-	<form id="changegroupsform">
-		<input id="changegroupuid" type="hidden" name="username" value="" />
-		<input id="changegroupgid" type="hidden" name="group" value="" />
-		<?php foreach($_["groups"] as $i): ?>
-			<input x-use="togglegroup" x-gid="<?php echo $i["name"]; ?>" type="checkbox" name="groups[]" value="<?php echo $i["name"]; ?>" />
-			<span x-use="togglegroup" x-gid="<?php echo $i["name"]; ?>"><?php echo $i["name"]; ?></span>
-		<?php endforeach; ?>
-	</form>
-</span>
-
-<span id="changepassword" style="display:none">
-	<form id="changepasswordform">
-		<input id="changepassworduid" type="hidden" name="username" value="" />
-		<?php echo $l->t( 'Force new password:' ); ?>
-		<input id="changepasswordpwd" type="password" name="password" value="" />
-		<input type="submit" id="changepasswordbutton" value="<?php echo $l->t( 'Set' ); ?>" />
+<div id="controls">
+	<form id="newgroup">
+		<input id="newgroupname" placeholder="name"></input>
+		<input type="submit" value="create"></input>
 	</form>
-</span>
-
-<div id="removeuserform" title="Remove user">
-	<form id="removeuserdata">
-		<?php echo $l->t( 'Do you really want to delete user' ); ?> <span id="deleteuserusername">$user</span>?
-		<input id="deleteusernamefield" type="hidden" name="username" value="">
-	</form>
-</div>
-
-<div id="removegroupform" title="Remove Group">
-	<form id="removegroupdata">
-		<?php echo $l->t( 'Do you really want to delete group' ); ?> <span id="removegroupgroupname">$group</span>?
-		<input id="removegroupnamefield" type="hidden" name="groupname" value="">
+	<form id="newuser">
+		<input id="newusername" placeholder="username"></input>
+		<input type="password" id="newuserpassword" placeholder="password"></input>
+		<select id="newusergroups" data-placeholder="groups" title="groups" multiple="multiple">
+			<?php foreach($_["groups"] as $group): ?>
+				<option value="<?php echo $group['name'];?>"><?php echo $group['name'];?></option>
+			<?php endforeach;?>
+		</select>
+		<input type="submit" value="Create"></input>
 	</form>
 </div>
-
-<div id="errordialog" title="Error">
-	<span id="errormessage"></span>
+<ul id="leftcontent">
+	<?php foreach($_["groups"] as $group): ?>
+		<li data-gid="<?php echo $group["name"]; ?>">
+			<?php echo $group["name"] ?>
+		</li>
+	<?php endforeach; ?>
+</ul>
+<div id="rightcontent">
+	<table>
+		<?php foreach($_["users"] as $user): ?>
+			<tr data-uid="<?php echo $user["name"] ?>">
+				<td class="select"><input type="checkbox"></input></td>
+				<td class="name"><?php echo $user["name"]; ?></td>
+				<td class="groups"><?php if( $user["groups"] ){ echo $user["groups"]; }else{echo "&nbsp";} ?></td>
+				<td class="remove">
+					<?php if($user['name']!=OC_User::getUser()):?>
+						<img alt="Remove" title="Remove" class='svg' src='<?php echo image_path('core','actions/delete.svg') ?>'/>
+					<?php endif;?>
+				</td>
+			</tr>
+		<?php endforeach; ?>
+	</table>
 </div>
diff --git a/admin/users.php b/admin/users.php
index 30b9fa46d3c..4a83510cb72 100644
--- a/admin/users.php
+++ b/admin/users.php
@@ -28,8 +28,11 @@ if( !OC_User::isLoggedIn() || !OC_Group::inGroup( OC_User::getUser(), 'admin' ))
 }
 
 // We have some javascript foo!
-OC_Util::addScript( "admin", "users" );
-OC_App::setActiveNavigationEntry( "core_users" );
+OC_Util::addScript( 'admin', 'users' );
+OC_Util::addStyle( 'admin', 'users' );
+OC_Util::addScript( '3rdparty', 'chosen/chosen.jquery.min' );
+OC_Util::addStyle( '3rdparty', 'chosen' );
+OC_App::setActiveNavigationEntry( 'core_users' );
 
 $users = array();
 $groups = array();