From 8f7f5204dbf923d6a07af11b1d573f0ffe687008 Mon Sep 17 00:00:00 2001 From: Arpit Jalan Date: Fri, 30 Oct 2020 08:41:14 +0530 Subject: [PATCH] UX: inform staff users that new users will be auto-approved on invite (#11062) When `must_approve_users` is enabled then staff users assume that all users will have to be approved manually. But in case of invite we auto-approve users if they are invited by users. This commit adds an info on the bottom of invite modal informing staff users that new users will be auto-approved as soon as they accept invite. --- .../discourse/app/components/invite-link-panel.js | 7 ++++--- .../javascripts/discourse/app/components/invite-panel.js | 8 +++++--- .../app/templates/components/invite-link-panel.hbs | 5 +++++ .../discourse/app/templates/components/invite-panel.hbs | 6 ++++++ .../common/components/share-and-invite-modal.scss | 4 ++++ config/locales/client.en.yml | 1 + 6 files changed, 25 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/invite-link-panel.js b/app/assets/javascripts/discourse/app/components/invite-link-panel.js index 793b7426179..27c2d53fd35 100644 --- a/app/assets/javascripts/discourse/app/components/invite-link-panel.js +++ b/app/assets/javascripts/discourse/app/components/invite-link-panel.js @@ -1,7 +1,7 @@ import I18n from "I18n"; import Component from "@ember/component"; import Group from "discourse/models/group"; -import { alias, readOnly } from "@ember/object/computed"; +import { and, readOnly } from "@ember/object/computed"; import { action } from "@ember/object"; import discourseComputed from "discourse-common/utils/decorators"; import Invite from "discourse/models/invite"; @@ -10,13 +10,12 @@ export default Component.extend({ inviteModel: readOnly("panel.model.inviteModel"), userInvitedShow: readOnly("panel.model.userInvitedShow"), isStaff: readOnly("currentUser.staff"), + isAdmin: readOnly("currentUser.admin"), maxRedemptionAllowed: 5, inviteExpiresAt: moment().add(1, "month").format("YYYY-MM-DD"), groupIds: null, allGroups: null, - isAdmin: alias("currentUser.admin"), - init() { this._super(...arguments); this.setDefaultSelectedGroups(); @@ -52,6 +51,8 @@ export default Component.extend({ ); }, + showApprovalMessage: and("isStaff", "siteSettings.must_approve_users"), + reset() { this.setProperties({ maxRedemptionAllowed: 5, diff --git a/app/assets/javascripts/discourse/app/components/invite-panel.js b/app/assets/javascripts/discourse/app/components/invite-panel.js index 703195ae9ab..9b289189d85 100644 --- a/app/assets/javascripts/discourse/app/components/invite-panel.js +++ b/app/assets/javascripts/discourse/app/components/invite-panel.js @@ -2,7 +2,7 @@ import I18n from "I18n"; import discourseComputed from "discourse-common/utils/decorators"; import { isEmpty } from "@ember/utils"; import EmberObject, { action } from "@ember/object"; -import { alias, and, equal } from "@ember/object/computed"; +import { alias, and, equal, readOnly } from "@ember/object/computed"; import Component from "@ember/component"; import { emailValid } from "discourse/lib/utilities"; import Group from "discourse/models/group"; @@ -17,6 +17,8 @@ export default Component.extend({ inviteModel: alias("panel.model.inviteModel"), userInvitedShow: alias("panel.model.userInvitedShow"), + isStaff: readOnly("currentUser.staff"), + isAdmin: readOnly("currentUser.admin"), // If this isn't defined, it will proxy to the user topic on the preferences // page which is wrong. @@ -26,8 +28,6 @@ export default Component.extend({ inviteIcon: "envelope", invitingExistingUserToTopic: false, - isAdmin: alias("currentUser.admin"), - init() { this._super(...arguments); this.setDefaultSelectedGroups(); @@ -288,6 +288,8 @@ export default Component.extend({ : "topic.invite_reply.username_placeholder"; }, + showApprovalMessage: and("isStaff", "siteSettings.must_approve_users"), + customMessagePlaceholder: i18n("invite.custom_message_placeholder"), // Reset the modal to allow a new user to be invited. diff --git a/app/assets/javascripts/discourse/app/templates/components/invite-link-panel.hbs b/app/assets/javascripts/discourse/app/templates/components/invite-link-panel.hbs index 270df195b76..17f2e30bfbb 100644 --- a/app/assets/javascripts/discourse/app/templates/components/invite-link-panel.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/invite-link-panel.hbs @@ -41,6 +41,11 @@ }} + {{#if showApprovalMessage}} + + {{/if}} {{/if}} diff --git a/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs b/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs index ea571e60927..8a655640e91 100644 --- a/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/invite-panel.hbs @@ -76,6 +76,12 @@ {{/if}} {{/if}} + + {{#if showApprovalMessage}} + + {{/if}}
diff --git a/app/assets/stylesheets/common/components/share-and-invite-modal.scss b/app/assets/stylesheets/common/components/share-and-invite-modal.scss index 3a301fd751b..20fc0119054 100644 --- a/app/assets/stylesheets/common/components/share-and-invite-modal.scss +++ b/app/assets/stylesheets/common/components/share-and-invite-modal.scss @@ -94,6 +94,10 @@ margin-bottom: 8px; } + .instructions.approval-notice { + color: var(--secondary-medium); + } + .email-or-username-input { width: 100%; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 6a44c0dad23..061fe1e0cbb 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -3484,6 +3484,7 @@ en: invite: custom_message: "Make your invite a little bit more personal by writing a custom message." custom_message_placeholder: "Enter your custom message" + approval_not_required: "User will be auto-approved as soon as they will accept this invite." custom_message_template_forum: "Hey, you should join this forum!" custom_message_template_topic: "Hey, I thought you might enjoy this topic!"