frontend validation of team members limitation

resources/js/components/Teams/CreateTeamFolderPopup.vue

@@ -192,30 +192,23 @@
 					})
 			},
 			addMember() {
-				let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
-
-				if (!email) {
+				if (this.$isInvalidEmail(this.email)) {
 					this.$refs.teamFolderForm.setErrors({
 						'Email': this.$t("You have to type valid email")
 					});
-
-					return
+					return;
 				}
 
-				// Get team folder limitations
-				let limit = this.user.data.meta.limitations.max_team_members
-
-				if (limit.percentage >= 100 && ! limit.meta.allowed_emails.includes(email)) {
+				if ( this.$cantInviteMember(this.email, this.invitations) ) {
 					this.$refs.teamFolderForm.setErrors({
 						'Email': this.$t("You have to upgrade your account to add this new member.")
 					});
-
-					return
+					return;
 				}
 
 				this.$refs.teamFolderForm.reset()
 
-				this.invitations.push({
+				this.invitations.unshift({
 					type: 'invitation',
 					email: this.email,
 					permission: 'can-edit',
@@ -250,6 +243,10 @@
 					this.invitations = []
 				}, 150)
 			})
+
+			console.log(
+
+			);
 		}
 	}
 </script>

resources/js/components/Teams/EditTeamFolderPopup.vue

@@ -153,28 +153,23 @@
 					})
 			},
 			addMember() {
-				let email = this.email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)[0]
-
-				if (!email) {
+				if (this.$isInvalidEmail(this.email)) {
 					this.$refs.teamFolderForm.setErrors({
 						'Email': this.$t("You have to type valid email")
 					});
+					return;
 				}
 
-				// Get team folder limitations
-				let limit = this.user.data.meta.limitations.max_team_members
-
-				if (limit.percentage >= 100 && ! limit.meta.allowed_emails.includes(email)) {
+				if ( this.$cantInviteMember(this.email, this.invitations) ) {
 					this.$refs.teamFolderForm.setErrors({
 						'Email': this.$t("You have to upgrade your account to add this new member.")
 					});
-
-					return
+					return;
 				}
 
 				this.$refs.teamFolderForm.reset()
 
-				this.invitations.push({
+				this.invitations.unshift({
 					type: 'invitation',
 					email: this.email,
 					permission: 'can-edit',

resources/js/helpers/ValidatorHelpers.js

@@ -0,0 +1,27 @@
+import store from '../store/index'
+
+const ValidatorHelpers = {
+	install(Vue) {
+
+		Vue.prototype.$cantInviteMember = function (email, invitations) {
+			// Get max team members limitations
+			let limit = store.getters.user.data.meta.limitations.max_team_members
+
+			// Get emails from invitations and currently active members
+			let newInvitationEmails = invitations.map(item => item['email'])
+			let allowedMemberEmails = limit.meta.allowed_emails
+
+			// Get unique list of member emails
+			let totalUniqueEmails = [...new Set(newInvitationEmails.concat(Object.values(allowedMemberEmails)))]
+
+			// If there is more unique emails than can be in limit, disable ability to add member
+			return totalUniqueEmails.length >= limit.total && !totalUniqueEmails.includes(email);
+		}
+
+		Vue.prototype.$isInvalidEmail = function (email) {
+			return email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/) === null
+		}
+	}
+}
+
+export default ValidatorHelpers

resources/js/main.js

@@ -6,6 +6,7 @@ import router from "./router";
 import App from "./App.vue";
 import store from "./store";
 import {events} from "./bus";
+import ValidatorHelpers from "./helpers/ValidatorHelpers";
 import functionHelpers from "./helpers/functionHelpers";
 import itemHelpers from "./helpers/itemHelpers"
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -86,6 +87,7 @@ library.add(
 Vue.component("FontAwesomeIcon", FontAwesomeIcon);
 
 Vue.use(VueRouter);
+Vue.use(ValidatorHelpers);
 Vue.use(functionHelpers);
 Vue.use(itemHelpers);
 

resources/js/views/FileView/Components/PanelNavigationFiles.vue

@@ -1,9 +1,9 @@
 <template>
 	<ContentSidebar>
 		<!--Empty storage warning-->
-		<ContentGroup v-if="user && config.storageLimit && storage.used > 95">
+<!--		<ContentGroup v-if="user && config.storageLimit && storage.used > 95">
 			<UpgradeSidebarBanner/>
-		</ContentGroup>
+		</ContentGroup>-->
 
 		<!--Locations-->
 		<ContentGroup :title="$t('sidebar.locations_title')">