From bf4d860bb887c33601b99ed9e6b05049c08b0cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Mon, 1 Nov 2021 16:20:14 +0100
Subject: [PATCH] - add button to email input in team popup

---
 public/mix-manifest.json                      |  36 +++-
 .../Teams/CreateTeamFolderPopup.vue           | 168 ++++++++++--------
 2 files changed, 128 insertions(+), 76 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 6dd52206..898c88fa 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -57,7 +57,7 @@
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=4b3d3d91faa908b876ac",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=b5017d712135057283c9",
     "/chunks/plans.js": "/chunks/plans.js?id=6fca685daa45f22e4c8f",
-    "/chunks/platform.js": "/chunks/platform.js?id=1bfb27954f1608451825",
+    "/chunks/platform.js": "/chunks/platform.js?id=fe765bee5f683ba2f611",
     "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=deeb9a69d518ff12d81e",
     "/chunks/profile.js": "/chunks/profile.js?id=0638997b77c6f1246062",
@@ -785,5 +785,37 @@
     "/chunks/platform~chunks/shared.c7496b49748df484cac6.hot-update.js": "/chunks/platform~chunks/shared.c7496b49748df484cac6.hot-update.js",
     "/chunks/platform~chunks/shared.0b3bd148f3db3e44a8da.hot-update.js": "/chunks/platform~chunks/shared.0b3bd148f3db3e44a8da.hot-update.js",
     "/chunks/platform~chunks/shared.77da06c091f786b87bb3.hot-update.js": "/chunks/platform~chunks/shared.77da06c091f786b87bb3.hot-update.js",
-    "/chunks/platform~chunks/shared.195a62287c751e19f499.hot-update.js": "/chunks/platform~chunks/shared.195a62287c751e19f499.hot-update.js"
+    "/chunks/platform~chunks/shared.195a62287c751e19f499.hot-update.js": "/chunks/platform~chunks/shared.195a62287c751e19f499.hot-update.js",
+    "/chunks/platform.06878e1e224fbb8c9a9b.hot-update.js": "/chunks/platform.06878e1e224fbb8c9a9b.hot-update.js",
+    "/chunks/platform.2cc32e92e324b0e88340.hot-update.js": "/chunks/platform.2cc32e92e324b0e88340.hot-update.js",
+    "/chunks/platform.e3c8128903052d335439.hot-update.js": "/chunks/platform.e3c8128903052d335439.hot-update.js",
+    "/chunks/platform.cd03e6e57a1d9b337ead.hot-update.js": "/chunks/platform.cd03e6e57a1d9b337ead.hot-update.js",
+    "/chunks/platform.533a17c896c0ce1b4f89.hot-update.js": "/chunks/platform.533a17c896c0ce1b4f89.hot-update.js",
+    "/chunks/platform.9c45e1d0fb3f3cbafbf0.hot-update.js": "/chunks/platform.9c45e1d0fb3f3cbafbf0.hot-update.js",
+    "/chunks/platform.75c5e01e9e413e38f056.hot-update.js": "/chunks/platform.75c5e01e9e413e38f056.hot-update.js",
+    "/chunks/platform.c9b1f98db5548ccb8672.hot-update.js": "/chunks/platform.c9b1f98db5548ccb8672.hot-update.js",
+    "/chunks/platform.6d7e33ea3460219d9c72.hot-update.js": "/chunks/platform.6d7e33ea3460219d9c72.hot-update.js",
+    "/chunks/platform.e5c1302912c51ebda523.hot-update.js": "/chunks/platform.e5c1302912c51ebda523.hot-update.js",
+    "/chunks/platform.c808c4bb824b994ad074.hot-update.js": "/chunks/platform.c808c4bb824b994ad074.hot-update.js",
+    "/chunks/platform.1a794152419f2af60d74.hot-update.js": "/chunks/platform.1a794152419f2af60d74.hot-update.js",
+    "/chunks/platform.e9a4257e91165d143823.hot-update.js": "/chunks/platform.e9a4257e91165d143823.hot-update.js",
+    "/chunks/platform.f79a5bbe692a762f3c61.hot-update.js": "/chunks/platform.f79a5bbe692a762f3c61.hot-update.js",
+    "/chunks/platform.0f7f01bc45bb93fc9889.hot-update.js": "/chunks/platform.0f7f01bc45bb93fc9889.hot-update.js",
+    "/chunks/platform.b0679a6ba1bd445d5f78.hot-update.js": "/chunks/platform.b0679a6ba1bd445d5f78.hot-update.js",
+    "/chunks/platform.c8fb7b4c42efea8d5631.hot-update.js": "/chunks/platform.c8fb7b4c42efea8d5631.hot-update.js",
+    "/chunks/platform.ebfd24f64f12ff13ecc2.hot-update.js": "/chunks/platform.ebfd24f64f12ff13ecc2.hot-update.js",
+    "/chunks/platform.b150a0ddb369822d9ff9.hot-update.js": "/chunks/platform.b150a0ddb369822d9ff9.hot-update.js",
+    "/chunks/platform.8c0c767c3eb5de6257e2.hot-update.js": "/chunks/platform.8c0c767c3eb5de6257e2.hot-update.js",
+    "/chunks/platform.2526245c0fa6da6bc8c2.hot-update.js": "/chunks/platform.2526245c0fa6da6bc8c2.hot-update.js",
+    "/chunks/platform.92e02167fc033c349d8a.hot-update.js": "/chunks/platform.92e02167fc033c349d8a.hot-update.js",
+    "/chunks/platform.d325bffa26f7c525bd8c.hot-update.js": "/chunks/platform.d325bffa26f7c525bd8c.hot-update.js",
+    "/chunks/platform.00cc8d5df831dcea53a8.hot-update.js": "/chunks/platform.00cc8d5df831dcea53a8.hot-update.js",
+    "/chunks/platform.1348226281f14a615d4e.hot-update.js": "/chunks/platform.1348226281f14a615d4e.hot-update.js",
+    "/chunks/platform.5f998ee5665feb813003.hot-update.js": "/chunks/platform.5f998ee5665feb813003.hot-update.js",
+    "/chunks/platform.44b1cae750cc5505d981.hot-update.js": "/chunks/platform.44b1cae750cc5505d981.hot-update.js",
+    "/chunks/platform.627df4469803b167cd28.hot-update.js": "/chunks/platform.627df4469803b167cd28.hot-update.js",
+    "/chunks/platform.f6a88786ee5a3bd2b5f1.hot-update.js": "/chunks/platform.f6a88786ee5a3bd2b5f1.hot-update.js",
+    "/chunks/platform.4846404e57f725f342f9.hot-update.js": "/chunks/platform.4846404e57f725f342f9.hot-update.js",
+    "/chunks/platform.6af4f0f008df9b69a334.hot-update.js": "/chunks/platform.6af4f0f008df9b69a334.hot-update.js",
+    "/chunks/platform.4158f79f7ac36092fb9a.hot-update.js": "/chunks/platform.4158f79f7ac36092fb9a.hot-update.js"
 }
diff --git a/resources/js/components/Teams/CreateTeamFolderPopup.vue b/resources/js/components/Teams/CreateTeamFolderPopup.vue
index 426bbdfe..0e2c59ac 100644
--- a/resources/js/components/Teams/CreateTeamFolderPopup.vue
+++ b/resources/js/components/Teams/CreateTeamFolderPopup.vue
@@ -4,13 +4,13 @@
         <!--Title-->
         <PopupHeader :title="popupTitle" icon="user-plus" />
 
-        <!--Content-->
+		<!--Content-->
         <PopupContent>
 
 			<!--Item Thumbnail-->
             <ThumbnailItem v-if="! isNewFolderTeamCreation" class="item-thumbnail" :item="item" info="metadata" />
 
-            <!--Form to set team folder-->
+			<!--Form to set team folder-->
             <ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
 
                 <!--Set folder name-->
@@ -20,19 +20,35 @@
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <!--Add Member-->
+				<!--Add Member-->
 				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" v-slot="{ errors }">
 					<label class="input-label">{{ $t('Add Member') }}:</label>
-					<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
+
+					<div class="relative">
+						<span
+							v-if="email"
+							@click="addMember"
+							class="button-base theme absolute right-2 px-3 py-2 font-bold text-sm rounded-lg top-1/2 transform -translate-y-1/2 cursor-pointer"
+						>
+							Add
+						</span>
+						<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme" :placeholder="$t('Type member email...')">
+					</div>
 					<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
 				</ValidationProvider>
 
 				<!--Member list-->
 				<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Members" rules="required" v-slot="{ errors }">
 					<label class="input-label">{{ $t('Your Members') }}:</label>
-					<span v-if="errors[0]" class="error-message" style="margin-top: -5px">{{ $t('Please add at least one member.') }}</span>
+					<span v-if="errors[0]" class="error-message" style="margin-top: -5px">
+						{{ $t('Please add at least one member.') }}
+					</span>
+
 					<TeamList v-model="invitations" />
-					<p v-if="Object.values(invitations).length === 0" class="input-help">{{ $t('Please add at least one member into your Team Folder.') }}</p>
+
+					<p v-if="Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
+						{{ $t('Please add at least one member into your Team Folder.') }}
+					</p>
 				</ValidationProvider>
 
 				<InfoBox v-if="! isNewFolderTeamCreation" style="margin-bottom: 0">
@@ -42,21 +58,21 @@
 
         </PopupContent>
 
-        <!--Actions-->
+		<!--Actions-->
         <PopupActions>
             <ButtonBase
-                    class="popup-button"
-                    @click.native="$closePopup()"
-                    button-style="secondary"
-            >{{ $t('popup_move_item.cancel') }}
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="secondary"
+			>{{ $t('popup_move_item.cancel') }}
             </ButtonBase>
             <ButtonBase
-                    class="popup-button"
-                    @click.native="createTeamFolder"
-                    button-style="theme"
-					:loading="isLoading"
-					:disabled="isLoading"
-            >{{ popupSubmit }}
+				class="popup-button"
+				@click.native="createTeamFolder"
+				button-style="theme"
+				:loading="isLoading"
+				:disabled="isLoading"
+			>{{ popupSubmit }}
             </ButtonBase>
         </PopupActions>
     </PopupWrapper>
@@ -64,55 +80,55 @@
 
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
-    import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
-    import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
-    import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
-    import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
+	import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
+	import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
+	import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
+	import ThumbnailItem from '/resources/js/components/Others/ThumbnailItem'
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
 	import TeamList from "./Components/TeamList";
-    import {required} from 'vee-validate/dist/rules'
+	import {required} from 'vee-validate/dist/rules'
 	import InfoBox from "../Others/Forms/InfoBox";
-    import {events} from '/resources/js/bus'
+	import {events} from '/resources/js/bus'
 	import axios from "axios";
 
-    export default {
-        name: 'CreateTeamFolderPopup',
-        components: {
-            ValidationProvider,
-            ValidationObserver,
+	export default {
+		name: 'CreateTeamFolderPopup',
+		components: {
+			ValidationProvider,
+			ValidationObserver,
 			TeamList,
-            ThumbnailItem,
-            PopupWrapper,
-            PopupActions,
-            PopupContent,
-            PopupHeader,
-            ButtonBase,
-            required,
+			ThumbnailItem,
+			PopupWrapper,
+			PopupActions,
+			PopupContent,
+			PopupHeader,
+			ButtonBase,
+			required,
 			InfoBox,
-        },
-        computed: {
+		},
+		computed: {
 			popupTitle() {
-                return this.item ? this.$t('Convert as Team Folder') : this.$t('Create Team Folder')
-            },
+				return this.item ? this.$t('Convert as Team Folder') : this.$t('Create Team Folder')
+			},
 			popupSubmit() {
-                return this.item ? this.$t('Move & Invite Members') : this.$t('Create Team Folder')
-            },
+				return this.item ? this.$t('Move & Invite Members') : this.$t('Create Team Folder')
+			},
 			isNewFolderTeamCreation() {
-				return ! this.item
+				return !this.item
 			}
-        },
-        data() {
-            return {
-            	invitations: [],
-                item: undefined,
-                name: undefined,
+		},
+		data() {
+			return {
+				invitations: [],
+				item: undefined,
+				name: undefined,
 				email: undefined,
 				isLoading: false,
-            }
-        },
-        methods: {
-            async createTeamFolder() {
+			}
+		},
+		methods: {
+			async createTeamFolder() {
 				const isValid = await this.$refs.teamFolderForm.validate()
 
 				if (!isValid) return
@@ -141,12 +157,12 @@
 						if (isTeamFoldersLocation && this.$route.params.id) {
 							this.$router.push({name: 'TeamFolders', params: {id: response.data.data.id}})
 
-						// Add created team folder into Team Folder homepage view
-						} else if (isTeamFoldersLocation && ! this.$route.params.id) {
+							// Add created team folder into Team Folder homepage view
+						} else if (isTeamFoldersLocation && !this.$route.params.id) {
 							this.$store.commit('ADD_NEW_FOLDER', response.data)
 
-						// Redirect to Team Folders after converting simple folder
-						} else if (! isTeamFoldersLocation) {
+							// Redirect to Team Folders after converting simple folder
+						} else if (!isTeamFoldersLocation) {
 							this.$router.push({name: 'TeamFolders'})
 						}
 
@@ -160,19 +176,21 @@
 
 						this.$closePopup()
 					})
-            },
+			},
 			addMember() {
-            	let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
+				let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
 
-            	if (! email) {
+				if (!email) {
 					this.$refs.teamFolderForm.setErrors({
 						'Email': this.$t("You have to type valid email")
 					});
+
+					return
 				}
 
 				this.$refs.teamFolderForm.reset()
 
-            	this.invitations.push({
+				this.invitations.push({
 					type: 'invitation',
 					email: this.email,
 					permission: 'can-edit',
@@ -180,22 +198,24 @@
 
 				this.email = undefined
 			}
-        },
-        mounted() {
-            events.$on('popup:open', args => {
-                if (args.name !== 'create-team-folder') return
+		},
+		mounted() {
+			events.$on('popup:open', args => {
+				if (args.name !== 'create-team-folder') return
 
 				this.item = args.item
 
 				this.$nextTick(() => {
 
+					if (this.$isMobile()) return
+
 					if (this.item)
 						this.$refs.email.focus()
 
-					if (! this.item)
+					if (!this.item)
 						this.$refs.name.focus()
 				})
-            })
+			})
 
 			events.$on('popup:close', () => {
 				setTimeout(() => {
@@ -205,15 +225,15 @@
 					this.invitations = []
 				}, 150)
 			})
-        }
-    }
+		}
+	}
 </script>
 
 <style scoped lang="scss">
     @import "resources/sass/vuefilemanager/_inapp-forms.scss";
-    @import '/resources/sass/vuefilemanager/_forms';
+	@import '/resources/sass/vuefilemanager/_forms';
 
-    .item-thumbnail {
-        margin-bottom: 20px;
-    }
+	.item-thumbnail {
+		margin-bottom: 20px;
+	}
 </style>