anyproto · ra3orblade · May 5, 2025 · May 5, 2025 · May 5, 2025 · May 5, 2025
diff --git a/src/json/text.json b/src/json/text.json
@@ -1090,6 +1090,9 @@
 
 	"popupMembershipTierFeatureAnyNameContent": "Unique name (from %s characters)",
 
+	"popupConfirmConfirmationText": "Input this text to confirm:",
+	"popupConfirmConfirmationTextError": "Text does not match",
+
 	"popupConfirmUpdatePromptTitle": "Update available",
 	"popupConfirmUpdatePromptText": "Do you want to update on a new version?",
 	"popupConfirmUpdatePromptRestartOk": "Restart and update",
@@ -1131,7 +1134,6 @@
 	"popupConfirmInviteError103Title": "Oo
8000
ps!",
 	"popupConfirmInviteError103Text": "The space you try to access has been deleted",
 
-
 	"popupConfirmWelcomeTitle": "Welcome to your Space",
 	"popupConfirmWelcomeText": "Your <b>Space</b> is an encrypted, local-first container.<br/><b>Spaces</b> can be shared and co-created with others.<br/>Each space contains a <b>Graph of objects</b>.",
 	"popupConfirmWelcomeButton": "Show me what I can build",
@@ -1933,7 +1935,7 @@
 	"spaceLast": "Last opened Object",
 	"spaceExisting": "Existing Object",
 	"spaceDeleteWarningTitle": "Delete \"%s\" space",
-	"spaceDeleteWarningText": "This space will be deleted irrevocably. You can't undo this action.",
+	"spaceDeleteWarningText": "This will permanently delete the space. You can't undo this action. Please type the name of the space to confirm deletion.",
 	"spaceDeleteToast": "Space \"%s\" was deleted",
 	"spaceLeaveWarningTitle": "Leave a space",
 	"spaceLeaveWarningText": "\"%s\" will be removed from your devices and you will no longer have access to it",

diff --git a/src/scss/popup/confirm.scss b/src/scss/popup/confirm.scss
@@ -3,13 +3,14 @@
 .popups {
 	.popup.popupConfirm {
 		.innerWrap { width: 424px;
8000
 padding: 32px; text-align: center; }
-		.wrap.withCheckbox {
-			.label { margin-bottom: 12px; }
+
+		.wrap.withInput {
+			.checkboxWrapper { margin-bottom: 12px; }
 		}
 
 		.title { @include text-header3; margin-bottom: 6px; }
-		.label { margin-bottom: 26px; user-select: text !important; word-wrap: break-word; }
-		.buttons { display: flex; flex-direction: row-reverse; gap: 0px 8px; }
+		.descr { margin-bottom: 24px; user-select: text !important; word-wrap: break-word; }
+		.buttons { display: flex; flex-direction: column; gap: 8px; }
 		.buttons {
 			.button { width: 100%; }
 			.button.blank:not(:hover):not(.hover) { background-color: var(--color-bg-primary); }
@@ -32,12 +33,18 @@
 		}
 
 		.checkboxWrapper { 
-			display: flex; flex-direction: row; gap: 0px 8px; align-items: center; justify-content: center; margin: 12px 0px 24px 0px; cursor: default;
+			display: flex; flex-direction: row; gap: 0px 8px; align-items: center; justify-content: center; margin: 0px 0px 16px 0px; cursor: default;
 		}
 		.checkboxWrapper {
 			.label { margin: 0px !important; }
 		}
 
+		.confirmMessage { display: flex; flex-direction: column; gap: 4px 0px; justify-content: flex-start; margin: 0px 0px 16px 0px; text-align: left; }
+		.confirmMessage {
+			.label { margin: 0px; @include text-small; }
+			.input { border: 1px solid var(--color-shape-secondary); border-radius: 6px; }
+		}
+
 		ul { padding-left: 1.25em; margin: 0.75em 0px; }
 		.error { margin-bottom: 0px; }
 	}

diff --git a/src/ts/component/page/main/settings/space/index.tsx b/src/ts/component/page/main/settings/space/index.tsx
@@ -338,7 +338,7 @@ const PageMainSettingsSpaceIndex = observer(class PageMainSettingsSpaceIndex ext
 	};
 
 	onDelete () {
-		Action.removeSpace(S.Common.space, 'Settings', (message: any) => {
+		Action.removeSpace(S.Common.space, analytics.route.settings, (message: any) => {
 			if (message.error.code) {
 				this.setState({ error: message.error.description });
 			};
@@ -372,7 +372,7 @@ const PageMainSettingsSpaceIndex = observer(class PageMainSettingsSpaceIndex ext
 				const element = `#${U.Common.toCamelCase(`settingsSpaceButton-${item.id}`)}`;
 				S.Menu.open('select', {
 					element,
-					offsetX: 16,
+					horizontal: I.MenuDirection.Center,
 					offsetY: -40,
 					onOpen: () => $(element).addClass('hover'),
 					onClose: () => $(element).removeClass('hover'),

diff --git a/src/ts/component/popup/confirm.tsx b/src/ts/component/popup/confirm.tsx
@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { Title, Icon, Label, Button, Checkbox, Error } from 'Component';
+import { Title, Icon, Label, Button, Checkbox, Error, Input } from 'Component';
 import { I, keyboard, translate, Storage } from 'Lib';
 import { observer } from 'mobx-react';
 
-const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup> {
+interface State {
+	error: string;
+};
+
+const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup, State> {
 
 	refButtons: any = null;
 	refCheckbox: any = null;
+	refInput: any = null;
 	n = 0;
+	state = {
+		error: '',
+	};
 
 	constructor (props: I.Popup) {
 		super(props);
@@ -22,7 +30,9 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 	render() {
 		const { param } = this.props;
 		const { data } = param;
-		const { title, text, icon, storageKey, error } = data;
+		const { title, text, icon, storageKey, confirmMessage } = data;
+		const cn = [ 'wrap' ];
+		const error = String(data.error || this.state.error || '');
 
 		const canConfirm = undefined === data.canConfirm ? true : data.canConfirm;
 		const canCancel = undefined === data.canCancel ? true : data.canCancel;
@@ -31,6 +41,14 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 		const colorConfirm = data.colorConfirm || 'black';
 		const colorCancel = data.colorCancel || 'blank';
 		const bgColor = data.bgColor || '';
+
+		if (storageKey) {
+			cn.push('withCheckbox');
+		};
+
+		if (confirmMessage) {
+			cn.push('withInput');
+		};
 
 		return (
 			<div className={[ 'wrap', (storageKey ? 'withCheckbox' : '') ].join(' ')}>
@@ -40,7 +58,7 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 					</div>
 				) : ''}
 				<Title text={title} />
-				<Label text={text} />
+				<Label className="descr" text={text} />
 
 				{storageKey ? (
 					<div className="checkboxWrapper" >
@@ -49,6 +67,12 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 					</div>
 				) : ''}
 
+				{confirmMessage ? (
+					<div className="confirmMessage">
+						<Input type="text" ref={ref => this.refInput = ref} placeholder={confirmMessage} />
+					</div>
+				) : ''}
+
 				<div ref={ref => this.refButtons = ref} className="buttons">
 					{canConfirm ? <Button text={textConfirm} color={colorConfirm} className="c36"   /> : ''}
 					{canCancel ? <Button text={textCancel} color={colorCancel} className="c36"   /> : ''}
@@ -119,7 +143,16 @@ const PopupConfirm = observer(class PopupConfirm extends React.Component<I.Popup
 	onConfirm (e: any) {
 		const { param, close } = this.props;
 		const { data } = param;
-		const { onConfirm, noCloseOnConfirm } = data;
+		const { onConfirm, noCloseOnConfirm, confirmMessage } = data;
+
+		if (confirmMessage) {
+			const value = this.refInput.getValue();
+
+			if (value != confirmMessage) {
+				this.setState({ error: translate('popupConfirmConfirmationTextError') });
+				return;
+			};
+		};
 
 		e.preventDefault();
 		if (!noCloseOnConfirm) {

diff --git a/src/ts/lib/action.ts b/src/ts/lib/action.ts
@@ -674,27 +674,31 @@ class Action {
 	};
 
 	removeSpace (id: string, route: string, callBack?: (message: any) => void) {
-		const deleted = U.Space.getSpaceviewBySpaceId(id);
+		const space = U.Space.getSpaceviewBySpaceId(id);
 
-		if (!deleted) {
+		if (!space) {
 			return;
 		};
 
 		const isOwner = U.Space.isMyOwner(id);
-		const name = U.Common.shorten(deleted.name, 32);
+		const name = U.Common.shorten(space.name, 32);
 		const suffix = isOwner ? 'Delete' : 'Leave';
 		const title = U.Common.sprintf(translate(`space${suffix}WarningTitle`), name);
 		const text = U.Common.sprintf(translate(`space${suffix}WarningText`), name);
 		const toast = U.Common.sprintf(translate(`space${suffix}Toast`), name);
 		const confirm = isOwner ? translate('commonDelete') : translate('commonLeaveSpace');
+		const confirmMessage = isOwner ? space.name : '';
 
 		analytics.event(`Click${suffix}Space`, { route });
 
 		S.Popup.open('confirm', {
 			data: {
+				icon: 'confirm',
 				title,
 				text,
 				textConfirm: confirm,
+				colorConfirm: 'red',
+				confirmMessage,
 				onConfirm: () => {
 					analytics.event(`Click${suffix}SpaceWarning`, { type: suffix, route });
 
@@ -705,7 +709,7 @@ class Action {
 
 						if (!message.error.code) {
 							Preview.toastShow({ text: toast });
-							analytics.event(`${suffix}Space`, { type: deleted.spaceAccessType, route });
+							analytics.event(`${suffix}Space`, { type: space.spaceAccessType, route });
 						};
 					});
 				},