Merge pull request #9910 from nextcloud/bug/7584/confirmation-page-focus

fix(NewGroupConversation) - refactoring & focus on Confirmation page

src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue

@@ -1,115 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @author Marco Ambrosini <marcoambrosini@icloud.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-	<div class="confirmation">
-		<template v-if="isLoading && !error">
-			<template v-if="!success">
-				<div class="icon-loading confirmation__icon" />
-				<p class="confirmation__warning">
-					{{ t('spreed', 'Creating your conversation') }}
-				</p>
-			</template>
-			<template v-if="success && isPublic">
-				<div class="icon-checkmark confirmation__icon" />
-				<p class="confirmation__warning">
-					{{ t('spreed', 'All set') }}
-				</p>
-				<NcButton id="copy-link"
-					type="secondary"
-					class="confirmation__copy-link"
-					@click="onClickCopyLink">
-					{{ t('spreed', 'Copy conversation link') }}
-				</NcButton>
-			</template>
-		</template>
-		<template v-else>
-			<div class="icon-error confirmation__icon" />
-			<p class="confirmation__warning">
-				{{ t('spreed', 'Error while creating the conversation') }}
-			</p>
-		</template>
-	</div>
-</template>
-
-<script>
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-
-import { copyConversationLinkToClipboard } from '../../../../services/urlService.js'
-
-export default {
-	name: 'Confirmation',
-	components: {
-		NcButton,
-	},
-	props: {
-		token: {
-			type: String,
-			required: true,
-		},
-		conversationName: {
-			type: String,
-			required: true,
-		},
-		isLoading: {
-			type: Boolean,
-			required: true,
-		},
-		success: {
-			type: Boolean,
-			required: true,
-		},
-		error: {
-			type: Boolean,
-			required: true,
-		},
-		isPublic: {
-			type: Boolean,
-			required: true,
-		},
-	},
-
-	methods: {
-		onClickCopyLink() {
-			copyConversationLinkToClipboard(this.token)
-		},
-	},
-
-}
-
-</script>
-
-<style lang="scss" scoped>
-.confirmation {
-	&__icon {
-		padding-top: 80px;
-	}
-
-	&__warning {
-		margin-top: 10px;
-		text-align: center;
-	}
-
-	&__copy-link {
-		margin: 50px auto 0 auto;
-	}
-}
-</style>

src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue

@@ -94,14 +94,35 @@
 					:conversation-name="conversationNameTrimmed" />
 
 				<!-- Third page -->
-				<Confirmation v-else-if="page === 2"
-					class="new-group-conversation__content"
-					:token="newConversation.token"
-					:conversation-name="conversationNameTrimmed"
-					:error="error"
-					:is-loading="isLoading"
-					:success="success"
-					:is-public="isPublic" />
+				<div v-else-if="page === 2" class="new-group-conversation__content">
+					<template v-if="isLoading && !error">
+						<template v-if="!success">
+							<div class="icon-loading confirmation__icon" />
+							<p class="confirmation__warning">
+								{{ t('spreed', 'Creating your conversation') }}
+							</p>
+						</template>
+						<template v-if="success && isPublic">
+							<div class="icon-checkmark confirmation__icon" />
+							<p class="confirmation__warning">
+								{{ t('spreed', 'All set') }}
+							</p>
+							<NcButton id="copy-link"
+								ref="copyLink"
+								type="secondary"
+								class="confirmation__copy-link"
+								@click="onClickCopyLink">
+								{{ t('spreed', 'Copy conversation link') }}
+							</NcButton>
+						</template>
+					</template>
+					<template v-else>
+						<div class="icon-error confirmation__icon" />
+						<p class="confirmation__warning">
+							{{ t('spreed', 'Error while creating the conversation') }}
+						</p>
+					</template>
+				</div>
 			</div>
 
 			<!-- Navigation: different buttons with different actions and
@@ -135,6 +156,7 @@
 				</NcButton>
 				<!-- Third page -->
 				<NcButton v-if="page===2 && (error || isPublic)"
+					ref="closeButton"
 					type="primary"
 					class="new-group-conversation__button"
 					@click="closeModal">
@@ -160,7 +182,6 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import ConversationAvatarEditor from '../../ConversationSettings/ConversationAvatarEditor.vue'
 import ListableSettings from '../../ConversationSettings/ListableSettings.vue'
-import Confirmation from './Confirmation/Confirmation.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
 
 import { useIsInCall } from '../../../composables/useIsInCall.js'
@@ -172,6 +193,7 @@ import {
 	setConversationPassword,
 } from '../../../services/conversationsService.js'
 import { addParticipant } from '../../../services/participantsService.js'
+import { copyConversationLinkToClipboard } from '../../../services/urlService.js'
 
 const NEW_CONVERSATION = {
 	token: '',
@@ -190,7 +212,6 @@ export default {
 
 	components: {
 		ConversationAvatarEditor,
-		Confirmation,
 		ListableSettings,
 		NcButton,
 		NcCheckboxRadioSwitch,
@@ -265,6 +286,24 @@ export default {
 				this.passwordProtect = false
 			}
 		},
+
+		success(value) {
+			if (!value) {
+				return
+			}
+			this.$nextTick(() => {
+				this.$refs.copyLink.$el.focus()
+			})
+		},
+
+		error(value) {
+			if (!value) {
+				return
+			}
+			this.$nextTick(() => {
+				this.$refs.closeButton.$el.focus()
+			})
+		},
 	},
 	expose: ['showModalForItem'],
 
@@ -429,6 +468,10 @@ export default {
 				this.page = 1
 			}
 		},
+
+		onClickCopyLink() {
+			copyConversationLinkToClipboard(this.newConversation.token)
+		},
 	},
 
 }
@@ -436,6 +479,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.confirmation {
+	&__icon {
+		padding-top: 80px;
+	}
+
+	&__warning {
+		margin-top: 10px;
+		text-align: center;
+	}
+
+	&__copy-link {
+		margin: 50px auto 0 auto;
+	}
+}
 .toggle {
 	height: 44px;
 	width: 44px;

src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue

@@ -192,7 +192,8 @@ export default {
 			}
 		},
 		focusInput() {
-			this.$refs.setContacts.$el.focus()
+			// TODO : revert this to call this.$refs.setContacts.$el.focus() after the release
+			this.$refs.setContacts.$refs.inputField.$refs.input.focus()
 		},
 	},
 }