feat: Create invitation links for join to team

appinfo/routes.php

@@ -10,6 +10,7 @@
 		['name' => 'contacts#direct', 'url' => '/direct/contact/{contact}', 'verb' => 'GET'],
 		['name' => 'contacts#directcircle', 'url' => '/direct/circle/{singleId}', 'verb' => 'GET'],
 		['name' => 'page#index', 'url' => '/', 'verb' => 'GET'],
+		['name' => 'page#joinInvitation', 'url' => '/join/{invitationCode}', 'verb' => 'GET'],
 		['name' => 'page#index', 'url' => '/{group}', 'verb' => 'GET', 'postfix' => 'group'],
 		['name' => 'page#index', 'url' => '/{group}/{contact}', 'verb' => 'GET', 'postfix' => 'group.contact'],
 		['name' => 'social_api#update_contact',  'url' => '/api/v1/social/avatar/{network}/{addressbookId}/{contactId}', 'verb' => 'PUT'],

lib/Controller/PageController.php

@@ -83,4 +83,17 @@ public function index(): TemplateResponse {
 
 		return new TemplateResponse(Application::APP_ID, 'main');
 	}
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
+	public function joinInvitation(string $invitationCode): TemplateResponse {
+		$this->initialStateService->provideInitialState(Application::APP_ID, 'invitationCode', $invitationCode);
+
+		Util::addStyle(Application::APP_ID, 'contacts-join-invitation');
+		Util::addScript(Application::APP_ID, 'contacts-join-invitation');
+
+		return new TemplateResponse(Application::APP_ID, 'join-invitation');
+	}
 }

src/components/CircleDetails/CircleConfigs.vue

@@ -5,40 +5,25 @@
 
 <template>
 	<ul>
-		<li v-for="(configs, title) in PUBLIC_CIRCLE_CONFIG" :key="title" class="circle-config">
+		<li v-for="(config, title) in PUBLIC_CIRCLE_CONFIG" :key="title" class="circle-config">
 			<ContentHeading class="circle-config__title">
 				{{ title }}
 			</ContentHeading>
 
-			<ul class="circle-config__list">
-				<CheckboxRadioSwitch
-					v-for="(label, config) in configs"
-					:key="'circle-config' + config"
-					:model-value="isChecked(config)"
-					:loading="loading === config"
-					:disabled="loading !== false"
-					wrapper-element="li"
-					@update:model-value="onChange(config, $event)">
-					{{ label }}
-				</CheckboxRadioSwitch>
-			</ul>
+			<component :is="config.component" v-bind="config.props" :circle="circle" />
 		</li>
 	</ul>
 </template>
 
 <script>
-import { showError } from '@nextcloud/dialogs'
-import { NcCheckboxRadioSwitch as CheckboxRadioSwitch } from '@nextcloud/vue'
 import ContentHeading from './ContentHeading.vue'
 import Circle from '../../models/circle.ts'
 import { PUBLIC_CIRCLE_CONFIG } from '../../models/constants.ts'
-import { CircleEdit, editCircle } from '../../services/circles.ts'
 
 export default {
 	name: 'CircleConfigs',
 
 	components: {
-		CheckboxRadioSwitch,
 		ContentHeading,
 	},
 
@@ -52,45 +37,8 @@ export default {
 	data() {
 		return {
 			PUBLIC_CIRCLE_CONFIG,
-
-			loading: false,
 		}
 	},
-
-	methods: {
-		isChecked(config) {
-			return (this.circle.config & config) !== 0
-		},
-
-		/**
-		 * On toggle, add or remove the config bitwise
-		 *
-		 * @param {CircleConfig} config the circle config to manage
-		 * @param {boolean} checked checked or not
-		 */
-		async onChange(config, checked) {
-			this.logger.debug(`Circle config ${config} is set to ${checked}`)
-
-			this.loading = config
-			const prevConfig = this.circle.config
-			if (checked) {
-				config = prevConfig | config
-			} else {
-				config = prevConfig & ~config
-			}
-
-			try {
-				const circleData = await editCircle(this.circle.id, CircleEdit.Config, config)
-				// eslint-disable-next-line vue/no-mutating-props
-				this.circle.config = circleData.config
-			} catch (error) {
-				console.error('Unable to edit circle config', prevConfig, config, error)
-				showError(t('contacts', 'An error happened during the config change'))
-			} finally {
-				this.loading = false
-			}
-		},
-	},
 }
 </script>
 

src/components/CircleDetails/CircleConfigs/CircleConfigCheckboxesList.vue

@@ -0,0 +1,88 @@
+<!--
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<ul class="circle-config__list">
+		<NcCheckboxRadioSwitch
+			v-for="(label, config) in configs"
+			:key="'circle-config' + config"
+			:model-value="isChecked(config)"
+			:loading="loading === config"
+			:disabled="loading !== false"
+			wrapper-element="li"
+			@update:model-value="onChange(config, $event)">
+			{{ label }}
+		</NcCheckboxRadioSwitch>
+	</ul>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import Circle from '../../../models/circle.ts'
+import { CircleEdit, editCircle } from '../../../services/circles.ts'
+
+export default {
+	name: 'CircleConfigCheckboxesList',
+
+	components: {
+		NcCheckboxRadioSwitch,
+	},
+
+	props: {
+		circle: {
+			type: Circle,
+			required: true,
+		},
+
+		configs: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			loading: false,
+		}
+	},
+
+	methods: {
+		isChecked(config) {
+			return (this.circle.config & config) !== 0
+		},
+
+		/**
+		 * On toggle, add or remove the config bitwise
+		 *
+		 * @param {CircleConfig} config the circle config to manage
+		 * @param {boolean} checked checked or not
+		 */
+		async onChange(config, checked) {
+			this.logger.debug(`Circle config ${config} is set to ${checked}`)
+
+			this.loading = config
+			const prevConfig = this.circle.config
+			if (checked) {
+				config = prevConfig | config
+			} else {
+				config = prevConfig & ~config
+			}
+
+			try {
+				const circleData = await editCircle(this.circle.id, CircleEdit.Config, config)
+				// eslint-disable-next-line vue/no-mutating-props
+				this.circle.config = circleData.config
+			} catch (error) {
+				console.error('Unable to edit circle config', prevConfig, config, error)
+				showError(t('contacts', 'An error happened during the config change'))
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>

src/components/CircleDetails/CircleConfigs/CircleConfigInvitationLink.vue

@@ -0,0 +1,119 @@
+<!--
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<NcActions :inline="3" force-name variant="tertiary">
+		<NcActionButton
+			v-if="!invitationUrl"
+			@click="createInvitationLink()">
+			<template #icon>
+				<LinkPlus :size="20" />
+			</template>
+			{{ t('contacts', 'Create link') }}
+		</NcActionButton>
+		<template v-else>
+			<NcActionLink
+				:href="invitationUrl"
+				:icon="copyLinkIcon"
+				@click.stop.prevent="copyToClipboard(invitationUrl)">
+				{{ copyButtonText }}
+			</NcActionLink>
+
+			<NcActionButton
+				@click="confirm(
+					t('contacts', 'This action will make it impossible to join the team using the current link. Do we really want to change the link?'),
+					() => createInvitationLink(),
+				)">
+				<template #icon>
+					<Autorenew :size="20" />
+				</template>
+				{{ t('contacts', 'Reset link') }}
+			</NcActionButton>
+
+			<NcActionButton
+				@click="confirm(
+					t('contacts', 'This action will make it impossible to join the team using the current link. Do we really want to delete the link?'),
+					() => revokeInvitationLink(),
+				)">
+				<template #icon>
+					<LinkOff :size="20" />
+				</template>
+				{{ t('contacts', 'Reject link') }}
+			</NcActionButton>
+		</template>
+	</NcActions>
+</template>
+
+<script>
+import { generateUrl, getBaseUrl } from '@nextcloud/router'
+import { NcActionButton, NcActionLink, NcActions } from '@nextcloud/vue'
+import Autorenew from 'vue-material-design-icons/Autorenew.vue'
+import LinkOff from 'vue-material-design-icons/LinkOff.vue'
+import LinkPlus from 'vue-material-design-icons/LinkPlus.vue'
+import CopyToClipboardMixin from '../../../mixins/CopyToClipboardMixin.js'
+import Circle from '../../../models/circle.ts'
+
+export default {
+	name: 'InvitationLink',
+	components: {
+		LinkOff,
+		Autorenew,
+		LinkPlus,
+		NcActions,
+		NcActionLink,
+		NcActionButton,
+	},
+
+	mixins: [CopyToClipboardMixin],
+	props: {
+		circle: {
+			type: Circle,
+			required: true,
+		},
+	},
+
+	computed: {
+		invitationUrl() {
+			if (!this.circle.invitationCode) {
+				return null
+			}
+
+			return getBaseUrl() + generateUrl(
+				'apps/contacts/join/{invitationCode}',
+				{ invitationCode: this.circle.invitationCode.match(/.{1,4}/g).join('-') },
+			)
+		},
+
+		copyButtonText() {
+			if (this.copied) {
+				return this.copySuccess
+					? t('contacts', 'Copied')
+					: t('contacts', 'Could not copy')
+			}
+			return t('contacts', 'Copy link')
+		},
+	},
+
+	methods: {
+		async createInvitationLink() {
+			const circleId = this.circle.id
+			await this.$store.dispatch('createInvitationLink', { circleId })
+
+			await this.copyToClipboard(this.invitationUrl)
+		},
+
+		async revokeInvitationLink() {
+			const circleId = this.circle.id
+			await this.$store.dispatch('revokeInvitationLink', { circleId })
+		},
+
+		confirm(message, action) {
+			if (window.confirm(message)) {
+				action()
+			}
+		},
+	},
+}
+</script>