From c35138e7e3b68df5712ffa844936fb3d603ef555 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Sun, 11 May 2025 23:59:25 +0200
Subject: [PATCH] client side

---
 .../editor/metadataEditor/metadataEditor.jsx  | 49 ++++++++++++++++---
 .../editor/metadataEditor/metadataEditor.less | 23 +++++++--
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 8f256922f..5fd6d6f1a 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/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){
-			text = this.props.metadata.authors.join(', ');
+		if(authors && authors.length){
+			text = authors.join(', ');
 		}
-		return <div className='field authors'>
-			<label>authors</label>
-			<div className='value'>
-				{text}
+		if(!this.props.isOwner || authors.length < 2) return (
+			<div className='field authors'>
+				<label>authors</label>
+				<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(){
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index fd04f07d9..404417092 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/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 {