Fix bug 1524602 - Hide Editor actions and settings when user is logge…

…d out. (#1205)

frontend/public/static/locale/en-US/translate.ftl

@@ -4,10 +4,11 @@
 ## Editor
 ## Allows contributors to modify or propose a translation
 
-entitydetails-editor-button-copy = Copy
-entitydetails-editor-button-clear = Clear
-entitydetails-editor-button-save = Save
-entitydetails-editor-button-suggest = Suggest
+editor-editor-sign-in-to-translate = <a>Sign in</a> to translate.
+editor-editor-button-copy = Copy
+editor-editor-button-clear = Clear
+editor-editor-button-save = Save
+editor-editor-button-suggest = Suggest
 
 
 ## EditorSettings

frontend/public/static/locale/es/translate.ftl

@@ -4,10 +4,10 @@
 ## Editor
 ## Allows contributors to modify or propose a translation
 
-entitydetails-editor-button-copy = Copiar
-entitydetails-editor-button-clear = Borrar
-entitydetails-editor-button-save = Guardar
-entitydetails-editor-button-suggest = Sugerir
+editor-editor-button-copy = Copiar
+editor-editor-button-clear = Borrar
+editor-editor-button-save = Guardar
+editor-editor-button-suggest = Sugerir
 
 
 ## Entity Navigation

frontend/public/static/locale/fr/translate.ftl

@@ -4,10 +4,11 @@
 ## Editor
 ## Allows contributors to modify or propose a translation
 
-entitydetails-editor-button-copy = Copier
-entitydetails-editor-button-clear = Effacer
-entitydetails-editor-button-save = Sauvegarder
-entitydetails-editor-button-suggest = Suggérer
+editor-editor-sign-in-to-translate = <a>Connectez-vous</a> pour traduire.
+editor-editor-button-copy = Copier
+editor-editor-button-clear = Effacer
+editor-editor-button-save = Sauvegarder
+editor-editor-button-suggest = Suggérer
 
 
 ## EditorSettings

frontend/src/modules/editor/components/Editor.css

@@ -20,8 +20,17 @@
     width: 100%;
 }
 
+.editor .banner {
+    font-style: italic;
+    line-height: 40px;
+}
+
+.editor .banner a {
+    color: #7BC876;
+}
+
 .editor menu {
-    font-size: 14px;
+    color: #fff;
     padding: 10px;
     position: relative;
 }

frontend/src/modules/editor/components/Editor.js

@@ -12,7 +12,7 @@ import EditorSettings from './EditorSettings';
 import KeyboardShortcuts from './KeyboardShortcuts';
 
 import type { Locale } from 'core/locales';
-import type { SettingsState } from 'core/user';
+import type { UserState } from 'core/user';
 import type { DbEntity } from 'modules/entitieslist';
 
 
@@ -21,7 +21,7 @@ type Props = {|
     entity: ?DbEntity,
     locale: Locale,
     pluralForm: number,
-    settings: SettingsState,
+    user: UserState,
     sendTranslation: () => void,
     updateEditorTranslation: (string) => void,
     updateSetting: (string, boolean) => void,
@@ -79,31 +79,45 @@ export default class Editor extends React.Component<Props, State> {
                 updateTranslation={ this.updateTranslation }
             />
             <menu>
+            { !this.props.user.isAuthenticated ?
+                <Localized
+                    id="editor-editor-sign-in-to-translate"
+                    a={
+                        /* eslint-disable-next-line */
+                        <a href='/accounts/fxa/login/?scope=profile%3Auid+profile%3Aemail+profile%3Adisplay_name'></a>
+                    }
+                >
+                    <p className='banner'>
+                        { '<a>Sign in</a> to translate.' }
+                    </p>
+                </Localized>
+            :
+            <React.Fragment>
                 <EditorSettings
-                    settings={ this.props.settings }
+                    settings={ this.props.user.settings }
                     updateSetting={ this.props.updateSetting }
                 />
                 <KeyboardShortcuts />
                 <div className="actions">
-                    <Localized id="entitydetails-editor-button-copy">
+                    <Localized id="editor-editor-button-copy">
                         <button
                             className="action-copy"
                             onClick={ this.copyOriginalIntoEditor }
                         >
                             Copy
                         </button>
                     </Localized>
-                    <Localized id="entitydetails-editor-button-clear">
+                    <Localized id="editor-editor-button-clear">
                         <button
                             className="action-clear"
                             onClick={ this.clearEditor }
                         >
                             Clear
                         </button>
                     </Localized>
-                    { this.props.settings.forceSuggestions ?
+                    { this.props.user.settings.forceSuggestions ?
                     // Suggest button, will send an unreviewed translation.
-                    <Localized id="entitydetails-editor-button-suggest">
+                    <Localized id="editor-editor-button-suggest">
                         <button
                             className="action-suggest"
                             onClick={ this.sendTranslation }
@@ -113,7 +127,7 @@ export default class Editor extends React.Component<Props, State> {
                     </Localized>
                     :
                     // Save button, will send an approved translation.
-                    <Localized id="entitydetails-editor-button-save">
+                    <Localized id="editor-editor-button-save">
                         <button
                             className="action-save"
                             onClick={ this.sendTranslation }
@@ -123,8 +137,9 @@ export default class Editor extends React.Component<Props, State> {
                     </Localized>
                     }
                 </div>
-                <div className="clearfix">
-                </div>
+                <div className="clearfix" />
+            </React.Fragment>
+            }
             </menu>
         </div>;
     }

frontend/src/modules/editor/components/Editor.test.js

@@ -3,6 +3,8 @@ import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
 import Editor from './Editor';
+import EditorSettings from './EditorSettings';
+import KeyboardShortcuts from './KeyboardShortcuts';
 
 
 const TRANSLATION = 'test';
@@ -22,15 +24,21 @@ function createShallowEditor({
     suggestMock,
     updateMock,
     pluralForm = -1,
-    forceSuggestions = true
+    forceSuggestions = true,
+    isAuthenticated = true,
 } = {}) {
     return shallow(<Editor
         translation={ (Math.abs(pluralForm) !== 1) ? TRANSLATION_PLURAL : TRANSLATION }
         entity={ SELECTED_ENTITY }
         sendTranslation={ suggestMock }
         updateEditorTranslation={ updateMock }
         pluralForm={ pluralForm }
-        settings={ { forceSuggestions } }
+        user={ {
+            isAuthenticated,
+            settings: {
+                forceSuggestions,
+            },
+        } }
     />);
 }
 
@@ -94,4 +102,14 @@ describe('<Editor>', () => {
         wrapper.find('.action-save').simulate('click');
         expect(suggestMock.calledOnce).toBeTruthy();
     });
+
+    it('hides the settings and actions when the user is logged out', () => {
+        const wrapper = createShallowEditor({ isAuthenticated: false });
+
+        expect(wrapper.find(EditorSettings)).toHaveLength(0);
+        expect(wrapper.find(KeyboardShortcuts)).toHaveLength(0);
+        expect(wrapper.find('#editor-editor-button-copy')).toHaveLength(0);
+
+        expect(wrapper.find('#editor-editor-sign-in-to-translate')).toHaveLength(1);
+    });
 });

frontend/src/modules/editor/components/EditorSettings.css

@@ -1,5 +1,6 @@
 .editor-settings {
     float: left;
+    font-size: 14px;
     line-height: 22px;
 }
 

frontend/src/modules/entitydetails/components/EntityDetails.js

@@ -203,7 +203,7 @@ export class EntityDetailsBase extends React.Component<InternalProps, State> {
                 entity={ state.selectedEntity }
                 locale={ state.locale }
                 pluralForm= { state.pluralForm }
-                settings={ state.user.settings }
+                user={ state.user }
                 sendTranslation={ this.sendTranslation }
                 updateEditorTranslation={ this.updateEditorTranslation }
                 updateSetting={ this.updateSetting }