🐛 Show warning when trying to invite a user that is already in members

CHANGES.md

@@ -45,6 +45,7 @@
 - Fix tooltips for some alignment options are truncated on design tab [Taiga #5040](https://tree.taiga.io/project/penpot/issue/5040)
 - Fix horizontal margins drag don't always start from place [Taiga #5020](https://tree.taiga.io/project/penpot/issue/5020)
 - Fix multiplayer username sometimes is not displayed correctly [Taiga #4400](https://tree.taiga.io/project/penpot/issue/4400)
+- Show warning when trying to invite a user that is already in members [Taiga #4147](https://tree.taiga.io/project/penpot/issue/4147)
 
 ### :heart: Community contributions by (Thank you!)
 - To @ondrejkonec: for contributing to the code with:

frontend/resources/styles/main/partials/dashboard-team.scss

@@ -97,12 +97,11 @@
     fill: $color-gray-20;
   }
 
-  .error {
-    background-color: #ffd9e0;
+  .error,
+  .warning {
     width: 100%;
     display: flex;
     .icon {
-      background-color: $color-danger;
       text-align: center;
       padding: 5px;
       svg {
@@ -118,6 +117,22 @@
       font-size: $fs12;
     }
   }
+
+  .error {
+    background-color: #ffd9e0;
+
+    .icon {
+      background-color: $color-danger;
+    }
+  }
+
+  .warning {
+    background-color: #ffeaca;
+
+    .icon {
+      background-color: $color-warning;
+    }
+  }
 }
 
 .dashboard-team-members,

frontend/resources/styles/main/partials/forms.scss

@@ -271,6 +271,9 @@ textarea {
       &.invalid {
         border: 1px solid $color-danger;
       }
+      &.caution {
+        border: 1px solid $color-warning;
+      }
 
       .text {
         display: inline-block;

frontend/src/app/main/ui/components/forms.cljs

@@ -251,7 +251,7 @@
   (into [] (distinct) (conj coll item)))
 
 (mf/defc multi-input
-  [{:keys [form label class name trim valid-item-fn on-submit] :as props}]
+  [{:keys [form label class name trim valid-item-fn caution-item-fn on-submit] :as props}]
   (let [form       (or form (mf/use-ctx form-ctx))
         input-name (get props :name)
         touched?   (get-in @form [:touched input-name])
@@ -309,7 +309,9 @@
                    (on-submit form))
                  (when (not (str/empty? @value))
                    (reset! value "")
-                   (swap! items conj-dedup {:text val :valid (valid-item-fn val)}))))
+                   (swap! items conj-dedup {:text val
+                                            :valid (valid-item-fn val)
+                                            :caution (caution-item-fn val)}))))
 
              (and (kbd/backspace? event)
                   (str/empty? @value))
@@ -361,6 +363,7 @@
           [:div.selected-item {:key (:text item)
                                :tab-index "0"
                                :on-key-down (partial manage-key-down item)}
-           [:span.around {:class (when-not (:valid item) "invalid")}
+           [:span.around {:class (dom/classnames "invalid" (not (:valid item))
+                                                 "caution" (:caution item))}
             [:span.text (:text item)]
             [:span.icon {:on-click #(remove-item! item)} i/cross]]])])]))

frontend/src/app/main/ui/dashboard/team.cljs

@@ -39,7 +39,9 @@
         go-webhooks          (mf/use-fn #(st/emit! (dd/go-to-team-webhooks)))
         invite-member        (mf/use-fn
                               (mf/deps team)
-                              #(st/emit! (modal/show {:type :invite-members :team team :origin :team})))
+                              #(st/emit! (modal/show {:type :invite-members
+                                                      :team team
+                                                      :origin :team})))
 
         members-section?     (= section :dashboard-team-members)
         settings-section?    (= section :dashboard-team-settings)
@@ -98,7 +100,10 @@
   {::mf/register modal/components
    ::mf/register-as :invite-members}
   [{:keys [team origin]}]
-  (let [perms   (:permissions team)
+  (let [members-map (mf/deref refs/dashboard-team-members)
+
+        perms   (:permissions team)
+
         roles   (mf/use-memo (mf/deps perms) #(get-available-roles perms))
         initial (mf/use-memo (constantly {:role "editor" :team-id (:id team)}))
         form    (fm/use-form :spec ::invite-member-form
@@ -111,6 +116,9 @@
                     (modal/hide)
                     (dd/fetch-team-invitations)))
 
+        current-data-emails (into #{} (dm/get-in @form [:clean-data :emails]))
+        current-members-emails (into #{} (map (comp :email second)) members-map)
+
         on-error
         (fn [{:keys [type code] :as error}]
           (cond
@@ -148,17 +156,23 @@
         [:div.error
          [:span.icon i/msg-error]
          [:span.text @error-text]])
+
+      (when (some current-data-emails current-members-emails)
+        [:div.warning
+         [:span.icon i/msg-warning]
+         [:span.text (tr "modals.invite-member.repeated-invitation")]])
+
       [:div.form-row
        [:p.label (tr "onboarding.choice.team-up.roles")]
        [:& fm/select {:name :role :options roles}]]
+
       [:div.form-row
-
-
        [:& fm/multi-input {:type "email"
                            :name :emails
                            :auto-focus? true
                            :trim true
                            :valid-item-fn us/parse-email
+                           :caution-item-fn current-members-emails
                            :label (tr "modals.invite-member.emails")
                            :on-submit  on-submit}]]
 

frontend/translations/en.po

@@ -1821,6 +1821,9 @@ msgstr "Send invitation"
 msgid "modals.invite-member.emails"
 msgstr "Emails, comma separated"
 
+msgid "modals.invite-member.repeated-invitation"
+msgstr "Some emails are from current team members. Their invitations will not be sent."
+
 #: src/app/main/ui/dashboard/team.cljs
 msgid "modals.invite-team-member.title"
 msgstr "Invite members to the team"

frontend/translations/es.po

@@ -1904,6 +1904,9 @@ msgstr "Enviar invitacion"
 msgid "modals.invite-member.emails"
 msgstr "Emails, separados por coma"
 
+msgid "modals.invite-member.repeated-invitation"
+msgstr "Algunas direcciones de correo ya se encuentran entre los miembros. Estas invitaciones no serán enviadas."
+
 #: src/app/main/ui/dashboard/team.cljs
 msgid "modals.invite-team-member.title"
 msgstr "Invitar a miembros al equipo"