feat: New isUnlockable prop and unlock dialog for the form controls

Author: bastianallgeier

i18n/translations/en.json

@@ -511,6 +511,7 @@
 	"lock.unsaved.users": "Unsaved accounts",
 	"lock.isLocked": "Unsaved changes by {email}",
 	"lock.unlock": "Unlock",
+	"lock.unlock.confirm": "You will take over the changes from <strong>{{ email }}</strong>. They will then be unable to edit the content.",
 	"lock.unlock.submit": "Unlock and overwrite unsaved changes by <strong>{email}</strong>",
 	"lock.isUnlocked": "Was unlocked by another user",
 

panel/src/components/Forms/FormControls.vue

@@ -46,6 +46,12 @@
 					{{ $t("form.preview") }}
 				</k-dropdown-item>
 			</template>
+			<template v-if="isLocked && isUnlockable">
+				<hr />
+				<k-dropdown-item icon="lock" @click="unlock">
+					{{ $t("lock.unlock") }}
+				</k-dropdown-item>
+			</template>
 		</k-dropdown-content>
 	</div>
 </template>
@@ -56,6 +62,7 @@ export const props = {
 		editor: String,
 		hasDiff: Boolean,
 		isLocked: Boolean,
+		isUnlockable: Boolean,
 		modified: [String, Date],
 		/**
 		 * Preview URL for changes
@@ -136,6 +143,28 @@ export default {
 					}
 				}
 			});
+		},
+		unlock() {
+			this.$panel.dialog.open({
+				component: "k-text-dialog",
+				props: {
+					size: "small",
+					submitButton: {
+						icon: "lock",
+						theme: "negative",
+						text: this.$t("lock.unlock")
+					},
+					text: this.$t("lock.unlock.confirm", {
+						email: this.editor
+					})
+				},
+				on: {
+					submit: () => {
+						this.$panel.dialog.close();
+						this.$emit("unlock");
+					}
+				}
+			});
 		}
 	}
 };