Feature/JS-7075: Space join without approve

src/json/text.json

@@ -903,7 +903,7 @@
 
 	"popupSettingsSpaceShareTitle": "Sharing",
 	"popupSettingsSpaceShareInviteLinkTitle": "Invite link",
-	"popupSettingsSpaceShareInviteLinkLabel": "Share this link to invite others to your Space. Once they request to join, you can set their access rights.",
+	"popupSettingsSpaceShareInviteLinkLabel": "Share this link to invite others to your Space.",
 	"popupSettingsSpaceShareInviteLinkDisabled": "Invitations are disabled by the space owner. In order to have an ability to invite people. please ask space owner to generate an invite link.",
 	"popupSettingsSpaceShareInvitesReaderLimitReachedLabel": "You can't add more members",
 	"popupSettingsSpaceShareInvitesReaderLimitReachedButton": "✦ Upgrade to add more members",
@@ -917,9 +917,13 @@
 	"popupSettingsSpaceShareStopSharing": "Stop sharing",
 	"popupSettingsSpaceShareRevokeInvite": "Delete link",
 	"popupSettingsSpaceShareGenerateInvite": "Generate invite link",
+	"popupSettingsSpaceShareGenerateLinkWithoutApprove": "Generate link without approve",
 	"popupSettingsSpaceShareGenerateInviteDisabled": "You need to be online to share the space",
 	"popupSettingsSpaceShareShowQR": "Show QR code",
 
+	"popupSettingsSpaceShareLinkWithApproveLabel": "This link requires manual approve from space owner. Once they request to join, you can set their access rights.",
+	"popupSettingsSpaceShareLinkWithoutApproveLabel": "This link doesn't require manual approve from space owner.",
+
 	"popupSettingsSpaceRemove": "Move %s to Bin?",
 	"popupSettingsSpaceRemoveTitle": "Move to Bin",
 	"popupSettingsSpaceRemoveText": "Members could no longer see any objects inside",
@@ -1124,6 +1128,10 @@
 	"popupConfirmInviteError103Title": "Oops!",
 	"popupConfirmInviteError103Text": "The space you try to access has been deleted",
 
+	"popupConfirmJoinSpaceTitle": "Join %s",
+	"popupConfirmJoinSpaceText": "You've been invited to join %s, created by %s",
+	"popupConfirmJoinSpaceButtonConfirm": "Join Space",
+
 	"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",

src/scss/component/vault.scss

@@ -54,7 +54,24 @@
 	}
 	.item::after {
 		content: ''; position: absolute; width: 4px; height: 4px; background-color: var(--color-control-accent); left: -10px; top: 50%; margin-top: -2px;
-		border-radius: 50%; opacity: 0; transition: opacity 0.2s $easeInQuint; opacity: 0;
+		border-radius: 50%; opacity: 0; transition: opacity 0.2s $easeInQuint;
+	}
+
+	.item.loading {
+		.iconWrap { background-color: var(--color-shape-highlight-medium); }
+		.iconWrap {
+			.iconObject, .cnt { display: none; }
+		}
+
+		@keyframes rotate {
+			0% { transform: rotate(0deg); }
+			100% { transform: rotate(360deg); }
+		}
+
+		&:before {
+			content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -10px 0px 0px -10px;
+			width: 20px; height: 20px; background: url('~img/icon/vault/spinner.svg'); animation: rotate 0.8s infinite linear
+		}
 	}
 
 	.item.isButton {

src/scss/popup/confirm.scss

@@ -30,6 +30,7 @@
 			.icon.invite { background-image: url('~img/icon/popup/confirm/invite.svg'); }
 			.icon.sad { background-image: url('~img/icon/popup/confirm/sad.svg'); }
 			.icon.warning { background-image: url('~img/icon/popup/confirm/warning.svg'); }
+			.icon.join { background-image: url('~img/icon/popup/confirm/join.svg'); }
 		}
 
 		.checkboxWrapper { 

src/scss/popup/invite.scss

@@ -7,7 +7,8 @@
         .title { @include text-header3; margin-bottom: 20px; }
 
         .iconWrapper { display: flex; width: 320px; height: 104px; border-radius: 320px; margin: 0px auto 28px; align-items: center; justify-content: space-around; }
-        .icon { width: 68px; height: 72px; background-image: url('~img/icon/popup/confirm/invite.svg'); }
+        .icon.invite { width: 68px; height: 72px; background-image: url('~img/icon/popup/confirm/invite.svg'); }
+        .icon.join { width: 56px; height: 56px; background-image: url('~img/icon/popup/confirm/join.svg'); }
 
         .invitation { margin-bottom: 20px; user-select: text !important; word-wrap: break-word; }
         .invitation {

src/ts/component/page/main/invite.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useState, useImperativeHandle, useEffect } from 'react';
 import { Loader, Title, Error, Frame, Button, Footer } from 'Component';
-import { I, C, S, U, J, translate } from 'Lib';
+import { I, C, S, U, J, translate, analytics } from 'Lib';
 
 interface PageMainInviteRefProps {
 	resize: () => void;
@@ -92,7 +92,24 @@ const PageMainInvite = forwardRef<PageMainInviteRefProps, I.PageComponent>((prop
 							request(message);
 						};
 					} else {
-						request(message);
+						if (message.inviteType == I.InviteType.WithoutApprove) {
+							const { spaceName, creatorName } = message;
+							const { account } = S.Auth;
+
+							S.Popup.open('confirm', {
+								data: {
+									icon: 'join',
+									title: U.Common.sprintf(translate('popupConfirmJoinSpaceTitle'), spaceName),
+									text: U.Common.sprintf(translate('popupConfirmJoinSpaceText'), spaceName, creatorName),
+									textConfirm: translate('popupConfirmJoinSpaceButtonConfirm'),
+									onConfirm: () => {
+										C.SpaceJoin(account.info.networkId, message.spaceId, cid, key);
+									},
+								},
+							});
+						} else {
+							request(message);
+						};
 					};
 				});
 			});

src/ts/component/page/main/relation.tsx

@@ -236,4 +236,4 @@ const PageMainRelation = observer(class PageMainRelation extends React.Component
 
 });
 
-export default PageMainRelation;
+export default PageMainRelation;

src/ts/component/page/main/settings/space/share.tsx

@@ -10,6 +10,7 @@ interface State {
 	error: string;
 	cid: string;
 	key: string;
+	inviteType: I.InviteType;
 };
 
 const HEIGHT = 64;
@@ -29,6 +30,7 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 		error: '',
 		cid: '',
 		key: '',
+		inviteType: I.InviteType.WithApprove,
 	};
 
 	constructor (props: I.PageSettingsComponent) {
@@ -47,12 +49,13 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 	};
 
 	render () {
-		const { isLoading, error, cid, key } = this.state;
+		const { isLoading, error, cid, key, inviteType } = this.state;
 
 		if (isLoading) {
 			return <Loader id="loader" />;
 		};
 
+		const { config } = S.Common;
 		const { membership } = S.Auth;
 		const tier = U.Data.getMembershipTier(membership.tier);
 		const hasLink = cid && key;
@@ -191,13 +194,16 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 					<Label text={inviteLinkLabelText} />
 
 					{hasLink ? (
-						<div className="inviteLinkWrapper">
-							<div className="inputWrapper">
-								<Input ref={ref => this.refInput = ref} readonly={true} value={U.Space.getInviteLink(cid, key)} onClick={() => this.refInput?.select()} />
-								<Icon id="button-more-link" className="more withBackground" onClick={this.onMoreLink} />
+						<>
+							<Label text={inviteType == I.InviteType.WithApprove ? translate('popupSettingsSpaceShareLinkWithApproveLabel') : translate('popupSettingsSpaceShareLinkWithoutApproveLabel')} />
+							<div className="inviteLinkWrapper">
+								<div className="inputWrapper">
+									<Input ref={ref => this.refInput = ref} readonly={true} value={U.Space.getInviteLink(cid, key)} onClick={() => this.refInput?.select()} />
+									<Icon id="button-more-link" className="more withBackground" onClick={this.onMoreLink} />
+								</div>
+								<Button ref={ref => this.refCopy = ref} onClick={this.onCopy} className="c40" color="blank" text={translate('commonCopyLink')} />
 							</div>
-							<Button ref={ref => this.refCopy = ref} onClick={this.onCopy} className="c40" color="blank" text={translate('commonCopyLink')} />
-						</div>
+						</>
 					) : (
 						<>
 							{isSpaceOwner ? (
@@ -209,6 +215,16 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 										tooltipParam={{ text: isShareActive ? '' : translate('popupSettingsSpaceShareGenerateInviteDisabled') }}
 										text={translate('popupSettingsSpaceShareGenerateInvite')}
 									/>
+
+									{config.experimental ? (
+										<Button
+											ref={ref => this.refButton = ref}
+											onClick={isShareActive ? () => this.onInitLink(true) : null}
+											className={[ 'c40', (isShareActive ? '' : 'disabled') ].join(' ')}
+											tooltipParam={{ text: isShareActive ? '' : translate('popupSettingsSpaceShareGenerateInviteDisabled') }}
+											text={translate('popupSettingsSpaceShareGenerateLinkWithoutApprove')}
+										/>
+									) : ''}
 								</div>
 							) : ''}
 						</>
@@ -285,16 +301,16 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 		const space = U.Space.getSpaceview();
 
 		if (space.isShared && !cid && !key) {
-			U.Space.getInvite(S.Common.space, (cid: string, key: string) => {
+			U.Space.getInvite(S.Common.space, (cid: string, key: string, inviteType: I.InviteType) => {
 				if (cid && key) {
-					this.setInvite(cid, key);
+					this.setInvite(cid, key, inviteType);
 				};
 			});
 		};
 	};
 
-	setInvite (cid: string, key: string) {
-		this.setState({ cid, key });
+	setInvite (cid: string, key: string, inviteType: I.InviteType) {
+		this.setState({ cid, key, inviteType });
 	};
 
 	onScroll ({ scrollTop }) {
@@ -342,7 +358,7 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 		analytics.event('ClickShareSpaceCopyLink');
 	};
 
-	onInitLink () {
+	onInitLink (noApprove?: boolean) {
 		const btn = this.refButton;
 		const space = U.Space.getSpaceview();
 
@@ -359,14 +375,22 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 				return;
 			};
 
-			C.SpaceInviteGenerate(S.Common.space, (message: any) => {
+			let inviteType = null;
+			let permissions = null;
+
+			if (noApprove) {
+				inviteType = I.InviteType.WithoutApprove;
+				permissions = I.ParticipantPermissions.Writer;
+			};
+
+			C.SpaceInviteGenerate(S.Common.space, inviteType, permissions, (message: any) => {
 				btn.setLoading(false);
 
 				if (this.setError(message.error)) {
 					return;
 				};
 
-				this.setInvite(message.inviteCid, message.inviteKey);
+				this.setInvite(message.inviteCid, message.inviteKey, inviteType);
 				Preview.toastShow({ text: translate('toastInviteGenerate') });
 
 				if (!space.isShared) {
@@ -384,7 +408,7 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 				textConfirm: translate('popupConfirmStopSharingSpaceConfirm'),
 				colorConfirm: 'red',
 				onConfirm: () => {
-					C.SpaceStopSharing(S.Common.space, () => this.setInvite('', ''));
+					C.SpaceStopSharing(S.Common.space, () => this.setInvite('', '', I.InviteType.WithApprove));
 					analytics.event('StopSpaceShare');
 				},
 			},
@@ -543,7 +567,7 @@ const PageMainSettingsSpaceShare = observer(class PageMainSettingsSpaceShare ext
 			containerId: getId(),
 			cid,
 			key,
-			onInviteRevoke: () => this.setInvite('', ''),
+			onInviteRevoke: () => this.setInvite('', '', I.InviteType.WithApprove),
 		});
 	};
 

src/ts/component/vault/index.tsx

@@ -400,4 +400,4 @@ const Vault = observer(forwardRef<VaultRefProps>((props, ref) => {
 	);
 }));
 
-export default Vault;
+export default Vault;

src/ts/component/vault/item.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { observer } from 'mobx-react';
 import { IconObject, Icon } from 'Component';
-import { J, S } from 'Lib';
+import { J, S, I } from 'Lib';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
@@ -24,6 +24,10 @@ const VaultItem: FC<Props> = observer(({
 	const cn = [ 'item' ];
 	const theme = S.Common.getThemeClass();
 
+	if (item.spaceLocalStatus == I.SpaceStatus.Loading) {
+		cn.push('loading');
+	};
+
 	let icon = null;
 	let cnt = null;
 	let disabled = false;
@@ -77,4 +81,4 @@ const VaultItem: FC<Props> = observer(({
 
 });
 
-export default VaultItem;
+export default VaultItem;

src/ts/interface/space.ts

@@ -32,4 +32,10 @@ export enum ParticipantStatus {
 	Declined				 = 3,
 	Removing				 = 4,
 	Canceled				 = 5,
-};
+};
+
+export enum InviteType {
+	WithApprove 			 = 0,
+	Guest 					 = 1,
+	WithoutApprove 			 = 2,
+};

src/ts/lib/api/command.ts

@@ -2116,11 +2116,16 @@ export const MembershipFinalize = (name: string, callBack?: (message: any) => vo
 
 // ---------------------- SPACE ---------------------- //
 
-export const SpaceInviteGenerate = (spaceId: string, callBack?: (message: any) => void) => {
+export const SpaceInviteGenerate = (spaceId: string, inviteType?: I.InviteType, permissions?: I.ParticipantPermissions, callBack?: (message: any) => void) => {
 	const request = new Rpc.Space.InviteGenerate.Request();
 
 	request.setSpaceid(spaceId);
 
+	if (inviteType && permissions) {
+		request.setInvitetype(inviteType as number);
+		request.setPermissions(permissions as number);
+	};
+
 	dispatcher.request(SpaceInviteGenerate.name, request, callBack);
 };
 

src/ts/lib/api/response.ts

@@ -622,6 +622,7 @@ export const SpaceInviteGetCurrent = (response: Rpc.Space.InviteGetCurrent.Respo
 	return {
 		inviteCid: response.getInvitecid(),
 		inviteKey: response.getInvitefilekey(),
+		inviteType: response.getInvitetype(),
 	};
 };
 
@@ -630,6 +631,7 @@ export const SpaceInviteView = (response: Rpc.Space.InviteView.Response) => {
 		spaceName: response.getSpacename(),
 		creatorName: response.getCreatorname(),
 		spaceId: response.getSpaceid(),
+		inviteType: response.getInvitetype(),
 	};
 };
 
@@ -710,4 +712,4 @@ export const ObjectImportUseCase = (response: Rpc.Object.ImportUseCase.Response)
 	return {
 		startingId: response.getStartingobjectid(),
 	};
-};
+};

src/ts/lib/util/space.ts

@@ -259,9 +259,9 @@ class UtilSpace {
 		blocks.forEach(block => Storage.setToggle('widget', block.id, false));
 	};
 
-	getInvite (id: string, callBack: (cid: string, key: string) => void) {
+	getInvite (id: string, callBack: (cid: string, key: string, inviteType: I.InviteType) => void) {
 		C.SpaceInviteGetCurrent(id, (message: any) => {
-			callBack(message.inviteCid, message.inviteKey);
+			callBack(message.inviteCid, message.inviteKey, message.inviteType);
 		});
 	};