client side

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -156,6 +156,19 @@ const MetadataEditor = createClass({
 			});
 	},
 
+	handleDeleteAuthor : function(author){
+		if(!confirm('Are you sure you want to delete this author? They will lose all edit access to this brew.')) return;
+		request.put(`/api/${this.props.metadata.editId}/${author}`)
+			.send()
+			.end((err, res)=>{
+				if(err) {
+					this.props.reportError(err);
+				} else {
+					window.location.reload();
+				}
+			});
+	},
+
 	renderSystems : function(){
 		return _.map(SYSTEMS, (val)=>{
 			return <label key={val}>
@@ -194,16 +207,38 @@ const MetadataEditor = createClass({
 	},
 
 	renderAuthors : function(){
+		const authors = this.props.metadata.authors;
 		let text = 'None.';
-		if(this.props.metadata.authors && this.props.metadata.authors.length){
+		if(authors && authors.length){
-			text = this.props.metadata.authors.join(', ');
+			text = authors.join(', ');
 		}
-		return <div className='field authors'>
+		if(!this.props.isOwner || authors.length < 2) return (
-			<label>authors</label>
+			<div className='field authors'>
-			<div className='value'>
+				<label>authors</label>
-				{text}
+				<div className='value'>
+					{text}
+				</div>
 			</div>
-		</div>;
+		);
+		return (
+			<div className='field authors'>
+				<label>authors</label>
+				<ul className='list'>
+					{authors.map((author, i)=>(
+						<li className='tag' key={i}>{author}
+							{i>0 &&
+							<button
+								onClick={()=>this.handleDeleteAuthor(author)}
+								className='delete'
+								title={`Remove ${author} as an`}
+							>
+								<i className='fa fa-times fa-fw'/>
+							</button>}
+						</li>
+					))}
+				</ul>
+			</div>
+		);
 	},
 
 	renderThemeDropdown : function(){

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -44,8 +44,6 @@
 		gap            : 10px;
 	}
 
-
-
 	.field {
 		position      : relative;
 		display       : flex;
@@ -116,7 +114,6 @@
 		}
 	}
 
-
 	.thumbnail-preview {
 		position         : relative;
 		flex             : 1 1;
@@ -164,7 +161,21 @@
 			.colorButton(@red);
 		}
 	}
-	.authors.field .value { line-height    : 1.5em; }
+	.authors.field {
+		.list > .tag:first-child {
+			position:relative;
+			
+			&::after {
+				content:'';
+				position:absolute;
+				border-radius:inherit;
+				inset:-1px;
+				border: 2px solid goldenrod;
+			}
+		}
+		button {color:#B00;}
+		.value { line-height : 1.5em; }
+	}
 
 	.themes.field {
 		& .dropdown-container {
@@ -273,6 +284,10 @@
 			border-radius    : 0.5em;
 
 			.icon { #groupedIcon; }
+
+			button {
+				cursor : pointer;
+			}
 		}
 
 		.input-group {