Merge pull request #691 from dellink/add-error-message-for-anonymous-in-comment-form

Add message of image upload try by anonymous user

frontend/app/components/comment-form/comment-form.test.tsx

@@ -2,12 +2,12 @@
 import { createElement } from 'preact';
 import { shallow } from 'enzyme';
 
-import { user } from '@app/testUtils/mocks/user';
+import { user, anonymousUser } from '@app/testUtils/mocks/user';
 import { StaticStore } from '@app/common/static_store';
 import { LS_SAVED_COMMENT_VALUE } from '@app/common/constants';
 import * as localStorageModule from '@app/common/local-storage';
 
-import { CommentForm, Props } from './comment-form';
+import { CommentForm, Props, messages } from './comment-form';
 import { SubscribeByEmail } from './__subscribe-by-email';
 import TextareaAutosize from './textarea-autosize';
 
@@ -29,8 +29,8 @@ const DEFAULT_PROPS: Readonly<Omit<Props, 'intl'>> = {
 };
 
 const intl = {
-  formatMessage() {
-    return '';
+  formatMessage(message: { defaultMessage: string }) {
+    return message.defaultMessage || '';
   },
 } as any;
 
@@ -131,4 +131,26 @@ describe('<CommentForm />', () => {
       expect(localStorage.getItem(LS_SAVED_COMMENT_VALUE)).toBe(JSON.stringify({}));
     });
   });
+
+  it('should show error message of image upload try by anonymous user', () => {
+    const props = { ...DEFAULT_PROPS, user: anonymousUser, intl };
+    const wrapper = shallow(<CommentForm {...props} />);
+    // @ts-ignore
+    const instance: CommentForm = wrapper.instance();
+
+    instance.onDrop(new Event('drag') as DragEvent);
+    expect(wrapper.exists('.comment-form__error')).toEqual(true);
+    expect(wrapper.find('.comment-form__error').text()).toEqual(messages.anonymousUploadingDisabled.defaultMessage);
+  });
+
+  it('should show error message of image upload try by unauthorized user', () => {
+    const props = { ...DEFAULT_PROPS, intl };
+    const wrapper = shallow(<CommentForm {...props} />);
+    // @ts-ignore
+    const instance: CommentForm = wrapper.instance();
+
+    instance.onDrop(new Event('drag') as DragEvent);
+    expect(wrapper.exists('.comment-form__error')).toEqual(true);
+    expect(wrapper.find('.comment-form__error').text()).toEqual(messages.unauthorizedUploadingDisabled.defaultMessage);
+  });
 });

frontend/app/components/comment-form/comment-form.tsx

@@ -7,6 +7,7 @@ import { User, Theme, Image, ApiError } from '@app/common/types';
 import { StaticStore } from '@app/common/static_store';
 import { pageTitle } from '@app/common/settings';
 import { extractErrorMessageFromResponse } from '@app/utils/errorUtils';
+import { isUserAnonymous } from '@app/utils/isUserAnonymous';
 import { sleep } from '@app/utils/sleep';
 import { replaceSelection } from '@app/utils/replaceSelection';
 import { Button } from '@app/components/button';
@@ -59,7 +60,7 @@ export interface State {
 
 const ImageMimeRegex = /image\//i;
 
-const messages = defineMessages({
+export const messages = defineMessages({
   placeholder: {
     id: 'commentForm.input-placeholder',
     defaultMessage: 'Your comment here',
@@ -88,9 +89,14 @@ const messages = defineMessages({
     id: 'commentForm.unexpected-error',
     defaultMessage: 'Something went wrong. Please try again a bit later.',
   },
+  unauthorizedUploadingDisabled: {
+    id: 'commentForm.unauthorized-uploading-disabled',
+    defaultMessage: 'Image uploading is disabled for unauthorized users. You should login before uploading.',
+  },
   anonymousUploadingDisabled: {
     id: 'commentForm.anonymous-uploading-disabled',
-    defaultMessage: 'Image uploading is disabled for unauthorized users. You should login before uploading.',
+    defaultMessage:
+      'Image uploading is disabled for anonymous users. Please log in not as anonymous user to be able to attach images.',
   },
 });
 
@@ -273,10 +279,12 @@ export class CommentForm extends Component<Props, State> {
   }
 
   onDrop(e: DragEvent) {
-    if (!this.props.user) {
+    const isAnonymous = this.props.user && isUserAnonymous(this.props.user);
+    if (!this.props.user || isAnonymous) {
+      const message = isAnonymous ? messages.anonymousUploadingDisabled : messages.unauthorizedUploadingDisabled;
       this.setState({
         isErrorShown: true,
-        errorMessage: this.props.intl.formatMessage(messages.anonymousUploadingDisabled),
+        errorMessage: this.props.intl.formatMessage(message),
       });
       e.preventDefault();
       return;

frontend/app/locales/de.json

@@ -53,7 +53,7 @@
   "comment.verified-user": "Bestätigter Benutzer",
   "comment.verify-user": "Möchtest du den Benutzer {userName} wirklich bestätigen?",
   "comment.vote-error": "Fehler beim Abstimmen: {voteErrorMessage}",
-  "commentForm.anonymous-uploading-disabled": "Der Upload von Bildern ist nur für registrierte Benutzer möglich. Bitte melde dich zuvor an.",
+  "commentForm.anonymous-uploading-disabled": "Image uploading is disabled for anonymous users. Please log in not as anonymous user to be able to attach images.",
   "commentForm.exceeded-size": "Die Datei {fileName} überschreitet das Größenlimit von {maxImageSize}",
   "commentForm.input-placeholder": "Gib hier deinen Kommentar ein",
   "commentForm.new-comment": "Neuer Kommentar",
@@ -64,6 +64,7 @@
   "commentForm.send": "Abschicken",
   "commentForm.subscribe-by": "Abonniere die Kommentare als",
   "commentForm.subscribe-or": "oder",
+  "commentForm.unauthorized-uploading-disabled": "Der Upload von Bildern ist nur für registrierte Benutzer möglich. Bitte melde dich zuvor an.",
   "commentForm.unexpected-error": "Leider ist etwas schiefgegangen. Bitte versuche es später erneut.",
   "commentForm.upload-file-fail": "Der Upload der Datei {fileName} ist mit folgendem Fehler fehlgeschlagen: \"{errorMessage}\"",
   "commentForm.uploading": "Lade hoch...",

frontend/app/locales/en.json

@@ -53,7 +53,7 @@
   "comment.verified-user": "Verified user",
   "comment.verify-user": "Do you want to verify {userName}?",
   "comment.vote-error": "Voting error: {voteErrorMessage}",
-  "commentForm.anonymous-uploading-disabled": "Image uploading is disabled for unauthorized users. You should login before uploading.",
+  "commentForm.anonymous-uploading-disabled": "Image uploading is disabled for anonymous users. Please log in not as anonymous user to be able to attach images.",
   "commentForm.exceeded-size": "{fileName} exceeds size limit of {maxImageSize}",
   "commentForm.input-placeholder": "Your comment here",
   "commentForm.new-comment": "New comment",
@@ -64,6 +64,7 @@
   "commentForm.send": "Send",
   "commentForm.subscribe-by": "Subscribe by",
   "commentForm.subscribe-or": "or",
+  "commentForm.unauthorized-uploading-disabled": "Image uploading is disabled for unauthorized users. You should login before uploading.",
   "commentForm.unexpected-error": "Something went wrong. Please try again a bit later.",
   "commentForm.upload-file-fail": "{fileName} upload failed with \"{errorMessage}\"",
   "commentForm.uploading": "Uploading...",

frontend/app/locales/es.json

@@ -53,7 +53,7 @@
   "comment.verified-user": "Usuario verificado",
   "comment.verify-user": "¿Quieres verificar a {userName}?",
   "comment.vote-error": "Error al votar: {voteErrorMessage}",
-  "commentForm.anonymous-uploading-disabled": "La subida de imágenes está deshabilitada para usuarios no autenticados. Deberías acceder antes de subir imágenes.",
+  "commentForm.anonymous-uploading-disabled": "Image uploading is disabled for anonymous users. Please log in not as anonymous user to be able to attach images.",
   "commentForm.exceeded-size": "{fileName} excede el tamaño máximo de {maxImageSize}",
   "commentForm.input-placeholder": "Tu comentario aquí",
   "commentForm.new-comment": "Nuevo comentario",
@@ -64,6 +64,7 @@
   "commentForm.send": "Enviar",
   "commentForm.subscribe-by": "Suscribirse por",
   "commentForm.subscribe-or": "o",
+  "commentForm.unauthorized-uploading-disabled": "La subida de imágenes está deshabilitada para usuarios no autenticados. Deberías acceder antes de subir imágenes.",
   "commentForm.unexpected-error": "Algo salió mal. Por favor vuelve a intentar más tarde.",
   "commentForm.upload-file-fail": "la subida de {fileName} falló con \"{errorMessage}\"",
   "commentForm.uploading": "Subiendo...",

frontend/app/locales/fi.json

@@ -53,7 +53,7 @@
   "comment.verified-user": "Vahvistettu käyttäjä",
   "comment.verify-user": "Haluatko vahvistaa käyttäjän {userName}?",
   "comment.vote-error": "Äänestysvirhe: {voteErrorMessage}",
-  "commentForm.anonymous-uploading-disabled": "Kuvien lataus on poistettu käytöstä luvattomilta käyttäjiltä. Kirjaudu sisään ennen lähettämistä.",
+  "commentForm.anonymous-uploading-disabled": "Image uploading is disabled for anonymous users. Please log in not as anonymous user to be able to attach images.",
   "commentForm.exceeded-size": "{fileName} ylittää {maxImageSize}",
   "commentForm.input-placeholder": "Kirjoita kommenttisi tähän",
   "commentForm.new-comment": "Uusi kommentti",
@@ -64,6 +64,7 @@
   "commentForm.send": "Lähetä",
   "commentForm.subscribe-by": "Tilaa kommentit",
   "commentForm.subscribe-or": "tai",
+  "commentForm.unauthorized-uploading-disabled": "Kuvien lataus on poistettu käytöstä luvattomilta käyttäjiltä. Kirjaudu sisään ennen lähettämistä.",
   "commentForm.unexpected-error": "Jotain meni pieleen. Yritä uudelleen myöhemmin.",
   "commentForm.upload-file-fail": "{fileName} tiedoston lähetys epäonnistui: \"{errorMessage}\"",
   "commentForm.uploading": "Ladataan...",

frontend/app/locales/ru.json

@@ -53,7 +53,7 @@
   "comment.verified-user": "Подлинная учетная запись",
   "comment.verify-user": "Подвердить подлинность учетной записи для {userName}?",
   "comment.vote-error": "Ошибка голосования: {voteErrorMessage}",
-  "commentForm.anonymous-uploading-disabled": "Загрузка изображений не доступна для неавторизированных пользователей. Авторизуйтесь для загрузки изображений.",
+  "commentForm.anonymous-uploading-disabled": "Image uploading is disabled for anonymous users. Please log in not as anonymous user to be able to attach images.",
   "commentForm.exceeded-size": "Размер файла {fileName} должен быть меньше чем {maxImageSize}",
   "commentForm.input-placeholder": "Написать комментарий",
   "commentForm.new-comment": "Новый комментарий",
@@ -64,6 +64,7 @@
   "commentForm.send": "Отправить",
   "commentForm.subscribe-by": "Подписаться",
   "commentForm.subscribe-or": "или",
+  "commentForm.unauthorized-uploading-disabled": "Загрузка изображений не доступна для неавторизированных пользователей. Авторизуйтесь для загрузки изображений.",
   "commentForm.unexpected-error": "Что-то пошло не так, попробуйте еще раз чуть позже.",
   "commentForm.upload-file-fail": "{fileName} невозможно загрузить из-за ошибки: \"{errorMessage}\"",
   "commentForm.uploading": "Загрузка...",

frontend/app/locales/zh.json

@@ -53,7 +53,7 @@
   "comment.verified-user": "认证用户",
   "comment.verify-user": "您是否要设置{userName}为认证用户?",
   "comment.vote-error": "投票失败: {voteErrorMessage}",
-  "commentForm.anonymous-uploading-disabled": "未经授权的用户无法上传图片。 上传之前，您应该先登录。",
+  "commentForm.anonymous-uploading-disabled": "Image uploading is disabled for anonymous users. Please log in not as anonymous user to be able to attach images.",
   "commentForm.exceeded-size": "{fileName}超出了{maxImageSize}的大小限制",
   "commentForm.input-placeholder": "在此填写评论",
   "commentForm.new-comment": "新评论",
@@ -64,6 +64,7 @@
   "commentForm.send": "发送",
   "commentForm.subscribe-by": "订阅评论：",
   "commentForm.subscribe-or": "或",
+  "commentForm.unauthorized-uploading-disabled": "未经授权的用户无法上传图片。 上传之前，您应该先登录。",
   "commentForm.unexpected-error": "出了些问题,请稍后再试。",
   "commentForm.upload-file-fail": "{fileName} 上传失败，错误信息： \"{errorMessage}\"",
   "commentForm.uploading": "上传中...",